/* SB Stack admin.
   Its own look: warm paper background, flat white panels with hairline rules, square corners,
   Archivo for headings and numbers, monospace for system details, ink for the active state.
   Colour appears only as small squares beside a label; never as coloured lines or rounded pills. */
@font-face{font-family:"Archivo";src:url(/fonts/archivo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --paper:#F5F4F0; --panel:#FFFFFF; --panel-2:#FAF9F6; --ink:#121317; --ink-2:#3B3E46; --muted:#757884;
  --rule:#E3E1DA; --rule-2:#D3D0C7; --brand:#2563EB; --brand-soft:#EAF0FD;
  --up:#1F9D55; --warn:#C27A0E; --down:#D33A2C; --idle:#9A9CA5;
  --display:"Archivo",system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:5px;
}
:root[data-theme="dark"]{
  --paper:#0E0F12; --panel:#16181D; --panel-2:#1B1D23; --ink:#EDEBE6; --ink-2:#C2C0BA; --muted:#8C8E96;
  --rule:#272A31; --rule-2:#343841; --brand:#6E9BFF; --brand-soft:#1A2440; --idle:#6B6E77;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font:800 26px/1.15 var(--display);letter-spacing:-.025em;margin:0}
h2{font:700 15px/1.3 var(--display);margin:0;letter-spacing:-.005em}
h3,.label-mono{font:600 12.5px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);margin:0 0 10px}
code{font:12px/1.4 var(--mono);background:var(--panel-2);border:1px solid var(--rule);border-radius:3px;padding:1px 5px;word-break:break-all}
p{margin:0 0 8px}
.sub,.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.mono{font-family:var(--mono);font-size:12px}
.hidden{display:none!important}
.boot{padding:80px 20px;text-align:center;color:var(--muted);font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif}
.mt{margin-top:16px}
.right{text-align:right}
.row-gap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}

/* ── sign-in ─────────────────────────────────────────────── */
.gate-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.gate-side{background:var(--gate-panel,#121317);color:var(--gate-panel-ink,#F5F4F0);display:flex;flex-direction:column;justify-content:space-between;padding:36px 40px;background-image:linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(255,255,255,.05) 0),linear-gradient(0deg,transparent 0,transparent calc(100% - 1px),rgba(255,255,255,.05) 0);background-size:48px 48px}
.gate-brand{display:flex;align-items:center;gap:12px;font:800 18px var(--display);letter-spacing:-.02em}
.logo-mark.inv{background:var(--gate-panel-ink,#F5F4F0);color:var(--gate-panel,#121317)}
.gate-logo{max-height:34px;max-width:170px;width:auto;display:block}
.gate-tag p{font:800 34px/1.12 var(--display);letter-spacing:-.03em;max-width:15ch;margin:10px 0 0}
.gate-side .label-mono{color:var(--gate-panel-muted,rgba(245,244,240,.55))}
.gate-foot{margin:0}
.gate-note{display:block;margin-top:14px;font-size:13px;color:rgba(245,244,240,.6)}
.gate{align-self:center;justify-self:center;width:min(400px,100% - 32px);padding:32px 0}

.gate h1{font-size:30px}
.gate .sub{margin-top:8px}
.gate-form{display:grid;gap:14px;margin:26px 0 8px}
.gate-field{display:grid;gap:6px}
.gate-field label{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
.gate-field input{width:100%;padding:11px 12px;font-size:15px}
.gate-submit{width:100%;justify-content:center;padding:11px;font-size:15px}
.gate-links{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-top:12px}
.gate-msg{padding:8px 12px;font-size:13px;margin-top:14px;background:var(--panel);border:1px solid var(--rule)}
.gate-msg::before,.form-error::before{content:"";display:inline-block;width:8px;height:8px;border-radius:1px;background:var(--down);margin-right:8px;vertical-align:1px}
.gate-msg.ok{border-left-color:var(--up)}
.gate .btn[data-role]{display:grid;justify-items:start;text-align:left;gap:2px;padding:12px 14px;white-space:normal}
.qr{margin:16px 0}
.qr img{width:176px;height:176px;image-rendering:pixelated;border:1px solid var(--rule);background:#fff;padding:6px}
.secret{font:13px/1.5 var(--mono);background:var(--panel);border:1px dashed var(--rule-2);padding:10px;word-break:break-all;user-select:all}
@media (max-width:860px){.gate-page{grid-template-columns:1fr}.gate-side{display:none}}

/* ── top bar ─────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:1px solid var(--rule)}
.top-in{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 24px;height:58px}
.logo{display:flex;align-items:center;gap:11px;color:var(--ink);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .word{font:800 16px var(--display);letter-spacing:-.02em}
.logo-mark{width:30px;height:30px;border-radius:4px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:800 12px var(--display);letter-spacing:.02em;flex:none}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink-2);padding:7px 12px;border-radius:4px;white-space:nowrap;font:700 13.5px var(--display);letter-spacing:-.005em}
.nav a:hover{color:var(--ink);background:var(--panel-2);text-decoration:none}
.nav a.on{background:var(--ink);color:var(--paper)}
.nav-dd{display:flex}
.nav-dd .caret{font-size:9px;margin-left:3px;opacity:.6}
.nav-menu{display:none;position:fixed;z-index:40;min-width:210px;background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);padding:6px;box-shadow:0 10px 30px rgba(18,19,23,.12)}
.nav-dd.open .nav-menu{display:block}
.nav-menu a{display:block;padding:8px 10px;border-radius:3px;color:var(--ink-2);font:500 13.5px system-ui,sans-serif;letter-spacing:0;background:none}
.nav-menu a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.env-pill{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;padding:4px 8px;background:var(--warn);color:#fff;border-radius:3px}
.userbtn{background:none;border:1px solid var(--rule);color:var(--ink);border-radius:4px;padding:4px 10px 4px 4px;display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.userbtn:hover{border-color:var(--rule-2)}
.avatar{width:24px;height:24px;border-radius:3px;background:var(--brand);display:grid;place-items:center;font:800 10.5px var(--display);color:#fff}
.menu{position:absolute;right:24px;top:58px;background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);box-shadow:0 10px 30px rgba(18,19,23,.14);min-width:250px;padding:6px;z-index:40}
.menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:3px;background:none;border:0;cursor:pointer;color:var(--ink)}
.menu a:hover,.menu button:hover{background:var(--panel-2);text-decoration:none}

main{max-width:1360px;margin:0 auto;padding:30px 24px 90px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.head .sub{margin:6px 0 0}
.crumbs{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);margin-bottom:8px}

/* ── controls ────────────────────────────────────────────── */
.btn{border:1px solid var(--rule-2);background:var(--panel);padding:7px 13px;border-radius:4px;cursor:pointer;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--ink)}
.btn:hover{border-color:var(--ink);text-decoration:none}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
/* On the sign-in page the one button is the client's, in the client's colour. Scoped to the
   gate so a brand colour never restyles the whole admin. */
.is-gate .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{color:var(--down)}
.btn.danger:hover{border-color:var(--down)}
.btn.ghost{border-color:transparent;background:none}
.btn.sm{padding:4px 9px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
select,input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],textarea{border:1px solid var(--rule-2);background:var(--panel);border-radius:4px;padding:8px 10px;max-width:100%;color:var(--ink)}
textarea{width:100%;min-height:96px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}

/* ── panels ──────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.card-b{padding:18px}
.card + .card{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid > .card + .card,.conn > .card + .card{margin-top:0}
.empty{padding:34px 18px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font:700 16px var(--display);margin-bottom:6px}
.banner{display:flex;gap:12px;align-items:baseline;padding:12px 16px;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:18px;flex-wrap:wrap}
.banner.warn{background:var(--panel)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);margin-bottom:18px}
.kpis .kpi{border:0;border-radius:0;border-right:1px solid var(--rule)}
.kpis .kpi:last-child{border-right:0}
.kpi{padding:16px 18px}
.kpi .l{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
.kpi .v{font:800 30px/1.1 var(--display);letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--muted);margin-top:4px}
.link-card{display:block;padding:18px;color:var(--ink);position:relative}
.link-card::after{content:"→";position:absolute;right:18px;top:16px;font:700 16px var(--display);color:var(--muted)}
.link-card:hover{text-decoration:none;border-color:var(--ink)}
.link-card:hover::after{color:var(--ink)}
.link-card b{font:700 16px var(--display);display:block;margin-bottom:6px}

/* segmented filter */
.chips{display:inline-flex;border:1px solid var(--rule-2);border-radius:4px;overflow:hidden}
.chip{border:0;border-right:1px solid var(--rule-2);background:var(--panel);padding:6px 11px;font-size:12px;cursor:pointer;font-weight:600;color:var(--ink-2)}
.chip:last-child{border-right:0}
.chip.on{background:var(--ink);color:var(--paper)}

/* tables */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
.t th{text-align:left;font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);padding:10px 18px;border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--panel-2)}
.t td{padding:12px 18px;border-bottom:1px solid var(--rule);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr:hover td{background:var(--panel-2)}
.primary-cell{font-weight:600}
.second{color:var(--muted);font-size:12px}
td.second,.t .second.mono{font-family:var(--mono);font-size:11.5px}

/* status: a coloured square and a word */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--ink-2)}
.pill i{width:8px;height:8px;border-radius:1px;background:var(--idle);flex:none}
.p-up i{background:var(--up)} .p-warn i{background:var(--warn)} .p-down i{background:var(--down)} .p-brand i{background:var(--brand)} .p-ink i{background:var(--ink)}
.sq{display:inline-block;width:9px;height:9px;border-radius:1px;margin-right:7px;vertical-align:baseline;background:var(--idle);flex:none}
.sq.up{background:var(--up)} .sq.warn{background:var(--warn)} .sq.down{background:var(--down)}

/* left sub-menu inside an area */
.set-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.subnav{display:grid;gap:1px;position:sticky;top:84px}
.subnav a{padding:8px 12px;border-radius:3px;color:var(--ink-2);font-weight:500}
.subnav a.on{background:var(--ink);color:var(--paper)}
.subnav a:hover{text-decoration:none;background:var(--panel)}
.subnav a.on:hover{background:var(--ink)}
.subnav .label{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);padding:0 12px 8px}

/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field.full{grid-column:1/-1}
.field > label{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
.field input,.field select,.field textarea{width:100%}
.field .help{font-size:12px;color:var(--muted)}
.form-error{color:var(--ink);font-size:13px;margin-bottom:10px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:9px 14px;font-size:13.5px;margin:0}
.kv dt{font:600 12.5px/1.9 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
.kv dd{margin:0;min-width:0;word-wrap:break-word}
.switch{position:relative;width:34px;height:18px;flex:none;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--rule-2);border-radius:3px;cursor:pointer;transition:.15s}
.switch span:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:2px;transition:.15s}
.switch input:checked + span{background:var(--ink)}
.switch input:checked + span:before{transform:translateX(16px)}
.conn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.conn .c{border:1px solid var(--rule);border-radius:var(--r);padding:18px;display:grid;gap:12px;align-content:start;background:var(--panel)}
.conn .c > .row-gap b{font:700 15px var(--display)}
.conn .c p{margin:0}
.conn .c .btn,.keybox .btn{justify-self:start}
.keybox{border-top:1px solid var(--rule);padding-top:12px;display:grid;gap:8px}

/* modal */
.modal-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(18,19,23,.45)}
.modal{background:var(--panel);border-radius:var(--r);width:min(540px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;border:1px solid var(--rule-2);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-b{padding:18px 20px;overflow:auto}
.modal-f{padding:12px 20px;border-top:1px solid var(--rule);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;background:var(--panel-2)}
.x{background:none;border:0;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;padding:0 4px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:4px;opacity:0;transition:.2s;z-index:90;font-size:13px;max-width:calc(100% - 32px);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--down);color:#fff}

@media (max-width:1100px){.g3{grid-template-columns:1fr 1fr}.conn{grid-template-columns:1fr}}
@media (max-width:760px){
  .top-in{padding:0 14px;gap:12px}
  .logo .word,.userbtn .uname{display:none}
  main{padding:20px 16px 80px}
  .g2,.g3,.form,.set-wrap{grid-template-columns:1fr}
  .subnav{position:static;display:flex;overflow-x:auto}
  .subnav .label{display:none}
  .t th,.t td{padding:10px 12px}
  .hide-sm{display:none}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-bottom:8px}
  .kpis .kpi{border-right:0;border-bottom:1px solid var(--rule)}
}
/* Busy bars: a square bar sliding under anything that's waiting on AWS, so nothing ever looks frozen. */
.boot.busy::after,.gate-form:has(.gate-submit:disabled)::after{content:"";display:block;height:4px;margin:14px auto 0;max-width:220px;border-radius:1px;
  background:linear-gradient(90deg,transparent 0,var(--ink) 0) no-repeat,var(--rule);background-size:35% 100%,100% 100%;animation:busy 1.1s ease-in-out infinite}
.gate-form:has(.gate-submit:disabled)::after{max-width:none;margin-top:12px}
@keyframes busy{0%{background-position:-40% 0,0 0}100%{background-position:140% 0,0 0}}
@media (prefers-reduced-motion:reduce){.boot.busy::after,.gate-form:has(.gate-submit:disabled)::after{animation:none;background-size:100% 100%,100% 100%;opacity:.5}}

/* module: campaign/campaign.css */
/* Fieldbook's screens, in Correll's design language rather than the stack admin's: status as
   a soft-tinted rounded pill with a round dot, issue tags as small bordered tags, filters as
   rounded chips that fill with ink when they are on. The colours are taken from Correll's own
   app.css so the two systems read as one family, and declared here as the module's own tokens
   so nothing else in the admin changes. Inline styles are refused by the CSP. */

:root {
  --cmp-up: #16A34A; --cmp-up-soft: #DCF5E4;
  --cmp-warn: #B45309; --cmp-warn-soft: #FDF0D9;
  --cmp-down: #DC2626; --cmp-down-soft: #FDE3E3;
  --cmp-idle: #64748B; --cmp-idle-soft: #EDF1F6;
  --cmp-brand: #2563EB; --cmp-brand-soft: #E6EEFE;
}
:root[data-theme="dark"] {
  --cmp-up: #34D399; --cmp-up-soft: #0E2A20;
  --cmp-warn: #FBBF24; --cmp-warn-soft: #2E2410;
  --cmp-down: #F87171; --cmp-down-soft: #321416;
  --cmp-idle: #8A97AB; --cmp-idle-soft: #1A2231;
  --cmp-brand: #4F8BFF; --cmp-brand-soft: #16244A;
}

/* Status: a pill with a dot, exactly as Correll's .pill / .pill i. */
.cmp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; white-space: nowrap;
  background: var(--cmp-idle-soft); color: var(--cmp-idle);
}
.cmp-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cmp-pill.up { background: var(--cmp-up-soft); color: var(--cmp-up); }
.cmp-pill.warn { background: var(--cmp-warn-soft); color: var(--cmp-warn); }
.cmp-pill.down { background: var(--cmp-down-soft); color: var(--cmp-down); }
.cmp-pill.brand { background: var(--cmp-brand-soft); color: var(--cmp-brand); }

/* An issue position or a label: a small bordered tag, Correll's .tag. */
.cmp-tag {
  font-size: 11px; color: var(--ink-2); border: 1px solid var(--rule-2);
  border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}

/* Several marks in a row, under a name. */
.cmp-marks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }

/* Tabs: ink fill for the active one, nothing underneath. */
.cmp-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: -6px 0 18px; }
.cmp-tabs a, .cmp-tabs button {
  padding: 5px 12px; border-radius: 99px; color: var(--ink-2); background: var(--panel);
  font: 500 12.5px system-ui, -apple-system, "Segoe UI", sans-serif;
  border: 1px solid var(--rule-2); cursor: pointer;
}
.cmp-tabs a:hover, .cmp-tabs button:hover { text-decoration: none; background: var(--panel); border-color: var(--rule); }
.cmp-tabs a.on, .cmp-tabs button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* The filter bar: the admin's own controls, wrapped. */
.cmp-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cmp-filters input[type="search"] { min-width: 220px; }
.cmp-filters select { max-width: 200px; }

/* A record and its sidebar, like Joseph's .crm-side. */
.cmp-side { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cmp-side > div > .card + .card { margin-top: 16px; }
.cmp-side > .card + .card { margin-top: 0; }
@media (max-width: 1000px) { .cmp-side { grid-template-columns: 1fr; } }

/* Rows inside a card: a label and its controls. */
.cmp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--rule); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row .cmp-lbl { font-weight: 600; font-size: 13.5px; }

/* A set of choices: the chosen one filled with ink, like the tabs. */
.cmp-choice { display: flex; gap: 4px; flex-wrap: wrap; }
.cmp-choice button {
  font: 500 12.5px system-ui, -apple-system, "Segoe UI", sans-serif; padding: 4px 11px; cursor: pointer;
  border: 1px solid var(--rule-2); border-radius: 99px; background: var(--panel); color: var(--ink-2);
}
.cmp-choice button:hover { border-color: var(--ink); }
.cmp-choice button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cmp-choice.cmp-num button { min-width: 34px; text-align: center; }

/* Households on the walk list: an address, then the people behind that door. */
.cmp-hh { border-bottom: 1px solid var(--rule); padding: 12px 18px; }
.cmp-hh:last-child { border-bottom: 0; }
.cmp-hh-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cmp-hh-addr { font: 600 13.5px system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); }
.cmp-people { list-style: none; margin: 8px 0 0; padding: 0; }
.cmp-people li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0 6px 14px; align-items: baseline; }

/* The note a warning needs to carry, without a coloured panel. */
.cmp-note { padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.cmp-note:last-child { border-bottom: 0; }
.cmp-note b { color: var(--ink); }

/* Dropping a report file in. */
.cmp-drop { border: 1px dashed var(--rule-2); border-radius: var(--r); background: var(--panel-2); padding: 28px 18px; text-align: center; }
.cmp-drop.over { border-color: var(--ink); }
.cmp-drop p { margin: 0 0 6px; }

/* A text exactly as it would arrive. */
.cmp-msg { font: 13px/1.6 var(--mono); background: var(--panel-2); border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }
.cmp-msg + .cmp-msg { margin-top: 8px; }

.cmp-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 720px) {
  .cmp-row { flex-direction: column; align-items: flex-start; }
  .cmp-people li { flex-direction: column; gap: 3px; }
}

/* The turf's map, beside its households. Sized here because the CSP refuses inline styles. */
.cmp-map { height: 460px; width: 100%; border-radius: 0 0 var(--r) var(--r); }
.cmp-map .leaflet-container { background: var(--panel-2); }
/* A door on the map is the same square as a door in the list. */
/* A pin is a dot in the same colours the pills use, with a white ring so it reads against
   roads and parkland alike. It carries its own size: a Leaflet marker is positioned rather
   than laid out, so there is nothing for it to inherit one from — which is exactly how the
   markers ended up as hairlines when the class they relied on was removed. */
.cmp-pin { display: block; }
.cmp-pin i {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cmp-idle);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  box-sizing: border-box;
}
.cmp-pin i.up { background: var(--cmp-up); }
.cmp-pin i.warn { background: var(--cmp-warn); }
.cmp-pin i.down { background: var(--cmp-down); }
.cmp-pin i.brand { background: var(--cmp-brand); }
.cmp-pin i.ink { background: var(--ink); }
/* Street-level: hollow, so it reads as "somewhere on this road" rather than "this door". */
.cmp-pin.rough i { background: #fff; border-color: var(--cmp-idle); }
@media (max-width: 1000px) { .cmp-map { height: 320px; } }

/* A row that goes somewhere, like Joseph's .crm-click. */
.cmp-click { cursor: pointer; }
/* The dashboard's two columns: what is happening, and what is waiting. */
.cmp-dash { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cmp-dash > div > .card + .card { margin-top: 16px; }
@media (max-width: 1000px) { .cmp-dash { grid-template-columns: 1fr; } }
/* A bar showing how far a turf has been walked. Square ends, ink fill, no colour. */
.cmp-bar { height: 6px; background: var(--rule); margin-top: 6px; }
.cmp-bar span { display: block; height: 100%; background: var(--ink); }

/* A smaller map, for one person's record. */
.cmp-map-sm { height: 240px; }

/* The "leave out knocked doors" switch above a planned round. */
.cmp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.cmp-check input { margin: 0; }

/* The whole-system map: tall enough to be worth looking at. */
.cmp-map-tall { height: 620px; }
@media (max-width: 1000px) { .cmp-map-tall { height: 380px; } }