/* Wash Attest review app. Mobile-first at 430px, one column; desktop is the same column, wider. */
:root {
  --bg: #f3f4f6;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --line: #d9dde3;
  --accent: #1f2933;

  --red: #c62828;      --red-bg: #fdecea;
  --orange: #d9480f;   --orange-bg: #ffe8d6;
  --amber: #8a5a00;    --amber-bg: #fff1c2;
  --gray: #4b5563;     --gray-bg: #e5e7eb;
  --green: #1b6e32;    --green-bg: #dff3e4;
  --blue: #1558b0;     --blue-bg: #dbeafe;
  --pink: #ec4899;     --pink-bg: #fff0f7;
  --yellow: #fff176;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.noscroll { overflow: hidden; }
a { color: #1558b0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h3 { font-size: 1rem; margin-bottom: 8px; }
h4 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.error { color: var(--red); font-weight: 600; margin: 6px 0 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain > li { padding: 6px 0; border-top: 1px solid var(--line); }
ul.plain > li:first-child { border-top: 0; }

/* ---- shell ---- */
.topbar { background: var(--accent); color: #fff; position: sticky; top: 0; z-index: 20; }
.bar-inner, .topbar nav { max-width: 430px; margin: 0 auto; }
.bar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 0; }
.brand { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.brand img, .brand-title img { display: block; flex: none; }
.brand-title { display: flex; align-items: center; gap: 10px; }
.userbox { font-size: 0.85rem; }
.userbox .muted { color: #cbd2d9; }
.topbar .linkbtn { color: #fff; }
nav.tabs { display: flex; gap: 2px; padding: 6px 8px 0; }
nav.tabs a {
  flex: 1 1 auto; text-align: center; padding: 8px 4px; color: #cbd2d9; text-decoration: none; font-weight: 600;
  font-size: 0.85rem; line-height: 1.2; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center; gap: 4px;
}
nav.tabs a[data-route="health"] { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; }
/* R27: the Health tab carries the active-alert count */
nav.tabs a .count { background: rgba(255, 255, 255, 0.2); color: inherit; border-radius: 999px; padding: 0 6px; font-size: 0.72rem; min-width: 18px; }
nav.tabs a.active .count { background: var(--gray-bg); }
nav.tabs a .count.alerting { background: var(--red); color: #fff; }
nav.tabs a.active { background: var(--bg); color: var(--ink); }
.page { max-width: 430px; margin: 0 auto; padding: 12px 10px 60px; }

/* ---- controls ---- */
input, select, button { font: inherit; }
input[type="search"], input[type="text"], input[type="password"], input[type="date"], select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
label { display: block; font-size: 0.75rem; color: var(--muted); }
label > input, label > select { margin-top: 2px; font-size: 0.95rem; color: var(--ink); }
label.check { display: flex; align-items: center; gap: 6px; align-self: end; padding-bottom: 8px; font-size: 0.9rem; color: var(--ink); }
label.check input { width: auto; margin: 0; }
.filters { display: grid; gap: 8px; margin-bottom: 8px; }
.daterow, .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
button { cursor: pointer; }
button:disabled { opacity: 0.55; cursor: default; }
.linkbtn { background: none; border: 0; padding: 2px 4px; color: #1558b0; text-decoration: underline; cursor: pointer; font-size: 0.9rem; }
.primary { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 10px 14px; font-weight: 600; width: 100%; }

/* chips: one scrolling row on a phone */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; margin: 0 -10px; padding-left: 10px; padding-right: 10px; scrollbar-width: thin; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; white-space: nowrap;
}
.chip .count { background: var(--gray-bg); border-radius: 999px; padding: 0 7px; font-size: 0.75rem; min-width: 22px; text-align: center; }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.active .count { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* R15: the "Sources disagree" chip is red so a conflict is never missed */
.chip.chip-disagree { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.chip.chip-disagree .count { background: var(--red); color: #fff; }
.chip.chip-disagree.active { background: var(--red); border-color: var(--red); color: #fff; }

.notice { background: var(--blue-bg); color: var(--blue); padding: 8px 10px; border-radius: 8px; margin-bottom: 8px; font-weight: 600; }
.status { margin: 4px 0 8px; font-size: 0.85rem; }
.more { text-align: center; margin: 12px 0; }
.loadmore { padding: 8px 18px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 600; }

/* ---- cards ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.subhead { margin: 18px 2px 8px; }

/* tags: status colours */
.tag, .badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: var(--gray-bg); color: var(--gray); vertical-align: middle;
}
.tag-mismatch { background: var(--red-bg); color: var(--red); }
.tag-cycling { background: var(--yellow); color: #5c4a00; } /* R47: plate cycling */
.tag-weak, .tag-unverified { background: var(--amber-bg); color: var(--amber); }
.tag-no_capture, .tag-pending, .tag-non_member { background: var(--gray-bg); color: var(--gray); }
.tag-match, .tag-cleared, .tag-member { background: var(--green-bg); color: var(--green); }
.tag-testing { background: var(--blue-bg); color: var(--blue); }
.tag-verdict { background: #fff; color: var(--ink); border: 1px solid var(--line); } /* verdicts are neutral */
.badge-warn { background: var(--amber-bg); color: var(--amber); }
.badge-info { background: var(--gray-bg); color: var(--gray); }
.badge-standing-warned { background: var(--amber-bg); color: var(--amber); }
.badge-standing-banned { background: var(--red-bg); color: var(--red); }
.badge-standing-none { background: var(--green-bg); color: var(--green); }

/* R05: shared plate = circled in pink */
.plate {
  text-transform: uppercase; /* Matt, 2026-10-23: plates always in capitals (a highlighted search chip too) */
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700;
  letter-spacing: 0.06em; padding: 1px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
.plate.shared { border: 3px solid var(--pink); border-radius: 999px; padding: 0 12px; background: var(--pink-bg); outline: 1px solid var(--pink); outline-offset: 1px; }
.plate.shared[data-shared-plate] { cursor: pointer; }
/* a person's plate correction, in the plate's place: blue like a link, not underlined (Matt, 2026-10-28) */
.plate.plate-corrected { color: var(--blue); cursor: pointer; text-decoration: none; }
.plate.plate-partial { color: var(--muted); }
.newtab { font-size: 0.8rem; margin-left: 6px; }
.plate mark { background: var(--yellow); color: inherit; border-radius: 2px; padding: 0; }

/* ---- case card ---- */
.case.disagree { border: 2px solid var(--red); }
.banner-disagree { /* R15: loud */
  margin: -12px -12px 10px; padding: 10px 12px; background: var(--red); color: #fff; font-weight: 700;
  border-radius: 10px 10px 0 0; text-transform: none;
}
.banner-disagree strong { text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px; }
.banner-disagree.small { margin: 0 0 4px; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; }
/* R19: phone = stacked (photo and time rows on top, facts and buttons below); desktop below = two columns */
.case-grid { display: grid; grid-template-columns: 52% minmax(0, 1fr); grid-template-areas: "media time" "facts facts"; gap: 10px; }
.case-media { grid-area: media; position: relative; min-width: 0; }
.timecol { grid-area: time; min-width: 0; display: grid; gap: 6px; align-content: start; }
.case-facts { grid-area: facts; min-width: 0; }
/* the cursor of a photo comes from Fmt.cursorFor (inline style): zoom-in only where a click opens full size (R23) */
.photo { padding: 0; border: 0; background: #e5e7eb; border-radius: 8px; overflow: hidden; display: block; position: relative; width: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo.none { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.8rem; cursor: default; }
.casephoto { height: 130px; }
.fullsize {
  position: absolute; right: 6px; bottom: 6px; border: 0; border-radius: 6px; padding: 2px 8px; font-size: 0.75rem; font-weight: 700;
  background: rgba(17, 24, 39, 0.75); color: #fff;
}
/* R24: shown only after the retries ran out; a tap retries */
img.img-failed { display: none !important; }
.img-missing {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #f3f4f6; color: var(--gray); border: 1px dashed #9ca3af; border-radius: inherit; font-size: 0.75rem; cursor: pointer; text-align: center;
}
.img-missing .im-title { font-weight: 700; }
.img-missing .im-hint { font-size: 0.7rem; color: var(--muted); }
.lightbox figure { position: relative; min-width: 160px; min-height: 90px; }
.trow { display: grid; grid-template-columns: 1fr; padding: 3px 6px; border-radius: 6px; }
.tlabel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.tval { font-variant-numeric: tabular-nums; font-weight: 600; }
.tnote { font-size: 0.8rem; font-weight: 700; }
.trow.flagged { background: var(--yellow); box-shadow: inset 4px 0 0 #e6c200; } /* R11 */
.trow.flagged .tlabel { color: #5c4a00; }

.ident { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-bottom: 8px; }
.ident .name { font-size: 1.05rem; }
.nowshows { color: var(--orange); font-weight: 600; }
.acct { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.side { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 0; }
.side .plate { margin: 0 2px 4px 0; }
.veh { font-size: 0.85rem; margin-top: 2px; }
.veh-note { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.correction { font-size: 0.75rem; margin-top: 4px; }
.correction .linkbtn { font-size: 0.75rem; padding: 0 2px; }
.corrected-by { color: var(--blue); font-weight: 600; }
.conf { font-size: 0.8rem; color: var(--muted); }

.statusline { margin: 6px 0; }
.reason { font-size: 0.85rem; color: var(--muted); }
.flagnote { margin: 6px 0; padding: 4px 8px; border-radius: 6px; background: var(--red-bg); color: var(--red); font-weight: 700; font-size: 0.85rem; }
.flagnote.overruled { background: var(--gray-bg); color: var(--gray); }
.flagnote.warn { background: var(--amber-bg); color: var(--amber); }

.verdict { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.vbtns { display: grid; gap: 6px; }
.vbtn {
  text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  font-weight: 600; color: var(--ink);
}
.vbtn:hover:not(:disabled) { border-color: var(--accent); }
.vbtn.current { border: 2px solid var(--accent); background: #f3f4f6; }
.vbtn.current.auto { border-style: dashed; }
.vline { margin-bottom: 4px; }
.vwho { font-size: 0.85rem; color: var(--muted); flex-basis: 100%; }
.vline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vtag-change { cursor: pointer; font-family: inherit; line-height: inherit; }
.sbtn.change { font-weight: 600; }
.verdict .linkbtn { margin-top: 6px; }
.moved { font-size: 0.85rem; color: var(--blue); font-weight: 600; }
.vhist { font-size: 0.85rem; margin-top: 4px; }
.vhist ul { margin: 4px 0 0; padding-left: 18px; }
.foot { margin-top: 8px; font-size: 0.7rem; }

/* ---- visit card ---- */
.visit { display: flex; gap: 10px; padding: 8px; }
.visit.clickable { cursor: pointer; }
.visit .thumb { flex: 0 0 96px; height: 72px; }
.thumb.small { flex: 0 0 64px; width: 64px; height: 48px; }
.vbody { min-width: 0; flex: 1; }
.vrow1 { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.vmeta { font-size: 0.8rem; color: var(--muted); }
.group-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin: 14px 2px 6px; }

/* ---- lookup rows ---- */
.prow { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pmain { font-size: 1.1rem; }
.expand { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 4px; }
.hvisit { display: flex; gap: 10px; align-items: flex-start; }
.hcase { font-size: 0.9rem; }
/* the plate popup: each scan laid out like the last-scans popup, the outcome in small text (Matt, 2026-11-03) */
.hscans > li.hscan { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.hscans li.hscan .photo.thumb img { width: 100%; height: auto; border-radius: 6px; display: block; }
@media (max-width: 520px) { .hscans > li.hscan { grid-template-columns: 1fr; } }
.hinfo > div, .hinfo .hcap { margin: 2px 0; }
.hinfo .hcase, .hinfo .hcase-text { font-size: 0.8rem; color: var(--muted); }
.hinfo .tag-verdict { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 600; }
.hinfo .banner-disagree { display: inline; padding: 0; background: none; color: var(--red); }
.hverdict { margin-top: 4px; }
.vbtns.compact { margin-top: 6px; grid-template-columns: 1fr 1fr; gap: 4px; }
.vbtns.compact .vbtn { padding: 6px 8px; font-size: 0.8rem; }

/* ---- LP Lookup table (R21): tight, content-sized columns ---- */
.table-wrap { overflow-x: auto; margin: 0 -10px; padding: 0 10px; -webkit-overflow-scrolling: touch; }
table.lookup { border-collapse: collapse; background: var(--card); font-size: 0.85rem; width: max-content; min-width: 100%; }
table.lookup th, table.lookup td { padding: 6px 5px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
table.lookup thead th { position: sticky; top: 0; background: #f8fafc; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; border-top: 0; }
table.lookup th .sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline dotted; }
table.lookup th[aria-sort="ascending"] .sort::after { content: " ▲"; }
table.lookup th[aria-sort="descending"] .sort::after { content: " ▼"; }
table.lookup th[aria-sort="ascending"], table.lookup th[aria-sort="descending"] { color: var(--ink); }
table.lookup tr.main { cursor: pointer; }
table.lookup tbody.plate-row.open tr.main { background: #f8fafc; }
.c-plate { white-space: nowrap; }
.c-plate .plate { padding: 0 5px; letter-spacing: 0.03em; font-size: 0.82rem; }
.c-plate .plate.shared { padding: 0 8px; }
/* a plate read longer than 8 characters wraps instead of setting the column width */
.c-plate.wrap { white-space: normal; }
.c-plate.wrap .plate { display: inline-block; max-width: 8.5ch; overflow-wrap: anywhere; word-break: break-all; }
.c-makeModel { min-width: 6em; max-width: 9.5em; }
.c-color, .c-visits, .c-first, .c-last, .c-flagged { white-space: nowrap; }
.c-visits .expbtn { padding: 0; font-weight: 700; }
.c-member { min-width: 7em; max-width: 12em; white-space: normal; }
.c-member .acct { white-space: nowrap; }
.c-member .former { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.c-flagged .flagcount { background: var(--red-bg); color: var(--red); font-weight: 700; border-radius: 999px; padding: 0 7px; }
.blank { color: #9ca3af; }
tr.expand > td { padding: 0; border-top: 0; }
.expand-in { position: sticky; left: 0; width: min(100%, calc(100vw - 20px)); max-width: 410px; padding: 4px 8px 8px; }

/* ---- Health tab (R27) ---- */
.health-head { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px 6px; }
.health-head h2 { font-size: 1.1rem; }
.alerts .alert { padding: 8px 0; }
.alert-msg { font-weight: 600; }
.alert.alert-error .alert-msg { color: var(--red); }
.alert.cleared .alert-msg { color: var(--gray); font-weight: 500; }
.badge-ok { background: var(--green-bg); color: var(--green); }
.badge-bad { background: var(--red-bg); color: var(--red); }
.badge-warnlvl { background: var(--amber-bg); color: var(--amber); }
strong.bad { color: var(--red); }
.health-body .kv { grid-template-columns: 110px 1fr; }

/* ---- account page ---- */
.acct-head h2 { font-size: 1.3rem; }
.standing { margin-top: 6px; }
.standing-history { margin: 4px 0 0; padding-left: 18px; font-size: 0.85rem; color: var(--muted); }
.kv { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.kv:first-of-type { border-top: 0; }
.kv .k { color: var(--muted); font-size: 0.85rem; }
.changes li { font-size: 0.9rem; }
.back { display: inline-block; margin-bottom: 4px; }

/* ---- overlays ---- */
.overlay { position: fixed; inset: 0; z-index: 50; }
.lightbox { background: rgba(0, 0, 0, 0.88); z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; padding: 16px; }
.lb-body { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 100%; }
.lightbox figure { margin: 0; text-align: center; color: #e5e7eb; }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 6px; background: #000; }
.overlay-close { position: absolute; top: 8px; right: 12px; z-index: 2; background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; padding: 4px 8px; }
.modal { background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: flex-start; overflow: auto; padding: 24px 10px; }
.modal-card { background: var(--bg); border-radius: 12px; width: 100%; max-width: 430px; padding: 12px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-head .overlay-close { position: static; color: var(--ink); }
.modal-title { font-size: 1.2rem; }

/* ---- login ---- */
.login-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 12px; }
.login-card { width: 100%; max-width: 360px; }
.login-card h1 { font-size: 1.3rem; margin-bottom: 14px; }
.login-card form { display: grid; gap: 12px; }

/* ---- desktop: same column, wider ---- */
@media (min-width: 720px) {
  .bar-inner, .topbar nav, .page { max-width: 960px; }
  .page { padding-left: 16px; padding-right: 16px; }
  .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding-left: 0; padding-right: 0; }
  .filters { grid-template-columns: 2fr 1fr; align-items: end; }
  .filters > :only-child { grid-column: 1 / -1; }
  .vfilters { grid-template-columns: 1fr 1fr; }
  .vfilters .frow { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .casephoto { height: 190px; }
  .vbtns { grid-template-columns: repeat(2, 1fr); }
  .modal-card { max-width: 640px; }
  .visit .thumb { flex-basis: 140px; height: 100px; }
}

/* ---- desktop width (R19): the evidence photo large on the left, facts and buttons on the right ---- */
@media (min-width: 900px) {
  .bar-inner, .topbar nav, .page { max-width: 1180px; }
  nav.tabs a { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
  .case-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "media time" "media facts";
    grid-template-rows: auto 1fr; gap: 10px 16px;
  }
  .case-media { align-self: start; }
  .casephoto { height: auto; aspect-ratio: 16 / 10; background: #111827; }
  .casephoto img { object-fit: contain; }
  .casephoto.none { background: #e5e7eb; aspect-ratio: 16 / 7; }
  .modal-card { max-width: 760px; }
  .table-wrap { margin: 0; padding: 0; }
}

/* Hand-off sign-in (login page), the support-session banner and the admin cards on the Health tab */
.handoff-signin { display: grid; gap: 8px; margin-bottom: 14px; }
.handoff-signin p { margin: 0; font-size: 0.9rem; }
a.primary { display: block; text-align: center; text-decoration: none; box-sizing: border-box; }
.or-line { text-align: center; font-size: 0.8rem; color: var(--muted); margin: 0 0 10px; }
.support-banner { background: var(--amber-bg); color: var(--amber); font-weight: 600; font-size: 0.85rem; padding: 8px 12px; }
.support-banner .bar-text { max-width: 430px; margin: 0 auto; }
.health-admin .help { font-size: 0.85rem; margin: 0 0 8px; }
.conn-form { display: grid; gap: 8px; margin-top: 8px; }
.conn-form .frow { grid-template-columns: 1fr 1fr; }
.conn-form .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conn-form .actions .primary { width: auto; }
.conn-form .saved { color: var(--green); font-weight: 600; font-size: 0.85rem; }
.conn-form input[type="email"], .conn-form input[type="number"] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.slog li { font-size: 0.85rem; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.slog .path { grid-column: 1 / -1; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
/* R18: warning sent (orange) / cancelled (red), calm text rather than a loud badge */
.standing-text { font-size: 0.85rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; }
.standing-text.warned { color: var(--orange); background: var(--orange-bg); }
.standing-text.banned { color: var(--red); background: var(--red-bg); }
.misuse-count { font-size: 0.85rem; font-weight: 600; color: var(--red); }
.standing-actions { margin: 6px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sbtn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font-size: 0.85rem; }
.sbtn.warn { color: var(--orange); border-color: var(--orange); }
.sbtn.bad { color: var(--red); border-color: var(--red); }
.sbtn:disabled { opacity: 0.5; cursor: default; }
.acct-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-title h2 { margin: 0; }
/* review chips: the queue, then (below a thin line) the decisions a person made */
.chips .chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chiprow.decided { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.chips { flex-direction: column; overflow-x: visible; }

/* R30/R31: the member page mirrors EverWash: joined date and card under the name, memberships and vehicles as tables */
.acct-joined, .acct-card { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.acct-card { text-transform: none; }
table.data.ew td { vertical-align: middle; }
table.data.ew tr.ended td { color: var(--muted); }
table.data.ew td.ok { color: var(--green); }
table.data.ew td.bad { color: var(--red); }
table.data { border-collapse: collapse; font-size: 0.85rem; width: max-content; min-width: 100%; }
table.data th, table.data td { padding: 6px 8px; text-align: left; border-top: 1px solid var(--line); white-space: nowrap; }
table.data thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); border-top: 0; }
/* R09: mismatches waiting for the owner's decision stand out until decided */
.chip.chip-mismatch.waiting { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.chip.chip-mismatch.waiting .count { background: var(--red); color: #fff; }
.chip.chip-mismatch.waiting.active { background: var(--red); color: #fff; }

/* R32: the membership line on a case card */
.msline { font-size: 0.85rem; color: var(--muted); margin: 2px 0 6px; }
.msline.ended { color: var(--red); }

/* R35: the member's last scans popup */
.recent-list li.recent { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.recent-list li.recent .photo.thumb img { width: 100%; height: auto; border-radius: 6px; display: block; }
@media (max-width: 520px) { .recent-list li.recent { grid-template-columns: 1fr; } }

/* R18: undo, the real send date, EverWash's acknowledgements (member page) */
.sbtn.undo { border-color: var(--line); color: var(--muted); background: transparent; }
/* Matt, 2026-10-28: no action with a note, and the member's Monitor flag */
.sbtn.note { color: var(--ink); }
.sbtn.monitor { color: var(--red); border-color: var(--red); }
.sbtn.monitor.on { color: var(--muted); border-color: var(--line); }
.member-note-form { margin: 6px 0; display: grid; gap: 6px; }
.member-note-form .hint { margin: 0; }
.sbtn.save { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; padding: 6px 14px; }
.note-buttons { display: flex; gap: 12px; align-items: center; }
.name-pop { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--card); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.name-pop li + li { border-top: 1px solid var(--line); }
.name-pick { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px; color: var(--ink); font: inherit; cursor: pointer; }
.name-pick:hover, .name-pick:focus { background: var(--gray-bg); }
.member-link { font-weight: 600; }
.rel-accounts > li { padding: 8px 0; border-top: 1px solid var(--line); }
.rel-accounts > li:first-child { border-top: 0; }
.rel-accounts .standing-text { margin-left: 4px; }
.rel-vehicles { margin: 4px 0 0; }
.rel-vehicles li { margin: 2px 0; }
.case-notes li .linkbtn { margin-left: 4px; }
.member-note-form label { display: grid; gap: 4px; font-size: 0.9rem; }
.member-note-form label.check { display: flex; gap: 6px; align-items: flex-start; }
.member-note-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 6px; border: 1px solid var(--line); border-radius: 6px; }
.case-notes { list-style: none; margin: 6px 0; padding: 0; font-size: 0.9rem; }
.case-notes li { padding: 4px 8px; margin: 4px 0; border-left: 3px solid var(--line); background: var(--gray-bg); border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.standing-date, .ew-ack { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.standing-date label, .ew-ack label { display: flex; gap: 6px; align-items: center; color: var(--ink); }
.ew-acks { margin-top: 4px; }

/* R39: same vehicle, different plate; the member's monitoring flag */
.tag-lookalike { background: var(--red-bg); color: var(--red); }
.chip.chip-lookalike.waiting { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.mflag { margin-left: 4px; font-size: 0.95em; line-height: 1; }
.mflag.red { color: var(--red); }
.mflag.yellow { color: #c9a400; }

/* ---- R41: Warned & Banned tab, the upload, Back to portal ---- */
nav.tabs a .short { display: none; }
@media (max-width: 899px) { nav.tabs a[data-route="standing"] .long { display: none; } nav.tabs a[data-route="standing"] .short { display: inline; } }
.topbar .portal-link { color: #fff; font-weight: 600; text-decoration: underline; margin-right: 6px; }
.standing-row .standing-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.standing-row .name { font-weight: 700; }
.standing-row.unmatched { border-style: dashed; }
.standing-sub { font-size: 1rem; margin: 14px 2px 4px; }
#view-standing .health-head { align-items: center; flex-wrap: wrap; gap: 8px; }
.standing-upload .upload-form label { display: grid; gap: 4px; margin: 8px 0; }
.standing-upload input[type="file"] { font-size: 0.9rem; max-width: 100%; }
.upload-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.upload-actions .primary { width: auto; }
.upload-actions .primary:disabled { opacity: 0.5; }
table.upload-table td { max-width: 260px; white-space: normal; }
table.upload-table tr.res-change td:last-child { color: var(--green); font-weight: 600; }
table.upload-table tr.res-unmatched td:last-child { color: var(--amber); font-weight: 600; }
table.upload-table tr.res-error td:last-child { color: var(--red); font-weight: 600; }
table.upload-table tr.res-same td { color: var(--muted); }

/* the Monitoring chip's scan count, when it differs from its member count */
.chip .chip-note { margin-left: 6px; font-size: 0.8em; opacity: 0.75; }

/* ---- R46: Stats tab ---- */
nav.tabs a[data-route="stats"] { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; }
.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stat-k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.stat-big { font-size: 1.7rem; font-weight: 700; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 0.8rem; color: var(--muted); }
.stat-bad { color: var(--red); font-weight: 600; }
.stat-warn { color: var(--amber); font-weight: 600; }
.segs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--gray-bg); border-radius: 10px; padding: 3px; }
.seg { border: 0; background: transparent; border-radius: 8px; padding: 7px 4px; font-weight: 600; color: var(--gray); font-size: 0.9rem; }
.seg.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.stat-nav { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 6px; margin: 10px 0 4px; }
.stat-range { text-align: center; font-size: 0.95rem; }
.stat-range .linkbtn { display: block; margin: 0 auto; font-size: 0.8rem; }
.navbtn { border: 1px solid var(--line); background: #fff; border-radius: 8px; height: 36px; font-size: 1.3rem; line-height: 1; color: var(--ink); }
.chart-box { width: 100%; overflow: hidden; }
svg.bars { display: block; max-width: 100%; height: auto; }
svg.bars .grid { stroke: var(--line); stroke-width: 1; }
svg.bars .axis { fill: var(--muted); font-size: 10px; }
svg.bars .hit { fill: transparent; cursor: pointer; }
svg.bars .b-rest { fill: #475569; }
svg.bars .b-review { fill: #f59e0b; }
svg.bars .b-misuse { fill: var(--red); }
svg.bars g.sel .hit { fill: rgba(21, 88, 176, 0.08); }
svg.bars g.sel .b-rest { fill: #1e293b; }
svg.bars g.future .b-rest { fill: var(--gray-bg); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.sw-rest { background: #475569; } .sw-misuse { background: var(--red); } .sw-review { background: #f59e0b; }
.bar-detail { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.88rem; min-height: 1.4em; }
.stat-window .kv, .stat-times .kv { grid-template-columns: 130px 1fr; }
.plans-h { margin-top: 12px; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; font-size: 0.85rem; padding: 3px 0; }
.plan-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-bar { height: 8px; background: var(--gray-bg); border-radius: 4px; overflow: hidden; }
.plan-fill { display: block; height: 100%; background: #475569; width: 0; }
.plan-n { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.stat-table th, .stat-table td { padding: 5px 4px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.stat-table thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: 0.75rem; }
.stat-table tbody th { text-align: left; font-weight: 600; }
@media (min-width: 720px) {
  .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
}
@media (min-width: 900px) { .stat-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* six tabs on a phone: tighter so Health stays on screen at 360-430px (R46 added Stats) */
@media (max-width: 480px) {
  nav.tabs { gap: 0; padding-left: 4px; padding-right: 4px; }
  nav.tabs a { font-size: 0.78rem; padding-left: 3px; padding-right: 3px; }
  nav.tabs a[data-route="stats"], nav.tabs a[data-route="health"] { padding-left: 5px; padding-right: 5px; }
}
/* iPhone fit (Matt 2026-10-30): nothing may be wider than the screen, or iOS lets the whole page slide sideways and
   the right edge (the scan and photo times) goes off screen. Checked down to 300px, i.e. a 393px iPhone with
   Safari's text at 130%. The tab row scrolls inside itself instead of widening the page; long words and inputs shrink. */
html, body { overflow-x: clip; }
nav.tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
nav.tabs::-webkit-scrollbar { display: none; }
.bar-inner { gap: 8px; }
.userbox { min-width: 0; text-align: right; overflow-wrap: anywhere; }
input, select, textarea { max-width: 100%; min-width: 0; }
.tval { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  /* a narrow phone: the photo full width, the two times side by side under it */
  .case-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "time" "facts"; }
  .timecol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* every tab on screen: on the narrowest phones the tabs take two rows rather than scroll */
@media (max-width: 370px) { nav.tabs { flex-wrap: wrap; overflow-x: visible; } }
.kv > * { min-width: 0; overflow-wrap: anywhere; }
.filters { grid-template-columns: minmax(0, 1fr); }
.daterow, .frow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.filters > *, .daterow > *, .frow > * { min-width: 0; }
.filters label { overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .vfilters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}