/* SunbizLeads field app — one hand-written stylesheet, no framework, no CDN.
   Mobile-first: laid out for a 375px phone held in one hand, widened at
   640px+. Every tappable thing is at least 44px tall. */

/* Lead Masters brand, sampled from leadmasters.org's own theme tokens:
   indigo #110557 (--ast-global-color-0), orange #ff6600 (-1),
   green #33cc00 (-2).

   Two constraints shaped how they are used, and both are measured:

   1. #ff6600 carries WHITE text at only 2.94:1, which fails AA and is
      genuinely hard to read on a phone in Florida sun. The same orange
      carries the brand indigo at 6.05:1, so primary buttons are orange
      with indigo text -- the true brand colour, kept legible, rather than
      a muddied darker orange.
   2. Darkening the orange until white text passed produced #c14d00, which
      sits 1.35:1 from the "no website" red. The single signal a
      salesperson scans the feed for would have become the same colour as
      every button. Rejected for that reason.

   So brand colours own the CHROME (header, primary actions) and the
   signal colours are left alone: red still means no website, green still
   means pre-opening. Those carry meaning and are not decoration. */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --ink: #16202a;
  --ink-soft: #566472;
  --line: #d8dee5;
  --brand: #110557;        /* Lead Masters indigo; white on it is 17.75:1 */
  --brand-ink: #ffffff;
  --brand-edge: #ff6600;   /* the orange keyline that ties header to brand */
  --accent: #ff6600;       /* primary buttons: must read as raised in both themes */
  --accent-ink: #110557;   /* NOT white -- see note 1 above */
  --hot: #b3261e;          /* the no-website signal */
  --hot-bg: #fde7e5;
  --open: #0b6b3a;         /* pre-opening */
  --open-bg: #dcf3e5;
  --warn: #8a5a00;
  --warn-bg: #fdf0d5;
  --muted-bg: #eceff2;
  --radius: 12px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151a;
    --surface: #18202a;
    --ink: #e8edf2;
    --ink-soft: #9aa8b6;
    --line: #2b3742;
    /* The brand indigo is 1.03:1 against this background -- a header in it
       would simply disappear. Lifted until the bar is visible as a bar. */
    --brand: #1d0b82;
    --brand-edge: #ff6600;
    --accent: #ff7a1a;
    --accent-ink: #1a0838;
    --hot: #ff8a80;
    --hot-bg: #3a1c1a;
    --open: #7ee2ab;
    --open-bg: #12331f;
    --warn: #ffd08a;
    --warn-bg: #3a2f14;
    --muted-bg: #222c36;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  padding: 12px 12px 48px;
  max-width: 780px;
  margin: 0 auto;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* WRAPS on purpose. The bar carries six targets now (Diary, Messages,
     Ask, Query, Sign out and the brand) and they do not fit across a
     375px phone: without this the whole PAGE scrolled sideways, which is
     the one thing a one-handed screen must never do. A second row costs
     44px; a horizontal scrollbar costs the layout. */
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 10px calc(10px + env(safe-area-inset-right, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(10px + env(safe-area-inset-left, 0px));
  background: var(--brand);
  color: var(--brand-ink);
  /* The orange keyline is what makes the bar read as Lead Masters rather
     than as a generic navy header. It sits under the bar so it survives
     the wrap to a second row. */
  box-shadow: inset 0 -3px 0 var(--brand-edge);
}
.brand {
  color: var(--brand-ink);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.brand-full { display: none; }        /* widened back at 480px, below */
/* Half the wordmark in orange, as on leadmasters.org. Colour alone never
   carries meaning here -- it is the same text either way -- so this is
   safe for anyone who cannot distinguish the two. */
.brand-accent { color: var(--brand-edge); }
.topbar-right {
  /* An even grid, not ragged flex-wrap. Every nav target is the same width
     and lines up in a tidy block: on a phone the labels vary from "Ask" to
     "On the map", and left to size themselves they wrapped into an uneven
     staircase. width:100% drops the whole block below the wordmark so the
     brand keeps its own line. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}
/* Let the Sign-out form hand its button straight to the grid, so it is one
   more equal cell rather than a wrapper sized to its content. */
.topbar-right form.inline { display: contents; }
.topbar .btn-quiet {
  background: transparent;
  color: var(--brand-ink);
  border-color: rgba(255, 255, 255, 0.45);
  width: 100%;
  padding: 10px 8px;
  font-size: 0.9rem;
}
.topbar .chip-on { background: var(--brand-ink); color: var(--brand); }
.inline { display: inline; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-block { width: 100%; }
.btn-disabled, .btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn-link { text-decoration: underline; }

/* ---------- panels / cards ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.panel > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::after { content: "▾"; margin-left: auto; color: var(--ink-soft); }
.panel[open] > summary::after { content: "▴"; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.cards { padding: 0 12px 12px; }
.card h3 { margin: 0 0 6px; font-size: 1rem; }

/* ---------- source cards ---------- */
.src-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}
.src.is-stale { border-color: var(--warn); }
.state {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.state-done { color: var(--open); }
.state-error { color: var(--hot); }
.state-running, .state-queued { color: var(--warn); }
.src-error {
  margin: 0 0 8px;
  padding: 8px;
  background: var(--hot-bg);
  color: var(--hot);
  border-radius: 8px;
  font-size: 0.85rem;
  word-break: break-word;
}
.src-note { margin: 6px 0; color: var(--ink-soft); font-size: 0.85rem; }
.src-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.src-live { color: var(--ink-soft); font-size: 0.85rem; }
.btr-card { border-left: 4px solid var(--brand); }
.btr-steps { margin: 6px 0 10px; padding-left: 20px; font-size: 0.9rem; }
.btr-steps li { margin-bottom: 8px; }
.btr-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---------- filters: the checkbox builder ----------
   Ticking boxes is the primary way to work in this app, so the panel is
   open by default and its groups are visually separated: a group is an OR
   and the gap between groups is an AND. */
.panel-filters { border-color: var(--brand); }
.filters { padding: 4px 14px 14px; }
.filters input[type="text"],
.filters input[type="search"],
.filters input:not([type]),
.filters select {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.group {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 12px 0 4px;
  margin: 0;
}
.filters .group:first-of-type { border-top: 0; }
.group > legend,
.group > summary {
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.group-note {
  font-weight: 500;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.group-help { margin: 8px 2px 0; color: var(--ink-soft); font-size: 0.82rem; }
.group-help code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--muted-bg);
  padding: 1px 4px;
  border-radius: 4px;
}
.group-escape > summary {
  cursor: pointer;
  min-height: var(--tap);
  align-items: center;
  list-style: none;
}
.group-escape > summary::-webkit-details-marker { display: none; }
.group-escape > summary::after { content: "▾"; margin-left: auto; color: var(--ink-soft); }
.group-escape[open] > summary::after { content: "▴"; }
.group-escape[open] > summary { margin-bottom: 8px; }

.toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 10px 0 0;
}
.toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  margin: 0 !important;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.9rem;
  cursor: pointer;
}
.toggle input { width: 20px; height: 20px; flex: none; }
.toggle:has(input:checked) {
  border-color: var(--brand);
  background: var(--muted-bg);
  font-weight: 600;
}
/* Email is kept but demoted: nearly every address on file belongs to a
   registered agent, not the business. */
.toggle-quiet { opacity: 0.78; font-size: 0.84rem; }
.toggle-quiet:has(input:checked) { opacity: 1; }

.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.filter-actions .btn-primary { flex: 1 1 auto; }
.filter-live { margin: 8px 2px 0; min-height: 1.2em; color: var(--ink-soft); font-size: 0.82rem; }

/* ---------- search bar ----------
   Above the fold and outside the filter panel: 86% of leads have no trade
   on file, so their own name is the only handle a checkbox cannot offer.
   The input is 16px on purpose -- iOS zooms the page in on focus for
   anything smaller, which on a phone in a car is a lost second. */
.searchbar {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
.searchbar input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.searchbar .btn { flex: 0 0 auto; }

/* ---------- claim state chips ---------- */
/* The filter toggles (Upcoming/All, the claim state) are plain .btn
   buttons now -- the same control as everything else. They grow to share
   their row evenly so a group of two, three or four reads as one tidy
   segmented control, with the active one in .btn-primary orange. */
.claim-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.claim-chips .btn { flex: 1 1 90px; }

/* ---------- feed ---------- */
.meta { color: var(--ink-soft); font-size: 0.85rem; margin: 4px 2px 10px; }
.meta a { color: var(--ink); }
.empty { color: var(--ink-soft); padding: 18px 4px; }
.leads { list-style: none; margin: 0; padding: 0; }
.leads li { margin-bottom: 10px; }
.lead {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  min-height: var(--tap);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.lead-name { font-weight: 700; font-size: 1.02rem; }
.lead-addr { font-size: 0.92rem; }
/* ZIP gets its own weight: it is how a route gets planned, and it is the
   field people asked to stop having to dig out of an address string. */
.lead-where { font-size: 0.9rem; }
.lead-zip {
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}
.lead-owner { font-size: 0.9rem; }
.lead-meta { color: var(--ink-soft); font-size: 0.84rem; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--muted-bg);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* The sales signal: no website means nobody has sold them one yet. */
.badge-hot {
  background: var(--hot-bg);
  color: var(--hot);
  border: 1px solid var(--hot);
  text-transform: uppercase;
}
.badge-open { background: var(--open-bg); color: var(--open); }
.badge-dead { background: var(--hot-bg); color: var(--hot); }
.badge-muted { background: transparent; border: 1px dashed var(--line); font-weight: 500; }
.chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--muted-bg);
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
}
.chip-on { background: var(--accent); color: var(--accent-ink); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-error { background: var(--hot-bg); color: var(--hot); }
/* The live result count. Defined after .chip so it actually wins, and
   dimmed while a fresh count is in flight so a stale number never reads
   as a current one. */
.chip-count { background: var(--accent); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.chip-count.is-stale { opacity: 0.4; }
[data-live-count].is-stale { opacity: 0.55; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.pager-page { color: var(--ink-soft); font-size: 0.88rem; }

/* ---------- claiming, status, appointments ----------
   Everything here is thumb-sized (>= 44px) and full-width where it can be:
   this is used standing next to a car, not at a desk. */
.lead-row { display: flex; flex-direction: column; }
.lead-row .lead { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.lead-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}
.btn-claim {
  min-height: var(--tap);
  margin-left: auto;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.claim-card { display: flex; flex-direction: column; gap: 10px; }
.claim-state { margin: 0; }
.assign-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assign-form select {
  flex: 1 1 140px;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

/* Two columns of big targets on a 375px phone; three when there is room. */
.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 14px;
}
.btn-status { min-height: 52px; width: 100%; }
.btn-status.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.note-form, .appt-form, .message-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.note-form label, .appt-form label, .message-form label {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.note-form textarea, .message-form textarea,
.appt-form input, .appt-form select, .message-form select {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;              /* no iOS zoom-on-focus */
}
.appt-when { display: flex; flex-wrap: wrap; gap: 8px; }
.appt-when label { flex: 1 1 30%; min-width: 96px; }

.appt-list { list-style: none; margin: 0 0 16px; padding: 0; }
.appt-day {
  margin: 14px 2px 6px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.appt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.appt-name { font-weight: 700; font-size: 1.05rem; }
.appt-when-label { font-weight: 600; }
.appt-where, .appt-note, .appt-who { color: var(--ink-soft); font-size: 0.88rem; }
.appt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.history { list-style: none; margin: 0 0 16px; padding: 0; }
.history li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
}
.history-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.history-who { font-weight: 600; font-size: 0.9rem; }
.history-when { color: var(--ink-soft); font-size: 0.82rem; }
.history-note { word-break: break-word; }
.detail-share { margin: 16px 0 0; }

/* ---------- messages ---------- */
.messages { list-style: none; margin: 0 0 16px; padding: 0; }
.messages-sent { padding: 0 14px 14px; }
.message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.message.is-new { border-left: 4px solid var(--accent); }
.message-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.message-who { font-weight: 700; }
.message-when { color: var(--ink-soft); font-size: 0.82rem; }
.message-body { word-break: break-word; white-space: pre-wrap; }
.message .btn { align-self: flex-start; }

.alert-ok { background: var(--open-bg); color: var(--open); }

/* ---------- detail ---------- */
.lead-header h1 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.25; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.actions .btn { flex: 1 1 30%; }
.section-title { font-size: 1.05rem; margin: 20px 2px 10px; display: flex;
                 align-items: center; gap: 8px; }
.facts { display: grid; grid-template-columns: 1fr; gap: 2px 12px; margin: 0; }
.facts dt { color: var(--ink-soft); font-size: 0.78rem; text-transform: uppercase;
            letter-spacing: 0.03em; margin-top: 10px; }
.facts dd { margin: 0; word-break: break-word; }
.record.is-ambiguous { border-color: var(--warn); border-left-width: 4px; }
.record-match { margin: 0 0 8px; color: var(--ink-soft); font-size: 0.82rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

/* ---------- alerts ---------- */
.alert { padding: 12px 14px; border-radius: var(--radius); margin: 0 0 12px; font-size: 0.92rem; }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.alert-error { background: var(--hot-bg); color: var(--hot); }

/* ---------- login ---------- */
.login-card { max-width: 380px; margin: 40px auto; }
.login-card h1 { margin-top: 0; font-size: 1.3rem; }
.login-card label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 0.9rem; }
.login-card input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.login-card .btn { margin-top: 18px; }

/* ---------- query console ---------- */
.views-list { list-style: none; margin: 0; padding: 4px 14px 14px; }
.view-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.view-row:last-child { border-bottom: 0; }
.view-row.is-active { background: var(--muted-bg); margin: 0 -14px; padding: 10px 14px; }
.view-info p { margin: 2px 0 0; }
.sql-box {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.92rem;
  resize: vertical;
}
.table-scroll { overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--line);
                border-radius: var(--radius); }
table.results { border-collapse: collapse; width: 100%; font-size: 0.86rem; white-space: nowrap; }
table.results th, table.results td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
table.results th {
  background: var(--muted-bg);
  color: var(--ink-soft);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
}
table.results tbody tr:last-child td { border-bottom: 0; }

@media (min-width: 480px) {
  .brand-short { display: none; }
  .brand-full { display: inline; }
  .topbar-right { grid-template-columns: repeat(4, 1fr); }
  .topbar .btn-quiet { padding: 10px 14px; font-size: 1rem; }
}

@media (min-width: 640px) {
  main { padding: 20px 20px 60px; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cards .card { margin-bottom: 0; }
  .btr-card { grid-column: 1 / -1; }
  .facts { grid-template-columns: 180px 1fr; }
  .facts dt { margin-top: 6px; }
  .facts dd { margin-top: 6px; }
  .status-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- People (admin: add / remove salespeople) ---------------------- */

/* Destructive actions never share the brand orange. Orange means "the
   thing to press"; deleting a colleague's login is not that. */
.btn-danger {
  background: var(--hot-bg);
  color: var(--hot);
  border-color: var(--hot);
}
.btn-danger:hover { background: var(--hot); color: #fff; }

.people-actions {
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
/* Both destructive and credential-setting controls stay folded away until
   asked for: on a 375px row, three open forms per person is unusable, and
   a Delete button sitting permanently under a thumb is an accident. */
.people-actions details { width: 100%; }
.people-actions summary {
  list-style: none;
  display: inline-flex;
  cursor: pointer;
}
.people-actions summary::-webkit-details-marker { display: none; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.stack input {
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;          /* 16px or iOS zooms the page on focus */
  width: 100%;
}
details.danger .stack { border-left: 3px solid var(--hot); padding-left: 10px; }

.small { font-size: 0.86rem; color: var(--ink-soft); margin: 8px 2px; }


/* ---- small inline button (replaces the last of the text links) -------- */
/* The interface is buttons, never bare underlined text: a link mid-sentence
   is easy to miss with a thumb and reads inconsistently next to real
   controls. These are full .btn controls, just scaled to sit in a run of
   copy or a tight row. */
.btn-sm {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.9rem;
  border-radius: 9px;
}
.crumb { margin: 0 0 12px; }

/* ---- System page: label/value rows ---------------------------------- */
.kv { list-style: none; margin: 0 0 16px; padding: 0; }
.kv li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.kv li span { color: var(--ink-soft); }
.kv li strong { text-align: right; }
/* A row that needs acting on, not just reading. */
.kv li.is-bad { border-color: var(--hot); background: var(--hot-bg); }
.kv li.is-bad strong, .kv li.is-bad span { color: var(--hot); }
/* A copyable command block on the System page. Scrolls rather than
   wrapping mid-command, which would make it wrong to paste. */
.mono-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--muted-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0 0 16px;
}