/* THE YARD SOFTWARE'S LOOK, SCALED TO ONE OPERATOR (2026-10-27; the Product Design look-through,
   3DG1JDcXYe6QxNyJ8fJjQm, approved by Mason, taking its recommendation: the yard's white, plus an amber
   "Console" tag so the operator always knows which app this is). The console serves only console/public,
   so the yard's tokens are COPIED here, not linked; console/health-check.js holds every value in the
   COPIED block equal to the one public/style.css applies, so the two cannot drift apart unseen. */
:root {
  /* COPIED FROM public/style.css, the A-white staff look (its --sh- names, the values a yard staff page
     wears), and its state colours and radius scale. Held equal by console/health-check.js. */
  --sh-ground: #ffffff; --sh-rail: #f7f8f7; --sh-surface: #ffffff; --sh-sunken: #f3f4f3;
  --sh-line: #e3e6e4; --sh-line-strong: #8a918d; --sh-hover: #eceeed;
  --sh-ink: #16191a; --sh-ink-2: #2c3230; --sh-muted: #5d6561;
  --sh-accent: #2e7d4f; --sh-accent-ink: #24653f; --sh-accent-wash: #eaf4ee;
  --state-idle-bg: #eef1ef; --state-idle-fg: #3f4a44;
  --state-progress-bg: #dceaf4; --state-progress-fg: #09547d;
  --state-problem-bg: #fceae7; --state-problem-fg: #a3221a;
  --r-ctl: 10px; --r-card: 14px; --r-pill: 999px;
  /* END COPIED. The console's own names, pointed at the copy. Amber means attention, and the Console tag. */
  --bg: var(--sh-rail); --panel: var(--sh-surface); --panel-2: var(--sh-sunken); --line: var(--sh-line);
  --border: var(--sh-line-strong); --text: var(--sh-ink); --muted: var(--sh-muted);
  --accent: var(--sh-accent); --accent-dk: var(--sh-accent-ink); --accent-wash: var(--sh-accent-wash);
  --brand-700: var(--sh-accent-ink); --brand-800: var(--sh-ink);
  --amber: #b45309; --amber-dk: #92400e; --amber-wash: #fdf3e1;
  --green: #2e7d4f; --red: #b42318; --yellow: #a16207; --blue: #0b6fa4;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: var(--accent-dk); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 9px; color: var(--brand-800); }
/* The one thing that says this is not a yard's software: Mason's own cockpit. */
.topbar .console-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-dk); background: var(--amber-wash); border: 1px solid #e8c88a; border-radius: var(--r-pill); padding: 2px 8px; }
.topbar nav { display: flex; gap: 2px; margin-left: 4px; }
.topbar nav a { color: var(--muted); padding: 7px 10px; border-radius: var(--r-ctl); font-weight: 600; }
.topbar nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.topbar nav a.active { background: var(--accent-wash); color: var(--brand-800); box-shadow: inset 0 -2px 0 var(--accent); }
.topbar .spacer { flex: 1; }
.topbar .logout { color: var(--muted); font-size: 13px; cursor: pointer; }

/* THE SHARED NAV ON A NARROW SCREEN (2026-10-15). Fourteen links in one unwrappable row laid every
   console page out 1,158px wide at 400 — body's overflow-x only hid the edge, it did not bring it
   back. So the bar and its links WRAP at any width that cannot hold them, and on a phone the links
   fold behind the Menu button (app.js), which opens the same <nav> as a wrapped block under the bar.
   console/check-console-narrow.js reads these rules; it is the guard on them. */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.topbar .brand { white-space: nowrap; }
.topbar nav { flex-wrap: wrap; min-width: 0; }
.topbar .menu-btn { display: none; }
@media (max-width: 640px) {
  .topbar { gap: 10px; padding: 10px 16px; }
  .topbar .spacer { order: 1; }
  .topbar .logout { order: 2; }
  .topbar .menu-btn { display: inline-block; order: 3; padding: 9px 14px; }
  .topbar nav { display: none; order: 4; flex-basis: 100%; margin-left: 0; gap: 6px; }
  .topbar.nav-open nav { display: flex; }
  .topbar nav a { padding: 10px 13px; background: var(--panel-2); }
  main { padding: 16px; }
}

main { max-width: 1200px; margin: 0 auto; padding: 24px; }
h2 { font-size: 22px; margin-bottom: 4px; }
.sub { color: var(--muted); margin-bottom: 20px; }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 15px 17px; }
.stat .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.stat .v { font-size: 26px; font-weight: 800; margin-top: 4px; }
.stat.alert .v { color: var(--amber); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; margin-bottom: 18px; overflow-x: auto; }
body { overflow-x: hidden; }
.panel h3 { font-size: 15px; margin-bottom: 12px; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--panel-2); }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-pill); margin-right: 7px; vertical-align: middle; }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--yellow); }
.dot.stale { background: var(--amber); }
.dot.down { background: var(--red); box-shadow: 0 0 0 3px var(--state-problem-bg); }

.chip { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; }
.chip.paid { background: var(--accent-wash); color: var(--brand-800); }
.chip.sent { background: var(--state-progress-bg); color: var(--state-progress-fg); }
.chip.draft, .chip.unbilled { background: var(--state-idle-bg); color: var(--state-idle-fg); }
.chip.overdue { background: var(--state-problem-bg); color: var(--state-problem-fg); }
.chip.behind { background: var(--amber-wash); color: var(--amber-dk); }

.trend-up { color: var(--green); } .trend-down { color: var(--red); } .trend-flat { color: var(--muted); }

button, .btn { font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--r-ctl); padding: 9px 15px; border: 1px solid var(--accent); background: var(--panel); color: var(--accent-dk); }
button:hover, .btn:hover { background: var(--accent-wash); }
button.primary { background: var(--accent); border-color: var(--accent-dk); color: #fff; }
button.primary:hover { background: var(--accent-dk); }
button.mini { padding: 5px 10px; font-size: 12.5px; }

input, select, textarea { font: inherit; width: 100%; padding: 9px 11px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: var(--panel); color: var(--text); }
label { display: block; font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; } .row > * { flex: 1; min-width: 140px; }

.alert-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.alert-row:first-child { border-top: none; }
.sev { width: 8px; height: 8px; border-radius: var(--r-pill); flex: 0 0 auto; }
.sev-3 { background: var(--red); } .sev-2 { background: var(--amber); } .sev-1 { background: var(--yellow); }
.empty { color: var(--muted); padding: 20px; text-align: center; }
.err { color: var(--state-problem-fg); font-size: 13px; margin-top: 8px; }
.ok-msg { color: var(--brand-700); font-size: 13px; margin-top: 8px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.center-card { max-width: 380px; margin: 12vh auto; }

/* A figure that is NOT KNOWN, rendered so it cannot be mistaken for one that is. The
   billing page needs "not reported" to look different from a number at a glance, because
   the whole point of that state is that a silent install must not read as a zero month. */
.muted { color: var(--muted); }

/* Wide tables scroll inside their own panel rather than pushing the page sideways. The
   billing table gained three columns (tier, rate, marketplace revenue) and stops fitting
   a phone; the page body must never scroll horizontally. */
.scroll { overflow-x: auto; }

/* A source that has stopped reporting. Deliberately loud, and deliberately NOT a table row
   with empty cells: an empty cell reads as a zero, and "down" and "no orders" are opposite
   operational facts. The panel says which one it is in words. */
.mkt-down { border-left: 3px solid var(--red); background: var(--state-problem-bg); padding: 12px 14px; border-radius: var(--r-ctl); line-height: 1.65; }
.mkt-down em { color: var(--amber); font-style: normal; font-weight: 700; }
.center-card { max-width: 380px; margin: 12vh auto; }

/* --- Leads. Built out of what is already here: .panel, .chip, .alert-row, .stat. The four
   rules below are the only shapes the outreach screens needed that the console did not
   already have. No new colour tokens — every chip on a lead is an existing chip class. */

/* A failed read is not a quiet empty state. It gets the red edge that says "this figure is
   missing, not zero" — see the reporter that was green with zeros over a live book. */
.panel.banner-bad { border-color: var(--red); background: linear-gradient(180deg, var(--state-problem-bg), transparent 60%), var(--panel); }

/* Counts by stage: a wrapping row of chip + number, each one a filter link. */
.stage-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-cell { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel-2); }
.stage-cell:hover { border-color: var(--accent); text-decoration: none; }
.stage-cell.on { border-color: var(--accent); }
.stage-cell .n { font-weight: 800; font-size: 15px; color: var(--text); }

/* The quick-log buttons: the ten seconds after hanging up is the whole design constraint. */
.quick-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* The activity log: a timestamp gutter and the entry beside it, newest first. */
.log-entry { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.log-entry:first-of-type { border-top: none; }
.log-when { color: var(--muted); flex: 0 0 118px; padding-top: 2px; }

/* A do-not-contact row still lists — hiding it would make the only way to find one be to
   try to contact it — but it must never read as an ordinary row. */
tr.suppressed td { opacity: 0.62; }

/* --- Growth. The funnel bar, and it is the ONLY new shape that page needed.
   A SECOND READING OF A NUMBER ALREADY WRITTEN DOWN. Every bar sits beside its own count and
   its own "n% of N <what>", so nothing on the page has meaning in colour or in length alone —
   remove every bar and the board still reads. It is drawn with one div and a width, because
   the console has express and leaflet and a chart library would be a third dependency and a
   build step for a picture of six numbers.
   A STAGE WHOSE SHARE IS UNKNOWN GETS NO BAR AT ALL. A zero-width bar is a drawing of a nought
   and this page's whole argument is that an unknown is not one. */
.fbar { height: 7px; border-radius: var(--r-pill); background: var(--panel-2); border: 1px solid var(--line); margin-top: 7px; max-width: 520px; }
.fbar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }