/* request_detail.css — Request detail page styles
   USWDS-inspired tokens; self-contained, no base.html dependency. */

:root {
  --navy: #1a4480;
  --blue: #005ea2;
  --green: #2e7d32;
  --amber: #b45309;
  --red: #b91c1c;
  --bg: #eef1f5;
  --ink: #1b1b1b;
  --text: #3d4551;
  --muted: #71767a;
  --border: #dfe1e2;
  --paper: #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(20,40,80,.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* ── page layout ───────────────────────────────────────────── */
.page { padding: 20px 16px 60px; }

/* admin: 2-col grid (thread + right rail) */
.actionpage {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .actionpage { grid-template-columns: 1fr; }
}

/* non-admin: single col */
.singlepage {
  max-width: 680px;
  margin: 0 auto;
}

/* ── core device ────────────────────────────────────────────── */
.core {
  background: var(--paper);
  border: 1px solid #cfd6de;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-height: 500px;
  height: calc(100vh - 120px);
  /* no max-height cap: fill the viewport instead of stopping at 800px */
}
.core.admin { outline: 2px solid #b6ddb8; }

/* ── contact bar ────────────────────────────────────────────── */
.cbar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: #f7f8fa;
  flex: 0 0 auto;
  position: relative; /* establish stacking context so the (i) never paints behind a map */
  z-index: 3;
}
.cbar__pic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 36px;
}
.cbar__who { flex: 1; min-width: 0; }
.cbar__nm {
  /* routed-to jurisdiction — secondary to the request name below */
  font-weight: 600;
  color: var(--text);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cbar__lo { font-size: 11.5px; color: var(--muted); }
.cbar__info {
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}

/* ── badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: .02em;
}
.b-cat { background: #eef6ff; color: var(--blue); border: 1px solid #bcd9f5; }
.b-prog { background: #fff7ed; color: var(--amber); border: 1px solid #f3d3a3; }
.b-open { background: #eef6ff; color: var(--blue); border: 1px solid #bcd9f5; }
.b-closed { background: #f3f4f6; color: var(--muted); border: 1px solid #d1d5db; }
.b-verified { background: #e8f3ec; color: #1c6b3a; border: 1px solid #bcdcc4; }
.b-sensitive { background: #fff1f2; color: #9f1239; border: 1px solid #f5b9c4; }
.b-mod { background: #f4ecff; color: #6b21a8; border: 1px solid #d8c2f0; }
.b-internal { background: #11244a; color: #cdd7ea; border: 1px solid #1a2e57; }

/* ── request card (compact, collapsible) ────────────────────── */
.issue {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  background: #fcfdfe;
  overflow: hidden;
  max-height: 184px;
  transition: max-height .32s ease;
}
.issue__inner { padding: 11px 14px; }
.issue__top { display: flex; gap: 11px; align-items: flex-start; }
/* Report photo — sized to match the chat attachment (140×92) so it reads as the
   request's hero image; the chat first message is then just the reporter's text. */
.issue__photo {
  width: 140px;
  height: 92px;
  border-radius: 12px;
  flex: 0 0 140px;
  background: linear-gradient(135deg, #9aa7b8, #6b7a8f);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.issue__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
@media (max-width: 640px) {
  .issue__photo { width: 108px; height: 76px; flex: 0 0 108px; }
}
.issue__photo .n {
  position: absolute;
  right: 4px;
  bottom: 4px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 5px;
}
.issue__photo--empty {
  color: rgba(255,255,255,.5);
  font-size: 22px;
}
.issue__body { flex: 1; min-width: 0; }
.issue__title { font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.issue__desc {
  font-size: 12px;
  color: #555;
  margin: 2px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.issue__row { display: flex; gap: 6px; flex-wrap: wrap; }

/* clickable map thumbnail (opens the larger map + details modal) */
.issue__mapthumb {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 10px;
  border: 1px solid #c7d2de;
  overflow: hidden;
  position: relative;
  padding: 0;
  cursor: pointer;
  background: #dde6ef;
}
.issue__mapthumb .leaflet-container { width: 100%; height: 100%; background: #dde6ef; }
.issue__mapthumb .leaflet-container * { cursor: pointer; }  /* whole tile reads as one button */
.issue__mapthumb__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 500;            /* above leaflet panes within this small box */
  background: rgba(17, 36, 74, .72);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 2px 0;
}
.issue__mapthumb:hover { border-color: var(--blue); }
.issue__mapthumb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.issue__meta {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
}
.issue__full {
  margin-left: auto;       /* push "Details" to the right end of the meta line */
  color: var(--blue);
  font-weight: 700;
  font-size: 11.5px;
  text-decoration: none;
  white-space: nowrap;
}
.issue__full:hover { text-decoration: underline; }

/* collapsed strip — shown only when checkbox is checked */
.issue__strip {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text);
}
.issue__strip__thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex: 0 0 26px;
  background: linear-gradient(135deg, #9aa7b8, #6b7a8f);
  background-size: cover;
  background-position: center;
}
.issue__strip b { color: var(--ink); font-weight: 700; }

/* collapse toggle label */
.toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px;
  border-top: 1px solid var(--border);
  background: #f3f6fb;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  flex: 0 0 auto;
  user-select: none;
}
.toggle__chev { transition: transform .3s ease; }
.toggle__lbl-closed { display: none; }

/* collapse checkbox — hidden */
#issue-collapse { display: none; }

/* collapse state — CSS-only via sibling combinator */
#issue-collapse:checked ~ .core .issue { max-height: 44px; }
#issue-collapse:checked ~ .core .issue__inner { display: none; }
#issue-collapse:checked ~ .core .issue__strip { display: flex; }
#issue-collapse:checked ~ .core .toggle .toggle__chev { transform: rotate(180deg); }
#issue-collapse:checked ~ .core .toggle .toggle__lbl-open { display: none; }
#issue-collapse:checked ~ .core .toggle .toggle__lbl-closed { display: inline; }

/* ── scrollable thread ──────────────────────────────────────── */
.thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px 14px;
  background: #fff;
  scroll-behavior: smooth;
}

.tstamp {
  text-align: center;
  font-size: 10.5px;
  color: #9aa0a6;
  margin: 14px 0 8px;
}

/* Day separator. A request thread routinely spans days or weeks, and every
   bubble shows a clock time only — without this, four days of messages read as one
   afternoon, which is what made SR-227's ordering look scrambled. The template emits
   one per timestamped item and request_detail.js unhides the first of each day in the
   VIEWER's timezone; the [hidden] rule (higher specificity than the flex above) keeps
   the rest out of the flow. Ink #5f6570 on #fff is 6.4:1 (AA). */
.thread-daysep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 2px 8px;
  color: #5f6570;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.thread-daysep[hidden] { display: none; }
.thread-daysep::before,
.thread-daysep::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #e6e8eb;
}
.thread-daysep > span { flex: 0 0 auto; }

/* "New" unread separator at the read watermark, like the mobile thread. */
.thread-newsep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 6px;
  color: #005ea2;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.thread-newsep::before,
.thread-newsep::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #cfe3f5;
}

/* Owner per-request mute toggle. */
.mutebar { display: flex; justify-content: flex-end; padding: 4px 12px 0; }
.mutebtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
}
.mutebtn:hover { color: #1a4480; }
.mutebtn.is-muted { color: #1a4480; font-weight: 600; }
.tstamp b { color: #6b7077; }

/* ── message bubbles ────────────────────────────────────────── */
.m {
  display: flex;
  flex-direction: column;
  margin: 3px 0;
}
.m.recv { align-items: flex-start; }   /* government — left */
.m.sent { align-items: flex-end; }      /* reporter — right */
.m.sys { align-items: center; margin: 12px 0; } /* UnGovr — centered ~70% bar */

.m.held { opacity: .75; }
/* the original report: a hairline brand rule above the bubble marks it as the
   reporter's submission, reinforcing the "Reporter's submission" channel label */
.m.submission { margin-top: 6px; }
.m.submission .chan { color: var(--blue); }

.chan {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: #9aa0a6;
  margin: 0 9px 2px;
}

.bub {
  max-width: 78%;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 17px;
  line-height: 1.38;
}
/* preserve newlines in message content. Scoped to the text node so the
   template's own indentation whitespace around it isn't rendered. */
.bub-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.m.recv .bub {
  background: #e9e9eb;
  color: #000;
  border-bottom-left-radius: 6px;
}
.m.sent .bub {
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.m.held .bub {
  border: 1px dashed #9aa0a6;
}

.stat {
  font-size: 10px;
  color: #9aa0a6;
  margin: 2px 8px 6px;
}
.stat b { color: #6b7077; }

/* ── UnGovr updates — full-width bars across the whole conversation ────
   These are neither reporter (right) nor government (left): a centered ~70%-width
   band makes "this is UnGovr, not a party" unmistakable. A leading pill tags the
   source; the body carries the message. Default = amber (status / system);
   held = orange (pending moderation); done = green (forwarded); internal = navy
   (admin-only). Goes full-width on narrow screens. */
.sys .note {
  width: 70%;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff7ed;
  border: 1px solid #f4c98a;
  color: #6b4710;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.4;
}
.sys .note .note__tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: #fff;
  background: var(--amber);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.sys .note .note__body { flex: 1 1 auto; min-width: 0; }
.sys .note .note__body a { color: inherit; font-weight: 700; text-decoration: underline; }
.sys .note .note__hint {
  display: inline-block; margin-left: 6px; opacity: .75;
  font-size: 10.5px; font-style: italic;
}
/* Every bar carries its own time — before this a status change could not be
   placed in the conversation at all. Inherits the variant's ink rather than dimming
   with opacity, which would drop these below AA on the lighter bands. */
.sys .note .note__time {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: inherit;
}
/* A repeated agency message: the agency sent identical text twice. Folded to
   one quiet line instead of a second wall of boilerplate, and deliberately neutral
   rather than amber — nothing happened, so it must not read as an event. Kept on the
   page, not dropped: this is a record of what the agency actually sent.
   Ink #5f6570 on #f6f7f8 is 5.9:1 (AA). */
.sys .note.note--repeat {
  background: #f6f7f8;
  border: 1px dashed #d4d7db;
  color: #5f6570;
  font-style: italic;
}
.sys .note.note--repeat .note__link {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
}
/* held = pending moderation (orange) */
.sys .note.held { background: #fff5e6; border-color: #e7b15f; color: #7a4d00; }
.sys .note.held .note__tag { background: #b26a00; }
/* done = forwarded / submitted (green) */
.sys .note.done { background: #eaf7ec; border-color: #a9d6ae; color: #2f6b34; }
.sys .note.done .note__tag { background: var(--green); }
/* bounced = the agency's mail server rejected it. Deliberately rust rather than
   the alarm red an error would take: nothing has gone wrong with the resident's
   report, one address is dead and a human has been told. Ink #8a3d1f on #fdf0ec
   is 6.8:1, white on the #a34a24 tag is 5.9:1 (AA). */
.sys .note.bounced { background: #fdf0ec; border-color: #d9a08c; color: #8a3d1f; }
.sys .note.bounced .note__tag { background: #a34a24; }
/* the same fact on a single message's status line */
.stat.bounced { color: #8a3d1f; font-weight: 600; }
/* internal note (admin-only) — deepest navy */
.sys .note.internal { background: #11244a; border-color: #1a2e57; color: #cdd7ea; }
.sys .note.internal .note__tag { background: #2b4a86; color: #dbe6fa; }
/* narrow screens: a 70% bar is too cramped, so let it fill the conversation */
@media (max-width: 640px) { .sys .note { width: 100%; } }

/* attachments */
.att {
  display: block;
  width: 140px;
  height: 92px;
  border-radius: 12px;
  margin: 5px 0;
  background: linear-gradient(135deg, #9aa7b8, #6b7a8f);
  overflow: hidden;
}
.att img { width: 100%; height: 100%; object-fit: cover; }
.att.att--redacted {
  background: repeating-linear-gradient(45deg, #3a3a3a, #3a3a3a 7px, #2a2a2a 7px, #2a2a2a 14px);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9px;
  text-align: center;
}

/* deep-link jump highlight */
.m.jump .bub {
  box-shadow: 0 0 0 3px #ffe08a, 0 0 0 5px #f6c453;
}
.jumpflag {
  font-size: 9px;
  font-weight: 700;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 9px 2px;
}

/* ── composer (inert shell) ─────────────────────────────────── */
.composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 9px 12px;
  background: #f7f8fa;
  display: flex;
  gap: 8px;
  /* Bottom-aligned so the send button stays pinned to the last line while the
     textarea autosizes upward, like any messaging app. */
  align-items: flex-end;
}
.composer__inp {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 7px 13px;
  font-size: 12.5px;
  color: var(--muted);
  background: #fff;
  pointer-events: none;
  cursor: default;
}
.composer__send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  pointer-events: none;
  cursor: default;
  border: none;
}
.composer__send.green { background: var(--green); }

/* composer as a real (disabled) form */
textarea.composer__inp {
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  background: #eef1f5;
  pointer-events: auto;
  max-height: 104px; /* ~5 lines; JS autosize grows to here, then it scrolls */
  overflow-y: auto;
}
/* The inert-shell base above turns pointer events off. A real form needs them
   back on the BUTTON too, not only the textarea — the send button shipped
   unclickable because only the input got its override. */
form.composer .composer__send {
  pointer-events: auto;
  cursor: pointer;
}
textarea.composer__inp:disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
.composer__send:disabled { background: #b9c2cc; }
/* admin composer: direction picker above a full-width input.
   These rules lived in an inline <style> on request_detail.html, which the page
   forbids in its own header comment. The base .composer is a flex ROW, so the
   3-up direction picker and the input row sat side by side and the textarea got
   only the width the chips left over. Stack them instead: chips on their own
   line, input full width beneath. */
.core.admin .composer {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.composer__modes { display: flex; gap: 6px; }
.composer__mode {
  font-size: .8rem;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: #3d4551;
  cursor: pointer;
}
.composer__mode.is-active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.composer__row { display: flex; gap: 6px; align-items: flex-end; }
.composer__hint {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 4px 12px 9px;
  background: #f7f8fa;
}

/* government footer extras */
.foot { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 9px 12px; background: #f7f8fa; }
.foot__ro { color: var(--muted); text-align: center; font-style: italic; font-size: 12px; }
.foot__note { font-size: 10px; color: var(--muted); margin-top: 4px; text-align: center; }
.foot__note a, .rfm__row a { color: var(--blue); }
.foot__ctrls { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.chip {
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  background: #fff;
  color: var(--text);
  cursor: default;
}

/* ── admin control panel (right rail) ──────────────────────── */
.ctrl {
  /* Internal-surface (navy) theme: signal that this is a staff-only
     control surface, matching the meeting review desk and /admin/console. The
     dark palette vars are scoped to .ctrl so the conversation thread and the
     rest of the page stay light. */
  --border: #27406a;
  --text: #c2cfe0;
  --muted: #9fb3d1;
  --ink: #e8eef7;
  --navy: #2563c9;
  background: #16294a;
  border: 1px solid #27406a;
  border-radius: 14px;
  overflow: hidden;
  color: #e8eef7;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -22px rgba(8,18,40,.85);
}
.ctrl__hd {
  background: #11244a;
  color: #fff;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ctrl__shelltag {
  font-size: 9px;
  font-weight: 700;
  color: #7fa6e0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: auto;
}
.ctrl__sec {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.ctrl__sec:last-child { border-bottom: none; }
.ctrl__sec h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ctrl__note { font-size: 10.5px; color: var(--muted); margin-top: 7px; line-height: 1.4; }

/* segmented control */
.seg {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.seg button {
  flex: 1;
  border: none;
  border-right: 1px solid var(--border);
  background: #0c1830;
  padding: 6px 4px;
  font-size: 10.5px;
  color: var(--text);
  cursor: default;
}
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--amber); color: #fff; font-weight: 700; }
.seg.plain button.on { background: var(--navy); color: #fff; }

/* panel buttons */
.pbtn {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: #0c1830;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--text);
  margin-top: 6px;
  cursor: default;
}
.pbtn:first-child { margin-top: 0; }
.pbtn.green {
  border-color: #1f7a37;
  background: #1f7a37;
  color: #fff;
  font-weight: 600;
}

/* anonymity guard section */
.ctrl__guard { background: #0f2138; }
.ctrl__guard h4 { color: var(--ink); }
.ctrl__guard .guard__row { font-size: 11.5px; color: var(--text); }

/* The reporter's real address. Struck through so a staff member about to paste it
   into agency-bound text gets the signal before they read a word.
   Scoped to .ctrl__guard (0,2,0) so the panel's own link colour cannot take the
   line-through back on source order. */
.ctrl__guard .guard__row--email { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ctrl__guard .guard__email {
  text-decoration: line-through;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  word-break: break-all;
}
.ctrl__guard .guard__email:hover { color: var(--text); }

/* shell caption */
.ctrl__caption {
  padding: 8px 14px;
  font-size: 9.5px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: #0f2138;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════════
   Unified site header — the exact ungovr.org/e chrome.
   Replaces the bespoke .rd-header. The shared partials/request_app_header.html
   macro emits this markup; waffle + profile come from nav-cluster.css/.js.
   ════════════════════════════════════════════════════════════════════════════ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 16px;
}
.site-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-logo img { height: 40px; width: auto; display: block; }
/* App-name slot — larger, heavy, navy; links to the app home. */
.app-name {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.01em;
  flex-shrink: 0;
}
.app-name:hover { color: var(--blue); }
/* White-label brand block: wordmark with stacked subtitle. */
.app-brand-block { display: inline-flex; flex-direction: column; line-height: 1.2; }
.app-subtitle { font-size: .68rem; font-weight: 600; letter-spacing: .015em; color: #5c6672; white-space: nowrap; }
.brand-flag { width: 40px; height: 27px; flex: 0 0 auto; margin-right: 10px; align-self: center; border-radius: 2px; border: 1px solid rgba(0,0,0,.14); }
@media (max-width: 560px) { .brand-flag { width: 30px; height: 20px; margin-right: 7px; } }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
/* Dark contextual app shortcut: the one primary action — New request. */
.hdr-action {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--navy); color: #fff; font-weight: 700; font-size: .82rem;
  border: none; border-radius: 7px; padding: .42rem .7rem;
  text-decoration: none; white-space: nowrap;
}
.hdr-action:hover { background: #163a6e; }
.hdr-action__plus { font-size: 1.05em; line-height: 1; font-weight: 700; }
/* Sign-In button (matches base.html .header-login-btn). */
.header-login-btn {
  background: var(--blue); color: #fff; border: none;
  padding: .4rem .875rem; border-radius: 4px; cursor: pointer;
  font-size: .8rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.header-login-btn:hover { background: var(--navy); }

/* ── breadcrumb in the bar ──────────────────────────────────────
   Geo path = connected interlocking tabs (web) / arrows (mobile); the app tail
   (the SR number) hangs off a chevron `›`. Ported from base.html .header-crumb.geo
   so the Request standalone pages match Atlas exactly. */
.header-crumb { display: flex; align-items: center; min-width: 0; }
.header-crumb.geo { gap: 0; flex-wrap: nowrap; position: relative; top: 1px; flex: 0 1 auto; }
.header-crumb.geo .crumb-sep { display: none; }
.header-crumb.geo a,
.header-crumb.geo .crumb-node,
.header-crumb.geo .crumb-cur {
  font-size: .85rem; line-height: 1; text-decoration: none; white-space: nowrap;
  background: #e4eaf2; color: var(--text);
  padding: .42rem .7rem .42rem 1.15rem; margin-right: -7px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
}
.header-crumb.geo a:first-child,
.header-crumb.geo .crumb-node:first-child,
.header-crumb.geo .crumb-cur:first-child {
  padding-left: .7rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}
.header-crumb.geo a:hover { background: #d6deec; color: var(--blue); text-decoration: none; }
.header-crumb.geo .crumb-cur { background: var(--navy); color: #fff; font-weight: 600; }
/* Outline the inactive tabs so their edges read against the white bar. */
.header-crumb.geo a,
.header-crumb.geo .crumb-node {
  filter: drop-shadow(.7px 0 0 #8a93a3) drop-shadow(-.7px 0 0 #8a93a3)
          drop-shadow(0 .7px 0 #8a93a3) drop-shadow(0 -.7px 0 #8a93a3);
}
/* Chevron app-tail — the SR number for request detail. */
.header-crumb.geo .tail { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.header-crumb.geo .tail .crumb-sep { display: inline; color: #c0ccd8; font-size: .9em; }
.header-crumb.geo .tail a { all: unset; cursor: pointer; color: var(--muted); white-space: nowrap; }
.header-crumb.geo .tail a:hover { color: var(--blue); }
.header-crumb.geo .tail .crumb-cur { all: unset; color: var(--navy); font-weight: 700; white-space: nowrap; }
/* Tablet & phone: the bar can't hold the app name, breadcrumb and actions on one
   row, so the breadcrumb drops to its own full-width row below — the UG mark / app
   name / New-request / waffle / profile stay pinned on the top row, and the
   breadcrumb scrolls horizontally there. Tabs give way to light arrows. */
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; row-gap: 7px; min-height: 0; padding: 8px 16px; }
  .header-actions { order: 2; }
  .header-crumb.geo {
    order: 3; flex-basis: 100%; width: 100%; top: 0;
    gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .header-crumb.geo a, .header-crumb.geo .crumb-node, .header-crumb.geo .crumb-cur {
    background: none; color: var(--muted); padding: 0; margin: 0; clip-path: none; filter: none; }
  .header-crumb.geo .crumb-cur { color: var(--navy); font-weight: 700; }
  .header-crumb.geo .crumb-sep { display: inline; color: var(--blue); margin: 0 1px; }
  .header-crumb.geo .crumb-sep::before { content: "→"; }
  /* the tail keeps its literal chevron; don't let the arrow rule swap it for → */
  .header-crumb.geo .tail { margin-left: 4px; }
  .header-crumb.geo .tail .crumb-sep { color: #c0ccd8; }
  .header-crumb.geo .tail .crumb-sep::before { content: none; }
}
@media (max-width: 560px) {
  .app-name { font-size: 1.15rem; }
  .site-logo img { height: 32px; }
  /* drop the New-request label on phones — the + icon carries it */
  .hdr-action__label { display: none; }
  .hdr-action { padding: .42rem .55rem; }
}

/* ── issue list (request.ungovr.org/issues/{slug}) — ─────────── */
.issuelist { max-width: 720px; margin: 0 auto; padding: 22px 16px 60px; }
.issuelist__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.issuelist__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.issuelist__title { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.15; margin-top: 2px; }
.issuelist__home {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  color: var(--blue); text-decoration: none; font-weight: 600; font-size: .9rem;
  border: 1px solid #bcd9f5; background: #eef6ff; border-radius: 8px; padding: 6px 11px;
  white-space: nowrap;
}
.issuelist__home:hover { background: #e0efff; }
.issuelist__sub { color: var(--muted); font-size: .85rem; margin: 6px 0 16px; }

.issuelist__items { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.issrow__link {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.issrow__link:hover { border-color: var(--blue); box-shadow: var(--shadow-lg); }
.issrow__main { flex: 1; min-width: 0; }
.issrow__title { font-weight: 700; color: var(--ink); font-size: .95rem; }
.issrow__meta { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; }
.issrow__code { font-weight: 600; color: var(--text); }
.issrow__chev { color: #c0ccd8; font-size: 1.2rem; flex: 0 0 auto; }

.issuelist__pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.pgbtn {
  color: var(--blue); text-decoration: none; font-weight: 600; font-size: .9rem;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 14px; background: var(--paper);
}
.pgbtn:hover { border-color: var(--blue); }
.pgbtn--off { color: #b9c2cc; border-color: #eef1f5; cursor: default; }
.pgnum { font-size: .85rem; color: var(--muted); }

.issuelist__empty { text-align: center; color: var(--muted); padding: 48px 16px; }
.issuelist__empty-icon { font-size: 32px; opacity: .6; margin-bottom: 8px; }
.issuelist__empty-sub { font-size: .9rem; margin-top: 4px; }
.issuelist__empty a { color: var(--blue); }

/* ── leaflet map: larger map inside the details modal ─ */
.rfm__map {
  height: 260px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: .8rem;
  background: #dde6ef;
}
.rd-marker__dot {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3d4551;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .22);
}
.leaflet-tooltip.rd-tip { font-size: .72rem; }

/* ── full-request modal ────────────────────────────── */
.rfm {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.rfm[hidden] { display: none; }
.rfm__backdrop { position: absolute; inset: 0; background: rgba(20, 30, 45, .55); }
.rfm__card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 86vh;
  overflow: auto;
  padding: 1.2rem;
  box-shadow: var(--shadow-lg);
}
.rfm__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.rfm__hd h3 { margin: 0; color: var(--navy); font-size: 1.05rem; }
.rfm__x { border: none; background: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); line-height: 1; }
.rfm__photo img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin-bottom: .8rem; }
.rfm__row { display: flex; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.rfm__row .rfm__k { width: 110px; flex: none; color: var(--muted); }

/* button-as-link resets for modal triggers */
button.issue__full { background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
button.cbar__info { cursor: pointer; }

/* ── photo lightbox ────────────────────────────────── */
.rpl {
  position: fixed;
  inset: 0;
  z-index: 110; /* above the full-request modal (100) so it stacks over it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.rpl[hidden] { display: none; }
.rpl__backdrop { position: absolute; inset: 0; background: rgba(10, 16, 26, .82); }
.rpl__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 96vw; }
.rpl__x { position: absolute; top: -2.2rem; right: 0; border: none; background: none; color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; }
.rpl__img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow-lg); background: #000; }
.rpl__nav { display: flex; align-items: center; gap: 1rem; color: #fff; }
.rpl__nav[hidden] { display: none; }
.rpl__nav button { border: none; background: rgba(255,255,255,.14); color: #fff; width: 2.2rem; height: 2.2rem; border-radius: 50%; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.rpl__nav button:hover { background: rgba(255,255,255,.28); }
.rpl__count { font-size: .85rem; min-width: 3.5rem; text-align: center; }

/* photo triggers → lightbox */
button.issue__photo { cursor: pointer; border: 0; padding: 0; font: inherit; }
button.rfm__photo { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.note__link { color: var(--blue, #005ea2); white-space: nowrap; }

/* ── held outbound (quarantine on viewer) ───────────────────────────────
   The in-thread held/submitted bars moved to the full-width `.sys .note` bars
   above; the admin control-panel held block keeps its own styling. */
/* LIGHT ISLAND inside the dark .ctrl rail: it flips `background` to cream, so it MUST
   also flip the inherited ink (.ctrl sets color:#e8eef7 for the navy surface). Without
   this reset, every descendant that doesn't declare its own color renders near-white on
   cream — the web-form payload value cells did exactly that, at 1.12:1. Reset at
   the boundary, not per-element: .qzh__supp inputs and .qzh__caltrans textarea set
   background:#fff with no color and would each land in the same hole. */
.ctrl__held{border:1px solid #f0d9b5;background:#fffaf2;border-radius:10px;padding:10px;color:#1a2230}
.ctrl__held > h4{color:#b26a00}
.qzh{border-top:1px solid #f0d9b5;padding-top:10px;margin-top:10px}
.qzh:first-of-type{border-top:0;padding-top:0;margin-top:6px}
.qzh__why{font-size:.8rem;color:#8a6d3b;margin-bottom:8px}
.qzh__f{display:block;font-size:.72rem;color:#6b7280;font-weight:600;margin-bottom:8px}
.qzh__f input,.qzh__f textarea{display:block;width:100%;margin-top:3px;border:1px solid #cbd5e1;border-radius:7px;padding:7px 9px;font:13px/1.45 inherit;color:#1a2230;background:#fff}
.qzh__f input[readonly]{background:#eef1f5;color:#6b7280}
/* stands in for the To field when no recipient resolved. Factual, not alarm
   this is a coverage gap in our data, not agency wrongdoing. Neutral slate on the
   rail's warm card rather than red, matching the status-palette rule. */
/* Declares its own ink: the rail inherits near-white (#e8eef7), which would render
   invisible on this light island (guard). */
.qzh__norecip{display:block;border:1px dashed #cbd5e1;background:#f8fafc;color:#475569;border-radius:7px;padding:8px 9px;margin-bottom:8px}
.qzh__norecip-h{display:block;font-size:.72rem;font-weight:700;color:#475569;letter-spacing:.01em}
.qzh__norecip-b{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:#475569}
/* routing moved after this row was frozen. Informational, not alarm — declares
   its own ink because the rail inherits near-white (guard). */
.qzh__stale{display:block;border:1px solid #cbd5e1;background:#f1f5f9;color:#334155;border-radius:7px;padding:8px 9px;margin-bottom:8px}
.qzh__stale-h{display:block;font-size:.72rem;font-weight:700;color:#334155;margin-bottom:5px}
.qzh__stale-kv{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:7px;color:#334155}
.qzh__stale-kv td{padding:3px 0;vertical-align:top;word-break:break-all}
.qzh__stale-kv td.k{width:78px;color:#64748b;font-weight:600;white-space:nowrap;padding-right:8px}
.qzh__stale .pbtn{width:100%}
.qzh__url{font:600 12px/1.3 ui-monospace,Menlo,monospace;color:#1a2230;word-break:break-all;margin-bottom:6px}
.qzh__kv{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:8px}
.qzh__kv td{border:1px solid #eadfce;padding:6px 8px;word-break:break-word}
.qzh__kv td.k{background:#fbf4e8;color:#6b7280;width:34%;font-weight:600}
.qzh__trust{display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:#33513f;margin:8px 0}
/* The go-live gate is closed for this row. A statement of what the button can
   do, not a fault — so a warm neutral, never an alarm red. Declares its own ink
   because the rail inherits near-white (same guard as .qzh__stale). */
.qzh__gate{display:block;border:1px solid #e0cfa4;background:#fdf6e6;color:#6b4a12;
  border-radius:7px;padding:8px 9px;margin-bottom:8px;font-size:.78rem;line-height:1.45}
.qzh__gate strong{color:#5a3d0d}
.qzh__gate code{font:600 11.5px/1 ui-monospace,Menlo,monospace;color:#5a3d0d;
  background:#f6ebd2;border-radius:3px;padding:1px 4px}
.qzh__act{display:flex;gap:8px;flex-wrap:wrap}
.qzh__done{color:#1b7f4b;font-weight:600;font-size:.85rem;padding:6px 0}
/* Rehearsal result. Deliberately neutral grey, NOT the .qzh__done green:
   a rehearsal is not a success state and must not read like one at a glance. */
.qzh__rehearsal{margin-top:8px;padding:8px 10px;border-left:3px solid #6b7280;
  background:#f3f4f6;color:#374151;font-size:.82rem;line-height:1.45;border-radius:0 4px 4px 0}
.qzh__rehearsal b{color:#111827}
.qzh__caltrans{margin:8px 0;padding:10px;border:1px solid #cde3d6;background:#f4fbf6;border-radius:9px;color:#1a2230}
.qzh__caltrans textarea{width:100%;border:1px solid #cbd5e1;border-radius:7px;padding:8px;font:12px/1.45 ui-monospace,Menlo,monospace;background:#fff;color:#1a2230;resize:vertical}
/* staff confirm-fields table on a held web-form outbound */
.qzh__supp{margin:8px 0;padding:10px;border:1px solid #d9e2ec;background:#f8fafc;border-radius:9px;color:#1a2230}
.qzh__supp-h{font-size:.74rem;font-weight:700;color:#334155;margin-bottom:8px}
.qzh__supp-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.qzh__supp-tbl td{padding:5px 6px;vertical-align:top;border-bottom:1px solid #eef2f7}
.qzh__supp-tbl td.lbl{width:34%;color:#475569;font-weight:600}
.qzh__supp-tbl td.lbl .req{color:#b91c1c;margin-left:2px}
.qzh__supp-tbl td.inp{width:46%}
.qzh__supp-tbl td.inp input,.qzh__supp-tbl td.inp select,.qzh__supp-tbl td.inp textarea{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:5px 6px;font:12.5px/1.4 inherit;background:#fff;color:#1a2230;resize:vertical}
.qzh__supp-tbl td.meta{width:20%;white-space:nowrap;text-align:right;color:#94a3b8;font-size:11px}
.qzh__supp-tbl td.meta .src{display:inline-block;padding:0 5px;border-radius:8px;background:#e2e8f0;color:#475569;margin-right:4px;text-transform:capitalize}
.qzh__supp-tbl td.meta .src-confirmed{background:#dcfce7;color:#15803d}
.qzh__supp-tbl td.meta .src-hardcoded{background:#e0e7ff;color:#4338ca}
.qzh__supp-tbl td.meta .note{cursor:help;color:#64748b;margin-left:3px}
.qzh__supp-row.needs td.inp input,.qzh__supp-row.needs td.inp select,.qzh__supp-row.needs td.inp textarea{border-color:#f59e0b;background:#fffbeb;color:#1a2230}
.qzh__supp-row.needs td.lbl{color:#b45309}
.qzh__supp-act{display:flex;align-items:center;gap:10px;margin-top:8px}
.qzh__supp-status{font-size:.78rem;color:#15803d}

/* ════════════════════════════════════════════════════════════════════════════
    — Admin request-detail workspace: full-width, wider columns,
   high-contrast request header, page-level scroll (no nested inner scrolls).
   Scoped to the ADMIN layout (.actionpage / .core.admin); the resident/public
   single-column "device" (fixed height + scroll-to-bottom thread) is untouched.
   ════════════════════════════════════════════════════════════════════════════ */

/* full-bleed two-column workspace — fill the screen, generous gutters */
.actionpage {
  grid-template-columns: minmax(0, 1fr) clamp(440px, 36vw, 700px);
  gap: 20px;
  max-width: 1900px;
  /* one row that's at least the viewport height (fills the window — no wasted
     space) and grows with content; align-items:stretch (overriding the base
     rule's `start`) makes BOTH columns that tall, so the card never "stops
     short" of the controls rail */
  grid-template-rows: minmax(calc(100vh - 132px), max-content);
  align-items: stretch;
}
.page { padding: 16px 26px 40px; }

/* embedded in the quarantine iframe: no site header → tighter gutters and the
   workspace fills the frame (the host sizes the iframe to this, so no wasted space) */
body.embed .page { padding: 12px 16px 16px; }
body.embed .actionpage { grid-template-rows: minmax(calc(100vh - 30px), max-content); }

/* the core grows with its content AND stretches to match the rail; the thread
   fills the slack so the composer pins to the bottom. The page is the only
   scroll surface — no inner thread scroll. */
.core.admin {
  height: auto;
  min-height: 0;
}
.actionpage .thread {
  flex: 1 1 auto;
  overflow: visible;
}

/* control rail stretches to the full column height (both columns fill the row),
   so the rail reaches the bottom of the window alongside the conversation card */
.actionpage .ctrl {
  align-self: stretch;
}

/* request header — promote it out of gray-on-white into a clear header band */
.core.admin .cbar {
  background: #e9f0fb;
  border-bottom: 1px solid #c6d6ef;
  padding: 13px 16px;
}
.core.admin .cbar__pic { width: 40px; height: 40px; flex-basis: 40px; font-size: 15px; }
.core.admin .cbar__nm { color: var(--ink); font-size: 14px; font-weight: 700; }
.core.admin .cbar__lo { color: #41506b; font-size: 12px; }
.core.admin .cbar__info { border-color: var(--navy); color: var(--navy); }

/* the request title sits a touch larger in the wide admin view */
.core.admin .issue__title { font-size: 21px; }

/* less margin within the details box — denser use of the wide column */
.core.admin .issue__inner { padding: 10px 14px; }
.core.admin .thread { padding: 8px 12px 10px; }
.core.admin .bub { max-width: 88%; }
.core.admin .composer { padding: 8px 12px; }

@media (max-width: 1000px) {
  .actionpage { grid-template-columns: 1fr; max-width: 720px; }
  .actionpage .ctrl { position: static; }
  .page { padding: 16px 14px 48px; }
}

/* ── — live vs. preview button states ─────────────────────────────────
   The control panel mixes LIVE held-outbound actions with the disabled
    preview shell. The base .pbtn used cursor:default with NO disabled
   styling, so a disabled "Approve & forward" preview looked identical to the
   live "Approve & send" — clicking it did nothing. Make live controls read as
   clickable and disabled previews read as inert. */
.ctrl .pbtn:not(:disabled),
.ctrl .qzh__act button,
.qzh__trust,
.qzh__trust input { cursor: pointer; }
.ctrl .pbtn:disabled,
.ctrl .seg button:disabled {
  opacity: .4;
  filter: grayscale(.7);
  cursor: not-allowed;
}
/* — cursor alone wasn't enough of a tell. In the Actions block, "Edit fields" is
   the ONE live button among three disabled placeholders, so give live controls a
   positive affordance (full ink + a lit border + hover) rather than relying on the
   disabled siblings' dimming to imply it. */
.ctrl .pbtn:not(:disabled):not(.green) {
  color: var(--ink);
  border-color: #3a5c94;
}
.ctrl .pbtn:not(:disabled):not(.green):hover { background: #16305c; }
.ctrl .pbtn.green:not(:disabled):hover { background: #23913f; }

/* ── Edit-fields inline editor ── */
.edit-fields { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.edit-fields[hidden] { display: none; }
.edit-fields textarea, .edit-fields select { width: 100%; box-sizing: border-box; }
.ef-act { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
/* Mirror image of the .ctrl__held case: this panel sits ON the dark rail but
   borrows .qzh__f, a light-island label class (#6b7280 → 3:1 on navy). Take the rail's
   own muted/amber ink instead. .ef-warn's amber-600 is a light-surface amber; on navy it
   needs the lighter tint to stay legible. */
.edit-fields .qzh__f { color: var(--muted); }
.ef-status { font-size: .8rem; color: var(--muted); }
.ef-warn { font-size: .8rem; color: #f0b45c; margin: 6px 0 0; }
.qzh__kv-note{font-size:.72rem;color:#6b7280;margin:-4px 0 8px}
/* a light island inside the dark .ctrl rail — without its own color the text
   inherits the rail's near-white #e8eef7 and renders invisible. A contrast
   test guards this. */
.ef-confirm{margin-top:8px;padding:8px;border:1px solid #d9b83e;background:#fdf7e7;
  border-radius:8px;color:#1a2230}
.ef-confirm p{font-size:.8rem;margin:0 0 8px}

/* Atlas "learn more" ↗ on the breadcrumb leaf */
.header-crumb.geo .crumb-atlas { display: inline-flex; align-items: center; margin-left: 4px;
  color: #71767a; text-decoration: none; vertical-align: baseline; }

/* Coverage warning box — factual caution, not alarm */
.coverage-box { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 1rem;
  padding: 0.75rem 1rem; background: #fef9e8; border: 1px solid #f0c648;
  border-left-width: 4px; border-radius: 4px; font-size: 0.95rem; color: #3d3a20; }
.coverage-box__icon { color: #b8860b; font-size: 1.1rem; line-height: 1.3; }
.coverage-box a { color: #1a4480; font-weight: 600; }
.header-crumb.geo .crumb-atlas:hover { color: #005ea2; }

/* Leaflet ships its attribution link at #0078A8, which measures 4.32:1 over the
   translucent attribution bar and fails WCAG 1.4.3, and with no underline it also
   leans on colour alone (1.4.1). The attribution text and links are untouched. */
.leaflet-control-attribution a { color: #00405f; text-decoration: underline; }