/* ==========================================================================
   Votcen County Admin — panel styles
   Votcen's own palette and type system (Sora display + Inter text), applied to
   a working tool rather than a marketing page: dense tables, quiet chrome,
   one accent that only ever means "act".
   ========================================================================== */

:root {
  --navy:      #0e2342;
  --navy-2:    #11294b;
  --navy-3:    #1b3a63;
  --gold:      #f5b733;
  --blue:      #3d7fd1;
  --green:     #6cae3e;
  --orange:    #f0821e;
  --pink:      #e83a8c;

  --ink:       #16202f;
  --ink-2:     #44536a;
  --ink-3:     #6c7a90;
  --line:      #dfe4ec;
  --line-2:    #eef1f6;
  --bg:        #f4f6fa;
  --card:      #ffffff;

  --ok-bg:     #eaf6e4;  --ok-ink:   #3c6b1e;
  --warn-bg:   #fdf1dc;  --warn-ink: #8a5a08;
  --bad-bg:    #fdeaea;  --bad-ink:  #9c2b2b;
  --info-bg:   #e9f1fb;  --info-ink: #24568f;

  --r:    10px;
  --r-sm: 7px;
  --shadow:    0 1px 2px rgba(14,35,66,.06), 0 6px 20px rgba(14,35,66,.07);
  --shadow-lg: 0 12px 50px rgba(14,35,66,.22);
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Sora', var(--sans);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; letter-spacing: -.015em; margin: 0; }
a { color: var(--blue); }
[hidden] { display: none !important; }   /* loses to flex/grid without this */

/* ── shell ──────────────────────────────────────────────────────────────── */

.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }

.side {
  background: var(--navy); color: #cfd9e8;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.brand svg { flex: none; }
.brand b { font-family: var(--disp); font-size: 16px; letter-spacing: -.01em; display: block; }
.brand span { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
/* The sidebar is navy; the sign-in card is white. Colour by context, or the
   wordmark disappears on one of them. */
.side .brand b    { color: #fff; }
.side .brand span { color: #8fa3bf; }
.gate-card .brand b    { color: var(--navy); }
.gate-card .brand span { color: var(--ink-3); }

.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: var(--r-sm);
  color: #cfd9e8; font: 500 14px/1 var(--sans); text-align: left;
  padding: 10px 11px; cursor: pointer;
}
.nav button:hover  { background: rgba(255,255,255,.07); color: #fff; }
.nav button.on     { background: var(--navy-3); color: #fff; }
.nav button.on svg { color: var(--gold); }
.nav svg { flex: none; opacity: .85; }
.nav .count { margin-left: auto; font-size: 11.5px; color: #8fa3bf; font-variant-numeric: tabular-nums; }

.side-foot { margin-top: auto; padding: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.whoami { font-size: 13px; color: #fff; font-weight: 600; }
.whoami + div { font-size: 12px; color: #8fa3bf; margin-top: 2px; word-break: break-all; }
.side-foot .row { display: flex; gap: 8px; margin-top: 10px; }
.side-foot .row button {
  flex: 1; background: rgba(255,255,255,.08); border: 0; color: #cfd9e8;
  border-radius: var(--r-sm); padding: 7px; font: 500 12.5px var(--sans); cursor: pointer;
}
.side-foot .row button:hover { background: rgba(255,255,255,.16); color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 16px 26px; display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 19px; }
.topbar .sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.topbar .spacer { margin-left: auto; }
.wrap { padding: 22px 26px 80px; max-width: 1280px; width: 100%; }

/* ── primitives ─────────────────────────────────────────────────────────── */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card-h {
  padding: 14px 18px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-h h2 { font-size: 15px; }
.card-h .sub { font-size: 12.5px; color: var(--ink-3); }
.card-b { padding: 18px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--r-sm); padding: 9px 14px;
  font: 600 13.5px var(--sans); cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: #c3ccdb; background: #fbfcfe; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--navy-2); }
.btn.gold    { background: var(--gold); border-color: var(--gold); color: #3a2a04; }
.btn.gold:hover:not(:disabled) { filter: brightness(1.05); }
.btn.danger  { color: var(--bad-ink); border-color: #f0c7c7; background: #fff8f8; }
.btn.danger:hover:not(:disabled) { background: var(--bad-bg); }
.btn.sm { padding: 6px 10px; font-size: 12.5px; }
.btn.ghost { border-color: transparent; background: none; }
.btn.ghost:hover:not(:disabled) { background: var(--line-2); border-color: transparent; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font: 600 11.5px var(--sans); letter-spacing: .01em; white-space: nowrap;
}
.pill.ok   { background: var(--ok-bg);   color: var(--ok-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.bad  { background: var(--bad-bg);  color: var(--bad-ink); }
.pill.info { background: var(--info-bg); color: var(--info-ink); }
.pill.mute { background: var(--line-2);  color: var(--ink-2); }

label.f { display: block; margin-bottom: 14px; }
label.f > span {
  display: block; font: 600 12.5px var(--sans); color: var(--ink-2);
  margin-bottom: 5px; letter-spacing: .005em;
}
label.f .hint { font-weight: 400; color: var(--ink-3); }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=url], input[type=date], input[type=time], input[type=search],
select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; font: 400 14px var(--sans); color: var(--ink);
  background: #fff; -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c7a90' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(61,127,209,.16);
}
input:disabled, textarea:disabled { background: var(--line-2); color: var(--ink-3); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.row-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.check { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.check input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--navy); }
.check span { font-size: 13.5px; }
.check small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }

table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th {
  text-align: left; font: 600 11.5px var(--sans); letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.t td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.t tbody tr:hover { background: #fafbfd; }
table.t td.right, table.t th.right { text-align: right; }
table.t .nowrap { white-space: nowrap; }

.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty svg { opacity: .45; margin-bottom: 10px; }
.empty p { margin: 0 0 4px; font-size: 14px; }
.empty .sm { font-size: 13px; }

.spin {
  width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite;
}
.btn:not(.primary):not(.gold) .spin { border-color: rgba(22,32,47,.25); border-top-color: var(--ink); }
@keyframes sp { to { transform: rotate(360deg); } }
.loading { padding: 40px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

.note {
  border-radius: var(--r-sm); padding: 11px 13px; font-size: 13px; line-height: 1.5;
  border: 1px solid transparent;
}
.note.info { background: var(--info-bg); color: var(--info-ink); border-color: #cfe0f4; }
.note.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: #f2ddb4; }
.note.bad  { background: var(--bad-bg);  color: var(--bad-ink);  border-color: #f2c9c9; }
.note.ok   { background: var(--ok-bg);   color: var(--ok-ink);   border-color: #cde5bd; }
.note b { font-weight: 600; }

/* ── drawer + modal ─────────────────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0; background: rgba(14,35,66,.45);
  z-index: 60; display: flex; justify-content: flex-end;
  animation: fade .16s ease;
}
.scrim.mid { align-items: center; justify-content: center; padding: 20px; }
@keyframes fade { from { opacity: 0; } }

.drawer {
  background: var(--card); width: min(560px, 100%); height: 100%;
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
  animation: slide .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes slide { from { transform: translateX(28px); opacity: .6; } }
.modal {
  background: var(--card); width: min(680px, 100%); max-height: 90vh;
  border-radius: var(--r); display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); animation: pop .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes pop { from { transform: translateY(10px) scale(.99); opacity: .7; } }

.d-h {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 12px;
}
.d-h h3 { font-size: 16px; }
.d-h .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.d-h .x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--ink-3); padding: 4px; border-radius: 6px; line-height: 0;
}
.d-h .x:hover { background: var(--line-2); color: var(--ink); }
.d-b { padding: 20px; overflow-y: auto; flex: 1; }
.d-f {
  padding: 14px 20px; border-top: 1px solid var(--line); background: #fbfcfe;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.d-f .spacer { margin-left: auto; }

/* ── toast ──────────────────────────────────────────────────────────────── */

.toasts {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: min(560px, calc(100% - 32px));
}
.toast {
  background: var(--navy); color: #fff; border-radius: var(--r-sm);
  padding: 11px 15px; font-size: 13.5px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 9px; animation: up .18s ease;
  pointer-events: auto; max-width: 100%;
}
.toast.bad { background: #8d2323; }
.toast.ok svg { color: var(--green); }
@keyframes up { from { transform: translateY(8px); opacity: 0; } }

/* ── county picker ──────────────────────────────────────────────────────── */

.county-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.county-card {
  text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 14px; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 3px;
}
.county-card:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.county-card b { font-family: var(--disp); font-size: 14.5px; }
.county-card .meta { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.county-card .tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }

/* ── tabs ───────────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 13px; font: 600 13.5px var(--sans); color: var(--ink-3); cursor: pointer;
}
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--navy); border-bottom-color: var(--gold); }

/* ── candidate cards ────────────────────────────────────────────────────── */

.cand-list { display: flex; flex-direction: column; gap: 10px; }
.cand {
  display: flex; gap: 14px; padding: 14px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
}
.cand:hover { border-color: #c3ccdb; }
.cand .ph {
  width: 62px; height: 62px; border-radius: var(--r-sm); flex: none;
  object-fit: cover; background: var(--line-2); border: 1px solid var(--line);
}
.cand .ph.none {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font: 600 20px var(--disp);
}
.cand .who b { font-family: var(--disp); font-size: 15px; }
.cand .who .office { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.cand .who .bio {
  font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cand .acts { margin-left: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.party-D { background: #e4edfa; color: #1e4f8f; }
.party-R { background: #fbe6e6; color: #932424; }
.party-O { background: var(--line-2); color: var(--ink-2); }

/* photo upload */
.ph-edit { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.ph-edit img, .ph-edit .box {
  width: 104px; height: 104px; border-radius: var(--r-sm); object-fit: cover;
  border: 1px solid var(--line); background: var(--line-2); flex: none;
}
.ph-edit .box { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 12px; }
.drop {
  border: 1.5px dashed var(--line); border-radius: var(--r-sm); padding: 14px;
  text-align: center; font-size: 12.5px; color: var(--ink-3); cursor: pointer; flex: 1;
}
.drop:hover, .drop.over { border-color: var(--blue); background: var(--info-bg); color: var(--info-ink); }

/* ── audit ──────────────────────────────────────────────────────────────── */

.log { display: flex; flex-direction: column; }
.log-row {
  display: grid; grid-template-columns: 148px 1fr auto;
  gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); align-items: start;
}
.log-row:hover { background: #fafbfd; }
.log-row .when { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log-row .what { font-size: 13.5px; }
.log-row .who  { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.diff {
  margin-top: 9px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  overflow: hidden; font-size: 12.5px;
}
.diff div { display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid var(--line-2); }
.diff div:last-child { border-bottom: 0; }
.diff dt { padding: 7px 10px; background: #fafbfd; font-weight: 600; color: var(--ink-2); margin: 0; }
.diff dd { padding: 7px 10px; margin: 0; }
.diff .was { color: var(--bad-ink); text-decoration: line-through; opacity: .8; }
.diff .arr { color: var(--ink-3); padding: 0 6px; }
.diff .now { color: var(--ok-ink); font-weight: 500; }

/* ── standalone screens (sign in, set password) ─────────────────────────── */

.gate {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(61,127,209,.22), transparent 60%),
    radial-gradient(700px 480px at 105% 110%, rgba(245,183,51,.16), transparent 62%),
    var(--navy);
}
.gate-card {
  width: min(420px, 100%); background: var(--card);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 30px;
}
.gate-card .brand { border: 0; padding: 0 0 20px; }
.gate-card h1 { font-size: 20px; margin-bottom: 5px; }
.gate-card .lede { font-size: 13.5px; color: var(--ink-3); margin: 0 0 20px; }
.gate-card .btn { width: 100%; padding: 11px; }
.gate-foot { margin-top: 16px; text-align: center; font-size: 13px; }
.gate-foot button { background: none; border: 0; color: var(--blue); cursor: pointer; font: inherit; }

.meter { height: 4px; border-radius: 2px; background: var(--line-2); margin-top: 7px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .2s, background .2s; }
.meter.ok i { background: var(--green); }

.cred {
  background: var(--navy); color: #fff; border-radius: var(--r-sm);
  padding: 13px 15px; margin: 12px 0; word-break: break-all;
}
.cred .k { font-size: 11.5px; color: #8fa3bf; text-transform: uppercase; letter-spacing: .06em; }
.cred .v { font: 600 15px var(--disp); margin: 3px 0 9px; letter-spacing: .01em; }
.cred .v.link { font-size: 12.5px; font-family: var(--sans); font-weight: 400; line-height: 1.45; }

/* ── responsive: the panel gets used on an iPad in the field ────────────── */

@media (max-width: 1100px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: 8px; padding: 10px 14px;
  }
  .brand { border: 0; padding: 0; margin-right: auto; }
  .nav {
    order: 3; width: 100%; flex-direction: row; flex-wrap: wrap;
    padding: 8px 0 2px; gap: 4px;
  }
  .nav button { width: auto; padding: 8px 11px; }
  .nav .count { margin-left: 6px; }
  .side-foot { margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 10px; }
  .side-foot > div:not(.row) { display: none; }
  .side-foot .row { margin: 0; }
  .wrap { padding: 18px; }
  .topbar { padding: 14px 18px; }
}
@media (max-width: 720px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .log-row { grid-template-columns: 1fr; gap: 6px; }
  .log-row .when { order: 2; }
  .cand { flex-wrap: wrap; }
  .cand .acts { margin-left: 0; flex-direction: row; width: 100%; }
  .topbar { flex-wrap: wrap; }
  .wrap { padding: 14px; }
  /* Drop the middle columns on a phone, never the last one — that is where the
     Edit button lives, and hiding it makes every row unopenable. */
  table.t th:nth-child(n+3):not(:last-child),
  table.t td:nth-child(n+3):not(:last-child) { display: none; }
  table.t th, table.t td { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Inline controls
   The panel exists to change things, so the frequent changes happen on the row
   itself. Two rules from the house interaction notes shape these:
     · a state is never carried by colour alone — the switch says the word
       "Active" or "Off" and moves its thumb, so it survives a colour-blind
       reader and a black-and-white print
     · the "you can edit this" signal is visible at rest, never on hover —
       this gets used on an iPad, where there is no hover
   ========================================================================== */

/* ── switch ─────────────────────────────────────────────────────────────── */

.sw {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: 600 12px var(--sans); color: var(--ink-3); white-space: nowrap;
}
.sw .track {
  position: relative; width: 34px; height: 20px; flex: none;
  border-radius: 999px; background: #c8cfdb;
  transition: background .15s;
}
.sw .track i {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s;
  box-shadow: 0 1px 2px rgba(14,35,66,.3);
}
.sw[aria-checked="true"] { color: var(--ok-ink); }
.sw[aria-checked="true"] .track { background: var(--green); }
.sw[aria-checked="true"] .track i { transform: translateX(14px); }
.sw:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.sw:disabled { opacity: .55; cursor: progress; }
.sw .track i.busy {
  border: 2px solid rgba(14,35,66,.25); border-top-color: var(--navy);
  background: #fff; animation: sp .7s linear infinite;
}
.sw.off-look { color: var(--ink-3); }

/* ── inline text edit ───────────────────────────────────────────────────── */

.ie { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; }
.ie > b, .ie > span.val { min-width: 0; overflow-wrap: anywhere; }
.ie .pen {
  flex: none; background: none; border: 0; padding: 2px; cursor: pointer;
  color: var(--ink-3); line-height: 0; border-radius: 5px;
  /* Always visible. A pencil that only appears on hover does not exist on a
     tablet, which is where this panel actually gets used. */
}
.ie .pen:hover { background: var(--line-2); color: var(--navy); }
.ie .pen:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.ie-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ie-form input { min-width: 180px; flex: 1; padding: 6px 9px; font-size: 13.5px; }
.ie-form .btn { padding: 6px 10px; font-size: 12.5px; }

/* ── info popover ───────────────────────────────────────────────────────── */

/* NOT .info — that is already a modifier on .pill and .note, and a bare .info
   here silently stripped the padding off every .note.info in the panel. */
.ibtn {
  background: none; border: 0; padding: 0 0 0 4px; cursor: pointer;
  color: var(--ink-3); line-height: 0; vertical-align: middle; border-radius: 50%;
}
.ibtn:hover, .ibtn[aria-expanded="true"] { color: var(--blue); }
.ibtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.pop {
  position: fixed; z-index: 95; width: min(320px, calc(100vw - 28px));
  background: var(--navy); color: #e4ebf5; border-radius: var(--r-sm);
  padding: 12px 14px; font: 400 12.5px/1.55 var(--sans);
  box-shadow: var(--shadow-lg); animation: fade .12s ease;
}
.pop b { color: #fff; font-weight: 600; }
.pop ul { margin: 7px 0 0; padding-left: 16px; }
.pop li { margin-bottom: 3px; }
.pop code {
  background: rgba(255,255,255,.14); padding: 1px 5px; border-radius: 4px;
  font-family: var(--sans); font-size: 12px;
}
.pop .x {
  float: right; background: none; border: 0; color: #8fa3bf; cursor: pointer;
  padding: 0 0 4px 6px; line-height: 1;
}

/* ── row quick actions ──────────────────────────────────────────────────── */

.qa { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
tr.is-off td { background: #fcfcfd; }
tr.is-off td .ie > b { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }

.cand.is-off { opacity: .65; }
.cand .ph-swap {
  display: block; margin-top: 6px; width: 62px;
  font: 600 11px var(--sans); padding: 4px 0;
}

@media (max-width: 720px) {
  /* The state label stays — it is the second channel that makes the switch
     readable without colour. The Kind column is what gives way instead. */
  .ie-form input { min-width: 120px; }
}

/* ==========================================================================
   Touch targets
   Measured on the live panel: the pencil was 17×17, the info button 18×14 and
   a dialog close 26×26 — all far under the 44px a fingertip needs, on a tool
   whose primary viewport is an iPad.

   The icons stay the size they are. Only the hit area grows, via a transparent
   ::after that is absolutely positioned so nothing reflows, and only where the
   pointer is actually coarse — on a mouse a 17px icon is a fine target and a
   44px invisible overlay would start stealing clicks from its neighbours.
   ========================================================================== */

.pen, .ibtn, .d-h .x, .pop .x { position: relative; }

/* Not gated on `pointer: coarse`. That reads as the tidy answer, but it cannot
   be verified in emulation and it makes a touchscreen laptop a coin flip. The
   overlay costs nothing on a mouse — it changes no layout — so it is always on. */
.pen::after, .ibtn::after, .d-h .x::after, .pop .x::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 40px; height: 40px; transform: translate(-50%, -50%);
}

/* Below 1100px the panel is already in its tablet layout, which is where a
   finger is doing the tapping. Height is keyed to that, not to pointer type. */
@media (max-width: 1100px) {
  .btn.sm, .sw { min-height: 44px; }
  .sw .track { width: 40px; height: 24px; }
  .sw .track i { width: 20px; height: 20px; }
  .sw[aria-checked="true"] .track i { transform: translateX(16px); }
  .check input { width: 22px; height: 22px; }
  .tabs button { padding: 13px 15px; }
  .btn { min-height: 44px; }
  .nav button { min-height: 44px; }
  .side-foot .row button { min-height: 44px; }
  .check { min-height: 44px; align-items: center; }
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=url], input[type=date], input[type=time], input[type=search],
  select, textarea { min-height: 44px; }
}

/* "Change" needed 71px and had 62, so it clipped its own label. */
.cand .ph-swap { width: auto; min-width: 62px; max-width: 104px; padding-left: 6px; padding-right: 6px; }

/* A county card is two destinations: edit it here, or go and look at the page
   the public sees. A link cannot live inside a button, so the card is a box
   holding both. */
.county-card { padding: 0; display: block; cursor: default; }
.county-card:hover { border-color: var(--line); box-shadow: none; }
.county-card:focus-within { border-color: var(--blue); box-shadow: var(--shadow); }
.cc-main {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  background: none; border: 0; border-radius: var(--r) var(--r) 0 0;
  padding: 13px 14px 11px; text-align: left; font: inherit; cursor: pointer;
}
.cc-main:hover { background: #fbfcfe; }
.cc-main b { font-family: var(--disp); font-size: 14.5px; }
.cc-main .meta { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cc-main .tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.cc-ext {
  display: block; padding: 8px 14px; border-top: 1px solid var(--line-2);
  font: 600 12px var(--sans); color: var(--ink-3); text-decoration: none;
}
.cc-ext:hover { background: var(--info-bg); color: var(--info-ink); }
@media (max-width: 1100px) { .cc-ext { padding: 13px 14px; } }


/* ── coverage ──────────────────────────────────────────────────────────── */
.cv-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.cv-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 2px; }
.cv-tile b { font: 700 26px var(--sans); color: var(--ink); line-height: 1.1; }
.cv-tile b i { font-style: normal; font-weight: 500; font-size: 15px; color: var(--ink-3); }
.cv-tile span { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.cv-tile small { font-size: 12px; color: var(--ink-3); }
.cv-tile.ok   { border-color: #cfe7d8; background: var(--ok-bg); }
.cv-tile.warn { border-color: #f2ddb4; background: var(--warn-bg); }
.cv-tile.bad  { border-color: #f0c7c7; background: var(--bad-bg); }
.cv-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cv-bar input[type=search] { width: 280px; max-width: 100%; margin-left: auto; }
.cv-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.cv-tabs button { padding: 9px 16px; border: 0; background: none; font: 600 13px var(--sans); color: var(--ink-2); cursor: pointer; min-height: 40px; }
.cv-tabs button.on { background: var(--navy); color: #fff; }
.cv-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cv-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 13px; font: 600 12.5px var(--sans); color: var(--ink-2); cursor: pointer; min-height: 38px; }
.cv-chip b { color: var(--ink-3); font-weight: 600; margin-left: 3px; }
.cv-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cv-chip.on b { color: #cdd6e6; }
.cv-sel { margin-left: auto; font-size: 13px; color: var(--ink-2); display: inline-flex; gap: 8px; align-items: center; }
.cv-ed { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.cv-ed:last-child { margin-bottom: 0; }
.cv-t .sub-n, .sub-n { font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.cv-t td .sub-n { display: block; margin-left: 0; }
.cv-cust { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font: 600 12px var(--sans); color: var(--ink-3); cursor: pointer; min-height: 36px; }
.cv-cust.on { background: var(--gold); border-color: var(--gold); color: #3a2a04; }
.cv-t input[type=checkbox] { width: 18px; height: 18px; }
@media (max-width: 1100px) {
  .cv-tiles { grid-template-columns: repeat(2, 1fr); }
  .cv-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ── visitors ──────────────────────────────────────────────────────────── */
.vs-scroll { overflow-x: auto; }
.vs-busy { opacity: .55; pointer-events: none; transition: opacity .15s; }
.vs-chk { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); min-height: 40px; cursor: pointer; margin-left: auto; }
.vs-chk input { width: 18px; height: 18px; }
.vs-n { margin-left: 4px; font-weight: 600; opacity: .7; }
.vs-t td small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.vs-t td b + small { margin-top: 0; }
.vs-ip { font-variant-numeric: tabular-nums; font-weight: 600; }
.vs-dim { color: var(--ink-3); }
.vs-botrow td { color: var(--ink-3); }
.vs-more { padding: 12px 14px; font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--line-2); }
.vs-how { margin-top: 16px; font-size: 12.5px; line-height: 1.55; }
#vs-tiles { margin-top: 2px; }
@media (max-width: 1100px) { .vs-chk { margin-left: 0; } }