/* Location: /assets/style.css
   Revision: 5
   Updated: 2026-08-05
   Changelog: Rev4 - No more card inside a card on phones.

     The leads table is wrapped in a .card, and under 700px every ROW also
     becomes a card. Once Rev3 gave both a white fill and a shadow that read as
     what it was: a bordered box inside another bordered box, the outer one
     contributing nothing but 20px of padding on each side.

     The wrapper now goes transparent at that width, which hands each lead row
     the full page width — about 40px more per card — and lets the rows breathe
     a little more inside it.

     Uses :has(), supported in Safari 15.4+ and every current browser. Where it
     is not supported the rule is simply ignored and the layout falls back to
     Rev3's nested cards, which looked slightly heavy but worked.

   Revision: 3
   Updated: 2026-08-05
   Changelog: Rev3 - Cards read as cards, and the company row fits one line.

     CARDS. --card was #f9fafb on a #eef0f3 background — about two percent
     apart in lightness, which is not a difference the eye resolves as two
     surfaces. Cards are now white with a soft shadow, so a card looks like
     something sitting ON the page rather than a slightly different patch of
     it. This also lifts the stacked lead rows on phones, which use the same
     variable.

     COMPANY CHIPS. Under 600px the colour dot is dropped and the padding
     tightens, which is enough to fit four companies on one line. It buys four,
     maybe five — a sixth will wrap again, and at that point wrapping is the
     right answer rather than shrinking the text past reading size. The dot is
     redundant on a lit chip anyway: the chip is already filled with that
     company's colour.

   Revision: 2
   Updated: 2026-08-05
   Changelog: Rev2 - TWO BRACE BUGS FIXED, plus the phone sort control.

     (1) .recency-pill was never closed. After `white-space: nowrap;` came a
         comment block, then .chip-row-companies and .chip-lg, and only THEN the
         closing brace — so those two rules were nested inside .recency-pill and
         silently discarded. They worked anyway because both are declared again
         further down, which is the only reason nobody noticed. The duplicates
         inside the block are removed and .recency-pill is closed where it ends.

     (2) A stray `}` sat after `.tz-legend .tz-cell`. Browsers skip an unmatched
         closing brace and carry on, so nothing visibly broke — but it is the
         kind of thing that quietly swallows whichever rule follows it the next
         time something moves.

     (3) .mobile-sort — the sort control for the card layout. The .leads-table
         header row carries sorting on desktop and is hidden under 700px, so
         without this a phone can only ever use the default sort. flex-wrap
         nowrap, white-space nowrap on the label, and width:auto on the select
         are all load-bearing: the global label and select rules make both
         full-width block elements, which puts the label, the dropdown and the
         button on three separate lines.

   Revision: 1
   Updated: 2026-07-03
   Changelog: Initial styling - clean, high-contrast, readable on desktop and mobile (agents calling from home) */

:root {
  --navy: #1b2a4a;
  --red: #c0272d;
  --bg: #eef0f3;
  /* Rev3: white, not near-white. At #f9fafb against a #eef0f3 page these were
     two percent apart and read as one continuous surface. */
  --card: #ffffff;
  --text: #222;
  --muted: #6b7280;
  --border: #d8dbe2;
  --overdue: #c0272d;
  --today: #b8860b;
  --ok: #1a7f37;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* Anchor jumps (e.g. #contacts) land below the sticky header instead of under it */
.card[id], [id].card { scroll-margin-top: 110px; }

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.brand {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo { height: 32px; }

.nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav a { color: #cfd8ea; text-decoration: none; font-size: 14px; }
.nav a:hover { color: #fff; }
.nav .who { color: #9fb0d0; font-size: 13px; }
.nav .logout { color: var(--red); font-weight: 600; }

.container { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  /* Soft and low — enough to lift the card off the page without it reading as
     a dialog floating above everything. */
  box-shadow: 0 1px 3px rgba(20,32,43,.06), 0 4px 12px rgba(20,32,43,.04);
}

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 0 0 12px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
tr:hover td { background: #fafbfc; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-new { background: #e6f0ff; color: #1b4fa8; }
.badge-contacted { background: #eef; color: #444; }
.badge-follow_up { background: #fff4e5; color: var(--today); }
.badge-hot { background: var(--red); color: #fff; }
.badge-sold { background: #e6f6ea; color: var(--ok); }
.badge-not_interested, .badge-dnc, .badge-deceased { background: #f1f1f1; color: #888; }

.due-overdue { color: var(--overdue); font-weight: 700; }
.due-today { color: var(--today); font-weight: 700; }

.btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { opacity: .9; }
.btn-red { background: var(--red); }
.btn-outline { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

form.inline { display: inline; }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }

input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background-color: #fff;
}
textarea { min-height: 80px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.login-wrap {
  max-width: 380px;
  margin: 80px auto;
  text-align: center;
}
.login-wrap .card { text-align: left; }
.login-logo { height: 60px; margin-bottom: 10px; }
.tagline { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

.alert { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 16px; }
.alert-error { background: #fdeaea; color: var(--red); }
.alert-ok { background: #e6f6ea; color: var(--ok); }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; min-width: 140px; }
.stat .num { font-size: 28px; font-weight: 700; color: var(--navy); }
.stat .label { font-size: 13px; color: var(--muted); }

.interaction { border-left: 3px solid var(--border); padding: 8px 14px; margin-bottom: 8px; font-size: 14px; }
.interaction .meta { color: var(--muted); font-size: 12px; }

.pricing-table th, .pricing-table td { text-align: center; vertical-align: top; }
.pricing-table td:first-child, .pricing-table th:first-child { text-align: left; }
.pricing-table tr.group-start td { border-top: 2px solid var(--navy); }
.pricing-table tr.group-cont td { border-top: none; background: #fbfbfd; }
.pricing-table tr.group-cont td:first-child { padding-left: 26px; color: var(--muted); }

/* Leads belonging to another agent, shown to admins in "All Leads" view */
tr.row-other td {
  background: #f0f1f3;
  color: #8a8f98;
}
tr.row-other td a { color: #6b7fa8; }
.swatch-other {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #f0f1f3;
  border: 1px solid var(--border);
  vertical-align: middle;
  margin-right: 4px;
}

.view-toggle { display: flex; gap: 8px; }

.collapsible-header { cursor: pointer; user-select: none; }
.collapsible-header:hover { color: var(--navy); opacity: .85; }
.collapsible-header .chev { display: inline-block; width: 14px; color: var(--muted); }

/* The contact heading pins under the nav while the record scrolls.
   The history below is long and is the reason the page gets opened, so the
   name and the clocks would otherwise vanish at exactly the moment somebody
   is deciding whether to dial.

   NO FULL-BLEED. The first attempt used margin:-100vw with matching padding
   to reach the viewport edges; it pushed the whole document sideways, since
   100vw is wider than the container. The bar sits inside the container now --
   less dramatic, and it cannot move the page. */
.contact-head {
  position: sticky;
  top: calc(var(--nav-h, 64px) - 4px);
  z-index: 90;
  background: var(--bg);
  padding: 10px 0 8px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
}
.contact-head h1 { margin: 0 0 6px; }
.contact-head .tz-strip { margin: 0; }
@media (max-width: 700px) {
  .contact-head { padding: 8px 0 6px; }
  .contact-head h1 { font-size: 20px; margin-bottom: 4px; }
}

/* Time-zone strip on the lead page: at-a-glance clocks, with the lead's
   likely zone highlighted so late calls to the east coast don't happen. */
.tz-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -6px 0 18px;
  font-size: 13px;
}
.tz-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  color: var(--muted);
  white-space: nowrap;
}
.tz-item.tz-guess {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}
.tz-note { color: var(--muted); font-size: 12px; }

/* Last-contact recency pills — buckets mirror the 10-day lead window:
   green = fresh outreach, red = 10+ days or never contacted.

   Rev2: this rule used to run on past its own end. The company-chip rules that
   were sitting inside it have been removed from here; they are declared
   properly further down. */
.recency-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.recency-green  { background: #e6f6ea; color: #1a7f37; }
.recency-yellow { background: #fff8e1; color: #9a7b00; }
.recency-orange { background: #fff0e1; color: #b45309; }
.recency-red    { background: #fdeaea; color: #c0272d; }

/* Center the status pills in their column on desktop tables (scoped to wide
   screens so mobile cards keep their left-aligned labeled layout). */
@media (min-width: 701px) {
  .leads-table td[data-label="Status"],
  .leads-table th:nth-child(6) { text-align: center; }
}

/* iOS Safari gives date inputs and selects an intrinsic width and native
   styling that ignores the shared field styles, making them jut past the
   right edge of the other inputs. Normalize them to behave like text inputs. */
input[type=date], select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  min-height: 41px; /* empty date inputs collapse on iOS once native styling is stripped */
}

@media (max-width: 700px) {
  .tz-strip { gap: 4px; }
  .tz-item { font-size: 11px; padding: 3px 7px; }
  .tz-note { flex-basis: 100%; margin-top: 2px; }
}

/* --- Phone layout: the leads table becomes stacked cards under 700px. ---
   Each <td> carries a data-label attribute; on small screens we hide the
   header row, turn each <tr> into a bordered card, and print the label
   before each value so nothing needs horizontal squeezing. */
@media (max-width: 700px) {
  .leads-table, .leads-table tbody { display: block; }
  /* Rev4: the wrapper stops being a card, so the rows inside it can be one.
     Two nested bordered boxes is one too many, and the outer one was only
     contributing padding that squeezed the rows. */
  .card:has(> .leads-table),
  .card:has(> table.leads-table) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .leads-table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 10px;
    /* Rev4: roomier, now that the row owns the full page width. */
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(20,32,43,.06);
  }
  .leads-table tr:first-child { display: none; } /* header row */
  .leads-table td {
    display: block;
    border: none;
    padding: 3px 0;
    text-align: left;
  }
  .leads-table td:empty { display: none; }
  .leads-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .leads-table td[data-label="Name"] { font-size: 17px; font-weight: 600; padding-bottom: 6px; }
  .leads-table td[data-label="Name"]::before { content: ""; }
  .leads-table td.row-action { padding-top: 8px; }
  .leads-table tr:hover td { background: transparent; }
}



/* ---- the leads list card on a phone ----
   Eight labelled lines per contact meant one person filled most of a screen,
   and scrolling 461 of them was mostly reading labels. Two changes:

   STATUS AND LAST CONTACT MOVE UP beside the name. Together they answer the
   only question being asked while scrolling -- is this person worth opening --
   and they were four and five lines down, below a phone number nobody dials
   from a list.

   CREATED IS GONE. It never changes and it is never why anybody opens a
   record. It stays in the desktop table, where a column costs nothing. */
@media (max-width: 700px) {
  /* :first-child excluded, or this beats the rule that hides the header row --
     display:grid on a more specific selector simply switched it back on, and
     the column headings rendered as an empty card above the list. */
  .leads-table:not(.dash-queue) tr:not(:first-child) {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 10px;
    row-gap: 0;
    align-items: center;
  }
  /* The two pills stack tight against each other rather than spreading down
     the right-hand side. */
  .leads-table:not(.dash-queue) td[data-label="Last Contact"] { padding-left: 6px; }
  .leads-table:not(.dash-queue) td[data-label="Name"] {
    grid-column: 1; grid-row: 1; align-self: center;
  }
  /* Both pills share the right-hand cell, so they sit together on the name's
     line rather than each claiming one of their own. */
  /* The name is a bordered box with its own padding, so baseline alignment
     drops the pills to sit on its lower edge. Centring against the row's height
     puts them level with the name itself. */
  /* The CELL was already centred by the grid; the PILL inside it was not. A
     span sits on the text baseline of whatever box contains it, so centring
     the box left the pill hanging at the bottom of it. Making the cell a flex
     container centres what is actually visible. */
  .leads-table:not(.dash-queue) td[data-label="Status"],
  .leads-table:not(.dash-queue) td[data-label="Last Contact"] {
    /* Top, not centre. The name sits in a bordered box taller than the pills,
       so centring left them floating in the middle of nothing. Aligned to the
       top they line up with the name's own first line, which is what the eye
       reads across. */
    align-self: start;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px 0 0;
  }
  /* BOTH on the name's line, not stacked. They answer one question together --
     where this person stands and how long since you spoke -- and stacking them
     spread a two-word answer over two rows while the left column sat empty. */
  .leads-table:not(.dash-queue) td[data-label="Status"] {
    grid-row: 1; grid-column: 2;
  }
  .leads-table:not(.dash-queue) td[data-label="Last Contact"] {
    grid-row: 1; grid-column: 3;
  }
  .leads-table:not(.dash-queue) td[data-label="Status"]::before,
  .leads-table:not(.dash-queue) td[data-label="Last Contact"]::before { content: ""; }

  /* Everything else keeps its own full-width line, in source order. */
  .leads-table:not(.dash-queue) td:not([data-label="Name"]):not([data-label="Status"]):not([data-label="Last Contact"]) {
    grid-column: 1 / -1;
  }
  .leads-table:not(.dash-queue) td[data-label="Created"] { display: none; }
}

/* ---- the dashboard queue on a phone ----
   The generic .leads-table rule gives every cell its own line, which is right
   for the leads list where each row has eight fields. The queue has five, and
   two pairs of them belong together: the name and its status are one fact, and
   so are the due date and how long since you last spoke.

   Stacked one per line, eight contacts filled three screens and the thing you
   scan for -- an overdue date -- sat below a status pill you already knew.
   Paired up, one contact is three short lines and the whole queue fits on a
   screen. */
@media (max-width: 700px) {
  .dash-queue tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    align-items: baseline;
  }
  /* Line 1: who, and where they stand. */
  .dash-queue td[data-label="Name"] { grid-column: 1; padding-bottom: 2px; }
  .dash-queue td[data-label="Status"] { grid-column: 2; grid-row: 1; text-align: right; }
  /* Line 2: when it is due, and how cold they have gone. */
  .dash-queue td[data-label="Due"] { grid-column: 1; grid-row: 2; font-size: 14px; }
  .dash-queue td[data-label="Last Contact"] { grid-column: 2; grid-row: 2; text-align: right; }
  /* Line 3: why -- full width, and gone entirely when empty. */
  .dash-queue td[data-label="Why"] {
    grid-column: 1 / -1; grid-row: 3;
    font-size: 13px; line-height: 1.45; padding-top: 4px;
  }
  /* The labels earn their space in a wide table and cost it here: DUE in front
     of a date, STATUS in front of a pill. The shapes say it. */
  .dash-queue td[data-label="Due"]::before,
  .dash-queue td[data-label="Status"]::before,
  .dash-queue td[data-label="Last Contact"]::before,
  .dash-queue td[data-label="Why"]::before { content: ""; }
}

/* =========================================================================
   Leads list — filters, chips, and the local-time column
   (moved out of leads.php so they apply before first paint; a <style> block
   at the bottom of a document only takes effect once the browser has streamed
   that far, which showed as a flash of unstyled links on every load)
   ========================================================================= */

/* ---- one row of narrowing controls ----
   Separators group them by kind — whose leads, callable, what hour — without
   needing labels for each group. */
.filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter-row .toggle-group{display:flex;align-items:center;gap:8px}
.filter-sep{width:1px;height:22px;background:var(--border);display:inline-block;margin:0 4px}
.filter-count{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}
@media(max-width:760px){
  .filter-sep{display:none}
  .filter-count{margin-left:0;width:100%}
}

/* ---- chips ----
   These read as switches: lit is the normal state and dimmed means turned off,
   so the default view needs no explanation. A lit company chip fills with that
   company's own colour, which makes the row scannable rather than readable. */
.chip-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.chip-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-right:2px}
.chip-note{font-size:12px;color:var(--muted);margin-left:2px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:20px;border:1px solid var(--border);
  background:#fff;color:var(--muted);font-size:13px;font-weight:600;
  text-decoration:none;transition:background .12s,border-color .12s,color .12s;
}
.chip:hover{text-decoration:none;border-color:#b9c6cf}
.chip-on{background:var(--chip,#1f6f6b);border-color:var(--chip,#1f6f6b);color:#fff}
.chip-on:hover{border-color:var(--chip,#1f6f6b);opacity:.92}
.chip-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.chip-on .chip-dot{background:rgba(255,255,255,.85)!important}
.chip-clear{font-size:12px;color:var(--muted);text-decoration:underline;margin-left:4px}

/* Company chips sit above everything else and carry a little more weight:
   company is the widest cut on the page and every other control narrows within
   that choice. Hidden entirely on a single-company account — a filter with one
   option is noise, not a feature. */
.chip-row-companies{margin-bottom:14px}
.chip-lg{padding:8px 16px;font-size:14px}

/* ---- sort control for the card layout ----
   .leads-table's header row is the sort control on desktop, and it is hidden
   under 700px — so without this a phone can only ever use the default sort,
   which after importing several hundred contacts with no follow-up date is a
   mostly-empty column.

   The three nowrap/auto declarations are load-bearing. The global `label` and
   `select` rules above make both full-width block elements, which is what puts
   the label, the dropdown and the button on three separate lines. */
.mobile-sort{display:none}
@media(max-width:700px){
  .mobile-sort{
    display:flex;align-items:center;gap:8px;
    flex-wrap:nowrap;margin:0 0 14px;
  }
  .mobile-sort label{
    margin:0;font-size:13px;color:var(--muted);
    flex:0 0 auto;white-space:nowrap;
  }
  .mobile-sort select{
    margin:0;flex:1 1 auto;width:auto;min-width:0;
  }
  .mobile-sort .btn{
    flex:0 0 auto;white-space:nowrap;padding:8px 12px;
  }
}

/* ---- lead name as a tap target ----
   A name in a list is the thing you are aiming at on a phone, so it gets a
   real target rather than being a line of underlined text. */
.lead-name{
  display:inline-block;padding:7px 12px;border:1px solid var(--border);border-radius:8px;
  background:#fff;color:var(--ink,#14202b);font-weight:600;font-size:14px;line-height:1.3;
  text-decoration:none;transition:border-color .12s, box-shadow .12s, transform .08s;
  white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;
}
.lead-name:hover{text-decoration:none;border-color:#1f6f6b;box-shadow:0 2px 8px rgba(20,32,43,.08)}
.lead-name:active{transform:translateY(1px)}
.row-other .lead-name{background:transparent}
.lead-place{font-size:11px;color:var(--muted);margin-top:4px;padding-left:2px;text-transform:uppercase;letter-spacing:.03em}
.leads-table th:first-child,.leads-table td:first-child{min-width:160px}
@media(max-width:900px){.leads-table th:first-child,.leads-table td:first-child{min-width:0}}

/* ---- their local time ----
   Colour carries the meaning here: green is callable now, amber is closing
   within the hour and should be called first, red is outside the window. */
.tz-cell{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.tz-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:#9aa5ad}
.tz-clock{font-weight:600}
.tz-abbr{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.04em}
.tz-open    .tz-dot{background:#1f8a4c}
.tz-closing .tz-dot{background:#d98a2b}
.tz-closed  .tz-dot{background:#c0392b}
.tz-unknown .tz-dot{background:#9aa5ad}
.tz-open    .tz-clock{color:#1f8a4c}
.tz-closing .tz-clock{color:#8a5a12}
.tz-closed  .tz-clock{color:var(--muted)}
.tz-unknown .tz-clock{color:var(--muted)}
.tz-legend{color:var(--muted);font-size:12px;margin:14px 0 0;line-height:1.7}
/* Rev4: the legend sits on the page rather than on a card now, so it needs its
   own breathing room instead of borrowing the card's padding. */
@media(max-width:700px){.tz-legend{margin:4px 2px 0}}
.tz-legend .tz-cell{vertical-align:middle}

/* ---- field hints -------------------------------------------------------
   The line of explanation under a control. Previously inline-styled with a
   negative top margin, which pulled it up against the control above and read
   as though the two were touching. Sits close enough to belong to the field
   above it, with real space before the next one. */
.field-hint{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin:6px 0 14px;
}

/* ---- chips on small screens -------------------------------------------
   Four company chips plus five time windows is a lot of horizontal room on a
   phone. Tightened rather than hidden: they are the primary way of narrowing
   the list and hiding them would remove the feature on the device it is most
   used on. Still comfortably above the 44px minimum tap target once padding
   and line-height are counted. */
@media(max-width:600px){
  .chip{padding:5px 10px;font-size:12px;gap:5px}
  .chip-dot{width:7px;height:7px;flex:0 0 7px}
  .chip-row{gap:6px;margin-bottom:10px}
  .chip-row-companies{margin-bottom:10px}
  .chip-label{font-size:10px;width:100%;margin-bottom:2px}
  .filter-row{gap:6px}

  /* Rev3: four companies on one line. The dot goes because it is redundant —
     a lit chip is already filled with that company's own colour — and it was
     costing about 13px per chip, which is the whole margin. Good for four,
     maybe five; a sixth wraps, and that is the right behaviour rather than
     shrinking the names past reading size. */
  .chip-row-companies{gap:5px}
  .chip-row-companies .chip-dot{display:none}
  /* Rev7: four across, not three and an orphan.
     ~350px of usable row less three 4px gaps is ~84px a chip. At 12.5px with
     11px padding "Life Alert" measures ~90px, which is the whole problem. */
  .chip-row-companies{gap:4px}
  .chip-lg{
    padding:5px 9px;font-size:11.5px;gap:0;
    /* A name breaking inside a chip makes that chip two lines tall and takes
       the row's height with it. Better to be one wide chip on its own line. */
    white-space:nowrap;
  }

  /* Quantity query: step down again at five or more. Five needs ~67px a chip,
     which leaves ~55px of text -- fine for "Compass", not for a long name.
     This gives five a chance when the names are short and lets it wrap to two
     rows when they are not. Wrapping is the correct failure here; text small
     enough to guarantee one row is text nobody can read.

     :has() is already relied on in this file (Rev4). Where it is missing the
     rule is skipped and the chips wrap, which is the behaviour today. */
  .chip-row-companies:has(.chip-lg:nth-child(5)) .chip-lg{
    padding:5px 7px;font-size:10.5px;
  }

  /* Rev6: the "Their time" hour presets come off the phone.
     Five chips plus their label took a full row on the screen with the least
     of it, and Callable Now answers the same question most of the time.

     HIDDEN, NOT DELETED. hf/ht are still read, still filter, and still work
     from a URL — /leads.php?hf=9&ht=17 is unchanged, which leaves them
     available to a report or a printable list. Desktop keeps the chips, where
     the row costs nothing.

     .filter-sep is already hidden at 760px, so the separator needs nothing. */
  .hour-ctl{display:none}
}