/* ---------- design tokens (Aug 2026 UX pass) ---------- */
:root {
  --brand: #21597f;        /* primary blue (headers, links, active) */
  --brand-deep: #21597f;   /* unified with --brand (was #1f597f) */
  --accent: #2a9d8f;       /* teal accent */
  --ribbon: #2d6b96;       /* the tab strip under the header */
  --orange: #e07b39;       /* VC / secondary series */
  --danger: #b3392f;
  --ok: #1e7b45;
  --info: #00a9e0;
  --ink: #26333d;          /* body text — cool slate */
  --muted: #5c6f7c;        /* secondary text — cool grey, 4.6:1 on white */
  --line: #d9e2e9;         /* borders / rules — cool */
  --bg-soft: #f2f6f9;      /* panel fills — cool */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font: 14px/1.5 "Segoe UI", -apple-system, Arial, sans-serif;
  color: var(--ink); background: #f2f6f9;
}
.hidden { display: none !important; }
button { cursor: pointer; font: inherit; }
input, select, textarea { font: inherit; }

/* ---------- landing ---------- */
#landing-view { position: fixed; inset: 0; z-index: 1200; overflow-y: auto; background: #fff; }
  /* above Leaflet's controls (z-index 1000), below the modal veil */
.land-topbar { position: relative; z-index: 2; }
.land-hero {
  background: linear-gradient(135deg, var(--brand), #2f7d8a);
  color: #fff; padding: 56px 24px 64px; text-align: center;
}
.land-inner { max-width: 720px; margin: 0 auto; }
.land-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; background: rgba(255,255,255,.16); padding: 4px 14px;
  border-radius: 999px; margin-bottom: 18px;
}
.land-hero h1 { margin: 0 0 10px; font-size: 42px; }
.land-sub { font-size: 16px; opacity: .92; margin: 0 0 16px; }
.land-desc { font-size: 15px; line-height: 1.7; opacity: .88; margin: 0 auto 26px; max-width: 620px; }
.land-cta { font-size: 16px; padding: 11px 38px; background: #fff; color: var(--brand); }
.land-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; max-width: 1080px; margin: -30px auto 0; padding: 0 24px 30px;
  position: relative; z-index: 1;   /* paint above the positioned hero (which it overlaps by -30px) */
}
.land-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(10,30,40,.08);
}
.land-card h3 { margin: 0 0 8px; font-size: 15px; color: var(--brand); }
.land-card p { margin: 0; font-size: 13px; color: #48565f; line-height: 1.6; }
.land-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 8px 24px 40px; }

/* ---------- login ---------- */
.login-shell {
  height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), #2f7d8a);
}
.login-card {
  background: #fff; border-radius: 10px; padding: 30px 34px; width: 340px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 8px;
}
.login-card h1 { margin: 0; font-size: 20px; color: var(--brand); }
.login-card .sub { color: #6b7c86; font-size: 12px; margin-bottom: 8px; }
.login-card input {
  border: 1px solid #b9c4cc; border-radius: 6px; padding: 9px 12px;
}
.err { color: var(--danger); font-size: 12px; min-height: 16px; }
.hint { color: var(--muted); font-size: 12px; }

/* ---------- shell ---------- */
.topbar {
  background: var(--brand); color: #fff; display: flex; align-items: center;
  gap: 14px; padding: 8px 16px;
}
.logo { font-weight: 700; letter-spacing: .05em; font-size: 15px; }
.logo-full { font-size: 10.5px; opacity: .82; letter-spacing: .03em; margin-left: -2px; white-space: nowrap; }
@media (max-width: 1100px) { .logo-full { display: none !important; } }
.crumb { opacity: .9; font-size: 13px; }
.spacer { flex: 1; }
.user-chip { background: rgba(255,255,255,.16); padding: 3px 12px; border-radius: 999px; font-size: 12px; }
.tabs { display: flex; gap: 2px; background: var(--ribbon); padding: 0 12px; }
.tab {
  padding: 8px 16px; color: #d7e6f0; font-size: 13px; background: none; border: none;
}
.tab.on { background: #f4f6f8; color: var(--brand); border-radius: 7px 7px 0 0; font-weight: 600; }

/* a pane fills what the header and tab strip leave. Their height is measured by the script (--shell-top, fitShell):
   it wraps on phones and grows in Nepali, and 76 px was true of one width in one language. 100dvh where the browser
   has it, so a phone's own toolbars are not counted as room; the bottom inset is the home bar of an installed app. */
.tabpane { display: flex; height: calc(100vh - var(--shell-top, 76px)); }
@supports (height: 100dvh) {
  .tabpane { height: calc(100dvh - var(--shell-top, 76px) - env(safe-area-inset-bottom, 0px)); }
}
#tab-entry, #tab-plan, #tab-dash, #tab-admin, #tab-reports, #tab-dashb, #tab-access { flex-direction: column; }
#dashb-sub { flex: none; }

/* ---------- map ---------- */
.side-l, .side-r {
  width: 240px; background: #fff; padding: 12px 14px; overflow-y: auto; flex-shrink: 0;
}
.side-l { border-right: 1px solid var(--line); }
.side-r { border-left: 1px solid var(--line); width: 280px; }
#map { flex: 1; min-width: 0; }
.splitter { width: 6px; margin: 0 -3px; cursor: col-resize; flex-shrink: 0;
  background: transparent; position: relative; z-index: 20; transition: background .12s; }
.splitter:hover, .splitter.dragging { background: rgba(0, 169, 224, .45); }
.panel-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #6b7c86; margin: 10px 0 8px;
}
.lyr { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 12px;
       border-radius: 6px; }
/* A layer's colour swatch. These were scoped to .lyr, from when the layers
   list was a stack of flex rows; it and the symbology library are tables now,
   so nothing matched and every swatch on the Layers tab was an inline span
   with no box — the colour was set and nothing was drawn. Sized here for any
   swatch, so a table cell works as well as a flex row. The dashboard legend
   keeps its own smaller square (.dash-legend .sw, more specific). */
.sw { display: inline-block; vertical-align: middle; width: 13px; height: 13px;
      border-radius: 3px; flex-shrink: 0; }
.sw.pt { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
         width: 11px; height: 11px; }
.sw.poly { background: transparent !important; border: 2px solid var(--sw-c);
           border-radius: 2px; position: relative; }
.sw.poly::after { content: ""; position: absolute; inset: 0; background: var(--sw-c); opacity: .25; }
.sw.line { width: 22px; height: 3px; border-radius: 2px; }
.lyr .sw.line { width: auto; margin: 5px 0; }   /* stretches in the old flex row */
.lyr .lyr-name { flex: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyr.active { background: #e2f0f8; outline: 1px solid var(--brand); }
.lyr.active .lyr-name { font-weight: 700; color: var(--brand); }
.lyr .ord { border: none; background: none; padding: 0 2px; color: var(--muted); font-size: 11px; cursor: pointer; }
.lyr .ord:hover { color: var(--brand); }
.lyr input[type=range] {
  -webkit-appearance: none; appearance: none; width: 46px; height: 3px;
  background: #d5dee3; border-radius: 2px; outline: none;
}
.lyr input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 9px; height: 9px;
  border-radius: 50%; background: #5b7d94; border: none;
}
.lyr input[type=range]::-moz-range-thumb {
  width: 9px; height: 9px; border-radius: 50%; background: #5b7d94; border: none;
}
.lyr .drag-h { color: #b9c4cc; cursor: grab; font-size: 10px; letter-spacing: -1px; user-select: none; }
.lyr.drag-over { outline: 2px dashed var(--info); outline-offset: -2px; }
.lyr .rm { border: none; background: none; color: #b9c4cc; cursor: pointer; font-size: 11px; padding: 0 2px; }
.lyr .rm:hover { color: var(--danger); }
.lyr .lyr-name.outscale { color: #a8b4bc; font-style: italic; }
.pticon {
  background: var(--c); border: 1.5px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.45);
}
.pticon.square { border-radius: 2px; }
.pticon.diamond { border-radius: 2px; transform: rotate(45deg) scale(.85); }
.pticon.triangle {
  background: none; border: none; box-shadow: none; width: 0 !important; height: 0 !important;
  border-left: 7px solid transparent !important; border-right: 7px solid transparent !important;
  border-bottom: 13px solid var(--c) !important;
}
.tbl-wrap { overflow-x: auto; }
/* linked table maps — ids are suffixed per host panel (tbl-map-lyr-detail, tbl-map-dm-detail) */
[id^="tbl-map"] { height: 240px; width: calc(100% - 2 * max(40px, 5%)); margin-left: max(40px, 5%); margin-right: max(40px, 5%); border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; transition: width .15s, height .15s; }
[id^="tbl-map"].big { width: 100%; margin-left: 0; margin-right: 0; height: 460px; }
.tblmap-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; z-index: 500; background: rgba(0,0,0,.45); color: #fff; font-size: 10.5px; padding: 2px 10px; border-radius: 10px; pointer-events: none; }
.tblmap-grow { position: absolute; top: 8px; right: 8px; z-index: 500; border: 1px solid #cfd8df; background: #fff; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 13px; }
table.entry.attr th {
  resize: horizontal; overflow: hidden; min-width: 90px;
  position: sticky; top: 0; z-index: 10;
}
table.entry.attr td.cell input, table.entry.attr td.cell select { width: 100%; min-width: 80px; box-sizing: border-box; }
table.entry.attr td.cell select { height: 26px; font: inherit; font-size: 12px; padding: 1px 4px; border: 1px solid transparent; background: transparent; border-radius: 4px; }
table.entry.attr td.cell select:hover, table.entry.attr td.cell select:focus { border-color: #b9c9d6; background: #fff; }
tr.sel-row td.cell select { background: #cfeaf7; }
table.entry.attr td.c { text-align: center; }
table.entry.attr td.rowno {
  background: #eef2f5; text-align: center; font-size: 12px; color: #5c6b76;
  cursor: pointer; user-select: none; font-variant-numeric: tabular-nums;
  min-width: 40px; position: sticky; left: 0;
}
table.entry.attr td.rowno:hover { background: #dbe5ec; }
tr.sel-row td { background: #cfeaf7 !important; }
tr.sel-row td.cell input { background: #cfeaf7; }
tr.sel-row td.rowno { background: var(--info) !important; color: #fff; font-weight: 700; }
/* A box drawn round a row of bordered buttons is a second frame nobody needs:
   the toolbar is a hairline under the table and nothing more. */
.tbl-footer {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #fbfcfd; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 7px 10px;
}
.tbl-footer .btn.ghost { border-color: #e6edf2; }
.tbl-footer .btn.ghost:hover { border-color: var(--line); }
.tbl-footer .spacer { flex: 1; }
table.entry.attr th.sel-col { background: var(--info) !important; color: #fff; }
.sort-ind { font-size: 10px; color: var(--brand); }
th.sel-col .sort-ind { color: #fff; }
table.entry.attr td.sel-col { background: #e2f4fb; }
table.entry.attr td.sel-col input { background: #e2f4fb; }
tr.sel-row td.sel-col { background: #a5ddf3 !important; }
tr.sel-row td.sel-col input { background: #a5ddf3; }
.ctx-menu {
  position: fixed; z-index: 4000; background: #fff; border: 1px solid #c3ced6;
  border-radius: 7px; box-shadow: 0 8px 26px rgba(10,30,40,.25); padding: 5px;
  display: flex; flex-direction: column; min-width: 210px;
}
.ctx-menu button {
  background: none; border: none; text-align: left; padding: 7px 12px;
  font-size: 13px; border-radius: 5px; color: #212934;
}
.ctx-menu button:hover:not(:disabled) { background: #e2f0f8; color: var(--brand); }
.ctx-menu button:disabled { color: #a8b4bc; cursor: not-allowed; }
.ctx-sep { border-top: 1px solid #e3e8ec; margin: 4px 6px; }
.sw-ic { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; align-items: center; }
.icon-pick { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; }
.icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.icon-cell {
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
}
.icon-cell span { font-size: 10px; color: #6b7c86; }
.icon-cell:hover { border-color: var(--brand); background: #f2f7fa; }
.icon-cell.on { border-color: var(--info); background: #e2f4fb; }
tr.lyr-row { cursor: pointer; }
tr.lyr-row:hover td { background: #f2f7fa; }
tr.lyr-row.lyr-sel td { background: #e2f4fb; }
tr.lyr-row.lyr-sel td:first-child { box-shadow: inset 3px 0 0 var(--info); }
.gem-cluster {
  background: var(--c); color: #fff; border-radius: 50%; text-align: center;
  font: 700 12px/1 "Segoe UI", sans-serif; border: 2.5px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.35); display: inline-block;
}
.stack { display: flex; flex-direction: column; gap: 7px; }
.kv { display: grid; grid-template-columns: minmax(86px, 32%) 1fr; align-items: center;
  gap: 10px; padding: 4px 0; border-bottom: 1px dashed #e3e8ec; font-size: 13px; }
.kv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5c6b76; }
.kv b { font-weight: 600; text-align: right; }
.kv input { width: 100%; border: 1px solid #b9c4cc; border-radius: 4px;
  padding: 4px 8px; font-size: 12px; }
.track { margin-top: 12px; padding: 8px 10px; background: #f4f7f9; border-radius: 7px;
  font-size: 12px; color: #5c6b76; display: flex; flex-direction: column; gap: 3px; }
.track b { font-weight: 600; color: #3d4d59; }

/* Layers tab: the three creation panels sit side by side */
.layer-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; align-items: stretch; }
.layer-add-grid .list-add { margin-top: 0; max-width: 560px;
  display: flex; flex-direction: column; align-items: stretch; }
.layer-add-grid .stackform { display: flex; flex-direction: column; gap: 8px; }
.layer-add-grid .stackform input:not([type="color"]),
.layer-add-grid .stackform select { width: 100%; }
.layer-add-grid .hint { margin-top: auto; padding-top: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--brand); color: #fff; border: none; border-radius: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
}
.btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.btn.green { background: var(--ok); }
/* A filled red button states its own text and border: several Delete buttons
   carry .red AND .ghost, and ghost's blue text survived on the red fill —
   dark blue on dark red, about 1.2:1, effectively unreadable. */
.btn.red { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.active-tool { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ---------- entry ---------- */
.entrybar {
  display: flex; gap: 14px; padding: 5px 18px; background: #fff;
  border-bottom: 1px solid var(--line); align-items: center; flex-wrap: wrap;
}
/* every control on ANY band is the same 26px control in the same 12.5px
   type - pills, buttons, selects, inputs and their labels. One rhythm. */
.entrybar, .dv-rail, #cm-ribbon { font-size: 12.5px; }
.entrybar .btn, .entrybar select, .entrybar input:not([type="checkbox"]),
.dv-rail .btn, #cm-ribbon .btn, #dashb-sub .btn,
#cm-ribbon input, #cm-ribbon select {
  height: 26px; padding-top: 0; padding-bottom: 0; font-size: 12.5px; }
.entrybar .btn, .dv-rail .btn, #cm-ribbon .btn, #dashb-sub .btn {
  display: inline-flex; align-items: center; gap: 5px; }
.entrybar label { font-size: 12px; color: #5c6b76; display: flex; align-items: center; gap: 6px; }
.entrybar select { border: 1px solid #b9c4cc; border-radius: 5px; padding: 5px 8px; font-size: 13px; }
.entry-body { padding: 18px; overflow: auto; flex: 1; }
table.entry { border-collapse: collapse; background: #fff; font-size: 13px; }
table.entry th, table.entry td { border: 1px solid #d4dbe1; padding: 5px 10px; }
table.entry th { background: #eef2f5; font-weight: 600; text-align: left; }
table.entry td.cell { padding: 0; }
table.entry td.cell input {
  border: none; padding: 5px 10px; width: 90px; text-align: right; background: transparent;
  font-family: Consolas, monospace; font-size: 13px;
}
table.entry td.cell input:focus { outline: 2px solid var(--brand); background: #fff; }
table.entry td.saved input { background: #e2f2e6; }
table.entry td.errcell input { background: #fbecec; }
.ne { color: var(--muted); font-size: 12px; }

/* ---------- workflow ---------- */
.plan-card {
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 16px 18px;
  margin-bottom: 16px;
}
.statusflow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.st { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #e6ebef; color: #5c6b76; }
.st.done { background: #dcefe2; color: var(--ok); }
.st.now { background: var(--brand); color: #fff; }
.arr { color: #98a6b0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.cmt { background: #f8fafb; border: 1px solid #e3e8ec; border-radius: 7px; padding: 8px 12px; margin-top: 8px; font-size: 13px; }
.cmt .who { font-weight: 600; font-size: 12px; color: var(--brand); }
.cmt .when { color: var(--muted); font-size: 11px; }
textarea.cmt-input { width: 100%; border: 1px solid #b9c4cc; border-radius: 6px; padding: 8px; min-height: 54px; margin-top: 8px; }

/* ---------- dashboard ---------- */
.dash-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 14px 18px; min-width: 160px;
}
.card .big { font-size: 26px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.card .lbl { font-size: 12px; color: #6b7c86; }
.cat { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.cat1 { background: #dcefe2; color: var(--ok); }
.cat2 { background: #fdf3d7; color: #a8730a; }
.cat3 { background: #fdeedd; color: #b3611e; }
.cat4 { background: #fbe3e6; color: var(--danger); }
.bar-wrap { background: #eef2f5; border-radius: 4px; height: 14px; min-width: 120px; position: relative; }
.bar { height: 14px; border-radius: 4px; background: var(--brand); }

/* ---------- admin ---------- */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1100px; }
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }
.chip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #e2f0f8; color: var(--brand); }
.loght { font-family: Consolas, monospace; font-size: 12px; color: #48565f; padding: 3px 0; border-bottom: 1px dashed #e3e8ec; }
.form-row { display: flex; gap: 8px; margin: 6px 0; align-items: center; flex-wrap: wrap; }
.form-row input, .form-row select { border: 1px solid #b9c4cc; border-radius: 5px; padding: 6px 9px; font-size: 12px; }
.list-add { background: #fff; border: 1px dashed #b9c4cc; border-radius: 8px; padding: 14px 16px; margin-top: 14px; }
/* dense, PDF-form-style multi-column layout for data entry + preview */
.list-add, .fld-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 18px; align-items: end; }
.list-add > .panel-title, .list-add > .form-row, .list-add > .hint,
.list-add > p, .fld-group > legend { grid-column: 1 / -1; }
.fld-group { grid-column: 1 / -1; align-items: end; margin: 6px 0; padding: 8px 14px 12px; }
.fw { min-width: 0; margin: 0; }
.fw-full { grid-column: 1 / -1; }
.fw > label.hint { display: block; margin: 0 0 2px; font-size: 12px; color: #5d6b7e; line-height: 1.25; }
.list-add .fw input, .list-add .fw select, .list-add .fw textarea { width: 100%; padding: 5px 8px; }
.fld-group > .fw > label.hint { color: #5d6b7e; }
/* table view — list form rendered as a label | value grid, like grid forms */
.list-add.et-mode { display: block; }
/* fixed layout: long bilingual labels must not squeeze the Value column —
   the split stays 46 | 54 and every input fills its whole cell */
.et-tbl { width: 100%; border-collapse: collapse; margin: 6px 0 4px; table-layout: fixed; }
.et-tbl th, .et-tbl td { border: 1px solid #e3e8ec; padding: 5px 9px; font-size: 13px; vertical-align: middle; text-align: left; overflow-wrap: break-word; }
.et-tbl th { background: #f0f4f7; color: #3d4d59; font-weight: 600; }
.et-tbl tr:first-child th:first-child { width: 46%; }
.et-tbl .et-lbl { width: 46%; color: #212934; }
.et-tbl .et-val input, .et-tbl .et-val select, .et-tbl .et-val textarea { width: 100%; padding: 4px 7px; }
.et-tbl .et-sec td { background: #eef4fb; color: var(--brand); font-weight: 700; font-size: 12px; }
.et-tbl .et-note td { background: #fbf5e9; color: #7a5a1e; }
.et-tbl .et-wide td { background: #fbfcfd; }
/* map questions get the whole row so the widget keeps its buttons and mini map */
.et-tbl .et-geo td { background: #f7fbfd; padding: 10px 12px; }
.et-tbl .et-geo .et-geo-lbl { font-weight: 600; color: #212934; margin-bottom: 3px; }
.et-tbl .et-geo .et-geo-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5;
  margin-bottom: 7px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.et-tbl .et-geo .et-geo-hint .btn { flex: none; }
/* the widget's own layout again — the narrow-cell override must not reach it */
.et-tbl .et-geo .geo-widget .geo-val { width: auto; flex: 1; min-width: 170px; }
.et-tbl .et-geo .geo-mini { max-width: 520px; }
/* sheet view: a map question reads as a value plus the button that sets it */
td.sheet-geo { white-space: nowrap; text-align: right; }
td.sheet-geo .sg-txt { font-size: 11.5px; color: var(--muted); margin-right: 6px; }
td.sheet-geo .btn { padding: 2px 7px; }
td.sheet-geo .sg-btn[disabled] { opacity: .35; cursor: default; }
td.sheet-geo.saved { background: #eefaf4; }
/* roster pivot: the question column stays put while the entries scroll */
/* pivoted entry sheets (Table view) use the whole pane: a few columns stretch
   to fill it, many keep a working minimum and scroll sideways inside the wrap */
table.entry.sheet-tbl { width: 100%; }
table.entry.sheet-tbl th { min-width: 96px; }
table.entry.sheet-tbl td.cell input, table.entry.sheet-tbl td.cell select {
  width: 100%; min-width: 70px; box-sizing: border-box; }

.entry td.sheet-lbl, .entry th.sheet-lbl { position: sticky; left: 0; background: #fff; z-index: 1;
  text-align: left; }
.entry th.sheet-lbl { background: #f2f5f7; }
.sheet-tools { margin: 6px 0 8px; align-items: center; gap: 10px; }
.entry th .sheet-rm { margin-left: 6px; vertical-align: middle; }
/* v1847 sheet: the form's own questions, then one block per repeat; checked cells say why beside them */
.sheet-rec .sheet-block { margin: 0 0 16px; }
/* v1848: a form of many records - the record the sheet shows, picked here */
.sheet-rec .sheet-recs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.sheet-rec .sheet-rhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
.sheet-rec td.sheet-calc { text-align: right; color: #1e7b45; font-weight: 600; background: #f0f7f2; }
.sheet-rec td.sheet-ref { text-align: left; color: #5c6b76; }
.sheet-rec td.cell.saved { background: #eefaf4; }
.sheet-rec td.cell .fld-err { white-space: normal; min-width: 140px; text-align: left; }
.sheet-rec th.sheet-new { color: var(--muted); font-style: italic; }
.sheet-rec td.cell .fld-multi, .sheet-rec td.cell .fld-radio, .sheet-rec td.cell .fld-bs { text-align: left; }
.sheet-rec td.cell textarea { width: 100%; min-width: 140px; box-sizing: border-box; }
.sheet-rec table.sheet-top td.cell input, .sheet-rec table.sheet-top td.cell select { max-width: 420px; }
#list-save-ind.saved, .hint.saved { color: var(--ok); font-weight: 600; }
/* a long single-entry form (Form 3 is 10,000 px on a phone): its save state stays in sight at the bottom of the
   screen instead of waiting at the end of the form; above a question's map (Leaflet's panes and controls are 400-1000) */
#list-card > .form-row.save-bar { position: sticky; bottom: 0; z-index: 1001; background: #fff; margin-bottom: -14px;
  padding: 8px 0 10px; border-top: 1px solid #e3e8ec; }
/* members table (AGOL-style) */
.mem-tbl td { vertical-align: middle; }
.mem-tbl tr.mem-off { opacity: .55; }
.mem-login { font-weight: 600; color: var(--ok); }
.mem-login.never { color: #b98a3e; font-weight: 400; font-style: italic; }
/* language toggle */
.lang-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; overflow: hidden; margin: 0 8px; }
.lang-btn { background: transparent; color: #fff; border: 0; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.lang-btn.on { background: #fff; color: var(--brand-deep); font-weight: 700; }
/* My Microplan action centre */
.mp-guide { background: linear-gradient(180deg,#eaf1f6,#f6f9fb); border: 1px solid #cfe0ec;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.mp-guide-head { font-size: 20px; font-weight: 700; color: var(--brand-deep); display: flex;
  align-items: center; gap: 10px; }
.mp-rolechip { font-size: 12px; font-weight: 600; background: var(--brand-deep); color: #fff;
  padding: 2px 10px; border-radius: 999px; text-transform: capitalize; }
.mp-intro { margin: 8px 0 0; color: #445; }
.mp-todo { margin-top: 10px; background: #fff; border: 1px solid #dfe6ec; border-left: 4px solid #21968b;
  border-radius: 8px; padding: 10px 12px; }
.mp-todo b { color: #1a7f76; }
.mp-todo p { margin: 4px 0 0; }
.mp-steps { white-space: pre-line; margin: 4px 0 0; }
/* reviewer roster stats */
.mp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.mp-stat { background: #eef3f7; color: #33586f; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.mp-stat b { color: var(--brand-deep); }
.mp-stat.hot { background: #e6f3ec; color: var(--ok); } .mp-stat.hot b { color: var(--ok); }
.mp-stat.warn { background: #fbeee0; color: #8a5a00; } .mp-stat.warn b { color: #8a5a00; }
.mp-stat[data-mpstatus] { cursor: pointer; }
.mp-stat[data-mpstatus]:hover { outline: 1px solid var(--brand)55; }
.mp-stat.on { outline: 2px solid var(--brand); }
/* filter bar: one full-width row under the stats/chart split */
.mp-filter { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 10px; }
.mp-filter select { border: 1px solid #b9c4cc; border-radius: 5px; padding: 5px 8px; font-size: 13px;
  flex: 1 1 auto; min-width: 110px; max-width: 240px; }
.mp-filter input { border: 1px solid #b9c4cc; border-radius: 5px; padding: 5px 10px; font-size: 13px;
  flex: 1 1 180px; min-width: 140px; }
.mp-filter .btn { flex: 0 0 auto; }
@media (max-width: 900px) { .mp-filter { flex-wrap: wrap; } }

/* My Microplan top row: status chart · summary report */
.mp-toprow { display: flex; gap: 16px; align-items: stretch; margin-bottom: 10px; }
.mp-topright { flex: 1 1 50%; min-width: 0; background: #fbfdfe; border: 1px solid #e6ecf0;
  border-radius: 10px; padding: 12px 14px; }
.mp-topsum { flex: 1 1 50%; min-width: 0; background: #fbfdfe; border: 1px solid #e6ecf0;
  border-radius: 10px; padding: 12px 14px; }
.mp-sumgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.mp-sumitem b { display: block; font-size: 17px; color: var(--brand-deep); }
.mp-sumitem span { font-size: 11px; color: #5c6b76; }
/* how many places answered this card — the line that tells a small number
   apart from a mostly-unfilled field */
.mp-cov { display: block; font-size: 10px; font-style: normal; color: #8a9aa6; margin-top: 1px; }
.mp-cov.thin { color: #b26a00; }
.mp-cov.none { color: #b3392f; }
.mp-sumlist { max-height: 130px; overflow-y: auto; }
.mp-sumrow { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.mp-sumrow .nm { flex: 0 0 130px; text-align: right; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: #33586f; }
.mp-sumrow .n { flex: 0 0 42px; font-weight: 700; color: var(--brand-deep); }
@media (max-width: 1100px) { .mp-toprow { flex-direction: column; }
  .mp-topright, .mp-topsum { width: 100%; } }

/* status distribution bar chart */
.mp-chart { margin: 2px 0 2px; }
.mp-chart-row { display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 2px 6px; border-radius: 6px; }
.mp-chart-row:hover { background: #eef3f7; }
.mp-chart-row.on { outline: 2px solid var(--brand); }
.mp-chart-lbl { flex: 0 0 160px; font-size: 12px; color: #33586f; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-chart-track { flex: 1; background: #eef1f4; border-radius: 5px; height: 14px; overflow: hidden; }
.mp-chart-bar { display: block; height: 100%; border-radius: 5px; min-width: 2px;
  transition: width .25s ease; }
.mp-chart-n { flex: 0 0 42px; font-size: 12px; font-weight: 700; color: var(--brand-deep); }

/* dashboard: analytics (left) · map (right) */
.dash-split { display: flex; gap: 16px; align-items: stretch; }
.dash-left { flex: 1 1 55%; min-width: 0; }
.dash-map { flex: 1 1 45%; min-height: 460px; border: 1px solid var(--line); border-radius: 10px;
  background: #eef3f7; position: sticky; top: 8px; align-self: flex-start; height: calc(100vh - 190px); }
.dash-hfrow td { background: #f2f6f9; font-weight: 600; }
@media (max-width: 1100px) { .dash-split { flex-direction: column; } .dash-map { width: 100%; height: 380px; position: static; } }

/* per-card survey completeness */
.mp-comp { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 12px; }
.mp-comp-lbl { color: #5c6b76; }
.mp-comp-track { flex: 0 1 260px; background: #eef1f4; border-radius: 5px; height: 10px; overflow: hidden; }
.mp-comp-bar { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.mp-comp b { color: var(--brand-deep); }
.mp-nslist { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-nsitem { background: #f4f6f8; border: 1px solid #e3e8ec; border-radius: 6px; padding: 3px 9px; font-size: 12px; color: #55606a; }
.mp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.mp-deadline { color: #8a5a00; }
/* admin: microplan instructions editor */
.mpg-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.mpg-card { border: 1px solid #dfe6ec; border-radius: 10px; padding: 12px; background: #fbfdff; }
.mpg-role { font-weight: 700; color: var(--brand-deep); margin-bottom: 6px; }
.mpg-card textarea, .mpg-card input { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--line,#cfd6dd); border-radius: 6px; }
.mp-returned { background: #fdecea; border: 1px solid #f2b8b1; border-left: 4px solid var(--danger);
  border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.mp-returned b { color: var(--danger); }
.mp-returned-msg { margin-top: 4px; color: #5a1f19; }
.mp-hint { color: #667; font-size: 13px; margin: 8px 0; }
.mp-note { width: 100%; min-height: 54px; margin: 4px 0 8px; padding: 8px;
  border: 1px solid var(--line,#cfd6dd); border-radius: 8px; font: inherit; font-size: 13px; }

/* card middle row: completeness + hint (left) · note field (right) */
.plan-mid { display: flex; gap: 16px; align-items: stretch; margin: 4px 0 8px; }
.plan-mid-left { flex: 1 1 50%; min-width: 0; }
.plan-mid .mp-note { flex: 1 1 50%; width: auto; margin: 0; min-height: 64px; resize: vertical; }
@media (max-width: 900px) { .plan-mid { flex-direction: column; } .plan-mid .mp-note { width: 100%; } }
.plan-head { font-size: 15px; }

/* My Microplan two-column split: scrollable roster (left) + report preview (right) */
.mp-split { display: flex; flex: 1; min-height: 0; }
.mp-col-left { flex: 1 1 56%; overflow-y: auto; padding: 18px; min-width: 0; }
.mp-col-right { flex: 1 1 44%; overflow-y: auto; border-left: 1px solid var(--line);
  background: #fff; min-width: 0; display: flex; flex-direction: column; }
.mp-report-empty { color: var(--muted); padding: 28px; text-align: center; margin: auto; font-size: 13px; }
.mp-report-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid #e6ecf0; background: #f6f9fb; position: sticky; top: 0; z-index: 1; }
.mp-report-head .ttl { font-weight: 600; color: var(--brand-deep); font-size: 14px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-report-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.mp-minimap { height: 230px; flex: 0 0 230px; border-bottom: 1px solid #e6ecf0; background: #eef3f7; }
.mp-minimap-msg { padding: 16px; color: var(--muted); font-size: 12px; }

/* SQL console (Data tab, superuser) */
.sql-wrap { display: flex; gap: 14px; align-items: flex-start; }
.sql-left { flex: 1; min-width: 0; }
.sql-editor { width: 100%; min-height: 110px; font: 13px/1.5 Consolas, "Courier New", monospace;
  border: 1px solid #b9c4cc; border-radius: 8px; padding: 10px 12px; background: #fbfdfe; resize: vertical; }
.sql-editor:focus { outline: 2px solid var(--brand)33; border-color: var(--brand); }
.sql-schema { flex: 0 0 250px; max-height: 560px; overflow-y: auto; border-left: 1px solid #e6ecf0; padding-left: 12px; }
.sql-tbl summary { cursor: pointer; font-size: 12px; padding: 3px 0; }
.sql-tbl code { color: var(--brand-deep); }
.sql-cols { padding: 4px 0 8px 16px; font-size: 12px; color: #48565f; }
.sql-cols code { color: #333; }

/* Help overlay */
.help-h { color: var(--brand-deep); margin: 14px 0 6px; font-size: 14px; }
.help-tbl td { font-size: 12px; }
.help-k { font-weight: 600; color: var(--brand-deep); white-space: nowrap; }
.help-p { font-size: 13px; color: #445; line-height: 1.6; margin: 4px 0 8px; }
.plan-card.sel { outline: 2px solid var(--brand); outline-offset: 1px; }
.btn.busy { opacity: .65; cursor: progress; }

/* live-calculated rows in grid data entry (display only) */
.calc-head { background: #f0f7f2; color: var(--ok); font-weight: 700; font-size: 12px;
  letter-spacing: .03em; }
.calc-lbl { color: var(--ok); font-weight: 600; }
input.calc-out { background: #eef7f0 !important; border-color: #cfe6d6 !important;
  color: var(--ok); font-weight: 700; text-align: right; }
@media (max-width: 900px) {
  .mp-split { flex-direction: column; }
  .mp-col-right { border-left: 0; border-top: 1px solid var(--line); min-height: 320px; }
  /* stacked, the page scrolls as one: the roster had become a 261 px box scrolling on its own above an empty report
     panel (QA review, 24 Sep 2026); the panel shows once a report is opened */
  .mp-split { overflow-y: auto; }
  .mp-split > .mp-col-left, .mp-split > .mp-col-right { flex: none; overflow: visible; }
  .mp-col-right:has(> .mp-report-empty:only-child) { display: none; }
}
.mp-statuschip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  margin-left: 8px; background: #e7edf2; color: #33586f; }
.mp-statuschip.st-FINALIZED { background: #dff3e6; color: var(--ok); }
.mp-statuschip.st-DRAFT { background: #fbeee0; color: #8a5a00; }
.mp-history { margin-top: 10px; }
.mp-history summary { cursor: pointer; font-size: 13px; color: var(--brand); }
.mem-email { font-size: 12px; color: #2b6cb0; text-decoration: none; }
.mem-email:hover { text-decoration: underline; }
.btn.danger-ghost { color: var(--danger); border-color: #e0b4ae; background: #fff; }
.btn.danger-ghost:hover { background: #fdecea; border-color: var(--danger); }
/* role-permissions matrix */
.rp-scroll { overflow-x: auto; overflow-y: auto; max-height: min(62vh, 640px); border: 1px solid var(--line, #dfe3e8); border-radius: 8px; }
.rp-tbl tr.rp-grp td { position: sticky; left: 0; background: #eef3f7; font-weight: 700; color: var(--brand); text-align: left; z-index: 1; }
.rp-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.rp-tbl th, .rp-tbl td { border-bottom: 1px solid var(--line, #eef1f4); padding: 7px 10px; text-align: center; }
.rp-tbl th.rp-caph, .rp-tbl td.rp-caph { text-align: left; min-width: 240px; position: sticky; left: 0; background: #fff; z-index: 1; }
.rp-tbl thead th, .rp-tbl tr:first-child th { position: sticky; top: 0; background: #f6f8fa; }
.rp-roleh { white-space: nowrap; font-weight: 600; }
.rp-grp td { background: #eef3f7; font-weight: 700; text-align: left; color: var(--brand); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.rp-cell input { width: 16px; height: 16px; cursor: pointer; }
.rp-cell input:disabled { cursor: not-allowed; opacity: .55; }
.mem-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mem-toolbar select { padding: 6px 9px; border: 1px solid #d5dde3; border-radius: 7px; font-size: 13px; }
.mem-toolbar #mem-count { margin-left: auto; white-space: nowrap; }
.mem-scroll { max-height: calc(100vh - 300px); overflow: auto; border: 1px solid #e3e8ec; border-radius: 8px; }
.mem-scroll .mem-tbl { margin: 0; }
.mem-scroll .mem-tbl thead th { position: sticky; top: 0; z-index: 2; background: #f0f4f7; box-shadow: 0 1px 0 #dbe3ea; }
.mem-tbl th[data-sort] { cursor: pointer; user-select: none; }
.mem-tbl th[data-sort]:hover { color: var(--brand); }
.mem-tbl .si { font-size: 10px; color: var(--brand); }
.mem-viewtoggle { display: inline-flex; gap: 4px; }
.mem-ck { width: 32px; text-align: center; }
.mem-ck input, .mc-ck input { width: auto; cursor: pointer; }
.mc-ck { display: inline-flex; align-items: center; margin-right: 2px; }
.mem-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px;
  padding: 6px 12px; background: #eef4fb; border: 1px solid #cfe0ee; border-radius: 8px; }
.mem-selbar b { color: var(--brand); margin-right: 4px; }
/* members list (card) view — AGOL-style */
.mem-cards { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.mem-card { border: 1px solid #e0e5ec; border-radius: 10px; background: #fff; padding: 12px 14px; box-shadow: 0 1px 2px rgba(20,40,70,.05); }
.mem-card.mem-off { opacity: .6; }
.mc-head { display: flex; align-items: center; gap: 12px; }
.mc-av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.mc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-id b { font-size: 14px; color: #1b2733; }
.mc-id .ne { font-size: 12px; }
.mc-login { font-size: 12px; color: var(--ok); font-weight: 600; margin-top: 1px; }
.mc-login.never { color: #b98a3e; font-weight: 400; font-style: italic; }
.mc-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.mc-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f5; }
.mc-fields > div { display: flex; flex-direction: column; font-size: 13px; }
.mc-fields .k { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.toast {
  position: fixed; bottom: 22px; right: 22px; background: var(--ok); color: #fff;
  padding: 10px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 3000;
}
.toast.err { background: var(--danger); }

/* ---------- editing modal ---------- */
.modal-veil {
  position: fixed; inset: 0; background: rgba(10, 25, 35, .45); z-index: 2500;
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background: #fff; border-radius: 10px; padding: 18px 22px;
  width: max-content; min-width: min(380px, calc(100vw - 24px)); max-width: 92vw;   /* grows to fit tables / previews …; never wider than a phone */
  resize: both; overflow: auto;                             /* … and can be dragged larger from the corner */
  box-shadow: 0 16px 40px rgba(0,0,0,.3);
}
.modal-card .tbl-wrap, .modal-card table { max-width: 100%; }
#modal-body { max-height: 70vh; overflow: auto; }
.modal-card input, .modal-card select {
  border: 1px solid #b9c4cc; border-radius: 5px; padding: 7px 10px; width: 100%;
}
.modal-card input[type="checkbox"], .modal-card input[type="radio"] {
  width: auto; padding: 0; flex-shrink: 0;   /* keep row layouts intact */
}
.modal-card { max-height: 88vh; }   /* long dialogs (field settings) scroll inside #modal-body */
/* a dialog field's own complaint, right under it; the dialog stays open until it is put right */
.modal-card .mf-err { display: block; color: var(--danger); font-size: 12px; margin-top: 3px; }
.modal-card .mf-err:empty { display: none; }
.modal-card [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }

/* ---------- form builder (Forms tab) ---------- */
.fb-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5; background: #fff;
  padding: 12px 14px; margin: -8px -8px 14px; border-bottom: 1px solid #e3e8ec;
  box-shadow: 0 2px 6px rgba(20,40,60,.05); border-radius: 0 0 10px 10px; }
.fb-head .fb-title { flex: 1 1 auto; min-width: 260px; }
.fb-head .fb-title .t { font-size: 17px; font-weight: 700; color: #212934; }
.fb-head .fld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #5c6b76; }
.fb-head .fld input, .fb-head .fld select { padding: 6px 9px; border: 1px solid #b9c4cc;
  border-radius: 6px; font-size: 13px; }
.fb-headbtns { display: flex; gap: 8px; margin-left: auto; }
.fb-toolbar { display: flex; gap: 8px; margin: 4px 0 10px; align-items: center; flex-wrap: wrap; }
.fb-toolbar select { padding: 6px 9px; border: 1px solid #b9c4cc; border-radius: 6px; }
.fb-rows { border: 1px solid #e3e8ec; border-radius: 9px; overflow: hidden; background: #fff;
  max-width: 980px; }
.fb-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  border-bottom: 1px solid #eef2f5; font-size: 13px; }
.fb-row:last-child { border-bottom: none; }
.fb-row:nth-child(even) { background: #fafcfd; }
.fb-row:hover { background: #f0f6fa; }
.fb-row.drag-over { outline: 2px dashed var(--info); outline-offset: -2px; }
.fb-row .drag-h { cursor: grab; color: #c3ccd3; font-size: 10px; letter-spacing: -1px;
  user-select: none; flex-shrink: 0; }
.fb-row .num { width: 20px; text-align: right; color: #a8b4bc; font-size: 11px; flex-shrink: 0; }
.fb-row .main { flex: 1; min-width: 0; }
.fb-row .main .nm { font-weight: 600; color: #212934; }
.fb-row .main .cd { font-family: Consolas, monospace; font-size: 11px; color: #97a3ac; }
.fb-rules { color: var(--muted); font-size: 12px; margin-top: 1px; }
.fb-badge { font-size: 10.5px; padding: 2px 9px; border-radius: 10px; background: #eef2f5;
  color: #48565f; flex-shrink: 0; font-weight: 600; letter-spacing: .3px; }
.fb-badge.int  { background: #e3f0e9; color: #2c6e49; }
.fb-badge.text { background: #e8ecf6; color: #39508f; }
.fb-badge.date { background: #f6ece2; color: #8a5a1e; }
.fb-badge.sel  { background: #f0e6f5; color: #6b3f85; }
.fb-row .acts { display: flex; gap: 1px; opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.fb-row:hover .acts, .fb-row:focus-within .acts { opacity: 1; }
.fb-ib { border: none; background: none; cursor: pointer; color: #7d8b95; font-size: 12px;
  padding: 3px 6px; border-radius: 5px; line-height: 1; }
.fb-ib:hover { background: #dfe9f0; color: var(--brand); }
.fb-ib.danger:hover { background: #f7e3e1; color: var(--danger); }
.fb-body { display: flex; gap: 16px; align-items: flex-start; }
/* the designer fits the screen: the field list, the property panel and the
   Add-a-question palette each scroll on their own instead of growing the page */
.fb-left { flex: 1; min-width: 0; max-height: var(--rail-h, calc(100vh - 190px)); overflow-y: auto; padding-right: 2px; }
.fb-detail { width: 330px; flex-shrink: 0; position: sticky; top: 8px;
  max-height: var(--rail-h, calc(100vh - 200px)); overflow-y: auto;
  background: #fff; border: 1px solid #e3e8ec; border-radius: 9px; padding: 14px;
  box-shadow: 0 1px 4px rgba(20,40,60,.05); }
.fb-detail label.hint { display: block; margin: 7px 0 0; }
.fb-detail input, .fb-detail select, .fb-detail textarea { width: 100%; padding: 6px 9px;
  border: 1px solid #b9c4cc; border-radius: 6px; font-size: 13px; margin-top: 2px; font-family: inherit; }
.fb-detail textarea { resize: vertical; min-height: 34px; }
.fb-row .main { cursor: pointer; }
.fb-row.sel { background: #e2f0f8 !important; box-shadow: inset 3px 0 0 var(--brand); }
/* drop indicators for drag-to-insert / reorder */
.fb-row.drop-before { box-shadow: inset 0 3px 0 #15827a; }
.fb-row.drop-after { box-shadow: inset 0 -3px 0 #15827a; }
.fb-rows.drop-empty { outline: 2px dashed #15827a; outline-offset: -4px; }

/* drag-and-drop field palette (right column of the list-form editor) */
.fb-palette { width: 190px; flex-shrink: 0; position: sticky; top: 8px;
  max-height: var(--rail-h, calc(100vh - 200px)); overflow-y: auto;
  background: #f7fafc; border: 1px solid #e3e8ec; border-radius: 9px; padding: 12px; }
.pal-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 7px;
  background: #fff; border: 1px solid #dbe3ea; border-radius: 8px; font-size: 12px; font-weight: 600;
  color: var(--brand); cursor: grab; transition: border-color .12s, box-shadow .12s, transform .06s; user-select: none; }
.pal-chip:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(33,89,127,.12); }
.pal-chip:active { cursor: grabbing; transform: scale(.98); }
.pal-chip .pal-ico { width: 20px; text-align: center; font-size: 14px; }
#fb-list .btn.fb-active { background: #e2f0f8; border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; }

/* ---------- map editing chrome ---------- */
#tab-map { position: relative; }
#mode-chip { position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 800; background: var(--brand); color: #fff; padding: 7px 16px; border-radius: 18px;
  font-size: 12px; box-shadow: 0 2px 8px rgba(20,40,60,.3); pointer-events: none;
  white-space: nowrap; }
.tool-group { font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin: 9px 0 1px; font-weight: 700; }
.tool-group:first-child { margin-top: 0; }

/* Data-entry: card list of the survey's forms on the left */
.entry-split { display: flex; flex: 1; min-height: 0; }
.entry-forms-side { width: 262px; border-right: 1px solid var(--line); }
#entry-forms .fcard { display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 10px 12px;
  margin-bottom: 8px; font-size: 13.5px; color: var(--brand); font-weight: 600; }
#entry-forms .fcard:hover { border-color: var(--brand); background: #f4f9fc; }
#entry-forms .fcard.sel { background: #e2f0f8; border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand); }
#entry-forms .fcard .meta { display: block; margin-top: 3px; font-weight: 400;
  font-size: 12px; color: var(--muted); }
.sv-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sv-forms .fcard { display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: 10px 12px;
  font-size: 13.5px; color: var(--brand); font-weight: 600; }
.sv-forms .fcard:hover { border-color: var(--brand); background: #f4f9fc; }
.sv-forms .fcard .meta { display: block; margin-top: 3px; font-weight: 400;
  font-size: 12px; color: var(--muted); }
.sv-forms .fcard .fcard-pub { font-size: 10px; margin-right: 5px; vertical-align: 1px; }
.sv-forms .fcard[draggable="true"] { cursor: grab; }
.sv-forms .fcard.drop-before { box-shadow: inset 4px 0 0 #15827a; }
.sv-forms .fcard.drop-after { box-shadow: inset -4px 0 0 #15827a; }
.sv-forms .fcard .fcard-pub.on { color: #2c6e49; }
.sv-forms .fcard .fcard-pub.off { color: #b98a3e; }
.fcard.add, .svcard.add { display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #6b7c86; font-weight: 600; border: 1px dashed #c3ccd4; background: #fafbfc; cursor: pointer; }
.fcard.add:hover, .svcard.add:hover { border-color: var(--brand); color: var(--brand); background: #f4f9fc; }
.fcard.add .plus, .svcard.add .plus { font-size: 16px; }

/* --- survey card carousel (Forms tab landing, WHS+ style) --- */
.sv-galhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.sv-search { position: relative; display: flex; align-items: center; gap: 8px; }
.sv-search .ic { position: absolute; left: 10px; font-size: 12px; opacity: .5; pointer-events: none; }
.sv-search input { padding: 7px 12px 7px 28px; border: 1px solid #d5dde3; border-radius: 20px; font-size: 13px; width: 220px; background: #fff; }
.sv-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(33,89,127,.14); }
.sv-search .cnt { font-size: 12px; color: var(--muted); white-space: nowrap; }

.sv-carousel { position: relative; margin-top: 4px; }
.sv-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth;
  padding: 8px 4px 12px; scrollbar-width: thin; }
.sv-track::-webkit-scrollbar { height: 8px; }
.sv-track::-webkit-scrollbar-thumb { background: #cfd8df; border-radius: 8px; }
.sv-track::-webkit-scrollbar-track { background: transparent; }
.carnav { position: absolute; top: 46px; z-index: 3; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid #d5dde3; background: #fff; color: var(--brand); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(20,40,70,.16); transition: background .12s, border-color .12s; }
.carnav:hover { background: #f0f6fb; border-color: var(--brand); }
.carnav.prev { left: -8px; }
.carnav.next { right: -8px; }

.svcard { flex: 0 0 200px; height: 200px; background: #fff; border: 1px solid #e0e5ec; border-radius: 12px;
  overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px rgba(20,40,70,.06);
  transition: box-shadow .15s, transform .15s, border-color .15s; }
.svcard:hover { box-shadow: 0 14px 30px -14px rgba(20,40,80,.30); transform: translateY(-3px); border-color: #c9d3dd; }
.svcard.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(33,89,127,.35), 0 12px 26px -16px rgba(20,40,80,.40); }
.svcard.off { opacity: .62; }
.svband { position: relative; height: 74px; padding: 9px 11px; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), #2f7d8a); }
.svband-ico { position: absolute; right: -8px; bottom: -16px; width: 82px; height: 82px; color: #fff; opacity: .16; }
.svband-fy { position: relative; z-index: 2; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .4px; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.pubbadge { position: absolute; right: 9px; top: 9px; z-index: 3; font-size: 10.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.pubbadge.on { background: rgba(233,247,238,.96); color: #1f6b45; }
.pubbadge.off { background: rgba(255,244,228,.96); color: #8a5a1e; }
.pubbadge:hover { filter: brightness(.97); text-decoration: underline; }
.svcode { position: absolute; left: 11px; bottom: 8px; z-index: 3; background: #fff; color: #1b3a5b;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  font-family: "Cascadia Code", Consolas, ui-monospace, monospace; box-shadow: 0 1px 3px rgba(0,0,0,.16); }
.svbody { padding: 11px 13px 13px; }
.svbody .svname { font-weight: 600; font-size: 13.5px; line-height: 1.3; color: #1b2733; }
.svbody .svne { color: #7c8894; font-size: 12px; margin-top: 2px; }
.svbody .svmeta { color: var(--muted); font-size: 12px; margin-top: 7px; }
.svcard.add { flex: 0 0 200px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: #6b7c86; font-weight: 600; border: 1px dashed #c3ccd4; background: #fafbfc; }
.svcard.add:hover { border-color: var(--brand); color: var(--brand); background: #f4f9fc; transform: none; box-shadow: none; }
.svcard.add .plus { font-size: 22px; }
.sv-empty { color: var(--muted); font-size: 13px; padding: 26px 12px; align-self: center; }

/* languages strip + inline section preview (full-width Forms tab) */
.lang-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 12px; border-top: 1px solid #eef1f5; }
.lang-lbl { font-size: 12px; font-weight: 600; color: #5d6b7e; }
.lang-row #fb-langs { display: inline-flex; align-items: center; flex-wrap: wrap; }
.fcard.open { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(33,89,127,.28); background: #f0f7fc; }
.section-preview { margin-top: 18px; }
.section-preview:empty { display: none; }
.section-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #f4f8fb; border: 1px solid #dbe6ef; border-radius: 10px 10px 0 0; padding: 10px 14px; }
.sp-title b { font-size: 14px; color: #1b3a5b; }
.sp-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.section-preview-body { border: 1px solid #dbe6ef; border-top: 0; border-radius: 0 0 10px 10px;
  padding: 16px 18px; background: #fff; max-width: 760px; }

.sv-detail { margin-top: 18px; border-top: 1px solid #e7ecf0; padding-top: 16px; }
.sv-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sv-detail-info .t { font-size: 17px; font-weight: 700; color: #1d3b52; }
.sv-detail-info .ne { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sv-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sv-actions .btn.danger { color: var(--danger); border-color: #d9bcb9; }
.sv-actions .btn.danger:hover { border-color: var(--danger); }
.pubnote { margin: 12px 0 4px; font-size: 12px; padding: 7px 11px; border-radius: 8px; }
.pubnote.on { background: #eef6f1; color: #2c6e49; }
.pubnote.off { background: #f9efe4; color: #8a5a1e; }
.dm-src { display: block; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; padding: 8px 11px; margin-bottom: 6px; }
.dm-src:hover { border-color: var(--brand); background: #f4f9fc; }
.dm-src.sel { background: #e2f0f8; border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.dm-src .nm { display: block; font-size: 13px; font-weight: 600; color: var(--brand); }
.dm-src .meta { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
input.fld-calc { background: #eef4f0; color: #2c6e49; font-weight: 600; }
/* a calculation with the Hidden appearance: worked out and saved, never on screen (wins over skip logic's display) */
.calc-hid { display: none !important; }
/* a calculated area (buffer): what it is, not its coordinates */
.calc-geo-txt { display: inline-block; padding: 5px 9px; border-radius: 6px; background: #eef4f0; color: #2c6e49; font-weight: 600; font-size: 12.5px; }
.fd-buf { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 6px; }
.fd-buf .hint { margin: 0; }
.fd-buf #fd-buf-m { width: 90px; }
/* GPS + photo field widgets */
.geo-widget { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.geo-widget .geo-val { flex: 1; min-width: 150px; }
.geo-widget .geo-status { font-size: 11px; color: var(--muted); white-space: nowrap; }
.img-widget { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-pick { display: inline-block; padding: 6px 12px; border: 1px dashed #b9c4cc; border-radius: 7px;
  background: #f7fafc; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; }
.img-pick:hover { border-color: var(--brand); }
.img-pick.disabled { opacity: .5; pointer-events: none; }
.img-thumb { display: inline-flex; align-items: center; gap: 8px; }
.img-thumb img { max-width: 280px; max-height: 210px; border: 1px solid #dbe3ea; border-radius: 6px; cursor: zoom-in; }
.cell-thumb { max-width: 64px; max-height: 48px; border: 1px solid #dbe3ea; border-radius: 4px; vertical-align: middle; cursor: zoom-in; }
/* click-to-enlarge overlay for any photo thumbnail */
.photo-zoom { position: fixed; inset: 0; z-index: 4000; background: rgba(12, 22, 30, 0.82);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.photo-zoom img { max-width: 92vw; max-height: 92vh; border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55); }
.fld-group { border: 1px solid #d7dee3; border-radius: 9px; padding: 6px 14px 12px; margin: 12px 0; background: #fbfcfd; }
.fld-group > legend { font-weight: 600; color: var(--brand); padding: 0 6px; font-size: 13px; }
.repeat-group { border: 1px dashed #b9c4cc; border-radius: 9px; padding: 10px 12px; background: #fbfcfd; }
.repeat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
/* card mode: inner fields flow in a grid like the top-level form */
div.repeat-inst { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 14px; align-items: end; border: 1px solid #e3e8ec; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; background: #fff; }
div.repeat-inst .fw { min-width: 0; }
div.repeat-inst .fw-full { grid-column: 1 / -1; }
div.repeat-inst .repeat-del { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
div.repeat-inst .fw > label.hint { display: block; margin: 0 0 2px; font-size: 12px; color: #5d6b7e; }
div.repeat-inst .fw input, div.repeat-inst .fw select, div.repeat-inst .fw textarea { width: 100%; padding: 5px 8px; }
/* table mode: one row per instance, compact inline inputs */
.repeat-tbl-wrap { overflow-x: auto; }
.repeat-tbl { border-collapse: collapse; width: 100%; }
.repeat-tbl th, .repeat-tbl td { border: 1px solid #e3e8ec; padding: 3px 5px; font-size: 12px; vertical-align: top; }
.repeat-tbl th { background: #f0f4f7; color: #3d4d59; font-weight: 600; text-align: left; white-space: nowrap; }
.repeat-tbl td input, .repeat-tbl td select { width: 100%; min-width: 96px; padding: 3px 6px;
  border: 1px solid #cdd6dd; border-radius: 5px; font-size: 12px; }
.repeat-tbl td .geo-widget { flex-wrap: nowrap; }
.repeat-inner-list .kv { align-items: center; }
.preview-overlay { position: fixed; inset: 0; background: rgba(10,25,35,.5); z-index: 2600;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.preview-panel { background: #fff; border-radius: 12px; width: 100%; max-width: 640px;
  box-shadow: 0 12px 40px rgba(10,25,35,.4); }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid #e3e8ec; position: sticky; top: 0; background: #fff; border-radius: 12px 12px 0 0; }
.preview-body { padding: 16px 18px 22px; }
.fb-pubtag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 11px; margin-right: 4px; align-self: center; }
.fb-pubtag.on { background: #e3f0e9; color: #2c6e49; }
.fb-pubtag.off { background: #f6ece2; color: #8a5a1e; }
.btn.red-ghost { color: var(--danger); border-color: var(--danger); }
.btn.armed { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ---- geo picker pin: large, high-contrast, pulsing base ------------------ */
.gp-pin { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }
.gp-pin-wrap { position: relative; width: 46px; height: 60px; }
.gp-pin-wrap svg { position: absolute; left: 0; top: 0; }
.gp-pin-ring {
  position: absolute; left: 50%; bottom: 0; width: 26px; height: 10px;
  margin-left: -13px; border-radius: 50%;
  background: rgba(232, 68, 45, 0.4);
  animation: gp-pulse 1.6s ease-out infinite;
}
@keyframes gp-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* Reports tab: both report lists share the same width, fixed height + scroll */
.rpt-scroll {
  max-height: 300px; overflow: auto; max-width: 760px;
  border: 1px solid #dfe6ea; border-radius: 8px; background: #fff;
}
.rpt-scroll table.entry { width: 100%; margin: 0; border: none; }
.rpt-scroll th {
  position: sticky; top: 0; background: #eef3f7; z-index: 1;
  box-shadow: 0 1px 0 #ccd4da;
}
.rpt-cols { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.rpt-col { flex: 1 1 460px; min-width: 380px; }
/* the lists run to the bottom of the screen, not to an arbitrary cap */
.rpt-col .rpt-scroll,
#rpt-sec-sum .rpt-scroll, #rpt-sec-fac .rpt-scroll {
  max-width: none; max-height: calc(100vh - 320px); }

/* auto-review finding chips on plan cards */
.mp-chk { font-size: 12px; padding: 4px 10px; border-radius: 7px; margin: 3px 0; }
.mp-chk.crit { background: #fbeaea; color: #8f2f27; border-left: 3px solid var(--danger); }
.mp-chk.warn { background: #fdf4e3; color: #7a5313; border-left: 3px solid #d99a2b; }
.mp-chk.ok   { background: #e8f4ec; color: #1e5c38; border-left: 3px solid var(--ok); }

/* ask-your-data panel (Dashboard) */
.ask-panel { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px 8px; }
.ask-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.ask-chip { border: 1px solid #cfdae2; background: #f4f8fa; border-radius: 999px;
  font-size: 12px; padding: 3px 12px; color: #33586f; }
.ask-chip:hover { background: #e2f0f8; border-color: var(--brand); }
.ask-answer { font-size: 13px; margin: 8px 0 6px; color: #24435c; font-weight: 600; }
.ax-popwarn { margin: 6px 0; padding: 7px 10px; border: 1px solid #e0a800; background: #fff8e1; color: #6b4a00; border-radius: 6px; font-size: 12.5px; }
.ask-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.ask-tile { border: 1px solid #d7e1e8; border-radius: 8px; padding: 6px 12px; background: #fff; min-width: 110px; }
.ask-tile b { display: block; font-size: 16px; color: #24435c; font-variant-numeric: tabular-nums; }
.ask-tile span { font-size: 11px; color: var(--muted, #6b7a85); }
.ask-tile.on { border-color: var(--brand); background: #eef6fb; }
#ask-res .rpt-scroll { margin-bottom: 8px; }

/* ---------- workflow custody / lock ---------- */
.entry-lock {
  margin: 10px 18px 0; padding: 8px 14px; border-radius: 8px; font-size: 13px;
  background: #eef1f4; border: 1px solid var(--line); color: #5c6b76;
}
.entry-lock.locked { background: #fff3d6; border-color: #f0c36d; color: #7a5200; }
.entry-lock.open { background: #dcefe2; border-color: #bfe0c9; color: var(--ok); }
.mp-custody { font-size: 12px; margin: 2px 0 6px; padding: 3px 10px; border-radius: 6px; display: inline-block; }
.mp-custody.open { background: #dcefe2; color: var(--ok); }
.mp-custody.locked { background: #eef1f4; color: #5c6b76; }
.cmt-recall { border-left: 3px solid #d98b1a; background: #fff8ec; }

/* View report button of the plan currently shown in the report panel */
.btn.viewing { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(33,89,127,.25); }

/* report tools live in the card header, apart from workflow actions */
.plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.plan-head-tools { margin-left: auto; display: inline-flex; gap: 6px; }

/* Members → login log */
.log-scroll { max-height: 420px; }
.log-tbl th[data-lsort] { cursor: pointer; user-select: none; white-space: nowrap; }
.log-tbl th[data-lsort]:hover { background: #e4ecf2; }
.log-tbl th.sorted { color: var(--brand-deep); }
.log-tbl td code { font-size: 11px; background: #f3f6f8; padding: 1px 4px; border-radius: 3px; }
.log-tbl tr.log-fail td { background: #fff7f6; }

/* Logs tab */
.logs-bar { margin: 0 0 8px; flex-wrap: wrap; }
.logs-subtabs { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.log-tbl td .chip.cat-members { background: #e6eef7; } .log-tbl td .chip.cat-features { background: #e7f3ea; }
.log-tbl td .chip.cat-metadata { background: #f3ebf9; } .log-tbl td .chip.cat-export { background: #fff3e0; }
.log-tbl td .chip.cat-denied { background: #fde7e5; color: #8c2a22; } .log-tbl td .chip.cat-system { background: #eceff1; }
.log-tbl td.det { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #56696f; }
.log-tbl td.det:hover { white-space: normal; }

/* Logs tab fills the viewport: table height follows the window */
#tab-logs .entry-body { display: flex; flex-direction: column; min-height: calc(100vh - 120px); }
#tab-logs #logs-box { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#tab-logs #logs-box .log-scroll { max-height: none; flex: 1; min-height: 300px; height: calc(100vh - 290px); width: 100%; }
#tab-logs #logs-box .log-tbl { width: 100%; }

.fb-row.fb-add-row { cursor: pointer; color: var(--brand); font-weight: 600; background: #f6f9fb; border-top: 1px dashed #cfd8df; }
.fb-row.fb-add-row:hover { background: #e9f1f6; }
.fb-row.fb-add-row .num { visibility: hidden; }

/* repeat groups with a fixed row count: rows come from the expression, not the user */
.repeat-group.fixed-count .repeat-add, .repeat-group.fixed-count .repeat-del { display: none; }
/* a row's own name (month, ward): shown, never typed into */
.roster-label { background: #f2f6f9; color: #26323a; font-weight: 600; cursor: default; }

.other-text { margin-top: 4px; }
.other-text.hidden { display: none; }

/* connection / offline queue chip in the top bar */
.net-chip { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; border-radius: 12px;
  font-size: 11px; padding: 3px 9px; cursor: pointer; margin-right: 6px; white-space: nowrap; }
.net-chip.online { opacity: .75; }
.net-chip.offline { background: var(--danger); border-color: var(--danger); opacity: 1; }
.net-chip.pending { background: #e07b39; border-color: #e07b39; opacity: 1; }
.net-chip.syncing { background: #2e7d5b; border-color: #2e7d5b; opacity: 1; }
.net-chip.failed { background: #8c2a22; border-color: #8c2a22; opacity: 1; }
.offline-banner { background: #fff3e0; border-bottom: 1px solid #f0c490; color: #6b4a1c; font-size: 12px; padding: 5px 14px; }
.offline-banner.hidden { display: none; }

/* new field widgets */
.gtr-widget, .bc-widget, .sig-widget, .aud-widget { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bc-widget .bc-val { flex: 1; min-width: 140px; }
.sig-thumb .sig-img { height: 56px; background: #fff; border: 1px solid #dbe3ea; border-radius: 6px; padding: 2px 6px; vertical-align: middle; margin-right: 4px; }
.aud-widget .aud-play { display: inline-flex; align-items: center; gap: 6px; }

/* appearances */
.fld-radio, .fld-multi { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.fld-radio .ro, .fld-multi .ro { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.fld-radio .ro input, .fld-multi .ro input { width: auto; padding: 0; margin: 0; }
.fld-radio:not(.likert):not(.cols) { flex-direction: column; align-items: flex-start; gap: 4px; }
.fld-radio.cols, .fld-multi.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 10px; }
.fld-radio.likert { gap: 0; border: 1px solid #cfd8df; border-radius: 8px; overflow: hidden; width: fit-content; max-width: 100%; }
.fld-radio.likert .ro { flex-direction: column; gap: 3px; padding: 6px 12px; border-right: 1px solid #e3e8ec; text-align: center; min-width: 64px; font-size: 12px; }
.fld-radio.likert .ro:last-child { border-right: none; }
.fld-radio.likert .ro:has(input:checked) { background: #e3f0f0; font-weight: 600; }
.fld-multi.minimal .multi-dd { border: 1px solid #cfd8df; border-radius: 6px; background: #fff; min-width: 220px; }
.fld-multi.minimal .multi-sum { padding: 6px 10px; cursor: pointer; font-size: 13px; list-style: none; }
.fld-multi.minimal .multi-sum::after { content: " ▾"; color: var(--muted); }
.fld-multi.minimal .multi-body { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 8px; border-top: 1px solid #e3e8ec; max-height: 220px; overflow: auto; }
.counter { display: inline-flex; align-items: center; gap: 4px; }
.counter input { width: 90px; text-align: center; }
.thousands-hint { margin-left: 6px; font-variant-numeric: tabular-nums; }
textarea[data-field], textarea[data-rfield] { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid #cfd8df; border-radius: 6px; }

/* note fields with pictures */
.note-body { display: flex; gap: 10px; align-items: flex-start; }
.note-body .note-img { max-width: 140px; max-height: 80px; border: 1px solid #dbe3ea; border-radius: 6px; background: #fff; flex: none; }
.note-body .note-text { white-space: pre-wrap; }
.note-body .note-ne { margin-top: 2px; }
/* GEMNEPAL-73: formatting inside form labels, hints and notes */
.rt-h { margin: 4px 0 2px; font-size: 1.08em; line-height: 1.3; color: inherit; }
h3.rt-h { font-size: 1.15em; }
.rt-list { margin: 3px 0 3px 1.3em; padding: 0; white-space: normal; }
.rt-list li { margin: 1px 0; }
.note-text a, label.hint a, .hint a, .pf-ntext a, .pf-qt a { color: #1f6fb2; text-decoration: underline; }

/* inner fields nested under a section / repeat row */
.fb-row.inner { padding-left: 34px; background: #fbfcfd; border-left: 3px solid #cfe0ea; }
.fb-row.inner .num { color: #9aa7b0; font-size: 10px; min-width: 34px; }
.fb-row.inner .inner-main { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.fb-row.inner .inner-main:hover .nm { text-decoration: underline; }
.fb-row.inner .fb-thumb { height: 22px; border: 1px solid #dbe3ea; border-radius: 3px; background: #fff; }
.fb-row.inner.fb-add-row { color: var(--brand); font-weight: 500; }

/* the emblem and government lines of the landing page (Admin ▸ Branding); a blank line takes no room */
.gov-line .gov-l1:empty, .gov-line .gov-l2:empty { display: none; }
.gov-emblem { height: 36px; width: auto; margin-right: 8px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.gov-line { display: flex; flex-direction: column; line-height: 1.15; color: #fff; }
.gov-line .gov-l1 { font-size: 12px; font-weight: 600; letter-spacing: .2px; }
.gov-line .gov-l2 { font-size: 10px; opacity: .85; }
.hero-emblem { height: 96px; width: auto; margin: 0 auto 14px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
@media (max-width: 700px) { .gov-line .gov-l2 { display: none; } .hero-emblem { height: 72px; } }

/* map search */
.map-search { position: absolute; top: 10px; left: 56px; z-index: 1000; width: 230px; max-width: calc(100% - 120px); transition: width .15s; }
.map-search input { width: 100%; padding: 7px 10px; border: 1px solid #b9c6cf; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: 13px; }
.map-q-results { background: #fff; border: 1px solid #cfd8df; border-radius: 8px; margin-top: 4px; max-height: 300px; overflow: auto; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.map-q-results.hidden { display: none; }
.map-q-results .r { padding: 6px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #eef2f4; display: flex; gap: 8px; align-items: baseline; }
.map-q-results .r:hover, .map-q-results .r.on { background: #e9f1f6; }
.map-q-results .r .k { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; }
.map-q-results .hd { padding: 4px 10px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: #f6f8fa; }
/* feature picker in the side panel */
.feat-pick { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.feat-pick input { flex: 1; }
.feat-pick .ne { white-space: nowrap; }

.map-q-results.suggest { position: absolute; z-index: 50; }

.feat-pick { position: relative; flex-wrap: wrap; }
.feat-pick .map-q-results.suggest { left: 0 !important; width: 100% !important; top: 100% !important; }

/* Database studio */
.dbs { display: flex; gap: 12px; min-height: 60vh; }
.dbs-tree { width: 240px; flex: none; border-right: 1px solid #e3e8ec; padding-right: 10px; max-height: 75vh; overflow: auto; }
.dbs-tree input { width: 100%; margin-bottom: 6px; }
.dbs-t { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; cursor: pointer; font: inherit; }
.dbs-t:hover { background: #f3f6f8; } .dbs-t.on { background: #e9f1f6; border-color: #cfe0ea; }
.dbs-t .nm { font-family: Consolas, monospace; font-size: 12px; color: var(--brand); } .dbs-t .meta { font-size: 10.5px; color: var(--muted); }
.dbs-main { flex: 1; min-width: 0; }
.dbs-tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.dbs-cols td code, .dbs-rel code { font-size: 12px; }
.dbs-rel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dbs-rel .kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #eef2f4; font-size: 12px; }
.sql-editor { width: 100%; min-height: 120px; font: 12.5px/1.5 Consolas, monospace; border: 1px solid #cfd8df; border-radius: 8px; padding: 8px; }

.dbs-actions { display: flex; gap: 4px; margin-bottom: 6px; }
.dbs-man { color: #e07b39; font-size: 11px; }
.dbs-def { background: #f6f8fa; border: 1px solid #e3e8ec; border-radius: 8px; padding: 8px 10px; font: 11.5px/1.45 Consolas, monospace; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.vb-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 220px; overflow: auto; border: 1px solid #e3e8ec; border-radius: 8px; padding: 8px; font-size: 12px; }
.vb-cols .ro { display: flex; align-items: center; gap: 5px; padding: 1px 0; }
td.dbs-edit { cursor: text; } td.dbs-edit:hover { background: #f3f8fb; }

/* Data tab sources: collapsible groups, own scroll bar */
#tab-data .side-l { display: flex; flex-direction: column; }
#tab-data #dm-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.dm-grp summary.tool-group { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; user-select: none; }
.dm-grp summary.tool-group::before { content: "▸"; font-size: 10px; transition: transform .12s; }
.dm-grp[open] summary.tool-group::before { transform: rotate(90deg); }
.dm-grp summary::-webkit-details-marker { display: none; }
.dm-grp-body { margin-top: 4px; }

.bk-job { border-radius: 8px; padding: 6px 10px; margin: 6px 0; font-size: 12px; border: 1px solid #dbe3ea; background: #f6f8fa; }
.bk-job.run { background: #fff3e0; border-color: #f0c490; } .bk-job.ok { background: #eef7f1; border-color: #cfe5dd; } .bk-job.err { background: #fde7e5; border-color: #f1b9b3; }

/* inline mini map under GPS fields */
.geo-mini { width: 100%; max-width: 420px; height: 150px; position: relative; border: 1px solid #cfd8df; border-radius: 8px; margin-top: 6px; cursor: pointer; overflow: hidden; }
.geo-mini.hidden { display: none; }
.geo-widget { flex-wrap: wrap; } .geo-widget .geo-mini { flex-basis: 100%; }

/* Dashboards tab */
.dash-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.dash-title b { font-size: 16px; }
.dash-editbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: #f3f8fb; border: 1px dashed #b9cfe0; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; }
.dash-grid { display: grid; grid-template-columns: repeat(var(--dash-cols, 12), minmax(0, 1fr)); grid-auto-rows: var(--dash-row, 64px); gap: var(--dash-gap, 12px); align-content: start; position: relative; }
.dash-rowslider { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #56696f; }
.dash-rowslider input[type="range"] { width: 96px; accent-color: #21597f; }
.dash-rowslider .ne { min-width: 38px; }
.dash-grid.editing { background-image: linear-gradient(#edf1f4 1px, transparent 1px); background-size: 100% 76px; background-position: 0 -1px; border-radius: 8px; }
.dash-w { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; min-height: 0; min-width: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: box-shadow .15s; }
.dash-grid.editing .dash-w { transition: grid-column .12s, grid-row .12s; }
.dash-grid.editing .dash-wh { cursor: grab; touch-action: none; user-select: none; }
.dash-w.drag { box-shadow: 0 8px 24px rgba(20,50,70,.18); z-index: 5; opacity: .92; transition: none; }
/* the card itself is pointer-transparent while it is being dragged, so the
   grip has to be shown by the surface underneath it */
.dash-grid.dragging, .dash-grid.dragging .dash-w, .dash-grid.dragging .dash-wh { cursor: grabbing; }
/* ---- resize from any edge or corner ------------------------------------ */
/* One corner grip meant a widget could only ever grow down and right; to make
   it narrower on the left you had to move it first. Every side has a grip now,
   and each shows the direction it will move. */
.dash-rz { position: absolute; touch-action: none; user-select: none; z-index: 3;
  opacity: 0; transition: opacity .12s; }
/* present but faint on the selected or hovered card; full strength only under
   the pointer, which is the moment the grip is actually being aimed at */
.dash-w.sel .dash-rz, .dash-w:hover .dash-rz { opacity: .5; }
.dash-rz:hover { opacity: 1 !important; }
.dash-rz::after { content: ""; position: absolute; inset: 0; border-radius: 3px; }
/* edges: a thin strip along the whole side */
.rz-n, .rz-s { left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.rz-e, .rz-w { top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
/* .dash-w is overflow:hidden, so a handle hanging outside the box is clipped
   and the outer half of it cannot be grabbed — they sit just inside instead */
.rz-n { top: 0; } .rz-s { bottom: 0; }
.rz-e { right: 0; } .rz-w { left: 0; }
.rz-n::after, .rz-s::after { left: 36%; right: 36%; top: 3px; bottom: 3px; background: var(--accent); }
.rz-e::after, .rz-w::after { top: 36%; bottom: 36%; left: 3px; right: 3px; background: var(--accent); }
/* corners: a small square that moves both edges */
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 13px; height: 13px; }
.rz-ne { top: 0; right: 0; cursor: nesw-resize; }
.rz-nw { top: 0; left: 0; cursor: nwse-resize; }
.rz-se { bottom: 0; right: 0; cursor: nwse-resize; }
.rz-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.rz-ne::after, .rz-nw::after, .rz-se::after, .rz-sw::after {
  inset: 4px; background: #fff; border: 1px solid var(--accent); border-radius: 2px; }
.dash-rz:hover::after { background: var(--brand-deep); border-color: var(--brand-deep); }
.dash-wb .dash-svg.fill { height: 100%; max-height: none; }
.dash-wb .dash-map { height: 100%; min-height: 140px; }
.dash-wb .dash-kpi { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.dash-wb .dash-pie { height: 100%; overflow: auto; }
@media screen and (max-width: 800px) { .dash-grid { display: flex; flex-direction: column; min-height: 0 !important; } .dash-w { grid-area: auto !important; min-height: 220px; } .dash-rz { display: none; }
  /* a widget told to stop at its content means it on a phone too — otherwise a
     one-line filter or search box is given 220px of card on the smallest screen */
  .dash-w.fit { min-height: 0; } }
.dash-wh { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
/* the name gives way to the tools rather than pushing them off the card: a
   flex item will not shrink below its content without min-width */
.dash-wt { font-weight: 600; font-size: 13px; color: var(--brand); flex: 1;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-wtools { display: inline-flex; gap: 2px; }
/* The four movers read as one control, and keep out of the way until the card
   is the one being worked on: four more buttons in every header left a card
   three columns wide with a couple of characters of its name. They appear on
   hover, and on the selected card — which is how they are reached on a tablet,
   where a tap selects and there is no hovering. */
.dash-wtools .dash-wmove { display: none; gap: 0; margin-right: 3px; }
.dash-w:hover > .dash-wh .dash-wmove,
.dash-w.sel > .dash-wh .dash-wmove { display: inline-flex; }
.dash-wtools .dash-wmove .fb-ib { padding: 3px 2px; font-size: 11px; }
/* GA-44: the card's downloads are labelled buttons, not a faint glyph */
.dash-wtools .fb-ib.dl { font-size: 12px; color: #2d5670; background: #fff; border: 1px solid #c9d6df;
  border-radius: 4px; padding: 2px 6px; margin-left: 2px; white-space: nowrap; }
.dash-wtools .fb-ib.dl:hover { background: #e8f1f7; border-color: #8fb0c6; }
/* a narrow card keeps its title: the button drops its word, keeps its frame */
.dash-wh { container-type: inline-size; }
@container (max-width: 300px) { .dash-wtools .fb-ib.dl .dl-t { display: none; } }
.dash-wb { flex: 1; min-height: 0; }
.dash-svg { width: 100%; height: auto; max-height: 280px; }
.dash-kpi { text-align: center; padding: 10px 0; } .dash-kpi .n { font-size: 34px; font-weight: 700; color: var(--brand-deep); line-height: 1.1; } .dash-kpi .l { color: #56696f; font-size: 12px; margin-top: 4px; }
.dash-map { height: 300px; border-radius: 8px; overflow: hidden; }
.dash-pie { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.dash-legend { font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.dash-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.dash-text { font-size: 13.5px; line-height: 1.5; color: var(--ink); }

/* Builder: docked widget panel, Show me, field pills, filters, drill-down */
.dash-layout { display: flex; gap: 12px; align-items: flex-start; }
.dash-layout .dash-grid { flex: 1; min-width: 0; }
.dash-side { width: 380px; flex: none; position: sticky; top: 0; max-height: calc(100vh - 150px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; box-shadow: 0 2px 10px rgba(20,50,70,.06); }
.dash-side h4 { margin: 10px 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #6b7c86; }
/* dashboard map furniture: ⌂ home and the backdrop picker */
.dm-home a { font-size: 15px; line-height: 26px; font-weight: 700; text-align: center; }
.dm-base { background: #fff; border-radius: 4px; padding: 0; }
.dm-base select { font: inherit; font-size: 11px; border: 0; background: #fff; padding: 2px 4px;
  max-width: 132px; border-radius: 4px; color: #2b3b45; cursor: pointer; }
.dm-base select:focus { outline: 1px solid var(--brand); }

/* ☰ Cards — one row per widget, ticked for bulk actions */
.cl-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border: 1px solid transparent;
  border-radius: 6px; cursor: pointer; font-size: 12px; }
.cl-row:hover { background: #f3f8fb; border-color: #dde5ea; }
.cl-row.on { background: #e8f3fa; border-color: #b9d4e6; }
.cl-row input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.cl-row .cl-ic { flex: none; font-size: 13px; }
.cl-row .cl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #21313c; }
.cl-row .cl-t .ne { margin-left: 5px; }
.dash-side .fld { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #5c6b76; margin: 4px 0; } .dash-side .form-row .fld { flex: 1; } .dash-side select, .dash-side input { max-width: 100%; }
/* Being edited is warm, not teal. Teal is the accent every chart, swatch and
   button already wears, so a teal ring was one more teal thing on a teal page;
   orange belongs to nothing else here and reads as "this one" at a glance
   without shouting. Still a 1px ring and a breath of tint. */
.dash-w.sel { outline: 1px solid rgba(224, 123, 57, .70); outline-offset: 1px;
  box-shadow: 0 0 0 2px rgba(224, 123, 57, .12), 0 1px 6px rgba(0, 0, 0, .06); }
.dash-w.sel > .dash-wh { background: rgba(224, 123, 57, .07); border-radius: 6px 6px 0 0; }
/* also selected, but not the one the panel is showing */
.dash-w.multi { outline: 1px dashed rgba(224, 123, 57, .60); outline-offset: 1px; }
.dash-w.multi > .dash-wh { background: rgba(224, 123, 57, .05); }
/* a chart shown one level below the one it was set to (a municipality's "by province" card) */
.dash-wh:has(.dw-step) { flex-wrap: wrap; }
.dash-wh .dw-step { order: 99; flex: 0 0 100%; font-size: 10px; font-weight: 400; color: #7a8791;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.dash-w.sel > .dash-wh .dash-wt { color: #a85a1d; font-weight: 700; }
/* the grips belong to the card being edited, so they wear its colour */
.dash-w.sel .dash-rz::after, .dash-w.multi .dash-rz::after { background: var(--orange); }
.dash-w.sel .rz-ne::after, .dash-w.sel .rz-nw::after,
.dash-w.sel .rz-se::after, .dash-w.sel .rz-sw::after { background: #fff; border-color: var(--orange); }
/* while editing, the whole card is the thing you click to edit it */
.dash-grid.editing .dash-w { cursor: pointer; }
.dash-grid.editing .dash-w:hover { outline: 1px dashed var(--line); outline-offset: 1px; }
.dash-w.clk rect[data-k], .dash-w.clk path[data-k], .dash-w.clk circle[data-k], .dash-w.clk tbody tr, .dash-w.clk .dash-legend div { cursor: pointer; }
.dash-w.clk rect[data-k]:hover, .dash-w.clk path[data-k]:hover { opacity: .8; }
.showme { display: flex; gap: 4px; flex-wrap: wrap; }
/* the kinds, grouped and folded as the palette is */
.sm-sec { margin: 6px 0 0; }
.sm-sec > summary { text-transform: uppercase; letter-spacing: .5px; font-size: 10.5px; color: #6b7c86; }
.sm-sec > summary .n { margin-left: auto; font-size: 9.5px; opacity: .75; font-weight: 600; }
.sm-sec > .fd-sec-body { padding: 4px 8px 8px; }
.showme button { border: 1px solid #d5dde2; background: #fff; border-radius: 8px; padding: 4px 5px; font-size: 10.5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; min-width: 54px; gap: 1px; color: var(--ink); }
.showme button .ic { font-size: 17px; }
.showme button.on { border-color: var(--brand-deep); background: #e8f1f8; }
.showme button.rec { box-shadow: 0 0 0 2px #bfe6df; }
.showme button.dis { opacity: .35; cursor: not-allowed; }
.fieldpills { display: flex; flex-wrap: wrap; gap: 4px; }
.fieldpills .pill { border: 1px solid #d5dde2; border-radius: 14px; padding: 2px 9px; font-size: 12px; cursor: pointer; background: #fafcfd; }
.fieldpills .pill.m::before { content: "# "; color: var(--accent); font-weight: 700; } .fieldpills .pill.d::before { content: "Abc "; color: #e07b39; font-size: 9px; }
.fieldpills .pill.on { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); } .fieldpills .pill.on::before { color: #fff; }
.dash-filters { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.dash-fsel { max-width: 150px; font-size: 12px; }
.dash-crumbs { font-size: 11px; color: #56696f; margin: -2px 0 4px; } .dash-crumbs a { color: var(--brand-deep); cursor: pointer; }
/* stacked, the grid must be told to fill the width: the row layout's align-items: flex-start let the grid shrink to its
   cards' content, 140 px of cards down the left of a 620 px screen (user's screenshot, 26 Sep 2026) */
@media (max-width: 1000px) { .dash-layout { flex-direction: column; align-items: stretch; } .dash-layout .dash-grid { width: 100%; }
  .dash-side { width: 100%; position: static; max-height: none; } }

/* Report layout designer */
.rl-list { display: flex; flex-direction: column; gap: 3px; }
.rl-sec { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; background: #fff; cursor: pointer; font-size: 12px; }
.rl-sec:hover { border-color: #9fc3d9; } .rl-sec.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.rl-sec.hid { opacity: .45; } .rl-sec.hid .rl-t { text-decoration: line-through; }
.rl-sec.pb { background: repeating-linear-gradient(90deg, #f3f6f8 0 6px, #fff 6px 12px); font-size: 11px; color: #6b7c86; }
.rl-sec .rl-t { flex: 1; } .rl-sec .rl-w { color: var(--muted); font-size: 13px; }
.rl-h { margin: 14px 0 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #6b7c86; }
.rl-preview { flex: 1; min-width: 0; min-height: 70vh; border: 1px solid var(--line); border-radius: 10px; background: #f3f5f7; overflow: hidden; }
.rl-frame { width: 100%; height: calc(100vh - 190px); border: 0; background: #fff; }
.rl-empty { padding: 40px 30px; text-align: center; color: #6b7c86; font-size: 13px; line-height: 1.6; }

/* report designer: drag & drop + elements palette */
.rl-sec.lnk { border-left: 3px solid var(--accent); }
.rl-sec .rl-grip { color: #b3bfc7; cursor: grab; font-size: 12px; letter-spacing: -3px; margin-right: 2px; }
.rl-sec.dragging { opacity: .4; }
.rl-sec.over-top { box-shadow: 0 -3px 0 0 var(--accent); } .rl-sec.over-bot { box-shadow: 0 3px 0 0 var(--accent); }
.rl-drop { margin-top: 4px; border: 1px dashed #c7d2da; border-radius: 7px; padding: 6px; text-align: center; font-size: 11px; color: #9aa7b0; }
.rl-drop.over { border-color: var(--accent); background: #e9f7f4; color: var(--accent); }
.rl-palette { max-height: 260px; overflow: auto; border: 1px solid #e3e8ec; border-radius: 8px; padding: 6px 8px; background: #fbfcfd; }
.rl-pal-d { margin: 4px 0 6px; font-size: 12px; } .rl-pal-d b { display: block; margin-bottom: 3px; color: var(--brand); }
.rl-pal-d .pill.pal { display: inline-block; margin: 2px 3px 2px 0; cursor: grab; background: #fff; border: 1px solid #d5dde2; border-radius: 14px; padding: 2px 9px; font-size: 12px; }
.rl-pal-d .pill.pal:hover { border-color: var(--accent); background: #e9f7f4; }

/* report designer: canvas mode */
.rl-canvas-wrap { flex: 1; min-width: 0; overflow: auto; max-height: calc(100vh - 160px); background: #e9edf0; border-radius: 10px; padding: 16px; }
.rl-page { position: relative; display: grid; background: #fff; box-shadow: 0 2px 10px rgba(20,50,70,.15); margin: 0 auto 18px; padding: 0; box-sizing: content-box; border: 1px solid #d5dde2; font: 12px/1.5 Arial, 'Noto Sans Devanagari', sans-serif; color: #1c2833; }
.rl-page.over { outline: 2px dashed var(--accent); }
.rl-pgno { position: absolute; left: 6px; bottom: -17px; font-size: 10px; color: var(--muted); }
.rl-pgtools { position: absolute; right: 4px; bottom: -20px; display: inline-flex; gap: 4px; } .rl-pgtools .fb-ib { font-size: 10px; background: #fff; border: 1px solid #d5dde2; border-radius: 5px; padding: 1px 6px; }
.rl-blk { position: relative; border: 1px solid #bcd3e0; background: rgba(31,89,127,.025); border-radius: 4px; overflow: hidden; min-width: 0; min-height: 0; cursor: grab; touch-action: none; }
.rl-blk:hover { border-color: var(--accent); background: rgba(42,157,143,.04); } .rl-blk.sel { border: 2px solid var(--accent); box-shadow: 0 0 0 3px #bfe6df; background: rgba(42,157,143,.05); }
.rl-blk.lnk { border-color: #8fc9bf; }
.rl-blk.hid { opacity: .35; } .rl-blk.drag { opacity: .85; box-shadow: 0 8px 24px rgba(20,50,70,.25); z-index: 5; }
.rl-blk-grip { cursor: grab; letter-spacing: -2px; opacity: .55; font-size: 11px; }
.rl-blk-bar:active .rl-blk-grip { cursor: grabbing; }
.rl-blk-bar { display: flex; opacity: .75; position: absolute; top: 0; left: 0; right: 0; align-items: center; gap: 4px; background: #e9f7f4; border-bottom: 1px solid #bfe6df; padding: 1px 6px; font-size: 10.5px; color: var(--brand-deep); z-index: 2; }
.rl-blk:hover .rl-blk-bar, .rl-blk.sel .rl-blk-bar { opacity: 1; } .rl-blk-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-blk-body { height: calc(100% - 18px); margin-top: 18px; overflow: hidden; padding: 2px 4px; } .rl-blk-body h2 { margin-top: 0; }
.rl-blk-body h2[contenteditable]:focus { outline: 1px dashed var(--accent); background: #f3fbf9; }
.rl-blk-body h2[contenteditable]:hover { outline: 1px dashed #bcd3e0; cursor: text; }
.rl-blk-body.typable { cursor: text; }
.rl-blk-body.typable:hover { background: #f7fdfc; }
.rl-blk-ph { color: #9fb0bc; font-style: italic; }
.rl-blk-body textarea.rl-inline { width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--accent);
  border-radius: 3px; padding: 4px 6px; font: inherit; resize: none; }
.rl-blk-rz { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 3;
  opacity: 0; transition: opacity .12s;
  background: linear-gradient(135deg, transparent 45%, var(--accent) 45%, var(--accent) 62%,
              transparent 62%, transparent 74%, var(--accent) 74%, var(--accent) 90%, transparent 90%); }
.rl-blk:hover .rl-blk-rz, .rl-blk.sel .rl-blk-rz { opacity: .9; }
.rl-blk-rz:hover { opacity: 1 !important; }
.rl-inline { width: 100%; height: 100%; border: 1px solid var(--accent); border-radius: 4px; font: 12px/1.4 Arial, sans-serif; padding: 4px; resize: none; }

.rl-blk-body .ec, .rl-page .ec { height: calc(100% - 30px) !important; min-height: 120px; }
.rl-blk-body > .ec:first-child { height: 100% !important; }

/* field shelves */
.shelves { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.shelf { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-height: 30px; border: 1px dashed #c7d2da; border-radius: 7px; padding: 3px 6px; background: #fbfcfd; }
.shelf.over { border-color: var(--accent); background: #e9f7f4; }
.shelf-n { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #6b7c86; min-width: 74px; }
.fieldpills .pill[draggable] { cursor: grab; }

.chip.core { background: #fff3cd; color: #8a5a00; border: 1px solid #f0d58a; font-size: 10px; letter-spacing: .5px; }

.lyr-sect { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lyr-sect > summary { cursor: pointer; padding: 8px 12px; list-style: none; display: flex; gap: 8px; align-items: center; background: #f3f7fa; border-radius: 10px; font-size: 13px; }
.lyr-sect[open] > summary { border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.lyr-sect > summary::before { content: "▸"; color: #6b7c86; } .lyr-sect[open] > summary::before { content: "▾"; }
.lyr-sect .tbl-wrap { padding: 6px; }

/* Layers tab: drag handle + drop indicator */
.lyr-grip { cursor: grab; color: #7a8994; margin-right: 6px; user-select: none; font-size: 12px; letter-spacing: -2px; }
.lyr-grip:active { cursor: grabbing; }
tr.lyr-row.drag-over td { box-shadow: inset 0 2px 0 var(--info); }

/* geopoint field: large inline map framed on the facility's ward */
.geo-mini.big { max-width: 100%; height: 320px; }
/* the map widget's layer panel, brought closer to the Layers tab: the feature
   count on the row, and the ▧ Display control beside the rest */
.ax-n { margin-left: 6px; font-size: 10px; color: var(--muted, #6b7a85); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* the collector's transparency, on a question's map */
.ax-refmenu .ax-rop { width: 70px; margin-left: auto; flex: 0 0 auto; height: 12px; accent-color: #21597f; cursor: pointer; }
a.ax-dsp { margin-left: 4px; text-decoration: none; opacity: .62; }
a.ax-dsp:hover { opacity: 1; }
a.ax-dsp.on { opacity: 1; color: #1f6fb2; }
/* a card that is drawing less than it holds says so, rather than looking like
   a layer with missing features */
.dm-drawnote { position: absolute; left: 8px; bottom: 26px; z-index: 600; max-width: 62%;
  background: rgba(255,255,255,.92); border: 1px solid #cfd8df; border-radius: 6px;
  padding: 3px 7px; font-size: 10.5px; line-height: 1.45; color: #40525e; pointer-events: none; }
/* a question whose creator asked for the map open on the form, not behind a
   button: it is a working map, so it gets the full width and its own height */
.geo-inline { max-width: 100% !important; cursor: default; }
.geo-inline .leaflet-container { cursor: crosshair; }
/* the map designer's live preview: a real map, with the map widget's own layer
   panel on it, so a design is built by looking at it.
   flex: none is the load-bearing part. The dialog body is a column flex
   container, and a Leaflet map's panes are absolutely positioned, so the
   preview has no intrinsic height to protect it: as a shrinkable flex item
   it collapsed to about 2px and the map was there but invisible. */
.mp-preview { flex: 0 0 auto; height: 360px; min-height: 360px;
  border: 1px solid #cfd8df; border-radius: 8px; overflow: hidden; margin-top: 4px; }
/* The layer panel is a <details> whose menu pops OUT of the little button, so
   the control itself must never clip: capping its height hid the menu and left
   only the scroll arrows, which read as "the button does nothing". */
.mp-preview .ax-refmenu { max-height: 280px; }
@media (max-width: 700px) { .mp-preview { height: 300px; min-height: 300px; } .mp-preview .ax-refmenu { max-height: 220px; } }
/* a locked answer: the tools are still visible, so it reads as "held", not broken */
.geo-widget .geo-unlock, .gtr-widget .geo-unlock { border-color: #e0a800; color: #8a6100; }
.geo-mini-lbl { position: absolute; left: 8px; bottom: 8px; z-index: 500; background: rgba(255,255,255,.9); color: var(--ink); font-size: 11px; padding: 3px 8px; border-radius: 6px; pointer-events: none; }
@media (max-width: 700px) { .geo-mini.big { height: 260px; } }

.repeat-inst .repeat-note { font-weight: 600; color: var(--brand); border-top: 1px solid #e1e8ec; padding-top: 8px; margin-top: 4px; }

.ward-lbl { background: transparent; border: 0; box-shadow: none; color: #fff; font-weight: 700; font-size: 11px; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.ward-lbl::before { display: none; }

.geo-fence { flex-basis: 100%; font-size: 11px; margin-top: 2px; }
.geo-fence.ok { color: var(--ok); } .geo-fence.bad { color: var(--danger); font-weight: 600; }
.geo-widget.fence-bad .geo-val, .gtr-widget.fence-bad .gtr-status { outline: 2px solid #e0a0a0; border-radius: 4px; }

/* attribute table: column visibility */
table.attr .col-hide { display: none; }
.colvis-pop { position: absolute; z-index: 3000; width: 280px; background: #fff; border: 1px solid #cfd8df; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 10px 12px; font-size: 12px; }
.colvis-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.colvis-q { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.colvis-tools { text-align: center; margin-bottom: 6px; color: #5b7f9f; }
.colvis-list { max-height: 260px; overflow: auto; }
.colvis-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 2px; cursor: pointer; line-height: 1.25; }
.colvis-row input { margin-top: 2px; }
.colvis-row:hover { background: #f2f7fa; }
.btn.on, .btn.ghost.on { background: #e2f0f8; border-color: var(--brand); color: #1f4f73; box-shadow: inset 0 -2px 0 var(--brand); }

/* attribute tables: subtle grid — light horizontal rules, faint vertical separators */
table.entry.attr th, table.entry.attr td { border: none; border-bottom: 1px solid #edf1f4; border-right: 1px solid #f3f6f8; }
table.entry.attr th { border-bottom: 1px solid #d4dbe1; background: #f6f8fa; }
table.entry.attr tr:hover td { background: #fafcfd; }

table.entry.attr th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
table.entry.attr td.cell input { min-width: 0; }

.colvis-grip { cursor: grab; color: #7a8994; font-size: 11px; letter-spacing: -2px; margin-right: 2px; user-select: none; }
.colvis-row.drag-over { box-shadow: inset 0 2px 0 var(--info); }
.colvis-row[draggable="true"] { cursor: grab; }

.tbl-footer .tbl-title { font-size: 12px; color: #4a5a64; margin-right: 14px; white-space: nowrap; cursor: help; }

table.entry.attr th .th-wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 4px; }
table.entry.attr th .th-menu { border: 0; background: transparent; color: #7a8994; cursor: pointer; font-size: 12px; padding: 0 2px; border-radius: 4px; opacity: 0; }
table.entry.attr th:hover .th-menu { opacity: 1; }
table.entry.attr th .th-menu:hover { background: #e2f0f8; color: var(--brand); }
.colvis-pop.fmenu .fm { display: block; width: 100%; text-align: left; margin: 3px 0; }
.colvis-pop.fmenu .fm.danger { color: var(--danger); }

/* attribute table: column resize grip on the header's right edge */
table.entry.attr th { position: relative; }
table.entry.attr th .col-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
table.entry.attr th .col-grip:hover { background: rgba(33,89,127,.25); }
table.entry.attr td { overflow: hidden; text-overflow: ellipsis; }

table.entry.attr tr.row-filtered { display: none; }

/* help assistant */
.ha-fab { position: fixed; right: 18px; bottom: 18px; z-index: 2500; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--brand-deep); color: #fff; font-size: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; }
.ha-fab.on { background: var(--accent); }
.ha-panel { position: fixed; right: 18px; bottom: 72px; z-index: 2500; width: min(380px, 94vw); height: min(560px, 80vh); background: #fff; border: 1px solid #cfd8df; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.22); display: flex; flex-direction: column; overflow: hidden; }
.ha-panel.hidden { display: none; }
.ha-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid #e6ecf0; background: #f6f9fb; }
.ha-body { flex: 1; overflow: auto; padding: 10px 12px; font-size: 12px; line-height: 1.4; }
.ha-msg { max-width: 95%; padding: 8px 10px; border-radius: 10px; margin: 6px 0; }
.ha-msg.user { margin-left: auto; background: var(--brand-deep); color: #fff; }
.ha-msg.bot { background: #f2f6f9; color: var(--ink); }
.ha-hit { border-top: 1px solid #e1e8ec; padding-top: 6px; margin-top: 6px; }
.ha-q { font-weight: 600; color: var(--brand); }
.ha-ex { margin-top: 4px; color: #4a5a64; }
.ha-sugg { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-top: 1px solid #e6ecf0; max-height: 96px; overflow: auto; }
.ha-chip { border: 1px solid #cfd8df; background: #fff; border-radius: 14px; padding: 3px 9px; font-size: 11px; cursor: pointer; color: var(--brand); }
.ha-chip:hover { background: #e2f0f8; }
.ha-input { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #e6ecf0; }
.ha-input input { flex: 1; }
@media (max-width: 700px) { .ha-panel { right: 6px; bottom: 64px; } .ha-fab { right: 10px; bottom: 10px; } }

.ha-lang { display: inline-flex; border: 1px solid #cfd8df; border-radius: 12px; overflow: hidden; margin-right: 6px; vertical-align: middle; }
.ha-lb { border: 0; background: #fff; padding: 2px 8px; font-size: 11px; cursor: pointer; color: var(--brand); }
.ha-lb.on { background: var(--brand); color: #fff; }
.ha-startlink { display: block; margin-top: 4px; border: 0; background: none; padding: 0; font-size: 11px; font-weight: 600; color: var(--brand); cursor: pointer; text-align: left; }
.ha-startlink:hover { text-decoration: underline; }
.ha-startlink.hidden { display: none; }

/* ---------- accessibility (Aug 2026 UX pass) ---------- */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px;
}
.btn:focus-visible { outline-color: var(--brand); }
/* (QA 3 Oct 2026, A-3/A-4) a dialog focused as a whole shows no ring; cards, chips, headings and file pickers made
   reachable by Tab show the usual one, drawn inside the box so a scrolling strip does not clip it */
[data-a11y-dlg]:focus { outline: none; }
[data-kbclick]:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }

/* ---------- button scale (Aug 2026 UX pass): default 32px, .small 26px ---------- */
.btn { min-height: 32px; padding: 5px 14px; font-size: 13px; line-height: 1.2; }
.btn.small, .fb-ib { min-height: 26px; padding: 3px 10px; font-size: 12px; }

/* Data → Core layers: collapsible sub-panels */
.cl-sect { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0 0 10px; background: #fff; }
.cl-sect > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--brand); user-select: none; }
.cl-sect[open] > summary { margin-bottom: 6px; }

/* ---------- first-login tour ---------- */
.tour-veil { position: fixed; inset: 0; z-index: 4000; pointer-events: none; }
.tour-veil .tour-card { pointer-events: auto; }
.tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(15,30,42,.55), 0 0 0 3px var(--info); transition: all .25s; pointer-events: none; }
.tour-card { position: fixed; width: min(360px, 92vw); background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.tour-title { font-weight: 700; color: var(--brand); font-size: 15px; margin-bottom: 4px; }
.tour-text { font-size: 13px; color: var(--ink); line-height: 1.45; }
.tour-nav { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tour-dots .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); margin-right: 4px; }
.tour-dots .dot.on { background: var(--brand); }

/* ---------- activity feedback (Aug 2026 UX pass) ---------- */
body.net-busy::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 5000;
  background: linear-gradient(90deg, transparent, var(--info), transparent); background-size: 40% 100%;
  animation: netslide 1s linear infinite; }
@keyframes netslide { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(33,89,127,.25); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
button:disabled .spin { border-top-color: #888; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- accessibility round 2 ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 6000; background: var(--brand); color: #fff; padding: 8px 14px; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
.colvis-ud { display: none; gap: 2px; }
.colvis-row:hover .colvis-ud, .colvis-row:focus-within .colvis-ud { display: inline-flex; }
.colvis-ud .cu { border: 1px solid var(--line); background: #fff; border-radius: 4px; width: 20px; height: 20px; font-size: 11px; cursor: pointer; color: var(--brand); padding: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body.net-busy::before { animation: none; background: var(--info); }
}

/* ================= uniform controls (Aug 2026 UX pass, appended last so it wins the cascade) ================= */
/* ---- text-like inputs, selects, textareas: one height, border, radius, focus ---- */
input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="password"],
input[type="email"], input[type="tel"], input[type="date"], input[type="month"], input[type="time"],
input[type="file"], select, textarea {
  font: inherit; font-size: 13px; color: var(--ink); background: #fff;
  border: 1px solid #b9c4cc; border-radius: 6px; padding: 4px 9px; min-height: 30px; box-sizing: border-box;
}
select { padding-right: 26px; }
textarea { min-height: 60px; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: #93a1ab; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #93a7b5; }
input:disabled, select:disabled, textarea:disabled { background: var(--bg-soft); color: var(--muted); }
/* table-cell editors keep their borderless in-grid look */
table.entry td.cell input, table.entry td.cell select,
table.entry.attr td.cell input, table.entry.attr td.cell select { border: none; border-radius: 0; min-height: 0; background: transparent; }
table.entry.attr td.cell select { border: 1px solid transparent; border-radius: 4px; }
table.entry.attr td.cell select:hover, table.entry.attr td.cell select:focus { border-color: #b9c9d6; background: #fff; }
tr.sel-row td.cell input, tr.sel-row td.cell select { background: #cfeaf7; }
/* checkbox / radio / color / range keep native proportions */
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 15px; height: 15px; accent-color: var(--brand); }
input[type="color"] { min-height: 0; padding: 1px; width: 34px; height: 24px; }
input[type="range"] { min-height: 0; border: none; padding: 0; accent-color: var(--brand); }

/* ---- buttons: two sizes, one radius, consistent hover/active ---- */
.btn, .fb-ib, .ha-chip, .colvis-ud .cu, .lang-btn, .ha-lb { border-radius: 6px; }
.btn { transition: filter .1s, background .1s; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn.ghost:hover:not(:disabled) { filter: none; background: #eaf3f9; }
.btn:active:not(:disabled) { filter: brightness(.95); }
.btn:disabled { opacity: .55; cursor: default; }
.fb-ib { min-height: 24px; }

/* ---- scrollbars: thin and consistent everywhere ---- */
* { scrollbar-width: thin; scrollbar-color: #b9c4cc transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c3ced6; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: #9fb0bc; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- panels / popovers: one radius + shadow family ---- */
.colvis-pop, .ha-panel, .modal-card, .preview-panel, .tour-card { border-radius: 12px; }

/* ---------- password show/hide ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 34px; box-sizing: border-box; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none;
  cursor: pointer; font-size: 14px; line-height: 1; padding: 3px 5px; border-radius: 5px; opacity: .65; }
.pw-eye:hover { opacity: 1; background: var(--bg-soft); }


/* ---- My account -------------------------------------------------------- */
.acct-grid { display:grid; grid-template-columns:minmax(320px,1fr) minmax(360px,1.4fr);
             gap:14px; align-items:start; }
@media (max-width: 900px) { .acct-grid { grid-template-columns:1fr; } }
.acct-card { border:1px solid var(--line); border-radius:10px; padding:12px 14px;
             background:var(--bg-soft); }
.acct-card + .acct-card, .acct-grid + .acct-card { margin-top:14px; }
.acct-tbl { width:100%; border-collapse:collapse; }
.acct-tbl th { text-align:left; font-weight:600; color:var(--muted); padding:5px 10px 5px 0;
               white-space:nowrap; vertical-align:top; width:1%; font-size:13px; }
.acct-tbl td { padding:5px 0; font-size:13.5px; }
.acct-scroll { max-height: calc(100vh - 300px); overflow: auto; }
.acct-log { width:100%; font-size:12.5px; }
.acct-log th { position:sticky; top:0; background:var(--bg-soft); z-index:1; }
.ok-txt { color:#1e7b45; } .err-txt { color:#b3392f; } .warn-txt { color:#a8701a; }


/* ---- draft / published state on reports and dashboards ------------------ */
.pub-chip { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.5px;
            text-transform:uppercase; padding:1px 7px; border-radius:9px; vertical-align:middle;
            border:1px solid transparent; }
.pub-chip.draft { color:#8a5a12; background:#fdf3e0; border-color:#eeddb8; }


/* ---- Builder cards: report layouts, custom reports, dashboards ---------- */
.bcards { display: grid; gap: 12px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); align-items: stretch; }
.bcard { display: flex; flex-direction: column; gap: 9px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid #c9d5de;
  border-radius: 10px; padding: 12px 14px; font: inherit; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s; }
.bcard:hover { border-color: var(--brand); border-left-color: var(--brand);
  box-shadow: 0 3px 10px rgba(24,58,84,.10); transform: translateY(-1px); }
.bcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bcard.facility { border-left-color: #5b8fb5; }
.bcard.summary  { border-left-color: #3f9080; }
.bcard.national { border-left-color: #21597f; }
.bcard.accessibility { border-left-color: #2a9d8f; }
.bcard.supply        { border-left-color: #5e2b97; }
.bcard.custom   { border-left-color: #d99a2b; }
.bcard.dash     { border-left-color: #2a9d8f; }

.bcard-top { display: flex; align-items: flex-start; gap: 10px; }
.bcard-ico { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--bg-soft);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; }
.bcard-name { display: block; min-width: 0; }
.bcard-name b { display: inline; font-size: 12px; font-weight: 600; color: #1b3a5b;
  overflow-wrap: anywhere; }
.bcard-name .pub-chip { margin-left: 6px; }
.bcard-sub { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 400;
  color: var(--muted); overflow-wrap: anywhere; }

.bcard-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bchip { font-size: 9.5px; color: var(--muted); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
.bchip.accent { color: #1b4a6b; background: #eaf3f9; border-color: #cfe0ea; font-weight: 600; }

.bcard-foot { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line);
  font-size: 10px; color: var(--muted); }
.bcard-foot.ok { color: #2c6e49; }
.bcard-foot.warn { color: #8a5a12; }

.bcard.add { align-items: center; justify-content: center; flex-direction: row; gap: 6px;
  min-height: 96px; color: #6b7c86; font-weight: 600; border: 1px dashed #c3ccd4;
  border-left: 1px dashed #c3ccd4; background: #fafbfc; }
.bcard.add:hover { border-color: var(--brand); border-left-color: var(--brand);
  color: var(--brand); background: #f4f9fc; box-shadow: none; }
.bcard.add .plus { font-size: 16px; }

/* thumbnail: a small picture of the layout, drawn from the layout itself */
.bcard { position: relative; }
.bcard-thumb { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f7fafc, #eef3f7); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px; margin-bottom: 2px; height: 74px; min-height: 74px; overflow: hidden; }
.bcard-thumb .bthumb { height: 100%; width: auto; max-width: 100%;
  filter: drop-shadow(0 1px 2px rgba(24,58,84,.10)); }
.bcard:hover .bcard-thumb { background: linear-gradient(180deg, #f4f9fc, #e8f1f7); }

/* per-card actions — visible on hover, and always on a keyboard focus */
.bcard-acts { position: absolute; top: 7px; right: 7px; display: flex; gap: 4px;
  opacity: 0; transition: opacity .12s; }
.bcard:hover .bcard-acts, .bcard:focus-within .bcard-acts, .bcard:focus-visible .bcard-acts { opacity: 1; }
.bcard-act { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; cursor: pointer; border-radius: 6px; padding: 0;
  border: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--muted); }
.bcard-act:hover { border-color: var(--brand); background: #fff; }
.bcard-act.danger:hover { border-color: #b3392f; background: #fdf2f1; }
/* armed delete: the first click turns the icon into an explicit second step */
.bcard-act.armed { width: auto; padding: 0 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; color: #fff; background: #b3392f; border-color: #b3392f; }
.bcard-act.armed:hover { background: #9c3128; border-color: #9c3128; }

/* the real picture, when one has been taken */
.bcard-thumb.shot { padding: 0; background: #fff; }
.bcard-thumb.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border-radius: 6px; display: block; }
.bcard-thumb.shot { position: relative; }
.shot-old { position: absolute; left: 6px; bottom: 6px; font-size: 9.5px; letter-spacing: .3px;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); color: var(--muted);
  border-radius: 20px; padding: 1px 7px; }

/* Builder toolbar: search + sharing filters + carousel arrows */
.bbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; }
.bbar .spacer { flex: 1; }
.bbar-search { position: relative; display: flex; align-items: center; }
.bbar-search .ic { position: absolute; left: 9px; font-size: 11px; opacity: .5; pointer-events: none; }
.bbar-search input { padding: 6px 12px 6px 26px; border: 1px solid #d5dde3; border-radius: 20px;
  font-size: 12.5px; width: 240px; background: #fff; }
.bbar-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(33,89,127,.14); }
.bbar-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.bbar-count { font-size: 11.5px; white-space: nowrap; }
.bbar [data-bnav] { min-width: 28px; font-size: 15px; line-height: 1; padding: 3px 8px; }
.bbar [data-bnav][disabled] { opacity: .35; cursor: default; }
.panel-title.bbar-inline { display: flex; align-items: center; gap: 8px; }
.panel-title.bbar-inline .spacer { flex: 1; }
.panel-title.bbar-inline [data-bnav] { min-width: 28px; font-size: 15px; line-height: 1; padding: 2px 8px;
  text-transform: none; letter-spacing: 0; }
.panel-title.bbar-inline [data-bnav][disabled] { opacity: .35; cursor: default; }

/* carousel: one scrolling row instead of a wrapping grid */
.bcards.strip { display: flex; grid-template-columns: none; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; padding: 4px 2px 12px; scrollbar-width: thin; }
.bcards.strip > .bcard { flex: 0 0 200px; height: 200px; overflow: hidden; scroll-snap-align: start;
  padding: 10px 12px; gap: 6px; }
/* the last block (share state) sits on the floor of the square, so shorter
   cards don't leave a hole in the middle */
.bcards.strip > .bcard > :last-child { margin-top: auto; }
@media (max-width: 640px) { .bcards.strip > .bcard { flex-basis: 82%; } }
@media (hover: none) { .bcard-acts { opacity: 1; } }


/* ---- "a newer version is available" notice ----------------------------- */
.upd-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 4000;
  display: flex; align-items: center; gap: 10px; background: #1b3a5b; color: #fff;
  border-radius: 24px; padding: 8px 10px 8px 18px; font-size: 13px;
  box-shadow: 0 6px 22px rgba(16,38,56,.28); max-width: calc(100vw - 24px); }
.upd-bar .btn { white-space: nowrap; }
.upd-bar .btn.ghost { color: #cfe0ea; border-color: rgba(255,255,255,.35); background: transparent; }
.upd-bar .btn.ghost:hover { color: #fff; border-color: #fff; }
@media (max-width: 480px) { .upd-bar { left: 12px; right: 12px; transform: none; } }


/* ---- report designer: live pane + print view --------------------------- */
.rl-preview { position: relative; }
.rl-refreshing { position: absolute; top: 8px; right: 12px; z-index: 3; font-size: 11px;
  color: var(--muted); background: rgba(255,255,255,.92); border: 1px solid var(--line);
  border-radius: 20px; padding: 2px 10px; }

.rl-printveil { position: fixed; inset: 0; z-index: 4200; background: rgba(24,38,50,.55);
  display: flex; flex-direction: column; }
.rl-printbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: #fff; border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.rl-printscroll { flex: 1; overflow: auto; padding: 22px 12px 40px; display: flex;
  justify-content: center; align-items: flex-start; }
.rl-paper { background: #fff; box-shadow: 0 6px 26px rgba(12,26,38,.35); border-radius: 2px; }
.rl-paper-frame { width: 100%; border: 0; display: block; min-height: 400px; }
.rl-paper-inner { position: relative; }
/* where the paper breaks, and the footer band the PDF prints there */
.rl-pagelines { position: absolute; inset: 0; pointer-events: none; }
.rl-pageline { position: absolute; left: -10mm; right: -10mm; border-top: 1px dashed #b9c4cc; }
.rl-pageline .lbl { position: absolute; right: 2px; top: 2px; font-size: 9px; color: #9fb0bc;
  background: #fff; padding: 0 4px; }
.rl-pagefoot { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between;
  font: 8px monospace; color: #8a9794; }
@media (max-width: 900px) { .rl-paper { width: 100% !important; } }


/* ---- report canvas: say what can be done before it has to be discovered - */
.rl-canvas-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rl-cv-hint { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--muted);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; }


/* ---- section tree: a section's sub-elements ---------------------------- */
.rl-sec-wrap { margin-bottom: 3px; }
.rl-parts { margin: 2px 0 4px 22px; border-left: 2px solid var(--line); padding-left: 8px; }
.rl-part { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted);
  padding: 2px 4px; border-radius: 5px; }
.rl-part:hover { background: var(--bg-soft); }
.rl-part-t { flex: 1; min-width: 0; }
.rl-part-src { display: block; font-size: 10px; color: #9fb0bc; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rl-src { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 8px; margin: 6px 0; }
.rl-part.off .rl-part-t { text-decoration: line-through; opacity: .6; }
/* the twist that opens a section's pieces — a real control, not a stray arrow */
.rl-twist { display: inline-flex; align-items: center; gap: 3px; flex: none;
  margin-right: 4px; padding: 1px 6px 1px 4px; cursor: pointer;
  border: 1px solid #bcd3e0; border-radius: 20px; background: #eaf3f9;
  color: var(--brand); font: inherit; font-size: 11px; line-height: 1.5; }
.rl-twist:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.rl-twist .tw { font-size: 10px; }
.rl-twist .n { font-weight: 700; font-size: 10.5px; }
.rl-twist[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
/* sections with no pieces keep their labels lined up with the ones that have */
.rl-twist-gap { display: inline-block; flex: none; width: 26px; }
.rl-part-split { border-bottom: 1px dashed var(--line); padding-bottom: 5px; margin-bottom: 3px; }
.rl-part-split .btn { flex: none; font-size: 10.5px; }
.rl-part { cursor: pointer; }
.rl-part.sel { background: #e2f3ef; color: var(--brand-deep); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent); }
/* the selected sub-element, ringed inside its block on the page */
.rl-blk [data-rpart] { position: relative; }
.rl-blk [data-rpart].sel-part { outline: 2px solid var(--accent); outline-offset: 2px;
  border-radius: 3px; background: rgba(42,157,143,.06); }
.rl-blk [data-rpart].rpart-box { overflow: hidden; }
.rl-blk [data-rpart].rpart-box img { width: 100%; height: 100%; object-fit: contain; }
/* the sub-element's own corner grip, same idea as the block's */
.rpart-rz { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; z-index: 4;
  cursor: nwse-resize; opacity: 0; transition: opacity .12s; touch-action: none;
  background: linear-gradient(135deg, transparent 48%, var(--brand) 48%, var(--brand) 66%,
              transparent 66%, transparent 78%, var(--brand) 78%, var(--brand) 94%, transparent 94%); }
.rl-blk:hover [data-rpart] > .rpart-rz, .rl-blk [data-rpart].sel-part > .rpart-rz { opacity: .8; }
.rpart-rz:hover { opacity: 1 !important; }
.rl-blk [data-rpart].rz { outline: 2px dashed var(--brand); outline-offset: 1px; }
/* a free-flowing block shows everything instead of cutting it off */
.rl-blk-body.grow { overflow: visible; }


/* ---- report palette, grouped by what a report is made of ---------------- */
.rl-addgrp { margin-top: 8px; }
.rl-addgrp-t { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px; }
.rl-addgrp .form-row { gap: 5px; }


/* ---- survey forms in the report palette -------------------------------- */
/* the left column: the report's sections, and the library it is composed from */
.rl-sidetabs { display: flex; gap: 4px; margin-bottom: 8px; }
.rl-sidetab { flex: 1; padding: 6px 8px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft);
  color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.rl-sidetab:hover { border-color: var(--brand); color: var(--brand); }
.rl-sidetab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.rl-sidetab .n { font-size: 10.5px; font-weight: 700; opacity: .85;
  background: rgba(255,255,255,.22); border-radius: 20px; padding: 0 6px; }
.rl-sidetab:not(.on) .n { background: #dbe4ea; color: var(--muted); }
.rl-sidepane.hidden { display: none; }
/* the right-hand column: what is selected, and the library to compose from */
.rl-rightcol { width: 330px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.rl-rightcol .dash-side { width: auto; }
.rl-lib { overflow: auto; }
/* ---- side rails, everywhere one stands beside something that scrolls -----
   A rail travels down with the reader and scrolls inside itself, rather than
   running off the bottom of a page that is taller than the screen and taking
   the only way back with it. --rail-h is the height of the scrolling area it
   lives in, measured in dashSideFit rather than guessed, because the ribbon
   above changes height with what is open; the calc is only the fallback for
   the moment before the first measurement. Each rail is the one scroller in
   its column — the boxes inside it that scrolled on their own are left to run
   their full length, or the reader meets two scrollbars an inch apart. */
.dash-layout > .dash-side,
.dash-layout > .rl-side,
.dash-layout > .rl-rightcol,
.dash-layout > .cl-side,
.dbs > .dbs-tree {
  position: sticky; top: 8px; max-height: var(--rail-h, calc(100vh - 190px)); overflow: auto;
}
.dash-layout > .rl-side > .dash-side { position: static; max-height: none; overflow: visible;
  box-shadow: none; }
.dash-layout > .rl-rightcol > .rl-lib { overflow: visible; }
/* narrow: the rails stack under what they were beside, and size themselves */
@media (max-width: 1000px) {
  .dash-layout > .dash-side, .dash-layout > .rl-side, .dash-layout > .rl-rightcol,
  .dash-layout > .cl-side, .dbs > .dbs-tree { position: static; max-height: none; overflow: visible; }
}
.rl-pal-note { margin: 0 0 8px; }
/* a survey sits in the library exactly like a dashboard does */
.rl-pal-sv { margin-left: 6px; font-weight: 400; font-size: 11px; max-width: 150px;
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 4px; background: #fff; }
/* a group heading drags as the whole survey / dashboard */
.rl-pal-h[draggable="true"] { cursor: grab; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent; border-radius: 7px; padding: 1px 7px 1px 4px; margin-left: -4px; }
.rl-pal-h[draggable="true"]:hover { border-color: var(--brand); background: #eaf3f9; }
.rl-pal-h[draggable="true"]:active { cursor: grabbing; }
.rl-pal-h .all { font-size: 10px; font-weight: 700; color: var(--muted);
  background: #dbe4ea; border-radius: 20px; padding: 0 6px; }
.rl-pal-h[draggable="true"]:hover .all { background: var(--brand); color: #fff; }
.rl-pal-tw { border: 0; background: none; cursor: pointer; color: var(--brand); font-size: 11px;
  padding: 0 3px; line-height: 1; }
.rl-pal-tw:hover { color: var(--brand-deep); }


/* ---- sections taken out of the report ---------------------------------- */
.rl-off { margin-top: 10px; border: 1px dashed var(--line); border-radius: 8px;
  padding: 7px 9px; background: var(--bg-soft); }
.rl-off-t { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px; }
.rl-off-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
  padding: 2px 0; }
.rl-off-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-off-row:hover { color: var(--brand); }


/* ---- properties under the section list, library on its own -------------- */
.rl-props { margin-top: 14px; border-top: 2px solid var(--line); padding-top: 10px; }
.rl-props-t { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; }
.rl-props .dash-side { width: auto; border: 0; padding: 0; margin: 0; }
.rl-lib-head { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; background: var(--brand); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.rl-lib-t { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--brand); margin: 10px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.rl-lib-t:first-of-type { margin-top: 2px; }


/* ---- the page accepts a dropped element -------------------------------- */
.rl-canvas-wrap.drop-on, .rl-preview.drop-on { outline: 2px dashed var(--accent); outline-offset: -4px;
  background: rgba(42,157,143,.05); }


/* ---- what the design is previewed against ------------------------------ */
.rl-target { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  color: var(--muted); white-space: nowrap; }
.rl-target select { max-width: 210px; font-size: 11.5px; padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; }


/* ---- the form you are filling in, vs the roll-up you are only reading --- */
.entry-owner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: #1b3a5b; margin: 0 0 10px;
  border-left: 4px solid var(--accent); background: #eef8f6;
  border-radius: 0 8px 8px 0; padding: 7px 12px; }
.entry-owner:empty { display: none; }
.entry-owner.ro { border-left-color: #b98a3e; background: #fdf6ea; }
.eo-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 20px; padding: 2px 8px; }
.entry-owner.ro .eo-tag { background: #b98a3e; }
/* the editable area sits on white, the review below on a tinted ground */
.entry-editing { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; }

/* the review has its own colour — indigo, so it is never mistaken for the
   green "you are editing" surface or the amber "locked" one */
.ov-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%;
  font: inherit; font-size: 13px; color: #4b4b7a; cursor: pointer; text-align: left;
  background: #efeefb; border: 1px solid #d8d5f0; border-radius: 9px; padding: 8px 12px; }
.ov-head:hover { border-color: #a9a2e0; background: #e9e7f9; }
.ov-head b { color: #3f3b73; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
.ov-tw { color: #6f68b8; font-size: 11px; }
.ov-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; background: #6f68b8; border-radius: 20px; padding: 2px 8px; }
.ov-head #ov-refresh { border-color: #cfcaea; color: #4b4b7a; }
.ov-body.hidden { display: none; }
.ov-note { font-size: 11.5px; color: #5b5b86; margin: 8px 0; max-width: 90ch; line-height: 1.5; }
#entry-overview { margin-top: 26px; }
#entry-overview:empty { margin: 0; }
.ov-wrap { background: #f7f6fd; border: 1px solid #ded9f2; border-radius: 9px; padding: 6px; }
.ov-tbl { background: transparent; }
.ov-tbl th { background: #e7e4f7 !important; color: #3f3b73; }
.ov-tbl td { background: #fff; color: #4a4a63; }
/* GA-33: a repeat group's rows inside the review table */
.ov-tbl .ov-sub { border-collapse: collapse; font-size: 11.5px; margin: 0; min-width: 100%; }
.ov-tbl .ov-sub th { background: #f1effa !important; color: #3f3b73; font-weight: 600; padding: 2px 6px; white-space: nowrap; }
.ov-tbl .ov-sub td { padding: 2px 6px; border-top: 1px solid #ecebf3; white-space: nowrap; }

/* ---- symbology dialog --------------------------------------------------- */
.sym-modal { max-height: 68vh; overflow-y: auto; }
.sym-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); }
.sym-tab { flex: 1; border: 0; background: none; padding: 8px 6px; font-size: 12px;
  font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; border-radius: 7px 7px 0 0; }
.sym-tab:hover { background: var(--bg-soft); color: var(--brand); }
.sym-tab.on { color: var(--brand); border-bottom-color: var(--brand); background: var(--bg-soft); }
.sym-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 10px; margin-top: 12px; }
.sym-grid .fld { margin: 0; }
.sym-rampbar { margin-top: 10px; }
.sym-ramp { display: inline-flex; width: 100%; height: 13px; border-radius: 4px;
  overflow: hidden; border: 1px solid var(--line); }
.sym-ramp i { flex: 1; }
.sym-classes { display: flex; flex-direction: column; gap: 3px; max-height: 210px;
  overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  background: var(--bg-soft); }
.sym-cls { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.sym-cls input[type="color"] { width: 30px; height: 20px; padding: 0; border: 1px solid var(--line);
  border-radius: 4px; cursor: pointer; flex: none; }
.sym-cls-l { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sym-chk { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-top: 11px;
  cursor: pointer; }
.sym-btn { margin-left: 4px; }
.sym-btn.on { border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* ---- legend over the map ------------------------------------------------ */
.map-legend { position: absolute; right: 12px; bottom: 28px; z-index: 620;
  background: rgba(255, 255, 255, .95); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 11px 9px; font-size: 11px; max-width: 230px; max-height: 46vh;
  overflow-y: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.mlg-h { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 10px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.mlg-x { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 12px; padding: 0 2px; }
.mlg-l { margin: 7px 0 3px; line-height: 1.3; }
.mlg-l b { font-size: 11.5px; }
.mlg-l .ne { display: block; font-size: 10px; }
.mlg-r { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.mlg-r i { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .18);
  flex: none; }

/* ---- symbol gallery & designer ------------------------------------------ */
.icon-cell { position: relative; }
.icon-cell .ic-wrap { display: flex; align-items: center; justify-content: center; height: 26px; }
.icon-cell .ic-x { position: absolute; top: 2px; right: 3px; font-size: 10px; line-height: 1;
  color: var(--muted); opacity: 0; padding: 2px 3px; border-radius: 4px; }
.icon-cell:hover .ic-x { opacity: 1; }
.icon-cell .ic-x:hover { background: var(--danger, #c0392b); color: #fff; }
.icon-cell.ic-new { border-style: dashed; color: var(--brand); }
.sd-prev { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-soft); }
.sd-prev > span:first-child { font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted); }
.sd-p { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; }

/* ---- symbology library, map designs ------------------------------------- */
.pset-wrap { padding: 8px 10px 10px; }
.pset-tbl { width: 100%; font-size: 12px; }
.pset-tbl th { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.pset-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pset-act { white-space: nowrap; text-align: right; }
.pset-sw { display: inline-flex; height: 13px; width: 74px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line); }
.pset-sw i { flex: 1; }

/* ---------- button + embed ---------- */
.dash-btnw { display: flex; align-items: center; height: 100%; padding: 2px; }
.dash-btnw .btn { white-space: nowrap; }
.dash-embed { width: 100%; height: 100%; border: 0; border-radius: 6px; background: #fff; display: block; }
.dash-w .dash-wb > .dash-embed { min-height: 120px; }

/* an embedded card fills the box it was given; an embedded tab keeps its grid */
.dash-embed-one { height: 100%; }
.dash-embed-one > .dash-w { position: static; height: 100%; box-shadow: none; border: 0; }
.dash-subgrid.embed-grid { padding: 0; }

/* while dragging, the card is transparent to hit-testing so the grid it is
   being dropped on can be found underneath it */
.dash-w.drag { pointer-events: none; }
.dash-grid.dragging .dash-subgrid { outline: 1px dashed #9fb6c6; outline-offset: -1px; }
.dash-grid.drop-into { outline: 2px solid var(--brand); outline-offset: -2px; background: #eef6fb; }
/* A group that would take the card says so while it is held over it. The
   caption hangs off the group's card, which is positioned already; on the
   grid itself it would have become a cell of the grid and pushed the group's
   own cards about as the pointer passed over. */
.dash-w.is-group:has(> .dash-wb > .dash-subgrid.drop-into)::after {
  content: "drop it here to put it in this group";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px; pointer-events: none; z-index: 6;
  box-shadow: 0 2px 8px rgba(20,50,70,.25); white-space: nowrap;
}

/* No card behind the widget — for a button, a heading or a rule, where the
   white box is almost entirely empty paint. Still outlined while editing, so
   there is something to see and to grab; invisible to a reader. */
.dash-w.bare { background: transparent; border-color: transparent; box-shadow: none; padding: 2px 4px; }
.dash-grid.editing .dash-w.bare { border: 1px dashed #dde5ea; }
.dash-w.bare > .dash-wh { background: transparent; }

/* A widget's options as a grid, not a flex row. Flex gave every control an
   equal share, so eight of them in a 380px panel came out ~40px wide each: the
   labels wrapped onto two lines, the selects showed nothing but their arrow,
   and "Max 110" clipped to "11(". Each control now has a floor of 150px and the
   row wraps when they no longer fit. */
.dash-side .form-row.wp-grid { display: grid; gap: 7px 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.dash-side .form-row.wp-grid > .fld { flex: none; min-width: 0; margin: 0; }
.dash-side .form-row.wp-grid > .fld > select,
.dash-side .form-row.wp-grid > .fld > input { width: 100%; min-width: 0; }
/* a checkbox is a word wide, not a column wide */
.dash-side .form-row.wp-grid > .fld:has(> input[type="checkbox"]) { align-self: center; }
/* the two halves of a size share their cell, with the × between them */
.dash-side .wp-size { display: flex; align-items: center; gap: 6px; }
.dash-side .wp-size > input { flex: 1; min-width: 0; width: auto; text-align: center; }
.dash-side .wp-size > i { font-style: normal; color: var(--muted); }
/* why a generated card is the shape it is — stated once, above everything
   that could change it */
.dash-side .wp-why { margin: 2px 0 8px; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; line-height: 1.45;
  background: color-mix(in srgb, var(--brand) 7%, transparent); color: var(--muted); }
/* what a question is about to become, on its own pill in the generator */
.fieldpills .pill .sc-as { font-style: normal; margin-left: 5px; opacity: .8; }
.fieldpills .pill.sc-none { opacity: .5; }

/* ---------- group container ---------- */
/* A group's body IS a grid, so it gets no padding of its own and its children
   sit on the same 12 columns the tab uses. */
.dash-w.is-group > .dash-wb { padding: 0; overflow: visible; }
/* a nested grid (a group's body, an embedded layout) takes the mesh it was
   authored on: the column count and row height come down as variables, so a
   48-column, 6 px layout is not stretched onto 12 columns of 64 px */
.dash-subgrid {
  display: grid; grid-template-columns: repeat(var(--dash-cols, 12), minmax(0, 1fr));
  grid-auto-rows: var(--dash-row, 64px); gap: 12px; padding: 8px;
}
.dash-subgrid > .dash-w { box-shadow: none; border: 1px solid #e6ecf1; }
.dash-grid.editing .dash-w.is-group { outline: 1px dashed #b9c8d4; outline-offset: 2px; }
.dash-grid.editing .dash-w.is-group > .dash-wh { background: #f4f8fb; }

/* ---------- DHIS2 tab ---------- */
.dh2-step { border: 1px solid #dbe3ea; border-radius: 8px; padding: 10px 12px; margin: 0 0 10px;
            background: #fff; }
.dh2-step > b { display: block; color: var(--brand); font-size: 12.5px; margin-bottom: 6px; }
.dh2-fields { max-height: 460px; overflow: auto; border-top: 1px solid #eef2f4; margin-top: 6px; }
.dh2-tbl select { max-width: 260px; }
.dh2-tbl td { vertical-align: middle; }
.dh2-tbl tr.dh2-un td { background: #fffaf3; }
.dh2-tbl td.warn { color: #b3392f; font-weight: 600; }
.dh2-tbl td.ok { color: #1e7b45; font-weight: 600; }
.mp-pin { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.mp-pin .fld { margin: 0; }
.mp-layers { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mp-ly { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); flex-wrap: wrap; }
.mp-ly b { flex: 1; min-width: 130px; }
.mp-ly label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.mp-ly input[type="number"] { width: 52px; padding: 2px 4px; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 5px; }
.mp-ly select { font-size: 11.5px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 5px; }
.gp-pin-custom { display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

/* ---- symbology dialog: controls beside a live map ----------------------- */
.sym-split { display: grid; grid-template-columns: 440px 340px; gap: 18px; align-items: start; }
.sym-side { position: sticky; top: 0; }
#sym-map { height: 340px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--bg-soft); }
#sym-mapnote { margin: 6px 2px 0; font-size: 10.5px; }
@media (max-width: 900px) {
  .sym-split { grid-template-columns: 1fr; }
  .sym-side { position: static; }
  #sym-map { height: 240px; }
}
/* the modal grows for the split view */
.sym-modal { max-height: 72vh; }

/* ---- the layer detail panel's own close bar ----------------------------- */
.lyr-det-x { display: flex; align-items: center; gap: 10px; padding: 6px 2px 8px; }
.lyr-det-x span { font-weight: 700; font-size: 12px; flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* ---- icons inside the symbology dialog ---------------------------------- */
.sym-one { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 12px; }
.sym-one > span:first-child { font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); }
.sym-cls-ic { padding: 1px 5px; line-height: 1; flex: none; }
.sym-cls-ic svg { display: block; }
.ocha-grid { max-height: 250px; overflow-y: auto; }
.ocha-grid .icon-cell span:last-child { font-size: 9.5px; line-height: 1.15; }
.mlg-i { width: 13px; height: 13px; display: inline-flex; align-items: center;
  justify-content: center; flex: none; }

/* ---- repository picker: grouped by geometry, scrollable ----------------- */
.repo-list { max-height: 52vh; overflow-y: auto; padding-right: 4px; min-width: 380px; }
.repo-g { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
  margin: 12px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.repo-g:first-child { margin-top: 2px; }
.repo-chip { font-size: 12px; color: var(--brand); }
.repo-row { padding: 3px 2px; }
.repo-styled { padding-left: 22px; position: relative; }
.repo-styled::before { content: "↳"; position: absolute; left: 8px; color: var(--muted);
  font-size: 11px; }

/* ---- humanitarian icon categories --------------------------------------- */
.ocha-cats { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.ocha-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ocha-cat:hover { border-color: var(--brand); color: var(--brand); }
.ocha-cat.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.ocha-cat .n { font-size: 9.5px; opacity: .75; }
.ocha-grid { max-height: 280px; overflow-y: auto; }

/* #modal-body is a column flexbox, and a flex item whose overflow is not
   `visible` gets an automatic minimum size of zero — so a scrolling panel
   inside it collapses to nothing while its contents spill out invisibly.
   These panels must keep their own height. */
.ocha-grid, .repo-list, .sym-classes { flex: 0 0 auto; }
.ocha-grid { min-height: 140px; }
.repo-list { min-height: 180px; }

/* ---- symbol size, kept at the top of the gallery ------------------------ */
.sym-size-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft);
  flex: 0 0 auto; }
.sym-size-l { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
.sym-size-row { padding: 6px 9px; gap: 10px; }
.sym-size-row .icon-grid { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px; margin: 0; }
.sym-size-row .icon-cell { min-height: 0; padding: 4px 3px; gap: 2px; }
.sym-size-row .icon-cell span:last-child { font-size: 9.5px; }
.ss-p { display: flex; align-items: center; justify-content: center; height: 30px; }

/* ---- collapsible sections in the symbol gallery ------------------------- */
.gal-sect { flex: 0 0 auto; margin-top: 10px; }
.gal-head { display: flex; align-items: center; gap: 6px; width: 100%; border: 0;
  background: none; cursor: pointer; padding: 5px 2px; text-align: left;
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); }
.gal-head:hover { color: var(--brand); }
.gal-caret { font-size: 11px; width: 12px; color: var(--brand); }
.gal-head .ne { font-weight: 400; letter-spacing: 0; text-transform: none; }
.gal-body { padding-top: 7px; }

/* ---- where a facility sits in the hierarchy ----------------------------- */
.plan-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px;
  margin: 8px 0 4px; font-size: 11.5px; }
/* name and level sit side by side with real space between them — run together
   they read as "KabhrepalanchokDistrict" */
.plan-crumbs .pc { display: inline-flex; align-items: baseline; gap: 7px;
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-soft); line-height: 1.5; white-space: nowrap; }
.plan-crumbs .pc > span { color: #26323a; font-weight: 600; }
.plan-crumbs .pc i { font-style: normal; font-size: 9.5px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted); }
.plan-crumbs .pc-sep { color: var(--muted); font-weight: 400; margin: 0 1px; }

/* ---- a filled but locked entry card ------------------------------------- */
.list-add.ro { background: #fbfcfd; border-style: solid; }
.list-add.ro input:disabled, .list-add.ro select:disabled, .list-add.ro textarea:disabled {
  background: #fff; color: #26323a; -webkit-text-fill-color: #26323a; opacity: 1;
  border-color: #e3e8ec; cursor: default; }
.list-add.ro .panel-title { color: var(--muted); }

/* ---- the report designer borrows the Builder's ribbon ------------------- */
/* No sticky trick needed: .entrybar already sits outside the scrolling body,
   so the design scrolls under it by construction. */
.entrybar.rl-host { padding: 6px 12px; }
.entrybar.rl-host .dash-head.rl-ribbon { margin: 0; width: 100%; gap: 8px; }
.rl-ribbon .dash-title b { font-size: 15px; }
.rl-ribbon .dash-title .ne { font-size: 10.5px; }
.rl-ribbon .rl-subtabs { margin-right: 4px; }

/* ---- dashboard bubble map ----------------------------------------------- */
.dash-map { border-radius: 8px; overflow: hidden; }
/* The map key. One definition for every map, Leaflet or WebGL - the insides
   used to be scoped to `.leaflet-control`, which the WebGL key is not, so it
   got a default browser button and a block body and came out ragged. Laid out
   the way ArcGIS Online does it: header, then a column of swatches with their
   labels aligned beside them. */
.dmap-legend { background: rgba(255, 255, 255, .95); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  font-size: 11px; color: #46555f; min-width: 118px; max-width: 232px;
  overflow: hidden; display: block; }
.dmap-legend .dl-h { display: flex; align-items: flex-start; gap: 6px;
  padding: 4px 5px 4px 8px; border-bottom: 1px solid #eef2f4; background: #fbfdfe; }
/* A widget title is a sentence more often than a word, and one clipped to
   "Annual vaccine coverage by municip…" has lost the part that mattered. It
   wraps to a second line before it gives up and clips; the full text is on the
   element's own tooltip either way. */
.dmap-legend .dl-t { flex: 1; min-width: 0; font-weight: 600; font-size: 10.5px;
  color: #2b3b45; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; }
/* The whole header folds the key, so the target is the header, not an 11px
   glyph at its edge. The caret is drawn rather than typed, and rotates with the
   state - a bare v at the right of a header row reads as a select's dropdown
   arrow, which is not what it does. */
.dmap-legend .dl-h { cursor: pointer; user-select: none; }
.dmap-legend .dl-h:hover { background: #f1f6f9; }
.dmap-legend .dl-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dmap-legend .dl-x { flex: none; width: 16px; height: 16px; border-radius: 4px;
  position: relative; margin-top: -1px; }
.dmap-legend .dl-h:hover .dl-x { background: rgba(20, 50, 70, .08); }
.dmap-legend .dl-x::before { content: ""; position: absolute; left: 5px; top: 5px;
  width: 5px; height: 5px; border-right: 1.5px solid #5c6b76; border-bottom: 1.5px solid #5c6b76;
  transform: rotate(45deg); transition: transform .15s; }
/* folded: the caret points the way it will open */
.dmap-legend.folded .dl-x::before { transform: rotate(-45deg); left: 4px; top: 6px; }
.dmap-legend .dl-body { display: flex; flex-direction: column; gap: 3px;
  padding: 6px 8px 7px; }
.dmap-legend.folded .dl-body { display: none; }
.dmap-legend.folded .dl-h { border-bottom: 0; }
.dmap-legend.folded { min-width: 0; }
.dmap-legend .dl-i { display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.dmap-legend .dl-i > i { width: 13px; height: 13px; border-radius: 3px; flex: none;
  border: 1px solid rgba(0, 0, 0, .18); }
/* points are marked with circles, areas with squares - as ArcGIS does */
.dmap-legend.pts .dl-body .dl-i > i { border-radius: 50%; }
.dmap-legend .dl-l { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.dmap-legend .dl-size { color: #7b8a94; gap: 3px; margin-top: 3px;
  padding-top: 4px; border-top: 1px solid #eef2f4; }
.dmap-legend .dl-size i { border-radius: 50%; background: #b9c9d4;
  border-color: rgba(0, 0, 0, .12); }
.dmap-legend .dl-size .s1 { width: 5px; height: 5px; }
.dmap-legend .dl-size .s2 { width: 8px; height: 8px; }
.dmap-legend .dl-size .s3 { width: 12px; height: 12px; }
/* the same stacking choices the charts offer */
/* Horizontal means horizontal all through: the title sits on the same line as
   the classes, not stacked above them. A key that reads
   "match  [] M-1  [] M-2  [] M-3" costs one line instead of three. */
.dmap-legend.lg-h { max-width: 420px; display: flex; align-items: center; gap: 10px;
  padding: 0 9px; }
.dmap-legend.lg-h .dl-h { flex: none; max-width: 46%; border-bottom: 0;
  background: none; padding: 5px 0; }
.dmap-legend.lg-h .dl-t { -webkit-line-clamp: 1; line-clamp: 1; }
.dmap-legend.lg-h .dl-body { flex: 1; flex-direction: row; flex-wrap: wrap;
  gap: 3px 12px; padding: 5px 0; }
.dmap-legend.lg-h .dl-size { border-top: 0; padding-top: 0; margin-top: 0; }
.dmap-legend.lg-c { min-width: 96px; font-size: 10px; }
.dmap-legend.lg-c .dl-h { padding: 3px 4px 3px 6px; }
.dmap-legend.lg-c .dl-t { font-size: 9.5px; -webkit-line-clamp: 1; line-clamp: 1; }
.dmap-legend.lg-c .dl-body { gap: 1px; padding: 4px 6px 5px; }
.dmap-legend.lg-c .dl-i { gap: 5px; line-height: 1.2; }
.dmap-legend.lg-c .dl-i > i { width: 10px; height: 10px; border-radius: 2px; }
/* A bar across the card rather than a box in a corner. It is not a Leaflet
   control, so it is placed against the map container itself. */
.dmap-legend.lg-bar { position: absolute; left: 0; right: 0; z-index: 800;
  max-width: none; min-width: 0; border-radius: 0; border-left: 0; border-right: 0;
  display: flex; align-items: center; gap: 12px; padding: 0 9px; }
.dmap-legend.lg-bottom { bottom: 0; border-bottom: 0; }
.dmap-legend.lg-top { top: 0; border-top: 0; }
.dmap-legend.lg-bar .dl-h { flex: none; max-width: 42%; border-bottom: 0;
  background: none; padding: 5px 0; }
.dmap-legend.lg-bar .dl-t { -webkit-line-clamp: 1; line-clamp: 1; }
.dmap-legend.lg-bar .dl-body { flex: 1; flex-direction: row; flex-wrap: wrap;
  gap: 2px 14px; padding: 5px 0; }
.dmap-legend.lg-bar .dl-size { border-top: 0; padding-top: 0; margin-top: 0; }
/* a bar along the top would sit on the zoom buttons; the exact offset is set
   from the bar's measured height when it is built, this is only the floor */
.dash-map:has(.dmap-legend.lg-top) .leaflet-top { margin-top: 30px; }

/* moved by hand: out of the corner stack and placed against the card */
.dmap-legend.lg-placed { position: absolute; right: auto; bottom: auto; margin: 0; z-index: 800; }
.dmap-legend.lg-move .dl-h { cursor: grab; }
.dmap-legend.lg-move .dl-h:active { cursor: grabbing; }
.dmap-legend.lg-move .lg-grip { position: absolute; right: 0; bottom: 0;
  width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; }
.dmap-legend.lg-move .lg-grip::after { content: ""; position: absolute; inset: 4px 3px 3px 4px;
  border-right: 2px solid rgba(92, 107, 118, .55); border-bottom: 2px solid rgba(92, 107, 118, .55);
  border-radius: 0 0 2px 0; }
.dmap-legend.lg-bar .lg-grip { display: none; }

/* a chart's key is drawn over the chart, so the card is what it is placed in */
.dash-wb { position: relative; }
/* the year a widget chose for itself, stamped in the card's corner */
.dash-wb .dw-note { position: absolute; right: 8px; bottom: 3px; font-size: 9.5px;
  color: #8a97a1; pointer-events: none; z-index: 2; }
.dmap-legend.chart-legend { position: absolute; right: 6px; top: 6px; z-index: 4;
  max-height: calc(100% - 12px); }
.dmap-legend.chart-legend .dl-body { overflow: auto; max-height: 190px; }
.dmap-legend.chart-legend.lg-bar { right: 0; top: auto; }
.dmap-legend.chart-legend.lg-top { top: 0; }
.dmap-legend.chart-legend.lg-bottom { bottom: 0; }
/* an entry switched off keeps its place but stops claiming a colour */
.dmap-legend .dl-i[data-nm] { cursor: pointer; }
.dmap-legend .dl-i.off { opacity: .42; }
.dmap-legend .dl-i.off > i { background: #c6d0d7 !important; }

/* a reference layer's row: a swatch of how it will actually draw, then its
   name, then what has been overridden */
.dfw-ch .dfw-sw { flex: none; width: 13px; height: 13px; border-radius: 3px;
  border: 1.5px solid #9fb6c6; }
.dfw-ch .fb-ib[disabled] { opacity: .3; cursor: default; }

/* ---------- admin rail ---------- */
.admin-layout { display: flex; gap: 18px; align-items: flex-start; }
/* the rail is the standard pill ribbon now - full width above the section */
.admin-layout { flex-direction: column; }
.admin-rail { flex: none; width: auto; position: static; margin-bottom: 4px; }
.admin-main { flex: 1; min-width: 0; }
.ar-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; color: var(--ink); }
.ar-item:hover { background: #f1f6f9; }
.ar-item.on { background: rgba(33, 89, 127, .10); color: var(--brand-deep); font-weight: 600; }
.ar-ic { flex: none; width: 18px; text-align: center; }
/* Admin: one button per group of screens, each opening a short menu. The menu
   carries the same one-line description the screen's own title carries, so the
   choice is made before the screen opens rather than after. */
.adm-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-grp { position: relative; }
.adm-btn { flex: 0 0 auto; height: 26px; padding: 0 11px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 12.5px;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.adm-btn:hover { border-color: var(--brand-deep); }
.adm-btn.on { border-color: var(--brand-deep); background: var(--brand-deep); color: #fff; font-weight: 600; }
.adm-btn.open { border-color: var(--brand-deep); box-shadow: 0 0 0 2px rgba(33, 89, 127, .16); }
.adm-caret { font-size: 10px; opacity: .75; }
.adm-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 60; min-width: 262px;
  max-width: min(360px, 90vw); background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 42, 67, .18); padding: 5px; }
.adm-menu.hidden { display: none; }
.adm-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; padding: 7px 9px; border-radius: 7px;
  font: inherit; font-size: 12.5px; color: var(--ink); }
.adm-item:hover, .adm-item:focus-visible { background: #f1f6f9; outline: none; }
.adm-item.on { background: rgba(33, 89, 127, .10); color: var(--brand-deep); }
.adm-item .adm-ic { flex: none; width: 18px; text-align: center; line-height: 1.5; }
.adm-item b { display: block; font-weight: 600; }
.adm-item i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.4; margin-top: 1px; }
/* the last groups sit near the right edge on a narrow window; their menus open leftwards */
.adm-grp:nth-last-child(-n+2) .adm-menu { left: auto; right: 0; }

/* a caption between clusters of pills, for a rail long enough to need them */
.dv-strip .dv-sep { flex: none; align-self: center; padding: 0 10px 0 4px; font-size: 9.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a97a1;
  border-left: 1px solid var(--line); margin-left: 6px; white-space: nowrap; }
.dv-strip .dv-sep:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
/* narrow screens: the rail becomes a row of chips above the section */
@media (max-width: 820px) {
  .admin-layout { flex-direction: column; }
  .admin-rail { width: auto; flex-direction: row; flex-wrap: wrap; position: static; }
  .ar-item { width: auto; }
}

/* a field the layer hides, shown because "show all" is on */
.kv.kv-hid > span { color: #8a97a1; font-style: italic; }
.lnk-more { display: block; margin: 8px 0 0; padding: 0; border: 0; background: none;
  color: var(--brand); font-size: 11.5px; cursor: pointer; text-decoration: underline; }

/* what the map is actually showing of a big layer, said out loud */
.big-note { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  z-index: 900; background: rgba(255,255,255,.95); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; font-size: 11.5px; color: #46555f;
  box-shadow: 0 1px 6px rgba(0,0,0,.18); pointer-events: none; max-width: 70%; }

/* layers an upload refused — the reason a layer someone expected is missing */
.ul-skipped { margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: #fdf3ec; border-left: 4px solid var(--orange); font-size: 12px; color: var(--ink); }
.ul-skipped ul { margin: 4px 0 4px 18px; padding: 0; }
.ul-skipped li { margin: 2px 0; }

/* ---------- community alerts ---------- */
.tab-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 6px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; }
.tab-badge.ann { background: var(--orange); }
.mp-cm { display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  padding: 9px 12px; border-radius: 8px; background: #eef6f9;
  border-left: 4px solid var(--accent); font-size: 12.5px; color: var(--ink); }
.mp-cm.ann { background: #fdf3ec; border-left-color: var(--orange); }
/* already read, but still pinned by the programme — present, not shouting */
.mp-cm.pinned { background: #f6f8fa; border-left-color: #b9c9d4; color: #46555f; }
.mp-cm-ic { flex: none; font-size: 15px; }
.mp-cm-txt { flex: 1; min-width: 0; }

/* ---------- community ---------- */
.cm-feed { display: flex; flex-direction: column; gap: 8px; max-width: 860px; }
.cm-card { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: box-shadow .12s; }
.cm-card:hover { box-shadow: 0 2px 10px rgba(20,50,70,.10); }
.cm-card.pinned { border-left: 4px solid var(--orange); }
.cm-head { display: flex; align-items: center; gap: 7px; }
.cm-badge { flex: none; }
.cm-title { color: var(--brand-deep); }
.cm-pin { flex: none; font-size: 12px; }
.cm-teaser { color: #46555f; font-size: 12.5px; margin: 4px 0 6px; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cm-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #5c6b76; flex-wrap: wrap; }
.cm-act { border: 0; background: none; cursor: pointer; color: #5c6b76; font-size: 12px;
  padding: 2px 6px; border-radius: 10px; }
.cm-act.on { background: rgba(42,157,143,.14); color: var(--brand-deep); font-weight: 600; }
.cm-post { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; max-width: 860px; }
.cm-body { font-size: 13px; color: var(--ink); line-height: 1.5; }
.cm-comments { display: flex; flex-direction: column; gap: 6px; max-width: 860px; }
.cm-comment { background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; }
.cm-comment.gone { background: #fafbfc; font-style: italic; }
.cm-reply { display: flex; gap: 8px; align-items: flex-end; max-width: 860px; margin-top: 8px; }
.cm-reply textarea { flex: 1; resize: vertical; }
.cm-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cm-imgs img { width: 150px; height: 110px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); cursor: zoom-in; }
.cm-lightbox { position: fixed; inset: 0; background: rgba(12,24,32,.86); z-index: 4000;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.cm-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 6px; }
.cm-imgs.sm img { width: 96px; height: 72px; }
.cm-replywrap { max-width: 860px; }
.cm-attstrip { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cm-att { position: relative; }
.cm-att img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.cm-att button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 10px; line-height: 1; padding: 0; }
textarea.cm-dropping, .cm-dropping { outline: 2px dashed var(--accent); outline-offset: 2px; }
.cm-att.doc { display: inline-flex; align-items: center; gap: 5px; background: #f4f8fa;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 11.5px; }
.cm-att.doc i, .cm-file i { font-style: normal; color: #8a97a1; font-size: 10.5px; }
.cm-att.doc button { position: static; width: 16px; height: 16px; }
.cm-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cm-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: #f4f8fa; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer;
  color: var(--brand-deep); }
.cm-file:hover { background: #e9f2f6; }

/* the streaming ward map's "zoom in" notice */
.dmap-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 800; background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: 14px; padding: 4px 12px; font-size: 11.5px; color: #46555f;
  box-shadow: 0 1px 6px rgba(0,0,0,.15); pointer-events: none; }

/* Content that has been placed by hand: the words of a text card, a KPI's
   number, a table, a list, a picture. Charts and maps are not in this list -
   those are drawn by a library into a canvas the size of the card, so moving
   one means resizing the renderer; their keys move instead. */
.dash-text.lg-placed, .dash-kpi.lg-placed, .tbl-wrap.lg-placed,
.lw.lg-placed, .nw-wrap.lg-placed, .dash-img.lg-placed { position: absolute; overflow: auto; z-index: 3; }
.dash-kpi.lg-placed { display: flex; flex-direction: column; justify-content: center; }
/* the picture fills whatever box it has been given, letterboxed not stretched */
.dash-img { display: block; width: 100%; height: 100%; min-height: 0; }
.dash-img > img { width: 100%; height: 100%; display: block; object-fit: contain;
  border-radius: 6px; }
.dash-text.lg-move, .dash-kpi.lg-move, .tbl-wrap.lg-move, .lw.lg-move, .nw-wrap.lg-move, .dash-img.lg-move {
  cursor: grab; position: relative; }
.dash-text.lg-move:active, .dash-kpi.lg-move:active, .tbl-wrap.lg-move:active,
.lw.lg-move:active, .nw-wrap.lg-move:active, .dash-img.lg-move:active { cursor: grabbing; }
/* while editing, show what can be picked up */
.dash-grid.editing .dash-text.lg-move, .dash-grid.editing .dash-kpi.lg-move,
.dash-grid.editing .tbl-wrap.lg-move, .dash-grid.editing .lw.lg-move,
.dash-grid.editing .nw-wrap.lg-move,
.dash-grid.editing .dash-img.lg-move { outline: 1px dashed #dde5ea; outline-offset: 2px; }
.lg-move > .lg-grip { position: absolute; right: 0; bottom: 0;
  width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; z-index: 4; }
.lg-move > .lg-grip::after { content: ""; position: absolute; inset: 4px 3px 3px 4px;
  border-right: 2px solid rgba(92, 107, 118, .55); border-bottom: 2px solid rgba(92, 107, 118, .55); }
/* cluster badges carry the summed value, so they need room for a number */
.dmap-cl { background: none; border: 0; }
.dmap-cl span { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; color: #17313f; font-size: 11px;
  font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  opacity: .92; }

/* the key rides on the map so the widget height cannot clip it; the two
   placements differ only in where they sit */
.leaflet-control.dmap-legend { margin: 0 8px 8px 0; }

/* the WebGL map's key sits over its canvas */
.dmap-legend.gl { position: absolute; right: 8px; bottom: 8px; z-index: 5; }
.dash-map { position: relative; }
/* `.dash-map` is two different things: the side map of the split view, written
   to stay in sight while the table beside it scrolls, and the canvas inside
   every map card, which must not stick to anything. The rule above gives both
   a positioning context for the WebGL key — and, coming later, quietly took
   the first one's stickiness away. Sticky is a positioning context too, so the
   split view's map can have both. */
.dash-split > .dash-map { position: sticky; }
@media (max-width: 1100px) { .dash-split > .dash-map { position: static; } }
.maplibregl-ctrl-attrib { display: none; }

/* ---- widget options: a wrapping grid, not one squeezed line ------------- */
/* The side panel is a fixed width and the map widgets added several controls;
   as a flex row the labels collapsed onto each other and every select shrank
   to a stub. A grid gives each control a floor and wraps instead. */
.wp-opts { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 8px 10px; align-items: end; }
.wp-opts .fld { margin: 0; min-width: 0; }
.wp-opts .fld select, .wp-opts .fld input { width: 100%; min-width: 0; }
.wp-opts .fld > button { width: 100%; }
/* checkbox-style options keep their own inline layout */
.wp-opts .fld[style*="row"] { grid-column: auto; align-self: end; margin-bottom: 9px; }   /* a switch sits beside its field, not on a row of its own */

/* a map widget that cannot draw says why, rather than showing a grey shape */
.dash-empty { display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  justify-content: center; height: 100%; min-height: 120px; padding: 14px 16px;
  background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 8px; }
.dash-empty b { font-size: 12.5px; color: #26323a; }
.dash-empty span { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* ---- table widget fills its box ---------------------------------------- */
.dash-wb .dash-tbl { height: 100%; max-height: none; overflow: auto; }
/* the header stays put while the rows scroll under it */
.dash-wb .dash-tbl thead th { position: sticky; top: 0; z-index: 1;
  background: #eef2f5; box-shadow: 0 1px 0 #d4dbe1; }

/* ---- one widget, full screen ------------------------------------------- */
.dash-max { position: fixed; inset: 0; z-index: 900; background: rgba(20, 34, 44, .55);
  display: flex; flex-direction: column; padding: 22px clamp(14px, 4vw, 60px) 26px; }
.dash-max-bar { display: flex; align-items: center; gap: 10px; color: #fff;
  padding: 0 2px 10px; }
.dash-max-bar b { font-size: 15px; }
.dash-max-bar .ne { color: #cfe0ec; font-size: 12px; }
.dash-max-body { flex: 1; min-height: 0; display: flex; }
.dash-max-body > .dash-w { flex: 1; min-height: 0; margin: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.dash-max-body > .dash-w .dash-rz { display: none; }   /* no resizing in here */

/* ---- dashboard tabs ------------------------------------------------------ */
.dash-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px;
  border-bottom: 2px solid var(--line); padding-bottom: 0; }
.dash-tab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-bottom: 0; background: var(--bg-soft); color: var(--muted); cursor: pointer;
  padding: 6px 13px; border-radius: 8px 8px 0 0; font-size: 12.5px; margin-bottom: -2px; }
.dash-tab:hover { color: var(--brand); }
.dash-tab.on { background: #fff; color: var(--brand-deep); font-weight: 600;
  border-color: var(--line); border-bottom: 2px solid #fff; }
.dash-tab .n { font-size: 9.5px; opacity: .7; }
.dash-tab .dt-rn { font-size: 10px; opacity: .6; padding: 0 2px; }
.dash-tab .dt-rn:hover { opacity: 1; color: var(--brand); }
.dash-tab.add { border-style: dashed; color: var(--brand); background: none; }
/* a card held over a tab: let go and it moves there */
.dash-tab.drop-on { background: #e3f0f7; color: var(--brand-deep);
  border-color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
/* the card the ☰ list was asked for, so the eye can find it on a full board */
@keyframes cardFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,123,57,0); } 30%, 70% { box-shadow: 0 0 0 4px rgba(224,123,57,.55); } }
.dash-w.card-flash { animation: cardFlash 1.4s ease-in-out; }
/* a locked card says so, and its grip is not a grip */
.dash-grid.editing .dash-w:has(> .dash-wh [data-wlock]) > .dash-wh { cursor: default; }
.dash-wtools .fb-ib.on { background: #21597f; color: #fff; border-radius: 4px; }
/* the palette's search */
.dw-palq { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 5px 8px;
  border: 1px solid #b9c4cc; border-radius: 6px; font: inherit; font-size: 12.5px; }
.dw-pb.hidden, .dw-palsec.hidden { display: none; }

/* ---- a filter published by one widget, shown to everyone ---------------- */
.dash-xfilter { display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  padding: 7px 12px; border: 1px solid #cfe3d9; border-left: 4px solid var(--accent);
  border-radius: 8px; background: #f1f9f6; font-size: 12px; color: #26323a; }
.dash-xfilter .xf-i { color: var(--accent); font-size: 14px; }
.dash-xfilter span:nth-child(2) { flex: 1; }
.dash-xfilter .ne { color: #6b7c86; }

/* ---- designing for each screen size ------------------------------------ */
.dash-modes { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.dash-modes .dm-l { font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.dm-b { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--line);
  background: #fff; color: var(--muted); cursor: pointer; padding: 4px 11px;
  border-radius: 999px; font-size: 12px; }
.dm-b:hover { border-color: var(--brand); color: var(--brand); }
.dm-b.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.dm-b.on .ne { color: #cfe3f0; }
.dm-b .ne { font-size: 9.5px; }

/* ---- the canvas takes the shape of the size being designed -------------- */
.dash-grid.mode-md, .dash-grid.mode-sm { margin: 0 auto; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; background: #fbfcfd;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .07); }
.dash-grid.mode-md { max-width: 860px; }
.dash-grid.mode-sm { max-width: 420px; }
.dash-mode-note { margin: -2px 0 10px; }
/* a widget that has its own layout here, versus one following the larger size */
.dash-grid.mode-md .dash-w.inherits, .dash-grid.mode-sm .dash-w.inherits { opacity: .75; }
.dash-grid.mode-md .dash-w.has-override, .dash-grid.mode-sm .dash-w.has-override {
  box-shadow: inset 3px 0 0 var(--accent); }

/* Filter widget — areas, period and form-field filters, stacked in a card.
   Its own prefix: .fw already belongs to the form-builder widget. */
/* Wraps either way: a tall narrow widget stacks its controls one per line, a
   wide short one lays them across as a strip along the top of the dashboard. */
.dfw { display: flex; flex-flow: row wrap; align-items: flex-end;
  gap: 6px 12px; padding: 2px; min-width: 0; }
.dfw-row { display: flex; flex-direction: column; gap: 3px;
  flex: 1 1 140px; min-width: 120px; }
/* the control's name lives inside the box as its unselected state, greyed;
   once something is chosen the text goes to normal weight and colour */
.dfw-row > select.ph { color: #79879a; }
.dfw-row > select.ph option { color: #22333f; }
.dfw-row > select.ph option[value=""] { color: #79879a; }
.dfw-row > select { width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid #cfd8e3;
  border-radius: 6px; background: #fff; font-size: 13px; }
.dfw-row > select:disabled { color: #98a4b3; background: #f6f8fa; }
.dfw-foot { display: flex; justify-content: flex-end; align-items: center;
  gap: 6px; flex: 0 0 auto; margin-left: auto; }
.dfw-foot .ne { font-size: 11px; }

/* the fields a Filter widget carries, listed in the properties panel */
.dfw-chosen { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 8px; }
.dfw-ch { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 3px 4px 3px 8px; border: 1px solid #e2e8f0; border-radius: 6px;
  background: #f8fafc; font-size: 12px; line-height: 1.3; }
/* name and where it comes from on one line; the source ellipses rather than wrapping */
.dfw-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfw-ch .ne { font-size: 11px; }
/* one row per category of the Colour by column, each with its own swatch */
.wp-cbmap { display: flex; flex-direction: column; gap: 4px; max-height: 230px; overflow: auto; }
.wp-cbmap .dfw-ch { padding: 2px 6px; }
.wp-cbmap input[type=color] { border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: pointer; }
.wp-sub { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #7a8798; }

/* Relationship diagram widget — boxes and links in the ER diagram's language,
   scrolling inside the widget rather than stretching it. */
.nw-wrap { width: 100%; height: 100%; overflow: auto; background: #fbfcfd;
  border: 1px solid #e3e8ec; border-radius: 8px; }
.nw-wrap svg { display: block; }
.nw-wrap g[data-nwid]:hover rect { stroke: #21597f; stroke-width: 2; }
.nw-note { margin: 4px 2px 0; font-size: 11px; }

/* Widget palette in the right-hand panel: two columns of tiles, read down
   rather than scanned across a bar. */
.dw-pal { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 0 6px; }
/* the palette's groups fold; the count says what is inside a folded one */
.dw-palsec { margin: 6px 0 0; }
.dw-palsec > summary { text-transform: uppercase; letter-spacing: .5px; font-size: 10.5px; color: #6b7c86; }
.dw-palsec > summary .n { margin-left: auto; font-size: 9.5px; opacity: .75; font-weight: 600; }
.dw-palsec > .fd-sec-body { padding: 4px 8px 8px; }
.dw-pb { display: flex; align-items: center; gap: 6px; text-align: left;
  padding: 6px 8px; font-size: 12px; line-height: 1.15; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 7px; color: #22333f; }
.dw-pb:hover { border-color: #21597f; background: #f2f7fb; }
.dw-pb .ic { font-size: 14px; flex: none; }
@media (max-width: 1000px) { .dw-pal { grid-template-columns: repeat(3, 1fr); } }
.dw-pb.wide { grid-column: 1 / -1; background: #f2f7fb; border-color: #b9cfe0; font-weight: 600; }

/* The size switcher sits inside the edit toolbar now, not on a row of its own. */
.dash-modes.inbar { margin: 0; }
.dash-modes.inbar .dm-l { margin-right: 2px; }

/* "Data source" — a property of the dashboard, sitting above the palette.
   Collapsed it states the answer; expanded it lets you change it. */
.ds-box { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 10px;
  background: #f7fafc; overflow: hidden; }
.ds-box.open { background: #fff; border-color: #b9cfe0; }
.ds-head { display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 8px 10px; background: none; border: 0; cursor: pointer; text-align: left; }
.ds-head:hover { background: #eef4f8; }
.ds-caret { color: #7a8798; font-size: 10px; flex: none; }
.ds-t { font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #4a5a64; }
.ds-now { margin-left: auto; font-size: 11.5px; color: #21597f; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-body { padding: 2px 10px 10px; border-top: 1px solid #e6edf2; }
.ds-body .fld { margin: 8px 0 4px; }

/* Right-panel tabs: the palette, and the selected widget. Switching between
   them keeps the selection, so adding a second widget costs nothing. */
.side-tabs { display: flex; gap: 4px; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.side-tab { flex: 1; padding: 7px 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; color: #6b7c86; }
.side-tab:hover { color: #21597f; background: #f4f8fb; }
.side-tab.on { color: #21597f; border-bottom-color: #21597f; }
.side-tab .n { font-weight: 400; color: #8a97a1; font-size: 11px; }

/* Search widget. Its own prefix: .sw is already a colour swatch in the Layers
   list and the map legend. */
.dsw { display: flex; flex-direction: column; gap: 6px; min-width: 0; height: 100%; }
/* the box, which may be narrower than the widget and sit left, centre or right */
.dsw-box { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0;
  min-height: 0; flex: 1 1 auto; }
.dsw-in { width: 100%; padding: 7px 9px; border: 1px solid #cfd8e3; border-radius: 7px;
  font-size: 13px; background: #fff; }
.dsw-in:focus { outline: none; border-color: #21597f; box-shadow: 0 0 0 2px rgba(33,89,127,.12); }
.dsw-res { flex: 1 1 auto; min-height: 0; overflow: auto; }
.dsw-grp + .dsw-grp { margin-top: 6px; }
.dsw-gh { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: #8a97a1; padding: 3px 2px 2px; }
.dsw-hit { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 5px 7px; font-size: 12.5px; cursor: pointer;
  background: none; border: 0; border-radius: 6px; color: #22333f; }
.dsw-hit:hover { background: #eef4f8; }
.dsw-hit .ne { font-size: 10.5px; flex: none; }

/* A long source list scrolls rather than pushing the rest of the panel down. */
.dfw-chosen.scroller { max-height: 168px; overflow-y: auto; padding-right: 2px; }
/* heading with actions on the right of it */
.wp-sub.sub-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sub-act { display: flex; align-items: baseline; gap: 8px; text-transform: none; letter-spacing: 0; }
.sub-act .ne { font-size: 10px; font-weight: 400; }
.sub-lnk { background: none; border: 0; padding: 0; cursor: pointer; font-size: 11px;
  font-weight: 600; color: #21597f; text-transform: none; letter-spacing: 0; }
.sub-lnk:hover { text-decoration: underline; }

/* How much room a widget's own card takes. Density is the card's padding and
   title bar; "fit" stops the card at its content instead of stretching to fill
   the grid cell — a filter, a note or a search box rarely needs the whole cell. */
.dash-w.dens-compact { padding: 3px 8px 5px; }
.dash-w.dens-compact .dash-wh { margin-bottom: 2px; }
.dash-w.dens-compact .dash-wt { font-size: 12px; }
.dash-w.dens-roomy { padding: 16px 20px 18px; }
.dash-w.dens-roomy .dash-wh { margin-bottom: 10px; }
/* "Stop at the content" means take as few ROWS as the content needs — the row
   count is what closes the space. Within its row the card still fills, because
   align-self:start left the unused part of the row as bare page between the
   cards, which is the gap it was supposed to remove. */
.dash-w.fit { max-height: 100%; }
.dash-w.fit .dash-wb { flex: 0 0 auto; }

/* A widget with its title bar hidden. Readers get no bar at all; while editing
   it stays as a slim strip, otherwise there is nothing to drag or select. */
.dash-wh.ghost { margin-bottom: 2px; opacity: .35; min-height: 16px; }
.dash-wh.ghost:hover { opacity: 1; }
.dash-w.no-hdr .dash-wb { min-height: 0; }
/* a legend line that states the range rather than naming a colour */
.dmap-legend .dl-note { color: #6b7c86; font-style: italic; }

/* Saving stays reachable however long the widget panel gets. */
.wp-actions { display: flex; gap: 6px; position: sticky; top: 0; z-index: 3;
  padding: 6px 0 8px; margin-bottom: 2px; background: #fff;
  border-bottom: 1px solid var(--line); }
/* a tick-list inside a dialog */
.mf-checks { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0 2px; }
.mf-checks .sym-chk { margin: 0; }

/* The viewer borrows the Builder's ribbon, so it needs no header of its own —
   only the tab strip beneath it, matching the ribbon's white. */
#dash-body .dash-tabs { background: #fff; border: 1px solid var(--line);
  border-radius: 10px; margin: 0 0 12px; padding: 3px 8px 0; }

/* The strip of dashboards, always above whichever one is open. Compact: a name
   and a count is all you need to pick one, and the dashboard itself is what the
   screen is for. */
.dv-strip { display: flex; gap: 6px; overflow-x: auto; }
.dv-card { flex: 0 0 auto; max-width: 230px; height: 26px; padding: 0 11px;
  display: inline-flex; align-items: center; cursor: pointer;
  font-size: 12.5px; color: #22333f; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.dv-card:hover { border-color: #21597f; }
.dv-card.on { border-color: #21597f; background: #21597f; color: #fff; font-weight: 600; }

/* The strip is the ribbon's top row: a carousel of dashboards above the title
   and its controls. Arrows appear only when it actually overflows. */
.entrybar.rl-host { flex-direction: column; align-items: stretch; gap: 4px; }
/* In the Dashboard tab only the top line is a white ribbon — the carousel of
   dashboards, edge to edge. The title and its buttons sit on the page beneath
   it, where the chips and outlined buttons carry their own contrast. */
#dash-bar.rl-host { background: transparent; border-bottom: 0; padding: 0 14px 6px; }
#dash-bar.rl-host .dv-rail { background: #fff; border-bottom: 1px solid var(--line);
  margin: 0 -14px 6px; padding: 5px 14px; }
.dv-rail { display: flex; align-items: center; gap: 4px; width: 100%; }
/* the standardized ribbon is the Builder's entrybar on every tab: a flat,
   edge-to-edge white strip above the content (entry-body pads 18px) */
#dm-ribbon .dv-rail, #rpt-ribbon .dv-rail { background: #fff;
  border-bottom: 1px solid var(--line); padding: 5px 18px; width: auto; }
/* the Community toolbar is the same band */
#cm-ribbon { background: #fff; border-bottom: 1px solid var(--line);
  margin: -18px -18px 14px; padding: 5px 18px; }
/* everything ON a band is a 26px control, so the band totals the 36px of the
   blue tab bar above it - pills, buttons, inputs, selects */
.dv-rail .btn, #cm-ribbon .btn, #dashb-sub .btn {
  height: 26px; padding-top: 0; padding-bottom: 0;
  display: inline-flex; align-items: center; }
#cm-ribbon input, #cm-ribbon select { height: 26px; padding-top: 0; padding-bottom: 0; }
#cm-ribbon .fld { flex-direction: row; align-items: center; gap: 6px; }
#svd-ribbon .dv-rail, #acct-ribbon .dv-rail, #admin-rail .dv-rail, #admin-rail .adm-bar, #mem-ribbon .dv-rail, #lyr-ribbon .dv-rail {
  background: #fff; border-bottom: 1px solid var(--line);
  margin: -18px -18px 14px; padding: 5px 18px; width: auto; }
.dv-arrow { flex: 0 0 auto; width: 20px; height: 24px; padding: 0; cursor: pointer;
  background: none; border: 0; color: #6b7c86; font-size: 15px; line-height: 1; }
.dv-arrow:hover { color: #21597f; }
.dv-strip { flex: 1 1 auto; min-width: 0; scrollbar-width: none; padding: 0; }
.dv-strip::-webkit-scrollbar { display: none; }
/* dragging a pill to reorder the strip */
.dv-card[draggable="true"] { cursor: grab; }
.dv-card.dragging { opacity: .45; cursor: grabbing; }

/* ---- form designer: sectioned field panel, formula chips, ⋯ menu -------- */
.fd-sec { border: 1px solid #e1e8ee; border-radius: 8px; margin: 10px 0 0; background: #fbfcfd; }
.fd-sec > summary { cursor: pointer; padding: 7px 10px; font-weight: 600; font-size: 12px;
  color: #3d4c59; user-select: none; list-style: none; display: flex; align-items: center; gap: 6px; }
.fd-sec > summary::-webkit-details-marker { display: none; }
.fd-sec > summary::before { content: "▸"; font-size: 10px; color: #8a97a1; transition: transform .15s; }
.fd-sec[open] > summary::before { transform: rotate(90deg); }
.fd-sec-body { padding: 0 10px 10px; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.fd-chip { font: 11px 'IBM Plex Mono', Consolas, monospace; background: #eef3f6;
  border: 1px solid #d5dee5; border-radius: 6px; padding: 2px 7px; cursor: pointer; color: #2c5b70; }
.fd-chip:hover { background: #dcebf3; }
.fd-chip.op { background: #f4eede; border-color: #e2d7b8; color: #6e5a1f; font-weight: 700;
  min-width: 22px; text-align: center; }
.fd-expr-chk { font-size: 11px; margin: 2px 0 4px; min-height: 14px; }
.fd-expr-chk.ok { color: #1e7b45; }
.fd-expr-chk.warn { color: #9a6b12; }
.fd-expr-chk.bad { color: #b3392f; }
.fb-more { position: relative; display: flex; }
.fb-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; min-width: 210px;
  background: #fff; border: 1px solid #cfd8df; border-radius: 8px; padding: 4px;
  box-shadow: 0 6px 20px rgba(20, 30, 40, .18); display: flex; flex-direction: column; }
.fb-menu.hidden { display: none; }
.fb-menu button, .fb-menu a { text-align: left; background: none; border: 0; padding: 7px 10px;
  border-radius: 6px; font-size: 12.5px; font-family: inherit; color: #2c3944; cursor: pointer;
  text-decoration: none; white-space: nowrap; }
.fb-menu button:hover, .fb-menu a:hover { background: #eef3f6; }
.fb-menu .danger { color: #b3392f; }
.fd-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---- ODK/Kobo question types: slider, ranking, attachments, acknowledge -- */
.rng-widget { display: inline-flex; align-items: center; gap: 8px; width: 100%; }
.rng-widget input[type="range"] { flex: 1; accent-color: #21597f; }
.rng-out { min-width: 34px; text-align: right; font-weight: 600; color: #21597f; }
.rank-widget { display: flex; flex-direction: column; gap: 3px; }
.rank-row { display: flex; align-items: center; gap: 8px; padding: 4px 7px;
  background: #f7f9fb; border: 1px solid #e1e8ee; border-radius: 6px; }
.rank-row .rank-n { min-width: 18px; height: 18px; border-radius: 50%; background: #21597f; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rank-row .rank-l { flex: 1; font-size: 13px; }
.rank-row .rank-btns { display: flex; gap: 2px; }
.ack-widget { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.att-widget { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-widget .att-file { width: auto; font-size: 12px; }
.att-widget .att-show a { font-size: 12px; }
.meta-fld { background: #f4f7f9; color: #5c6b76; font-style: italic; }
.fld-guide { border: 1px solid #cfd8df; background: #eef3f6; color: #35566b; border-radius: 50%;
  width: 16px; height: 16px; font-size: 11px; line-height: 1; cursor: help; padding: 0; margin-left: 4px; }
.fld-guide:hover { background: #dcebf3; }
.fld-stars { display: inline-flex; gap: 2px; }
.fld-stars .star { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer;
  color: #d5dee5; padding: 1px 2px; transition: color .1s, transform .1s; }
.fld-stars .star.on { color: #d4a017; }
.fld-stars .star:hover { transform: scale(1.15); }
/* GA-57: type-ahead search box - shows the label, stores the value */
.fld-ta { position: relative; }
.fld-ta-in { width: 100%; }
.fld-ta-list { position: absolute; z-index: 40; left: 0; right: 0; top: 100%; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid #cfd8df; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.fld-ta-opt { padding: 5px 8px; cursor: pointer; }
.fld-ta-opt.on, .fld-ta-opt:hover { background: #e8f1f7; }
.fld-ta-opt .ne { font-size: 11px; margin-left: 4px; }
.fld-ta-none { padding: 5px 8px; }

/* ---- builder tickets: one ribbon, collapsible panel, grid controls ------- */
.dash-editbar.in-ribbon { margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
  box-shadow: none; }
.dash-side { position: relative; }
/* The configuration panel was written to travel down with the canvas beside
   it, and the rule just above — added so the collapse button had something to
   be positioned against — quietly undid it: `relative` and `sticky` are the
   same property, and the later one wins. A sticky box is a containing block
   for an absolutely placed child exactly as a relative one is, so the button
   never needed it. The rails are all claimed together further down. */
.dash-side-collapse { position: absolute; top: 6px; right: 6px; z-index: 5; border: 1px solid #cfd8df;
  background: #fff; border-radius: 6px; width: 22px; height: 22px; cursor: pointer; color: #56696f; font-size: 12px; }
.dash-side-collapse:hover { background: #eef3f6; }
.dash-side-reopen { position: sticky; top: 8px; align-self: flex-start; margin-left: 8px; border: 1px solid #cfd8df;
  background: #fff; border-radius: 8px; padding: 8px 6px; cursor: pointer; color: #35566b; font-size: 12px;
  writing-mode: vertical-rl; }
.dash-side-reopen:hover { background: #eef3f6; }

/* Admin: the pill band stays put while the page scrolls under it — the whole
   pane is one scroller here (other tabs scroll their inner lists instead).
   The nav itself carries the edge-to-edge bleed so the stuck band sits flush
   under the blue tab bar and spans the full pane width. */
#tab-admin .entry-body.admin-layout { padding-top: 0; }   /* the band owns the top edge */
#tab-admin .admin-rail { position: sticky; top: 0; z-index: 40; margin: 0 -18px 14px;
  align-self: stretch; /* .admin-layout aligns flex-start, which would shrink the band to its pills */ }
#tab-admin .admin-rail .dv-rail,
#tab-admin .admin-rail .adm-bar { margin: 0; padding: 6px 18px; }

/* Admin: Role permissions and Logs use the whole page, not a small box —
   the grid spreads across the width and the scroll runs to the screen bottom */
.rp-scroll { max-height: calc(100vh - 270px); }
.rp-scroll table { width: 100%; }
#tab-admin #logs-box .log-scroll { max-height: none; height: calc(100vh - 300px); width: 100%; }
#tab-admin #logs-box .log-tbl { width: 100%; }

/* Microplan instructions: role pills above one editor */
.mpg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.mpg-chips .dv-card { height: 26px; }

/* Admin: the layout is a column now — children stretch instead of collapsing
   to content width (the flex-start came from the old side-rail design and
   left every section overflowing a pencil-thin container) */
#tab-admin .entry-body.admin-layout { align-items: stretch; }
#tab-admin .admin-main { width: 100%; }

/* Data entry ▸ Sheet: the Σ Year column — the months added up, live */
.sheet-total { text-align: right; font-weight: 700; color: #1e7b45; background: #f0f7f2; min-width: 64px; }

/* ---------- accessibility: analyses list + staged accordion ---------- */
.ax-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ax-head .hint { max-width: 760px; margin: 2px 0 0; }
.ax-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ax-title .hint { font-weight: 400; font-size: 11.5px; margin: 0; max-width: none;
  text-transform: none; letter-spacing: 0; color: var(--muted); }
.ax-wrap { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 16px; margin-top: 14px; align-items: start; }
@media (max-width: 900px) { .ax-wrap { grid-template-columns: 1fr; } }

.ax-list { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ax-list-h {
  padding: 11px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line);
  background: var(--bg-soft); display: flex; justify-content: space-between; gap: 8px;
}
.ax-item { padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.ax-item:last-child { border-bottom: 0; }
.ax-item:hover { background: var(--bg-soft); }
.ax-item.on { background: #eef5fa; border-left-color: var(--brand); }
.ax-item b { display: block; font-size: 13.5px; color: var(--ink); }
.ax-item span { font-size: 11.5px; color: var(--muted); }
.ax-empty { padding: 18px 14px; color: var(--muted); font-size: 12.5px; }

.ax-main { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 18px; }
.ax-stage {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 10px;
  font-weight: 700; color: var(--brand); font-size: 13px;
}
.ax-stage:first-child { margin-top: 2px; }
.ax-stage::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ax-stage i { font-style: normal; width: 19px; height: 19px; border-radius: 50%; flex: none;
  background: var(--brand); color: #fff; font-size: 11.5px; display: grid; place-items: center; }

.ax-sec { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: #fff; }
.ax-sec.open { border-color: #b9cddd; box-shadow: 0 1px 3px rgba(33,89,127,.07); }
.ax-sec-h {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 14px; background: none; border: 0; border-left: 3px solid transparent;
  border-radius: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink);
}
.ax-sec.open > .ax-sec-h { border-left-color: var(--brand); background: var(--bg-soft); border-radius: 8px 8px 0 0; }
.ax-sec-h .car { color: var(--muted); transition: transform .15s; font-size: 11px; }
.ax-sec.open > .ax-sec-h .car { transform: rotate(90deg); }
.ax-sec-h .tag { margin-left: auto; font-weight: 500; font-size: 11.5px; letter-spacing: 0;
  text-transform: none; color: var(--muted); text-align: right; }
.ax-sec-h .tag.ok { color: var(--ok); }
.ax-sec-h .tag.warn { color: var(--orange); }
.ax-sec-b { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.ax-kpi { font-size: 26px; font-weight: 700; color: var(--brand); line-height: 1.1; }

/* the section bodies lay their own fields out: label above control, one per
   line unless a .form-row groups them side by side */
.ax-sec-b .fld { display: block; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); max-width: 560px; }
.ax-sec-b .fld > input, .ax-sec-b .fld > select, .ax-sec-b .fld > textarea {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px; color: var(--ink);
  background: #fff; border: 1px solid #b9c4cc; border-radius: 6px;
}
.ax-sec-b .form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin: 0; }
.ax-sec-b .form-row > .fld { flex: 1; min-width: 190px; }
.ax-sec-b .chk { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 12.5px; color: var(--ink); }
.ax-sec-b .chk input { width: auto; margin: 0; }
.ax-sec-b h4 { margin: 16px 0 6px; font-size: 12.5px; color: var(--brand); }
.ax-sec-b h4:first-child { margin-top: 4px; }
.ax-sec-b > p.ne, .ax-sec-b p.ne { font-size: 12px; color: var(--muted); }
.ax-sec-b table.entry { width: 100%; }

/* readiness line, sub-tabs, two-column pickers, scrolling tables */
.ax-ready { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-soft); margin-bottom: 4px; }
.ax-ready.ok { border-color: #bfe0cd; background: #f2faf5; }
.ax-ready.warn { border-color: #f0d8c2; background: #fdf7f1; }
.ax-ready b { color: var(--ink); }
.ax-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--muted); }
.ax-chip.on { border-color: #bfe0cd; color: var(--ok); }
.ax-chip.need { border-color: #e8bfae; color: var(--danger); }

.ax-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-tabs button { padding: 6px 12px; font-size: 12.5px; border: 1px solid var(--line);
  background: #fff; color: var(--muted); border-radius: 999px; }
.ax-tabs button.has { border-color: #bfe0cd; color: var(--ok); }
.ax-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.ax-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
@media (max-width: 760px) { .ax-cols { grid-template-columns: 1fr; } }
.ax-col { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.ax-col-h { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px;
  background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.ax-col-h a { color: var(--brand); }
.ax-col-b { max-height: 380px; overflow: auto; }
.ax-ck { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.ax-ck:hover { background: var(--bg-soft); }
.ax-ck input { width: auto; margin: 0; }
.ax-tblwrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.ax-tblwrap table.entry { margin: 0; }
.ax-tblwrap th { position: sticky; top: 0; background: var(--bg-soft); z-index: 1; }

.ax-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* the area picker and the map it produces, side by side */
.ax-aoi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 12px; align-items: stretch; margin-top: 10px; }
.ax-aoi-grid > #ax-aoi-map { min-height: 450px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 1100px) {
  .ax-aoi-grid { grid-template-columns: 1fr; }
  .ax-aoi-grid > #ax-aoi-map { min-height: 360px; }
}

/* names drawn on the shapes: no box, just a haloed word that survives imagery */
.ax-lbl {
  font: 600 11px/1.2 "Segoe UI", -apple-system, Arial, sans-serif; color: #fff;
  white-space: nowrap; pointer-events: none; width: auto !important; height: auto !important;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 3px #0d1b24, 0 0 6px #0d1b24, 1px 1px 1px #0d1b24;
}
.ax-lblbtn {
  display: grid !important; place-items: center; width: 30px; height: 30px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none;
}
.ax-lblbtn.on { background: var(--brand); color: #fff; }
.ax-ck .ne { margin-left: auto; font-size: 11px; }

/* the layer map and its key */
.ax-lyr-map { border: 1px solid var(--line); border-radius: 8px; }
/* map & layers, laid out like the area of interest: settings left, map right;
   the map stretches to the height of whatever table is beside it */
.ax-lyr-grid { align-items: stretch; }
.ax-lyr-grid > #ax-lyr-map { min-height: 450px; }
.ax-lyr-grid > #ax-layerbody { min-width: 0; }
.ax-lyr-grid > #ax-layerbody .tbl-wrap { overflow: auto; }
@media (max-width: 1100px) { .ax-lyr-grid > #ax-lyr-map { min-height: 360px; } }
.ax-legend { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 9px; font-size: 11.5px; color: var(--ink); }
.ax-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ax-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* layer chips: a tick that draws it, a name that opens its settings */
.ax-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-chip2 { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.ax-chip2 input { width: auto; margin: 0; }
.ax-chip2 button { border: 0; background: none; padding: 0; font-size: 12.5px; color: var(--muted); }
.ax-chip2.has { border-color: #bfe0cd; }
.ax-chip2.has button { color: var(--ok); }
.ax-chip2.empty button { opacity: .7; }
.ax-chip2.on { background: var(--brand); border-color: var(--brand); }
.ax-chip2.on button { color: #fff; font-weight: 600; }
.ax-legend .warn { color: var(--danger); }
/* the legend-widget's .ax-key is a column; this one is a row of swatch + words */
.ax-legend .ax-key { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; padding: 0; }
.ax-legend .ax-key i { width: 9px; height: 10px; border-radius: 1px; }
.ax-legend .ax-key i.wide { width: 54px; }
/* the accessibility card's key: a round swatch for a facility class, a thin
   rule for a boundary, and a divider between the keys of different layers */
.ax-legend i.dot { border-radius: 50%; border: 1px solid #fff;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.ax-legend i.ln { height: 3px; border-radius: 1px; width: 14px; }
.ax-legend b.sep { width: 1px; height: 12px; background: var(--line); display: inline-block; }

.ax-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,.15); }

/* zonal table: a dot per row that matches the shape on the map, and a
   percent / people switch */
.ax-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; }
.ax-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ax-seg button { border: 0; background: #fff; color: var(--muted); padding: 4px 12px; font-size: 12px; }
.ax-seg button.on { background: var(--brand); color: #fff; font-weight: 600; }

/* the zonal table and its map side by side, and pointing at one finds the
   other — 59 rows and 59 shapes are only useful together */
.ax-zgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 12px; align-items: start; }
@media (max-width: 1150px) { .ax-zgrid { grid-template-columns: 1fr; } }
.ax-zgrid #axz-map { height: 460px; border: 1px solid var(--line); border-radius: 8px;
  position: sticky; top: 8px; }
@media (max-width: 1150px) { .ax-zgrid #axz-map { height: 340px; position: static; } }
.ax-ztbl { max-height: 460px; }
.ax-ztbl table.entry th, .ax-ztbl table.entry td { padding: 4px 7px; font-size: 12px; white-space: nowrap; }
.ax-ztbl table.entry th[data-axsort] { cursor: pointer; user-select: none; }
.ax-ztbl table.entry th[data-axsort]:hover { color: var(--brand); }
.ax-ztbl tr[data-axzone] { cursor: pointer; }
.ax-ztbl tr[data-axzone]:hover, .ax-ztbl tr[data-axzone].on { background: #e6f1f8; }
.ax-ztbl tr[data-axzone].on b { color: var(--brand); }

/* the runs this analysis has produced, and what each one can become */
.ax-runs { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ax-run { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.ax-run[data-axrow] { cursor: pointer; }
.ax-run[data-axrow]:hover { border-color: #b9cddd; background: var(--bg-soft); }
.ax-run.on { border-color: var(--brand); background: #f2f8fc; }
.ax-run-t { min-width: 0; font-size: 12.5px; }
/* the run being viewed opens like a drawer under its own row */
.ax-run-res { margin: 0 0 8px; padding: 4px 0 6px 12px; border-left: 3px solid var(--brand); }

/* population covered within each threshold — the shape of the answer, before
   the numbers underneath it */
.ax-bars { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 6px; margin: 0 0 10px;
  background: var(--bg-soft); }
.ax-bars-t { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.ax-bars-b { display: flex; gap: 10px; align-items: flex-end; height: 92px; }
.ax-bars-b span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  flex: 1; height: 100%; gap: 2px; }
.ax-bars-b i { display: block; width: 100%; max-width: 46px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #4caf50, #1e7b45); }
.ax-bars-b em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink); order: -1; }
.ax-bars-b u { text-decoration: none; font-size: 11px; color: var(--muted); }

/* how far an upload has got — and, once the bytes are in, that the server is
   still busy with them */
.upbar { display: flex; align-items: center; gap: 9px; margin: 8px 0 2px; }
.upbar-track { flex: 1; height: 8px; min-width: 120px; border-radius: 999px;
  background: #e3ebf1; overflow: hidden; }
.upbar-fill { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2d6b96, #21597f); transition: width .18s ease; }
.upbar-txt { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.upbar-x { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 0 2px; }
.upbar-x:hover { color: var(--danger); }
.upbar.busy .upbar-fill { background: repeating-linear-gradient(115deg,
    #2d6b96 0 12px, #4d87ae 12px 24px); animation: upbar-move 1s linear infinite; }
.upbar.ok .upbar-fill { background: var(--ok); }
.upbar.ok .upbar-txt { color: var(--ok); }
.upbar.bad .upbar-fill { background: var(--danger); }
/* a server error is a sentence, not a word — let it wrap rather than run off */
.upbar.bad .upbar-txt { color: var(--danger); white-space: normal; }
.upbar.bad { align-items: flex-start; }
.upbar.bad .upbar-track { margin-top: 4px; }
@keyframes upbar-move { to { background-position: 24px 0; } }
@media (prefers-reduced-motion: reduce) { .upbar.busy .upbar-fill { animation: none; } }

/* the result map fills the height of the numbers beside it, rather than
   stopping short and leaving the panel half empty */
#ax-map { height: 620px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 1200px) { #ax-map { height: 460px; } }
@media (max-width: 900px) { #ax-map { height: 360px; } }

/* a run that failed says so where the button is, and stays said */
.ax-runerr { margin: 8px 0 0; padding: 8px 11px; font-size: 12.5px; border-radius: 7px;
  border: 1px solid #e8c4be; background: #fdf3f2; color: var(--danger); }

/* one facility's own page: the list of them, and the sheet itself */
/* the list runs the full width; the chosen facility's sheet opens as a drawer
   under its row, and the list stops scrolling inside itself while one is open */
.ax-sheet { display: block; }
.ax-sheet.open .ax-sheet-scroll { max-height: 420px; }
/* the full list is a fold-away, so the page is the sheet and not a directory */
.ax-sheet-sum { cursor: pointer; font-size: 12.5px; color: var(--brand); padding: 6px 2px; }
.ax-sheet.browse > .ax-sheet-list { margin-top: 6px; }
.ax-sheet-hits { display: flex; gap: 4px; flex-wrap: wrap; }
.ax-sheet-res { padding: 8px 10px 10px 12px; border-left: 3px solid var(--brand); border-bottom: 1px solid var(--line); background: #fff; }
.ax-sheet-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.ax-sheet-list input { width: 100%; border: 0; border-bottom: 1px solid var(--line);
  padding: 7px 10px; font-size: 12.5px; }
.ax-sheet-scroll { max-height: 520px; overflow: auto; }
.ax-sheet-item { padding: 7px 10px; border-bottom: 1px solid var(--line); cursor: pointer;
  border-left: 3px solid transparent; }
.ax-sheet-item:hover { background: var(--bg-soft); }
.ax-sheet-item.on { background: #eef5fa; border-left-color: var(--brand); }
.ax-sheet-item b { display: block; font-size: 12.5px; }
.ax-sheet-item span { font-size: 11px; color: var(--muted); }
.ax-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px; }
.ax-sheet-head b { font-size: 14px; }
.ax-sheet-head .ne { margin-left: 8px; }
.ax-sheet-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .ax-sheet-grid { grid-template-columns: 1fr; } }
#axs-map { height: 520px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 1100px) { #axs-map { height: 380px; } }
.ax-sheet-side h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--brand); }
.ax-sheet-side h4 + table { margin-bottom: 12px; }
.ax-fac-pin { color: #b3392f; font-size: 20px; font-weight: 700; line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 6px #fff; transform: translate(-50%, -55%); pointer-events: none; }

/* The drawing tools above the map in the geoshape dialog. One strip, grouped
   by what each group does: make a shape, follow something that is already
   there, then tidy what you have. */
.gd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 8px 14px 6px; border-bottom: 1px solid var(--line); }
.gd-tools .btn.small { padding: 3px 8px; }
.gd-tools .btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.gd-tools .gd-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.gd-tools .gd-hint { flex: 1 1 100%; font-size: 11.5px; line-height: 1.35; }
/* the draw dialog's ✓ Use and 🗑 Clear stay on screen: on a 390x844 phone they sat below it, under a map that takes
   the swipe (QA 2 Oct 2026, F7). Above the map's panes and controls (z-index 400-1000). */
.gd-foot { position: sticky; bottom: 0; z-index: 1001; background: #fff; border-radius: 0 0 12px 12px;
  flex-wrap: wrap; box-shadow: 0 -1px 0 #e3e8ec; }
@media (max-width: 640px) {
  .gd-foot { padding: 8px 10px !important; gap: 6px !important; }
  .gd-foot #gd-info { flex: 1 1 100% !important; }
}

/* Drawing in the geoshape dialog: the grab hand means "I will pan", which is
   the wrong promise while a shape is being drawn. Area gets a crosshair; Trace
   gets a brush, and the ring on the map shows how far it reaches. */
.gd-drawing.leaflet-container,
.gd-drawing.leaflet-container .leaflet-interactive { cursor: crosshair; }
.gd-drawing.leaflet-grab, .gd-drawing .leaflet-grab { cursor: crosshair; }
.gd-brushing.leaflet-container,
.gd-brushing.leaflet-container .leaflet-interactive,
.gd-brushing.leaflet-grab, .gd-brushing .leaflet-grab {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><g fill='none' fill-rule='evenodd'><path d='M17.6 3.4a2.2 2.2 0 0 1 3.1 3.1l-8 8-3.1-3.1 8-8z' fill='%23ff8f1f' stroke='%23ffffff' stroke-width='1.2'/><path d='M9.6 11.4l3.1 3.1-1.2 3.4a3.4 3.4 0 0 1-2.2 2.1l-4.1 1.2 1.2-4.1a3.4 3.4 0 0 1 2.1-2.2l1.1-3.5z' fill='%23ffffff' stroke='%2312285a' stroke-width='1.2'/></g></svg>") 4 22, crosshair;
}

/* ---- the accessibility sheet's cards -------------------------------------
   A walking-time panel, a map key and a drawn shape: the parts the printed
   sheet composes, as widgets that can be moved and resized like any other. */
.ax-bands { display: flex; flex-direction: column; gap: 5px; padding: 4px 2px; height: 100%;
  justify-content: center; }
.ax-bandrow { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.ax-bandrow i { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.ax-bandrow .lb { flex: none; min-width: 82px; color: var(--ink); }
.ax-bandrow .br { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.ax-bandrow .br b { display: block; height: 100%; border-radius: 4px; }
.ax-bandrow .pc { flex: none; width: 46px; text-align: right; color: var(--muted); font-size: 11.5px; }
.ax-bandrow .nm { flex: none; width: 66px; text-align: right; font-weight: 600; }
.ax-bandtot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px;
  padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; }
.ax-bandtot .nm { font-weight: 700; }

.ax-key { display: flex; flex-direction: column; gap: 10px; padding: 2px; font-size: 12px;
  overflow: auto; height: 100%; }
.ax-keysec h5 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.ax-keyrow { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; }
.ax-keyrow i { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.ax-keyrow i.dot { border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }
.ax-keyrow i.ln { height: 3px; width: 15px; border-radius: 1px; }
.ax-keyfact { display: flex; justify-content: space-between; gap: 10px; padding: 1.5px 0; }
.ax-keyfact span { color: var(--muted); }
.ax-keyfact b { text-align: right; }

.dw-shape { position: relative; width: 100%; height: 100%; display: flex; align-items: center; }
.dw-shape.rule { align-items: center; }
.dw-shape .lbl { position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 14px; font-weight: 700; line-height: 1.2; }

/* A card titled the way a printed sheet captions its panels: a solid bar
   across the top rather than a line of grey text above a white box. */
/* ---- accessibility check (v1851): the panel, the ribbon count, the colour-vision simulation ---- */
.a11y-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 390px; max-width: 94vw; z-index: 1200; background: #fff; border-left: 1px solid var(--line); box-shadow: -6px 0 24px rgba(20,50,70,.14); overflow: auto; padding: 12px 14px 18px; font-size: 12.5px; line-height: 1.4; }
.a11y-panel h2 { font-size: 15px; margin: 0; } .a11y-panel h2 .ne { font-weight: 400; font-size: 12px; }
.a11y-panel h3 { margin: 14px 0 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #6b7c86; }
.a11y-head { display: flex; align-items: flex-start; gap: 8px; } .a11y-head .spacer { flex: 1; }
.a11y-sechead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .a11y-sechead h3 { flex: 1; }
.a11y-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.a11y-seg button { border: 1px solid #cfd8df; background: #fff; border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--ink); }
.a11y-seg button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.a11y-list { list-style: none; margin: 0; padding: 0; } .a11y-list li { display: flex; gap: 8px; padding: 7px 0; border-top: 1px solid #eef2f5; }
.a11y-list .a11y-row { flex: 1; min-width: 0; } .a11y-row p { margin: 2px 0 4px; } .a11y-f { margin-top: 5px; }
.a11y-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; background: #b7c3cc; }
.a11y-dot.error { background: #b3392f; } .a11y-dot.warn { background: #b26a00; } .a11y-dot.ok { background: #2e7d32; } .a11y-dot.info { background: #4a7fb5; }
.a11y-sc { display: block; color: #6b7c86; font-size: 11px; } .a11y-err { color: #b3392f; } .a11y-warn { color: #b26a00; } .a11y-ok { color: #2e7d32; }
.a11y-apply { margin-top: 2px; } .a11y-undo { background: #eef6ee; border-radius: 6px; padding: 6px 8px; }
.a11y-sw { display: inline-flex; gap: 1px; vertical-align: middle; } .a11y-sw i { width: 12px; height: 12px; display: inline-block; border-radius: 2px; }
.a11y-pal { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 8px; align-items: center; font-size: 11.5px; }
#dash-a11y .n, #sym-a11y-btn .n { background: #b3392f; color: #fff; border-radius: 9px; padding: 0 5px; font-size: 10px; margin-left: 4px; }
#dash-a11y.on, #sym-a11y-btn.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.dash-w.a11y-flash { outline: 3px solid #b26a00; outline-offset: 2px; }
.sym-a11y { margin: 6px 0 2px; } #sym-a11y { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 12px; } #sym-a11y .a11y-seg { margin: 4px 0; }
body.cvd-protan .dash-layout > .dash-grid, body.cvd-protan .dash-layout .dash-sheet > .dash-grid, body.cvd-protan #map, body.cvd-protan #sym-map { filter: url(#cvd-protan); }
body.cvd-deutan .dash-layout > .dash-grid, body.cvd-deutan .dash-layout .dash-sheet > .dash-grid, body.cvd-deutan #map, body.cvd-deutan #sym-map { filter: url(#cvd-deutan); }
body.cvd-tritan .dash-layout > .dash-grid, body.cvd-tritan .dash-layout .dash-sheet > .dash-grid, body.cvd-tritan #map, body.cvd-tritan #sym-map { filter: url(#cvd-tritan); }
body.cvd-achroma .dash-layout > .dash-grid, body.cvd-achroma .dash-layout .dash-sheet > .dash-grid, body.cvd-achroma #map, body.cvd-achroma #sym-map { filter: url(#cvd-achroma); }
.dash-w.hdr-band { border-radius: 0; overflow: hidden; }
.dash-w.hdr-band > .dash-wh {
  background: #12285a; border-bottom: none; padding: 5px 10px; border-radius: 0; }
.dash-w.hdr-band > .dash-wh .dash-wt {
  color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .01em;
  flex: 1; text-align: center; }
.dash-w.hdr-band > .dash-wh .dash-wtools .fb-ib { color: #cbd8ea; }
.dash-w.hdr-band > .dash-wh .dash-wtools .fb-ib:hover { color: #fff; }

/* The sheet's legend sets its keys beside the run's particulars rather than
   stacking everything down one column. Below ~260px there is no room for two,
   so it falls back to one. */
.ax-key.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-content: start; }
.ax-key.two .ax-keysec.facts { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 380px) { .ax-key.two { grid-template-columns: 1fr; }
  .ax-key.two .ax-keysec.facts { grid-column: 1; grid-row: auto; } }

/* ---- a dashboard held to a sheet of paper --------------------------------
   The canvas takes the paper's proportions and its rows share that height, so
   the whole board is one page and what is arranged on screen is what prints.
   No pixel arithmetic: the aspect ratio and the row count do the work. */
.dash-page { width: 100%; margin: 0 auto; container-type: inline-size; }
.dash-grid.paged {
  height: 100%;
  grid-template-rows: repeat(var(--dash-pagerows, 12), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
}
/* a paper-shaped board still has to be usable on a phone, where holding the
   shape would squeeze every card to a few pixels — below the fold it stacks
   like any other dashboard */
@media screen and (max-width: 900px) {
  .dash-page { aspect-ratio: auto !important; }
  .dash-grid.paged { height: auto; grid-template-rows: none; grid-auto-rows: var(--dash-row, 64px); }
}

/* the facility a sheet is about, marked the way the printed page marks it */
.ax-facpin { color: #c0392b; font-size: 20px; font-weight: 700; line-height: 22px;
  text-align: center; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }

/* the population method, said once in the run result and again in a key */
.ax-method { color: var(--muted); font-size: 12px; }
.ax-keynote { font-size: 11px; line-height: 1.35; color: var(--muted); }

/* the microplan-against-WorldPop check under a run result */
.ax-popcheck { margin-top: 8px; font-size: 12px; }
.ax-popcheck summary { cursor: pointer; color: var(--ink); }
.ax-popcheck summary b.warn { color: var(--danger); }
.ax-popcheck .tbl-wrap { max-height: 320px; overflow: auto; margin-top: 6px; }
/* the card decides how wide the check sits and how much of it the name takes */
.ax-popcheck table { width: var(--pc-tw, 100%); }
.ax-popcheck th:first-child, .ax-popcheck td:first-child { width: var(--pc-nw, auto); }
.ax-popcheck[style*="--pc-nw:0%"] th:first-child,
.ax-popcheck[style*="--pc-nw:0%"] td:first-child { width: auto; }
.ax-popcheck tr.bad td { background: #fff3f0; }
.ax-popcheck tr.bad td:last-child { color: var(--danger); font-weight: 600; }
.ax-popcheck th[data-axpsort] { cursor: pointer; user-select: none; white-space: nowrap; }
.ax-popcheck th[data-axpsort]:hover { color: var(--brand); }
.ax-popcheck tfoot td { border-top: 2px solid var(--line); background: #f7fafc; }

/* ---- the accessibility tab's ribbon ----------------------------------------
   The analyses were a side list; they are now the same strip of pills the
   Builder and Layers tabs use, and the work area has the whole width. */
.ax-wrap { display: block; margin-top: 10px; }
/* the ribbon sits where the Builder's does: first thing under the blue bar,
   pills on the left, the tab's own buttons on the right */
.ax-ribbon { margin: 0; width: 100%; }
.ax-ribbon .ax-strip { flex: 1 1 auto; min-width: 0; }
.ax-strip .dv-card { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-strip .dv-card i { font-style: normal; opacity: .7; font-weight: 400; }
.ax-strip .dv-card.on i { opacity: .85; }
.ax-strip .ax-empty { padding: 4px 2px; }

/* The attribute table's header row stays put while the rows scroll. The
   column-resize rule further up sets th to position:relative and was winning;
   this is more specific and comes last. */
#lyr-detail .tbl-wrap table.entry.attr tr:first-child th,
#dm-detail .tbl-wrap table.entry.attr tr:first-child th {
  position: sticky; top: 0; z-index: 10; background: #f6f8fa;
  box-shadow: 0 1px 0 #dbe3ea; }

/* the two corner handles of a bounding-box area */
.ax-bbox-handle { width: 14px; height: 14px; border-radius: 3px; background: #ffcc00;
  border: 2px solid #12285a; box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: nwse-resize; }

/* reference layers ticked onto the area map */
.ax-aoi-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 6px; }
.ax-refchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12px; cursor: pointer;
  background: #fff; color: var(--ink, #26333d); max-width: 260px; }
.ax-refchip:hover { border-color: #9fb3c2; }
.ax-refchip.on { background: #eef4f9; border-color: #12285a; }
.ax-refchip input { margin: 0; }
.ax-refchip i { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }

/* population check rows point at the map */
.ax-popcheck tbody tr.link { cursor: pointer; }
.ax-popcheck tbody tr.link:hover td { background: #fff7d6; }
.ax-popcheck tbody tr.on td { background: #ffe9a8 !important; box-shadow: inset 3px 0 0 #ff3b30; }
.ax-pick-tip { font-weight: 600; color: #7a1c14; border-color: #ff3b30; }

/* the way back to the whole area, on every accessibility map */
.leaflet-bar.ax-home a { font-size: 17px; line-height: 26px; }

/* the layer picker as a dropdown */
.ax-aoi-ref { margin: 6px 0; }
.ax-refdd { position: relative; display: inline-block; }
.ax-refdd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 12px; color: var(--ink, #26333d); user-select: none; }
.ax-refdd summary::-webkit-details-marker { display: none; }
.ax-refdd summary:hover, .ax-refdd[open] summary { border-color: #12285a; background: #eef4f9; }
.ax-refmenu { position: absolute; z-index: 1200; top: 100%; left: 0; margin-top: 4px; min-width: 280px;
  max-height: 320px; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.ax-refmenu label { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px;
  font-size: 12px; cursor: pointer; white-space: nowrap; }
.ax-refmenu label:hover { background: #f2f6fa; }
.ax-refmenu input { margin: 0; }
.ax-refmenu i { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.ax-refh { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  padding: 6px 7px 2px; }
.ax-refh + .ax-refh, .ax-refmenu label + .ax-refh { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.ax-pick-tip { font-weight: 400; line-height: 1.4; text-align: left; white-space: nowrap; padding: 6px 9px; }
.ax-pick-tip b { font-weight: 600; }

/* the layer picker as a map control, under the basemap button */
.leaflet-control.ax-refctl { margin-top: 6px; }
.ax-refctl .ax-refdd summary { border-radius: 4px; padding: 0; width: 30px; height: 30px; justify-content: center; position: relative; font-size: 14px; background: #fff;
  border: 2px solid rgba(0,0,0,.2); background-clip: padding-box; box-shadow: none; }
.ax-refctl .ax-refdd summary .ic { font-size: 13px; line-height: 1; }
.ax-refctl .ax-refmenu { left: auto; right: 0; }

/* ---- the scenario section: settings in titled groups, speed table beside --- */
.ax-scen-grid { align-items: start; }
.ax-grp { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 9px; margin-bottom: 10px; background: #fff; }
.ax-grp h5 { margin: 0 0 9px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ax-grp h5 .ne { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ax-grp h5 a { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.ax-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; }
.ax-fields .fld { margin: 0; min-width: 0; }
.ax-fields .fld input, .ax-fields .fld select { width: 100%; box-sizing: border-box; }
.ax-fields .fld small { display: block; font-size: 11px; line-height: 1.3; color: var(--muted); font-weight: 400; margin-top: 3px; }
.ax-grp .chk { display: block; margin: 8px 0 0; font-size: 13px; }
.ax-grp .chk .ne { display: block; padding-left: 22px; font-size: 11px; line-height: 1.3; margin-top: 1px; }
.ax-grp .ax-sub { margin: 6px 0 4px 8px; padding: 8px 10px 6px; border-left: 2px solid var(--line); }
.ax-grp .ax-sub .ne { margin: 6px 0 0; font-size: 11.5px; }
.ax-how { margin-top: 4px; }
.ax-how summary { cursor: pointer; font-size: 12px; color: var(--brand); }
.ax-grp-speed #ax-speed { max-height: 420px; overflow: auto; }

/* ---- location choices in the supply tab ----
   The columns must not push each other wide - a long site name used to widen
   the grid and scroll the whole page sideways - and the map has to be a
   positioned box, because .sp-note is absolute and without one it anchors to
   the page and lands on the section below. The map sticks while the list
   beside it scrolls, so a proposal and its place are visible together. */
.ax-sit-grid { align-items: start; }
.ax-sit-col { min-width: 0; }
.ax-sit-mapbox { position: relative; }
.ax-sit-mapbox > .ax-opt-map { width: 100%; }
@media (min-width: 1101px) { .ax-sit-mapbox { position: sticky; top: 8px; } }
.ax-sit-grid .sp-tbl { table-layout: fixed; width: 100%; }
.ax-sit-grid .sp-tbl td, .ax-sit-grid .sp-tbl th { overflow-wrap: anywhere; }
.ax-sit-grid .sp-list .sp-scroll { max-height: 420px; }
.ax-sit-grid .ax-keeplist { max-height: 220px; overflow: auto; }
.ax-sit-grid #sp-right { margin-top: 10px; }
.ax-sit-grid #sp-right .sp-card { margin-bottom: 8px; }

/* ---- supply site pins: the optimiser's cross, in the chain's own colours ---- */
.sp-sitepin { display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1; color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,.55); border-radius: 50%; }
.sp-sitepin.inl { display: inline-flex; width: 15px; height: 15px; font-size: 11px;
  vertical-align: -2px; margin-right: 4px; }
.sp-sitepin.cvs, .sp-sitepin.phlmc, .sp-sitepin.dvs { background: #5b3d84; }
.sp-sitepin.dc  { background: #7a5c9e; }
.sp-sitepin.ilr { background: #9d86bd; }
.sp-sitepin.fc  { background: #1976d2; }
.sp-sitepin.vc  { background: #e07b39; }
.sp-sitepin.bc  { background: #2e9e8f; }
.sp-sitepin.kept { box-shadow: 0 0 0 3px #ffcc00; }
.ax-optpin.on { box-shadow: 0 0 0 3px rgba(255,204,0,.9); }

/* ---- zero-dose: the map and the bars, side by side ---- */
.ax-zdgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 14px; align-items: start; margin-top: 12px; }
@media (max-width: 1100px) { .ax-zdgrid { grid-template-columns: 1fr; } }
.ax-zdcol { min-width: 0; }
.ax-zdsub { font-size: 12px; font-weight: 700; letter-spacing: .02em; margin: 0 0 6px; }
.ax-zdmap { min-height: 380px; }
/* the track is sized by the total, so the two segments fill it between them */
.ax-zdchart .mp-chart-track { display: flex; }
.ax-zdchart .mp-chart-bar { position: static; height: 100%; }
.ax-zdchart .mp-chart-lbl { flex-basis: 128px; }

/* ---- zero-dose split ---- */
.ax-zdhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.ax-zdbig { display: flex; align-items: center; gap: 10px; }
.ax-zdbig > b { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.ax-zdbar { flex: 1; min-width: 180px; height: 14px; border-radius: 7px;
  background: #1b7f3b; overflow: hidden; }
.ax-zdbar > i { display: block; height: 100%; background: #b3392f; }
.ax-zdsplit { display: flex; gap: 18px; }
.ax-zdsplit b { font-size: 19px; font-variant-numeric: tabular-nums; }
.ax-zdsplit .far b { color: #b3392f; }
.ax-zdsplit .near b { color: #1b7f3b; }

/* ---- criteria: rows the planner writes ---- */
.ax-crit { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 0 0 8px; }
.ax-critrow { border-top: 1px solid var(--line); padding: 6px 0 0; margin-top: 6px; }
.ax-critrow:first-of-type { border-top: 0; margin-top: 0; }
.ax-crittypes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0 2px; }
.ax-crittypes label { display: inline-flex; align-items: center; gap: 4px; }
.ax-priow { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- priority list: facilities under their type ---- */
.ax-priolist { max-height: 320px; overflow: auto; }
.ax-priogrp { border-bottom: 1px solid var(--line); }
.ax-priogrp:last-child { border-bottom: 0; }
.ax-priogrp > summary { display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  cursor: pointer; background: var(--bg-soft, #f4f7f9); font-size: 12px; }
.ax-priogrp > summary::-webkit-details-marker { display: none; }
.ax-priogrp > summary::before { content: "\25b8"; font-size: 10px; opacity: .6; }
.ax-priogrp[open] > summary::before { content: "\25be"; }
.ax-priogrp > summary label { display: flex; align-items: center; gap: 5px; }
.ax-priorow { display: flex; align-items: center; gap: 8px; padding: 2px 6px 2px 20px; }
.ax-priorow .ax-prioname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-priorow input[type=number] { text-align: right; }

/* ---- location choices ---- */
.ax-opt-map { min-height: 460px; }
.ax-optpin { width: 22px; height: 22px; border-radius: 50%; color: #fff; text-align: center;
  font: 600 11px/20px system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  box-sizing: border-box; }
.ax-optpin.add { background: #1e7b45; }
.ax-optpin.remove { background: #b3392f; }
.ax-optpin.keep { background: #12285a; }
.ax-optpin.inl { display: inline-block; width: 20px; height: 20px; line-height: 18px; font-size: 10.5px; box-shadow: none; }
.ax-opt-tbl tbody tr { cursor: pointer; }
.ax-opt-tbl tbody tr:hover td { background: #fff7d6; }
.ax-opt-tbl tbody tr.on td { background: #ffe9a8; }
.ax-opt-grid .ax-tabs button { padding: 5px 12px; }
/* the boxes moved into the layout below: the map keeps the row on its own */
.ax-aoi-grid.ax-opt-solo { grid-template-columns: minmax(0, 1fr); }
.ax-sitcard { padding: 4px 6px; overflow: auto; height: 100%; }
/* the boxes of a controls card, as a still picture in the properties panel */
.ctl-prev { pointer-events: none; opacity: .92; }
/* a box's wording, edited in its own row of the offered list */
.dfw-ch.ctl-row .dfw-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dfw-ch.ctl-row input { width: 100%; font-size: 12px; padding: 2px 6px; }
/* the wording of a box is edited behind a fold: the row reads as a name first */
.ctl-word > summary { cursor: pointer; font-size: 11px; color: var(--muted, #6b7c88); list-style: none; margin-top: 2px; }
.ctl-word > summary::-webkit-details-marker { display: none; }
.ctl-word[open] > summary { margin-bottom: 3px; }
.ctl-word > input { margin-bottom: 3px; }
/* an analysis in the side list, with the bin that removes it */
.dv-wrap { position: relative; display: inline-flex; align-items: stretch; }
.dv-wrap .dv-rm { opacity: 0; transition: opacity .12s; align-self: center; margin-left: -26px; margin-right: 4px; }
.dv-wrap:hover .dv-rm, .dv-wrap .dv-rm:focus { opacity: 1; }
.dv-wrap .dv-card { padding-right: 26px; }
.ctl-prev .form-row { gap: 6px; }
.ctl-prev .fld { min-width: 130px; max-width: 220px; }
.ctl-prev select, .ctl-prev input { width: 100%; }
.ax-sitcard > .ax-grp { border: none; padding: 0; margin: 0; }

.ax-keeplist { max-height: 170px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: #fff; }
.ax-keeplist label { display: flex; gap: 7px; align-items: center; font-size: 12px; padding: 2px 0; cursor: pointer; }
.ax-keeplist label[hidden] { display: none; }
#ax-progctl[hidden] { display: none; }        /* a .form-row: its display:flex beat the hidden attribute */
.ax-goal .chk { display: block; margin: 6px 0; font-size: 13px; }
.ax-goal .chk input[type=number] { display: inline-block; padding: 2px 6px; font-size: 12px; }
.ax-goal .chk .ne { display: inline; padding-left: 0; font-size: 12px; }
.ax-opt-head { margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4; }
.ax-opt-head.ok { background: #e9f6ee; border: 1px solid #b9dfc6; }
.ax-opt-head.warn { background: #fff5e6; border: 1px solid #f1d29b; }
.ax-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.ax-opt-bands td, .ax-opt-bands th { padding: 3px 8px; }

/* the location-choices map key */
.ax-optkey i.dot { width: 11px; height: 11px; border-radius: 50%; background: #1976d2; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.ax-optkey { row-gap: 4px; }
.ax-optkey b.ne { font-weight: 400; }
.ax-optkey i.dot.kept { box-shadow: 0 0 0 2.5px #ffcc00; }
.ax-optkey .ax-optpin.inl { margin-right: 2px; }

/* the master's site types as a row of ticks */
.ax-sitetypes { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 4px; }
.ax-sitetypes .ax-refchip b { font-weight: 700; margin-right: 2px; }

/* the area picker: the lists need no more than a third; the map takes the rest */
.ax-aoi-grid.ax-aoi-pick { grid-template-columns: minmax(320px, 36%) minmax(0, 1fr); }
.ax-aoi-pick .ax-cols { gap: 8px; }
@media (max-width: 1100px) { .ax-aoi-grid.ax-aoi-pick { grid-template-columns: 1fr; } }
.ax-needs { color: var(--danger); }

/* every heading sorts */
table th:not([data-nosort]) { cursor: pointer; user-select: none; }
table[data-nosort] th { cursor: default; }
th .gsort-ind { font-size: 10px; opacity: .8; }

/* a map filling the window */
.gem-map-expanded { min-height: 0 !important; max-height: none !important; background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.gem-map-max .dash-max-body { display: flex; }
.leaflet-bar.gem-expand a { font-size: 15px; line-height: 26px; }
.ax-chiprow .ax-chiphint { align-self: center; margin-left: 6px; font-size: 11.5px; }
.ax-opt-tip { line-height: 1.35; padding: 6px 9px; white-space: nowrap; }
.ax-opt-tip .ne { font-size: 11px; }

/* a site on the accessibility maps: a cross, blue FC / orange VC */
.ax-sitepin { font: 700 16px/18px system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; color: #1976d2;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  background: transparent; border: 0; cursor: pointer; transition: transform .1s; }
/* a vaccination site is the smaller mark: the facility is what the eye should find first */
.ax-sitepin.vc { color: #e07b39; font-size: 11px; line-height: 18px; }
.ax-sitepin.vc.inl { font-size: 10px; line-height: 16px; }
.ax-sitepin.out { color: #9aa5ad; }
.ax-sitepin.kept { border-radius: 50%; box-shadow: 0 0 0 2.5px #ffcc00, 0 0 0 4px rgba(0,0,0,.15); background: rgba(255,255,255,.85); }
.ax-sitepin.hover { transform: scale(1.6); z-index: 1000 !important; }
.ax-sitepin.inl { display: inline-block; width: 16px; height: 16px; font-size: 14px; line-height: 16px; margin-right: 4px; vertical-align: -2px; }
.ax-sitepin.kept.inl { box-shadow: 0 0 0 2px #ffcc00; }

/* a cluster of sites: a badge coloured by its fixed / vaccination share */
.ax-sitecl { background: transparent; border: 0; }
.ax-siteclb { position: relative; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0,0,0,.35); }
.ax-siteclb span { position: absolute; inset: 4px; border-radius: 50%; background: #fff; color: #12285a;
  display: flex; align-items: center; justify-content: center; font: 700 11px/1 system-ui, sans-serif; }

/* ---------- attribute table under the map ---------- */
#tab-map { flex-direction: column; }
/* the panels and the map are one row; the overlays (search, legend, mode
   chip) stay inside it, so the table below never sits under them */
#map-row { position: relative; display: flex; flex: 1; min-height: 0; }
.map-table { height: 260px; flex-shrink: 0; background: #fff; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 5; }
.map-table.hidden { display: none; }
.map-table-bar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--line);
  font-size: 12px; flex-wrap: wrap; }
.map-table-bar #mt-name { font-weight: 600; color: #21597f; }
/* the Layers-tab table, hosted here: its own linked map is not drawn (the
   map above is the linked map), the rows fill the panel, the footer stays */
.map-table-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#mt-wrap > .form-row { flex: none; padding: 4px 10px 0; margin: 0; }
#mt-wrap > .hint, #mt-wrap > .err { padding: 10px; }
#mt-wrap #tbl-map-mt-wrap { display: none; }
#mt-wrap .tbl-wrap { flex: 1 1 auto; max-height: none !important; min-height: 0 !important; margin-top: 0 !important; overflow: auto; }
#mt-wrap .tbl-footer { flex: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 5px 10px; }
#mt-wrap .tbl-wrap table.entry.attr tr:first-child th {
  position: sticky; top: 0; z-index: 10; background: #f6f8fa; box-shadow: 0 1px 0 #dbe3ea; }
.hsplitter { height: 6px; margin: -3px 0; cursor: row-resize; flex-shrink: 0; background: transparent;
  position: relative; z-index: 20; transition: background .12s; }
.hsplitter.hidden { display: none; }
.hsplitter:hover, .hsplitter.dragging { background: rgba(0, 169, 224, .45); }
.leaflet-control.gem-mt a { width: 30px; height: 30px; line-height: 30px; font-size: 17px; padding: 0; text-align: center; }
.leaflet-control.gem-mt a.on { background: #e3f4fa; color: #0b6e99; box-shadow: inset 0 0 0 2px #00a9e0; }

/* the table footer is one line: the tools never wrap, the title and the
   counts give way first, and what still does not fit scrolls sideways */
.tbl-footer { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.tbl-footer > button, .tbl-footer > label, .tbl-footer > select { flex-shrink: 0; }
.tbl-footer .spacer { flex: 1 1 0; min-width: 8px; }
.tbl-footer .tbl-title, .tbl-footer #tbl-counts { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mt-wrap .tbl-footer { padding-right: 76px; }   /* clear of the chat bubble */
.tbl-footer #tbl-counts { flex: 0 0 auto; }   /* the row count always shows; the title gives way first */

/* attribute-table cells as text until touched */
table.entry.attr td.cell.lazy, table.entry.attr td.cell.ro { padding: 5px 10px; font-family: Consolas, monospace; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
table.entry.attr td.cell.lazy { cursor: text; }
table.entry.attr td.cell.lazy:hover { box-shadow: inset 0 0 0 1px #b9c9d6; }
table.entry.attr td.cell.lazy:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
table.entry.attr td.cell.dom::after { content: " ▾"; color: #8a99a3; }
/* the name the uid in this cell stands for — sans, quieter, on the same line */
table.entry.attr td.cell .cell-uidnm { font: 11.5px/1.5 "Segoe UI", -apple-system, Arial, sans-serif; color: #6b7b86; }
table.entry td.saved { background: #e2f2e6; }


/* the map's right-click menu: a heading line names what the menu is about */
.ctx-menu .ctx-head { padding: 5px 12px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #6b7c86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.ctx-menu { max-height: calc(100vh - 20px); overflow-y: auto; }

.ax-legend.ax-note { background: #fff8e1; color: #6b4e00; border: 1px solid #f0d27a; font-size: 11px; max-width: 260px; }

/* a KPI's change against last year */
.dash-kpi .kpi-cmp { font-size: 12px; margin-top: 4px; font-weight: 600; }
.dash-kpi .kpi-cmp.up { color: #2e7d32; }
.dash-kpi .kpi-cmp.down { color: #c62828; }

/* what the chart shows, in a line under it; and the notes pinned on it */
.dw-insight { font-size: 11px; color: #4a5a64; padding: 2px 10px 4px; border-top: 1px solid #eef2f4; }
.dw-notes { font-size: 11px; color: #3b2f00; padding: 2px 10px 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; background: #fffbea; }
/* the selected facility, flashing on the accessibility map */
.ax-flash { border-radius: 50%; border: 3px solid #00e5ff; box-shadow: 0 0 0 2px rgba(0,0,0,.25); animation: ax-flash 1.1s ease-out 4; }
@keyframes ax-flash { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* comments on a card */
.cmt-n { font-size: 9px; background: #21597f; color: #fff; border-radius: 8px; padding: 0 4px; margin-left: 2px; vertical-align: top; }
.cmt-pop { width: 320px; }
.cmt-list { max-height: 260px; overflow: auto; margin: 4px 0; }
.cmt { padding: 6px 4px; border-bottom: 1px solid #eef2f4; font-size: 12px; }
.cmt-h { display: flex; align-items: center; gap: 6px; }
.cmt-h .cmt-del { margin-left: auto; }
.cmt-t { margin-top: 2px; white-space: pre-wrap; }
.cmt-new { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 5px 7px; border: 1px solid #b9c6cf; border-radius: 6px; }

/* the legend card as a canvas of its own */
.ax-keyfree { position: relative; width: 100%; height: 100%; min-height: 120px; }
.ax-kbox { position: absolute; box-sizing: border-box; overflow: auto; padding: 2px 6px; }
.ax-kbox .ax-keysec { margin: 0; }
.dash-w.sel .ax-kbox, .dash-editbar ~ * .ax-kbox { outline: 1px dashed #b9c9d6; }
.ax-kgrip { position: absolute; top: 0; right: 34px; font-size: 11px; color: #6b7c86; cursor: move; padding: 0 3px; background: #fff; border-radius: 3px; }
.ax-ksc { position: absolute; top: 0; right: 2px; display: flex; gap: 1px; }
.ax-ksc button { font-size: 11px; width: 15px; height: 15px; line-height: 1; padding: 0; border: 1px solid #cfd8df; background: #fff; border-radius: 3px; cursor: pointer; }
/* the section handles are the card handles, shown while the section is under the pointer */
.ax-kbox:hover .dash-rz { opacity: .5; }
.ax-kbox { overflow: auto; }

/* a dropdown of checkboxes */
.dd-chk { width: 100%; text-align: left; font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid #b9c6cf; border-radius: 6px; background: #fff; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-pop { min-width: 220px; }
.dd-pop .colvis-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; cursor: pointer; }

/* one look for every on/off setting in the widget panel: a row, box first */
#dash-side-body label.chk, .fd-sec-body label.chk { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0; font-size: 12.5px; line-height: 1.35; }
#dash-side-body label.chk input, .fd-sec-body label.chk input { width: auto; margin: 2px 0 0; flex: none; }
#dash-side-body label.chk .ne, .fd-sec-body label.chk .ne { display: block; font-size: 11px; }

/* map cards: popup, labels, search */
.dmap-pop { font-size: 12px; min-width: 200px; }
.dmap-pop-t { font-weight: 700; font-size: 13px; color: #1b3a5b; margin-bottom: 4px; }
.dmap-pop-r { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-top: 1px solid #eef2f4; }
.dmap-pop-r span:first-child { color: #6b7c86; }
.dmap-pop-a { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dmap-popup .leaflet-popup-content { margin: 10px 12px; }
.dmap-lbl { background: transparent; border: 0; }
.dmap-lbl span { font: 600 10.5px/1.1 system-ui, "Segoe UI", sans-serif; color: #1b2a33; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; transform: translate(-50%, -50%); display: inline-block; }
.dm-search { position: relative; }
.dm-search a { width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; display: block; }
.dm-search .dm-sbox { position: absolute; left: 34px; top: 0; background: #fff; border: 1px solid #b9c6cf; border-radius: 6px; padding: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.dm-search .dm-sbox.hidden { display: none; }
.dm-search .dm-sbox input { width: 200px; font-size: 12px; padding: 4px 6px; border: 0; outline: none; }

/* map cards: swipe, time slider, heat, class preview */
.dm-swipe { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #1b2a33; z-index: 700; cursor: ew-resize; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.dm-swipe-h { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: #1b2a33; color: #fff; font-size: 14px; line-height: 26px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.dm-swipe-l, .dm-swipe-r { position: absolute; top: 8px; font: 600 10.5px system-ui, sans-serif; color: #1b2a33; background: rgba(255,255,255,.85); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.dm-swipe-l { right: 6px; } .dm-swipe-r { left: 6px; }
.dm-time { display: flex; align-items: center; gap: 6px; padding: 3px 8px; background: #fff; font-size: 11.5px; }
.dm-time input[type=range] { width: 110px; margin: 0; }
.dm-time .dm-play { border: 0; background: #21597f; color: #fff; border-radius: 4px; width: 22px; height: 20px; font-size: 10px; cursor: pointer; padding: 0; }
.dm-time .dm-tlbl { white-space: nowrap; min-width: 80px; }
.dm-time .dm-tlbl.empty { color: #b3392f; }
.dmap-heat { pointer-events: none; }
.cb-prev { margin: 6px 0 2px; }
.cb-prev svg { width: 100%; height: 54px; display: block; background: #f6f8fa; border: 1px solid #e3e9ee; border-radius: 4px; }
.cb-ticks { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: #6b7c86; margin-top: 2px; }
.cb-ticks span:nth-child(2) { text-align: center; }

/* map cards: tools, measure, sketch, print */
.dm-tools { position: relative; }
.dm-tools > a { width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; display: block; }
.dm-tools a.on { background: #e3eef7; }
.dm-fly { position: absolute; left: 34px; top: 0; min-width: 170px; max-width: 240px; max-height: 300px; overflow: auto; background: #fff; border: 1px solid #b9c6cf; border-radius: 6px; padding: 6px 8px; box-shadow: 0 1px 5px rgba(0,0,0,.25); font-size: 12px; z-index: 5; }
.dm-fly.hidden { display: none; }
.dm-fly a { display: block; width: auto; height: auto; line-height: 1.6; text-align: left; padding: 2px 4px; font-size: 12px; border-radius: 4px; }
.dm-fly a:hover { background: #eef3f7; }
.dm-flyh { font-weight: 700; color: #1b3a5b; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
.dm-flyh input[type=color] { width: 26px; height: 20px; padding: 0; border: 1px solid #b9c6cf; }
.dm-flyrow { display: flex; align-items: center; }
.dm-flyrow a:first-child { flex: 1; }
.dm-flyadd { display: flex; gap: 4px; margin-top: 6px; }
.dm-flyadd input { flex: 1; min-width: 0; font-size: 12px; padding: 3px 5px; border: 1px solid #b9c6cf; border-radius: 4px; }
.dm-fly .ne { margin: 4px 0 0; font-size: 11px; }
.dm-mtip { background: #fff; border: 1px solid #d84315; color: #1b2a33; font-size: 12px; padding: 3px 7px; border-radius: 4px; }
.dm-mtip .dm-mclear { margin-left: 4px; color: #b3392f; text-decoration: none; font-weight: 700; }
.dmap-note { background: transparent; border: 0; }
.dmap-note span { display: inline-block; max-width: 220px; background: rgba(255,255,255,.95); border: 1.5px solid; border-radius: 6px; padding: 4px 8px; font: 12.5px/1.3 system-ui, "Segoe UI", sans-serif; box-shadow: 0 1px 4px rgba(0,0,0,.25); white-space: normal; }
.dmap-arrow { background: transparent; border: 0; }
.dm-notetxt { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid #b9c6cf; border-radius: 4px; }
.dm-print-dlg { position: fixed; inset: 0; background: rgba(20,30,40,.45); z-index: 3000; display: flex; align-items: center; justify-content: center; }
.dm-print-box { background: #fff; border-radius: 10px; padding: 16px 18px; width: 340px; max-width: 92vw; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.dm-print-box h4 { margin: 0 0 10px; }
.dm-print-box .fld { display: block; margin: 6px 0; font-size: 12.5px; }
.dm-print-box .fld input, .dm-print-box .fld select { width: 100%; box-sizing: border-box; }
.dm-print-box label.chk { display: flex; gap: 6px; align-items: center; margin: 5px 0; font-size: 12.5px; }
.dm-print-box label.chk input { width: auto; }

/* the feature info card */
.fi-wrap { padding: 4px 8px; overflow: auto; height: 100%; box-sizing: border-box; font-size: 12.5px; }
.fi-n { margin: 2px 0 6px; }
.fi-item { border-top: 1px solid #e3e9ee; padding: 6px 0; }
.fi-item:first-child { border-top: 0; }
.fi-h b { display: block; color: #1b3a5b; font-size: 13.5px; }
.fi-h .ne { display: block; font-size: 11px; }
.fi-t { width: 100%; border-collapse: collapse; margin-top: 4px; }
.fi-t td { padding: 2px 4px; border-bottom: 1px solid #f0f3f5; vertical-align: top; }
.fi-t td:first-child { color: #4a5a64; width: 55%; }
.fi-t td.n { text-align: right; font-weight: 600; }
.fi-t.attrs td:first-child { text-transform: capitalize; color: #6b7c86; }

/* icon-only map controls */
.dm-base > a { width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; display: block; }
.dm-base { position: relative; }
.dm-fly.right { left: auto; right: 34px; }
.dm-fly a.on { font-weight: 700; color: #1b3a5b; }
.ax-refctl .ax-refdd summary .ic { font-size: 15px; }
.ax-refn { position: absolute; right: -4px; top: -4px; min-width: 14px; height: 14px; line-height: 14px; font-size: 9px; border-radius: 7px; background: #21597f; color: #fff; text-align: center; padding: 0 3px; }
/* rows in a flyout are list items, not bar buttons — outrank Leaflet's bar rule */
.leaflet-bar .dm-fly a, .leaflet-touch .leaflet-bar .dm-fly a { width: auto; height: auto; line-height: 1.6; display: block; text-align: left; border: 0; padding: 2px 4px; font-size: 12px; border-radius: 4px; }
.leaflet-bar .dm-fly .dm-flyrow a:last-child { display: inline-block; }

/* one size for every control on a map: 30 px squares, one radius, one shadow */
.leaflet-bar a, .leaflet-touch .leaflet-bar a, .leaflet-bar > a { width: 30px; height: 30px; line-height: 30px; font-size: 15px; text-align: center; }
.leaflet-control-zoom a, .leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out { font-size: 18px; }
.leaflet-bar, .leaflet-touch .leaflet-bar { border: 0; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.3); background: #fff; }
.leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.leaflet-bar.ax-refctl .ax-refdd summary { border: 0; width: 30px; height: 30px; font-size: 15px; border-radius: 4px; }
.leaflet-bar.ax-refctl .ax-refdd { display: block; }
.leaflet-control.ax-refctl { margin-top: 10px; }
.dm-time { border-radius: 4px; height: 30px; box-sizing: border-box; }
.dm-time .dm-play { width: 24px; height: 22px; }
/* the controls, placed by the designer */
.leaflet-container > .leaflet-control.ctl-placed { position: absolute; margin: 0; z-index: 1001; }
/* arrange mode: a grid under the controls, the controls themselves the handles */
.ctl-grid { position: absolute; inset: 0; z-index: 998; pointer-events: none;
  background-image: linear-gradient(to right, rgba(33,89,127,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(33,89,127,.10) 1px, transparent 1px),
    linear-gradient(to right, rgba(33,89,127,.28) 1px, transparent 1px), linear-gradient(to bottom, rgba(33,89,127,.28) 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px; }
.ctl-arrange .leaflet-control[data-ck] { cursor: move; outline: 1px dashed #21597f; outline-offset: 0; }
.ctl-arrange .leaflet-control[data-ck].ctl-dragging { opacity: .85; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.ctl-arrange .leaflet-control[data-ck] a, .ctl-arrange .leaflet-control[data-ck] summary, .ctl-arrange .leaflet-control[data-ck] input, .ctl-arrange .leaflet-control[data-ck] button { pointer-events: none; }
.ctl-bar { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 1002; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 90px); background: #1b2a33; color: #fff; font-size: 12px; padding: 4px 6px 4px 10px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.35); white-space: nowrap; }
.ctl-bar span { overflow: hidden; text-overflow: ellipsis; }
.dash-wtools .fb-ib.on { background: #21597f; color: #fff; border-radius: 4px; }

/* explanations folded into ⓘ */
.hint-i { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #dbe6ef; color: #21597f; font: italic 700 10px/1 Georgia, "Times New Roman", serif; margin-left: 5px; vertical-align: 2px; cursor: help; flex: none; user-select: none; }
.hint-i:hover, .hint-i:focus { background: #21597f; color: #fff; outline: none; }
.dash-side .fld { position: relative; }
.dash-side .fld > .hint-i { position: absolute; right: 0; top: 0; margin: 0; }
/* A field in this panel stacks its label over its box, so anything else inside
   it becomes a row of its own — which is what the ⓘ had become, a line between
   the label and the box on every field in the panel. It belongs at the end of
   the label, so it is lifted out of the flow to the top corner, the way the
   older hint mark already was. */
.dash-side .fld > .fi { position: absolute; right: 0; top: 0; margin: 0; vertical-align: baseline; }
.dash-side label.chk > .hint-i { margin-left: auto; }
summary > .hint-i, .wp-sub > .hint-i, h4 > .hint-i, .panel-title > .hint-i { vertical-align: 1px; }
.hint-pop { position: fixed; z-index: 4000; background: #1b2a33; color: #fff; font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.3); white-space: pre-line; pointer-events: none; box-sizing: border-box; }

/* every tool its own square; the flyout hangs beside it */
.dm-tools, .dm-search, .dm-locate { position: relative; }
/* the corner stacks keep Leaflet's 10 px rhythm, the same grid arrange mode snaps to */
.leaflet-top .leaflet-control, .leaflet-bottom .leaflet-control { margin-top: 10px; }
.leaflet-left .leaflet-control { margin-left: 10px; }
.leaflet-right .leaflet-control { margin-right: 10px; }
.leaflet-control.ax-refctl { margin-top: 10px; }

/* flyouts and menus placed by dmFlyPlace: position comes inline */
.ax-refctl .ax-refmenu { top: 0; margin-top: 0; }
.dm-search .dm-sbox { z-index: 5; }

/* the drill trail rides in the title bar, after the title, one ribbon per card */
.dash-wh .dash-crumbs { flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 8px; border-left: 1px solid #d7dee3; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-wh:has(.dash-crumbs) .dash-wt { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the layer list while designing: drag to order, an eye per layer */
.ax-refmenu .ax-grip { cursor: grab; color: #8a97a1; font-size: 11px; margin-right: 2px; user-select: none; }
.ax-refmenu label[draggable="true"] { cursor: default; }
.ax-refmenu label.ax-dragging { opacity: .45; }
.ax-refmenu label.ax-over { box-shadow: 0 -2px 0 #21597f inset; background: #eef4f9; }
.ax-refmenu .ax-eye { margin-left: auto; text-decoration: none; opacity: .65; font-size: 12px; padding-left: 8px; }
/* ＋ to put a layer on the map, ✕ to take it off — last in the row, after the
   reader's eye, and the only one of these marks that is not faint: it is the
   thing most often reached for. */
.ax-refmenu .ax-onoff { text-decoration: none; opacity: .75; font-size: 12px; padding-left: 8px;
  color: var(--brand); font-weight: 700; }
.ax-refmenu .ax-onoff:hover { opacity: 1; }
.ax-refmenu .ax-eye + .ax-onoff, .ax-refmenu .ax-sty + .ax-onoff, .ax-refmenu .ax-selx + .ax-onoff { margin-left: 0; }
.ax-refmenu label > .ax-onoff:first-of-type { margin-left: auto; }
.ax-refmenu .ax-eye:hover { opacity: 1; }
.ax-refmenu label.ax-hid span { text-decoration: line-through; opacity: .6; }
.ax-refnote { padding: 4px 7px 2px; font-size: 11px; line-height: 1.35; }

/* a layer's look on this card, edited under its row */
.ax-refmenu .ax-sty { text-decoration: none; opacity: .55; font-size: 12px; padding-left: 8px; margin-left: auto; }
.ax-refmenu .ax-sty.on { opacity: 1; }
.ax-refmenu .ax-sty + .ax-eye { margin-left: 0; }
.ax-refmenu .ax-sty:hover { opacity: 1; }
.ax-styed { margin: 0 0 6px 22px; padding: 6px 8px; background: #f4f7f9; border: 1px solid #e1e8ee; border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.ax-styed .ax-sf { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #4a5a64; padding: 0; white-space: nowrap; }
.ax-styed .ax-sf:hover { background: transparent; }
.ax-styed select, .ax-styed input[type=range] { width: 100%; font-size: 11px; }
.ax-styed input[type=color] { width: 100%; height: 22px; padding: 0; border: 1px solid #b9c6cf; border-radius: 4px; background: #fff; }
.ax-styed .ax-sfrow { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* selectable or inert, per layer */
.ax-refmenu .ax-selx { text-decoration: none; opacity: .55; font-size: 12px; padding-left: 6px; }
.ax-refmenu .ax-selx.off { opacity: 1; color: #b3392f; }
.ax-refmenu .ax-selx:hover { opacity: 1; }
.ax-refmenu .ax-sty + .ax-selx, .ax-refmenu .ax-selx + .ax-eye { margin-left: 0; }

/* the card's layer editor borrows the Layers tab's galleries */
.ax-styed .ax-sfbtn { display: flex; align-items: center; gap: 6px; justify-content: flex-start; font-size: 11px; padding: 3px 8px; }
.ax-lpic { display: inline-flex; align-items: center; width: 34px; height: 12px; }
.ax-lpic > span { width: 100%; display: block; }
.ax-styed .ax-sfrow .ne { margin-right: auto; font-size: 11px; }

/* the palette picker */
.ramp-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border: 1px solid #b9c6cf; border-radius: 6px; background: #fff; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.ramp-btn:hover:not(:disabled) { border-color: #21597f; }
/* a palette waiting on something else to be switched on */
.ramp-btn:disabled { opacity: .45; cursor: default; }
.ramp-sw { display: inline-block; width: 72px; height: 14px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ramp-btn .ramp-sw { width: 64px; }
.ramp-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ramp-car { color: #6b7c86; font-size: 10px; }
.ramp-pop { position: absolute; z-index: 3500; width: 328px; max-height: 420px; overflow: auto; background: #fff; border: 1px solid #b9c6cf; border-radius: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.25); padding: 6px; font-size: 12px; }
.ramp-pophead { display: flex; align-items: center; gap: 10px; padding: 2px 4px 6px; border-bottom: 1px solid #e3e9ee; margin-bottom: 4px; }
.ramp-pophead b { flex: 1; }
.ramp-pophead label.chk { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 11.5px; }
.ramp-grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #6b7c86; padding: 8px 6px 3px; }
.ramp-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; background: transparent; border-radius: 5px; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.ramp-row:hover { background: #eef4f9; }
.ramp-row.on { background: #e3eef7; font-weight: 600; }
.ramp-row .ne { font-size: 10.5px; }

/* a map being refreshed */
.dash-refreshing { opacity: .6; transition: opacity .2s; }

/* a message laid over an empty map */
.dash-empty-over { position: absolute; inset: 0; z-index: 1005; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.7); pointer-events: none; }

/* the basemap switch on the accessibility map, the same square as the rest */
.leaflet-touch .leaflet-control-layers-toggle, .leaflet-control-layers-toggle { width: 30px; height: 30px; background-size: 20px 20px; }
.leaflet-touch .leaflet-control-layers { border: 0; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* the histogram brush */
.hf-wrap { padding: 6px 8px 4px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.hf-svg { width: 100%; flex: 1; min-height: 60px; background: #f6f8fa; border: 1px solid #e3e9ee; border-radius: 4px; cursor: crosshair; }
.hf-sel { fill: rgba(33, 89, 127, .18); stroke: #21597f; stroke-width: 1; }
.hf-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #6b7c86; margin-top: 3px; }
.hf-mid { text-align: center; flex: 1; }
.hf-mid a { color: #b3392f; text-decoration: none; font-weight: 700; margin-left: 4px; }
/* trails and speed on the time slider */
.dm-time .dm-trail { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 0 2px; opacity: .45; }
.dm-time .dm-trail.on { opacity: 1; }
.dm-time .dm-speed { font-size: 10.5px; border: 1px solid #d7dee3; border-radius: 4px; padding: 1px 2px; }

/* the flow chain in the panel */
.flow-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 6px; }
.flow-tier { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1.5px solid; border-radius: 999px; font-size: 11.5px; background: #fff; }
.flow-tier i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.flow-tier a { color: #b3392f; text-decoration: none; font-weight: 700; margin-left: 2px; }
.flow-arrow { color: #6b7c86; font-size: 12px; }
.flow-chain select { font-size: 11px; padding: 1px 4px; }
/* the sub-sections of a card's options: a heading with a rule above, so each group reads apart */
.dash-side .wp-sub { margin: 14px 0 6px; padding-top: 8px; border-top: 1px solid #e3e9ee; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #5c6b76; font-weight: 700; }
.dash-side .fd-sec-body > .wp-sub:first-child, .dash-side .fd-sec-body > div:first-child > .wp-sub:first-child { margin-top: 2px; border-top: 0; padding-top: 0; }
/* in a two-column options grid, a chain, a note or a switch takes the whole row */
.dash-side .wp-grid > .flow-chain, .dash-side .wp-grid > p.ne, .dash-side .wp-grid > label.chk, .dash-side .wp-grid > .form-row { grid-column: 1 / -1; }
/* the Values row keeps its pairs: Top N beside Others, Quick calc beside Colour */
.dash-side .wp-grid.wp-opts > label.chk { grid-column: auto; align-self: end; margin-bottom: 8px; }

/* the flow map's layer editor: a heading per hop */
.ax-styed .ax-sfh { grid-column: 1 / -1; font-size: 11px; font-weight: 700; color: #1b3a5b; margin-top: 4px; }

/* the flow as a vertical list of links */
.flow-tree { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; }
.flow-hop { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border: 1px solid #e3e9ee; border-radius: 6px; background: #fff; }
.flow-hop .ax-grip { cursor: grab; color: #8a97a1; font-size: 11px; margin-right: 2px; user-select: none; }
.flow-hop.ax-dragging { opacity: .45; }
.flow-hop.ax-over { box-shadow: 0 -2px 0 #21597f inset; background: #eef4f9; }
.flow-hop .flow-x { margin-left: auto; color: #b3392f; text-decoration: none; font-weight: 700; padding: 0 3px; }
.flow-add { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.flow-add select { flex: 1; min-width: 0; font-size: 11px; padding: 2px 3px; }

/* the flow's dialog: diagram beside the list of links */
.flow-card { border: 1px solid #d9e1e8; border-radius: 8px; background: #fbfcfd; cursor: pointer; overflow: hidden; margin: 2px 0 6px; }
.flow-card:hover { border-color: #21597f; }
.flow-card .flow-svg { display: block; max-width: 100%; height: auto; max-height: 260px; margin: 0 auto; }
.flow-card-cap { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 6px; border-top: 1px solid #e6ebf0; font-size: 11px; color: #4a5a64; }
.flow-dlg { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.flow-dlg-svg { overflow: auto; max-height: 60vh; border: 1px solid #e3e8ec; border-radius: 8px; background: #fbfcfd; padding: 6px; display: flex; justify-content: center; }
.flow-dlg-svg .flow-svg { max-width: 100%; height: auto; }
.flow-dlg-side .flow-tree { max-height: 46vh; overflow: auto; }
.flow-hop.on { border-color: #21597f; background: #eef4f9; }
@media (max-width: 760px) { .flow-dlg { grid-template-columns: 1fr; } }

.flow-dlg-svg { touch-action: none; user-select: none; }
.flow-dlg-svg [data-flowtier]:active { cursor: grabbing; }
.flow-dlg-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; font-size: 11px; }

.flow-card { touch-action: none; user-select: none; }
.flow-card [data-flowtier] { cursor: grab; }

/* the flow model canvas, in the manner of a model builder */
.mb { display: grid; grid-template-columns: 180px minmax(0, 1fr) 300px; gap: 10px; width: min(1220px, 90vw); align-items: stretch; }
.mb-h { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8a97a1; margin: 2px 0 4px; }
.mb-h .ne { text-transform: none; letter-spacing: 0; }
.mb-pal { display: flex; flex-direction: column; min-height: 0; border: 1px solid #e3e8ec; border-radius: 8px; padding: 6px; background: #fbfcfd; }
.mb-pal input { font-size: 11px; padding: 3px 6px; margin-bottom: 4px; }
.mb-pal-list { overflow: auto; max-height: 56vh; }
.mb-g { font-size: 10px; color: #8a97a1; margin: 6px 0 2px; }
.mb-chip { display: flex; align-items: center; gap: 5px; padding: 3px 5px; border: 1px solid #dfe6ec; border-radius: 6px; background: #fff; font-size: 11px; margin-bottom: 3px; cursor: grab; user-select: none; touch-action: none; }
.mb-chip i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mb-chip b { margin-left: auto; font-weight: 400; color: #8a97a1; font-size: 10px; }
.mb-chip.in { opacity: .55; }
.mb-chip:hover { border-color: #21597f; }
.mb-main { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.mb-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mb-bar .mb-hint { font-size: 10.5px; margin-left: auto; }
.mb-zoom { display: inline-flex; align-items: center; gap: 2px; }
.mb-zoom span { min-width: 38px; text-align: center; font-size: 11px; color: #4a5a64; }
.mb-canvas { height: 60vh; min-height: 300px; border: 1px solid #d9e1e8; border-radius: 8px; background: #fbfcfd; overflow: hidden; position: relative; touch-action: none; user-select: none; cursor: grab; }
.mb-canvas svg { display: block; }
.mb-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #4a5a64; }
.mb-menu { position: fixed; z-index: 3000; background: #fff; border: 1px solid #cfd8df; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; min-width: 200px; }
.mb-menu a { display: block; padding: 6px 10px; font-size: 12px; color: #22333f; text-decoration: none; border-radius: 5px; }
.mb-menu a:hover { background: #eef4f9; color: #21597f; }
.mb-ghost { position: fixed; z-index: 3001; pointer-events: none; background: #fff; border: 1px solid #21597f; border-radius: 6px; padding: 3px 8px; font-size: 11px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
@media (max-width: 900px) { .mb { grid-template-columns: 1fr; } .mb-pal-list { max-height: 120px; } }

/* the model on the widget panel's card */
.flow-card.mb-mini { cursor: default; padding: 4px; grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
.mb-bar.mini { gap: 2px; margin-bottom: 3px; }
.mb-bar.mini .btn.small { padding: 1px 6px; font-size: 12px; line-height: 18px; }
.mb-bar.mini select { flex: 1; min-width: 0; max-width: 110px; font-size: 10.5px; padding: 1px 3px; }
.mb-bar.mini .mb-zoom span { min-width: 32px; font-size: 10px; }
.mb-canvas.mini { height: 230px; min-height: 0; border-radius: 6px; }
.flow-card.mb-mini .flow-card-cap { padding: 3px 2px 0; border-top: 0; flex-wrap: wrap; }

/* a card's definition query on a reference layer */
.ax-flt { color: #8a97a1; text-decoration: none; font-size: 13px; padding: 0 3px; }
.ax-flt.on { color: #b3392f; }
.ax-flt:hover { color: #21597f; }
.ax-flted { margin: 0 0 6px 22px; padding: 6px 8px; background: #f4f7f9; border: 1px solid #e1e8ee; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.ax-flth { font-weight: 600; color: #22333f; }
.ax-fltc { display: grid; grid-template-columns: 44px minmax(90px, 1fr) minmax(90px, 1fr) minmax(90px, 1.2fr) 16px; gap: 4px; align-items: center; }
.ax-fltc select, .ax-fltc input { font-size: 11px; padding: 2px 4px; min-width: 0; width: 100%; box-sizing: border-box; }
.ax-fltc select[multiple] { height: auto; }
.ax-fltop { font-size: 9.5px; letter-spacing: .5px; color: #8a97a1; text-align: right; padding-right: 2px; }
.ax-fltpair { display: flex; gap: 3px; }
.ax-fltrow2 { display: flex; align-items: center; gap: 8px; }
.ax-fltrow2 select { font-size: 11px; padding: 1px 3px; }
.ax-fltsql { font-family: Consolas, monospace; font-size: 10.5px; color: #21597f; background: #fff; border: 1px solid #e1e8ee; border-radius: 4px; padding: 3px 6px; word-break: break-word; }

/* the label class editor */
.ax-styed .ax-sfh { grid-column: 1 / -1; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8a97a1; margin-top: 4px; }
.ax-styed .ax-sfchk { flex-direction: row; align-items: center; justify-content: space-between; }
.ax-styed .ax-sfchk input { width: auto; }
.ax-styed input[type="number"], .ax-styed input[data-f="expr"] { font-size: 11px; padding: 3px 5px; }

.ax-lbl { color: #8a97a1; text-decoration: none; font-size: 12px; padding: 0 3px; filter: grayscale(1); }
.ax-lbl.on { filter: none; }
.ax-lbl:hover { filter: none; }

.lyr-lbled { margin: 0; grid-template-columns: 1fr 1fr 1fr; min-width: 520px; }

.lyr .lbl-t { border: none; background: none; cursor: pointer; font-size: 12px; padding: 0 2px; filter: grayscale(1); opacity: .7; }
.lyr .lbl-t.on { filter: none; opacity: 1; }
.lyr .lbl-t:hover { filter: none; opacity: 1; }

/* the label class preview: real labels around a dot for the feature */
.ax-lblprev { grid-column: 1 / -1; display: flex; gap: 6px; }
.lp-cell { flex: 1; position: relative; height: 66px; border: 1px solid #e1e8ee; border-radius: 6px; overflow: hidden;
  background-color: #f7f9fb; background-image: linear-gradient(#e9eef2 1px, transparent 1px), linear-gradient(90deg, #e9eef2 1px, transparent 1px); background-size: 12px 12px; }
.lp-dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #21597f; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #21597f; }
.lp-anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.lp-anchor span { position: absolute; left: 0; top: 0; }

/* the symbology dialog's sample features */
.sym-samples { margin-bottom: 8px; }
.sym-samples .lp-cell { height: 84px; }
.lp-sym { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; }
.lp-line { display: block; width: 44px; }
.lp-poly { display: block; width: 36px; height: 26px; border-radius: 4px; border: 1.5px solid; opacity: .85; }
.lp-cap { position: absolute; left: 4px; bottom: 3px; font-size: 9.5px; color: #69798a; line-height: 1.15; pointer-events: none; }

/* the widget panel's sample features */
.cb-samples { margin-bottom: 6px; }
.cb-samples .lp-cell { height: 84px; }
.lp-bub { display: block; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }

.lp-hex { display: block; width: 34px; height: 30px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); opacity: .85; }
.lp-sq { display: block; width: 30px; height: 30px; border: 1.5px solid; opacity: .85; }

/* the widget panel's live preview of the card */
.wp-prevwrap { margin: 2px 0 8px; }
.wp-prevwrap > summary { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8a97a1; cursor: pointer; }
.wp-preview { position: relative; height: 200px; border: 1px solid #d9e1e8; border-radius: 8px; background: #fff; overflow: hidden; margin-top: 4px; font-size: 11px; }
.wp-preview .dash-map { position: absolute; inset: 0; height: 100%; }
.wp-preview .dash-text { padding: 8px; }
.wp-preview .dmap-legend { transform: scale(.8); transform-origin: bottom right; }
/* the preview keeps only the map's zoom: the card's tool bars would crowd a 200 px window */
.wp-preview .leaflet-top.leaflet-right, .wp-preview .leaflet-bottom, .wp-preview .dm-tools, .wp-preview .dmap-legend { display: none; }

/* label classes and the leader line */
.lc-list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; }
.lc-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid #e1e8ee; border-radius: 6px; background: #fff; font-size: 11px; }
.lc-row .ne { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-row a { text-decoration: none; color: #21597f; }
.sub-veil { z-index: 2600; }
.sub-veil .modal-card { max-width: 92vw; }
.dmap-lbl .lbl-lead { position: absolute; left: 0; top: 0; height: 1px; transform-origin: 0 50%; pointer-events: none; opacity: .75; }

.lbl-helptext { white-space: pre-wrap; font: 12px/1.5 system-ui, "Segoe UI", sans-serif; max-width: 560px; margin: 0; }

.lbl-help { text-decoration: none; color: #21597f; font-size: 11px; margin-left: 3px; cursor: help; }

/* the label style library row */
.lbl-lib { grid-column: 1 / -1; }
.lbl-librow { display: flex; gap: 4px; align-items: center; }
.lbl-librow select { flex: 1; min-width: 0; }

/* pinned labels: draggable in design mode, marked when pinned */
.lbl-editing .dmap-lbl span { pointer-events: auto; cursor: move; }
.dmap-lbl span[data-fixed] { text-decoration: underline dotted; text-underline-offset: 2px; }

.kv-supply > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.kv-supply input { width: 100%; }

/* the supply chain in the feature panel */
.sc-tree { margin-top: 10px; padding: 8px; border: 1px solid #e1e8ee; border-radius: 8px; background: #fbfcfd; font-size: 12px; }
.sc-h { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8a97a1; margin-bottom: 4px; }
.sc-node { display: flex; align-items: center; gap: 4px; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-node.sc-here { font-weight: 600; }
.sc-arm { color: #b9c4cc; }
.sc-site { color: #21597f; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.sc-site:hover { text-decoration: underline; }
.sc-t { display: inline-block; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 0 4px; border-radius: 3px; margin-right: 5px; color: #fff; background: #8a97a1; }
.sc-dc { background: #7a5c9e; } .sc-ilr { background: #9d86bd; } .sc-fc { background: #21597f; } .sc-vc { background: #b3392f; } .sc-bc { background: #3f8f6b; }
.sc-guess { font-size: 9.5px; color: #b26a00; border: 1px dashed #b26a00; border-radius: 3px; padding: 0 3px; margin-left: 4px; }
.dmap-pop .sc-tree { margin-top: 6px; padding: 6px; font-size: 11px; max-height: 220px; overflow: auto; }
.dmap-pop .sc-node { line-height: 1.5; }

/* the supply chain in the attribute table */
td.sc-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
td.sc-cell .sc-more { text-decoration: none; color: #21597f; font-weight: 700; margin-right: 2px; }
td.sc-cell .sc-path .sc-t { margin-right: 3px; }
tr.sc-row > td { background: #fbfcfd; padding: 4px 8px 6px; }
tr.sc-row .sc-tree { margin: 0; }
tr.sc-flash > td { background: #fff3cd !important; transition: background 1s; }

/* ---- the Supply chain tab */
.sp-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr) 330px; gap: 12px; margin-top: 12px; height: calc(100vh - 168px); min-height: 480px; align-items: stretch; }
@media (max-width: 1100px) { .sp-wrap { grid-template-columns: 280px minmax(0, 1fr); } .sp-right { grid-column: 1 / -1; } }
.sp-left, .sp-right { min-height: 0; overflow: auto; }
.sp-list { display: flex; flex-direction: column; max-height: 100%; }
.sp-scroll { overflow: auto; min-height: 0; flex: 1; }
.sp-mapbox { position: relative; min-height: 0; }
#sp-map { height: 100%; min-height: 420px; border: 1px solid var(--line); border-radius: 10px; background: #eef2f5; }
.sp-note { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 900; background: rgba(255,255,255,.93); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.45; pointer-events: none; }
.sp-note button, .sp-note a { pointer-events: auto; }   /* "⟲ All links" in the note takes the click (QA 2 Oct 2026, AN-01) */
.sp-row { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-bottom: 1px solid #eef2f5; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.sp-row:hover { background: var(--bg-soft); }
.sp-row.on { background: #eef5fa; box-shadow: inset 3px 0 0 var(--brand); }
.sp-row .sp-name { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.sp-row .sp-n { margin-left: auto; font-size: 11px; }
.sp-row .sp-from { font-size: 11px; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.sp-fold { display: inline-block; width: 14px; text-align: center; color: #6b7c86; text-decoration: none; font-size: 11px; flex: none; }
.sp-hit { border-bottom: 1px solid var(--line); padding-top: 4px; }
.sp-hit .sp-path { padding: 0 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; }
.sp-card-h { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-card .kv-supply { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #eef2f5; }
.sp-card .kv-supply > span:first-child { color: #5c6b76; flex: none; }
.sp-card .kv-supply > span:last-child { text-align: right; min-width: 0; }
.sp-card a { color: #21597f; text-decoration: none; }
.sp-kid { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; white-space: nowrap; }
.sp-kid a { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sp-edit { margin-top: 8px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sp-chips .chip { font-size: 11px; padding: 2px 8px; border: 1px solid #c9d3da; border-radius: 12px; background: #fff; cursor: pointer; }
.sp-chips .chip.on { background: #21597f; color: #fff; border-color: #21597f; }
.sp-issue { white-space: normal; align-items: flex-start; }
.sp-issue > div { min-width: 0; }
.sp-sev { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 6px 4px 0 0; flex: none; }
.sp-ul { padding-left: 16px; margin: 4px 0 8px; }
.sp-ul li { margin: 2px 0; }
.sp-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.sp-tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 6px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.sp-tbl td { padding: 5px 6px; border-bottom: 1px solid #eef2f5; vertical-align: top; }
.sp-tbl tr.on td { background: #eef5fa; }
.sp-tbl tbody tr { cursor: pointer; }
.sp-speeds td { padding: 3px 4px; }
.sp-classes { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; }

/* ---- the Supply chain tab as an analysis */
.spa-wrap { grid-template-columns: minmax(0, 1fr); }
.spa-aoi details { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; background: #fff; }
.spa-aoi summary { cursor: pointer; font-size: 13px; }
.spa-aoi summary label { cursor: pointer; }
.spa-aoi-d { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; padding: 6px 0 2px 22px; font-size: 12.5px; }
.spa-aoi-d label { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .spa-inputs { grid-template-columns: 1fr; } }
.spa-inputs .sp-list { max-height: none; }
.spa-scen { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }
.spa-speedgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; }
.spa-speedgrid label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; border-bottom: 1px dashed #eef2f5; padding: 3px 0; }
.spa-speedgrid label span { display: flex; flex-direction: column; min-width: 0; }
.spa-speedgrid label i { font-style: normal; font-size: 10.5px; }
.spa-speedgrid input { width: 70px; }
.spa-runrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 10px; }
.spa-prog { flex-basis: 100%; height: 6px; background: #e6edf2; border-radius: 3px; overflow: hidden; }
.spa-prog i { display: block; height: 100%; background: var(--brand); transition: width .4s; }
.spa-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 8px; }
.spa-kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.spa-kpi b { display: block; font-size: 20px; line-height: 1.1; }
.spa-kpi b i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 400; }
.spa-kpi span { font-size: 11px; color: var(--muted); }
.sp-wrap.sp-inres { height: 640px; margin-top: 0; }
/* the site list runs the full width; the chosen site's profile opens as a
   drawer under its row (the list's own scroll box is lifted while one is open) */
.spa-prof { display: block; }
.sp-prof-res { padding: 8px 10px 10px 12px; border-left: 3px solid var(--brand); border-bottom: 1px solid var(--line); background: #fff; }
.spa-profcard { padding: 12px 14px; }
.spa-prof-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.spa-prof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
@media (max-width: 800px) { .spa-prof-grid { grid-template-columns: 1fr; } }
.spa-hop { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px dashed #eef2f5; font-size: 12.5px; white-space: nowrap; }
.spa-hop > span { overflow: hidden; text-overflow: ellipsis; }
.spa-arrow { color: #8a97a1; text-align: center; }
.spa-elev { width: 100%; height: 120px; display: block; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
/* the Supply chain inputs map sits in the same grid as the Accessibility layers map */
.ax-lyr-grid > #spa-input-map { min-height: 450px; }
#spa-inputbody { min-width: 0; }

/* the flow diagram and the links table over the results map */
.sp-over { position: absolute; inset: 0; z-index: 800; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
.fd-wrap { overflow: auto; padding: 6px; }
.fd-node rect { fill: #fff; stroke: #b9c4cc; stroke-width: 1.2; }
.fd-node text { font-size: 11px; fill: #26323a; font-weight: 600; }
.fd-node text.fd-sub { font-size: 9.5px; fill: #5c6b76; font-weight: 400; }
.fd-node.fd-dc rect { stroke: #5e2b97; fill: #f4effa; } .fd-node.fd-ilr rect { stroke: #1e5fc2; fill: #eaf1fb; } .fd-node.fd-fc rect { stroke: #008695; fill: #e9f6f7; }
.fd-node { cursor: pointer; } .fd-node:hover rect { stroke-width: 2; }
.fd-link { fill: none; stroke: #9aa5ad; stroke-width: 1.4; marker-end: url(#fdarr); }
.spa-profmap { height: 240px; border: 1px solid var(--line); border-radius: 8px; background: #eef2f5; }

/* a build whose stage has no percentage yet moves its bar back and forth */
.spa-prog-busy i { animation: spa-busy 1.6s ease-in-out infinite alternate; }
@keyframes spa-busy { from { margin-left: 0; } to { margin-left: 60%; } }

/* arrowheads along flow lines */
.gem-arrow { background: none; border: 0; pointer-events: none; }

/* the supply chain cards on a dashboard */
.sp-card-kpis { padding: 6px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sp-card-flow, .sp-card-links { height: 100%; overflow: auto; }
.sp-card-links .sp-tbl { font-size: 11px; }

/* the results dashboard inside the tab, and the workspace inside a card */
.spa-resdash .embed-grid { margin: 0; }
.sp-wrap.sp-incard { height: 100%; min-height: 420px; margin-top: 0; }
.sp-card-ws { height: 100%; display: flex; flex-direction: column; }
.sp-card-ws .dash-head { flex: none; }
.sp-card-ws .sp-wrap { flex: 1; min-height: 0; }

/* a part of a site profile as a card — the same rows as the sheet */
.sp-card-prof { padding: 4px 8px; font-size: 13px; overflow: auto; height: 100%; }
.sp-card-prof .spa-prof-h { margin: 0; }
.sp-card-prof .kv-supply { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed #eef2f5; }
.sp-card-prof .kv-supply > span:first-child { color: #5c6b76; flex: none; }
.sp-card-prof .kv-supply > span:last-child { text-align: right; min-width: 0; }
.sp-card-prof .spa-elev { width: 100%; height: auto; display: block; }
.ax-card-part .ax-kpi { margin-top: 2px; }
.ax-card-part table.entry { width: 100%; }
.ax-card-part .ax-sheet-head { display: flex; align-items: center; gap: 10px; }

/* the row that adds a road class sits at the top of the dictionary, tinted so it
   reads as an action rather than as another class */
.sp-addrow > td { background: #f4f8fb; border-bottom: 2px solid var(--line); }
.sp-addrow input { font-size: 13px; }

/* the tiers above a district: central, provincial and district vaccine stores */
.sc-cvs { background: #4b3070; } .sc-phlmc { background: #5b3d84; } .sc-dvs { background: #6a4b95; }

/* the terrain profile is a control, not a picture: the cursor says so, and the
   whole plot is a hover target so the reader never has to find the line */
.spa-elev { cursor: crosshair; }
.spa-elev-hit { pointer-events: all; }
.spa-elev-cur { pointer-events: none; }


/* a save that shows it landed, for the moment before the card redraws */
.btn.btn-saved, button.btn-saved { background: #1b7f3b !important; border-color: #1b7f3b !important; color: #fff !important; }

/* Admin ▸ Org units — possible duplicates */
.og-dupes { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.og-dupg { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-top: 8px; background: #fbfcfd; }
.og-dupg-h { font-size: 12px; color: #5c6b76; margin-bottom: 4px; }
.og-dupm { display: inline-block; margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 9px; }
.og-dupm.same { background: #fdeceb; color: #b3392f; }
.og-dupm.kind { background: #fdf4e3; color: #b26a00; }
.og-dupr { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; cursor: pointer; }
.og-dupr:hover { background: #f2f6f9; }
.og-dupn { flex: 1; font-size: 13px; }

/* Accessibility — tag filter above the analysis strip */
.ax-tagbar { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 5px 0 0; width: 100%; }
.ax-tagf {
  border: 1px solid var(--line); background: #fff; color: #3d4d59;
  border-radius: 11px; padding: 1px 9px; font-size: 11.5px; cursor: pointer; line-height: 18px;
}
.ax-tagf:hover { background: #f2f6f9; }
.ax-tagf.on { background: var(--brand-deep, #21597f); border-color: var(--brand-deep, #21597f); color: #fff; }
.ax-tagf.on .ne { color: #dbe7ef; }
.ax-tagf .ne { font-size: 10.5px; }

/* the unshaded part of a travel-time surface, explained in the legend */
.ax-keyblank { color: #7c8b96; font-size: 10.5px; align-items: flex-start; }
.ax-blankswatch {
  background: repeating-linear-gradient(45deg, #e7edf1 0 3px, #f7fafb 3px 6px);
  border: 1px solid #d3dde4;
}

/* people the surface never reached — inside the last band, blank on the map */
.ax-beyond td { color: #b26a00; border-top: 1px dashed #e2c9a4; }

/* Bikram Sambat date box: day · month · year selects (GA-12) */
.fld-bs { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fld-bs select { width: auto; min-width: 70px; }
.fld-bs .bs-m { min-width: 110px; }
.fld-bs .bs-tag { font-size: 11px; color: var(--muted); }
.fld-bs .bs-raw { flex-basis: 100%; font-size: 12px; color: #a35a00; }

/* the 3D switch on a WebGL map card */
.gl-3d { position: absolute; right: 10px; top: 10px; z-index: 6; font: inherit; font-size: 11.5px; padding: 3px 8px;
  background: rgba(255,255,255,.95); border: 1px solid #b9c6cf; border-radius: 6px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.gl-3d.on { background: var(--brand, #21597f); color: #fff; border-color: transparent; }

/* the workspace's parts as cards of their own */
.sp-partcard { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.sp-partcard.both { flex-direction: row; gap: 8px; }
.sp-partcard .sp-part-l, .sp-partcard .sp-part-r { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.sp-partcard .sp-part-l .sp-list, .sp-partcard .sp-part-l .sp-scroll { max-height: none; }
.sp-partcard .sp-part-q { margin: 0 0 6px; width: 100%; }
.sp-partcard.sp-partmap { position: relative; }
.sp-partcard .sp-part-map { flex: 1; min-height: 240px; }

/* zero-dose split and location choices as cards */
.ax-zdcard { padding: 4px 6px; overflow: auto; height: 100%; }
/* The boxes sit on the page itself, above the answer's layout. Left to the
   form row they would each take a share of a very wide page; they read as
   controls only when they stay near the width of what they hold. */
.ax-zdctl-inline { margin: 8px 0 2px; }
.ax-zdctl-inline > .form-row > .fld,
.ax-zdcard > .form-row > .fld { flex: 0 1 auto; min-width: 150px; max-width: 230px; }
.ax-zdctl-inline > .form-row > .fld > select,
.ax-zdcard > .form-row > .fld > select { width: 100%; }
.ax-zdgrid.one { grid-template-columns: 1fr; }
.sit-card { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; padding: 4px 6px; }
.sit-card .sit-head { font-size: 13px; }
.sit-card .sit-map { flex: 1; min-height: 220px; border: 1px solid var(--line); border-radius: 6px; }
.sit-card .ax-tblwrap { max-height: 40%; overflow: auto; }
/* v1854 outreach planning */
.ax-or-ctl .fld small { display: block; max-width: 260px; }
.ax-or-warn { color: #b26a00; font-weight: 600; }
.ax-or-live { margin: 4px 0 0; font-size: 12px; color: var(--ink); }
/* v1855: the outreach panel as a grid - every field the same width, label over box over hint, ⓘ at the corner */
.ax-or-ctl .form-row { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 18px; align-items: start; }
.ax-or-ctl .fld { display: grid; grid-template-columns: auto 1fr; gap: 4px 6px; align-items: center; max-width: none !important; min-width: 0; position: relative; padding-right: 24px; font-size: 12.5px; color: var(--ink); }
.ax-or-ctl .fld > .fi { justify-self: start; }
.ax-or-ctl .fld > input, .ax-or-ctl .fld > select, .ax-or-ctl .fld > b, .ax-or-ctl .fld > small { grid-column: 1 / -1; }
.ax-or-ctl .fld input, .ax-or-ctl .fld select { width: 100% !important; box-sizing: border-box; }
.ax-or-ctl .fld small { display: block; max-width: none; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.ax-or-ctl .fld > .hi-btn { position: absolute; top: -2px; right: 0; }
.ax-or-ctl .ax-or-derived > b { font-size: 18px; line-height: 1.4; padding: 2px 0; }
.ax-or-ctl .ax-or-more { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 10px; }
.ax-or-ctl .ax-or-more > summary { cursor: pointer; }
.ax-or-ctl .ax-or-live { grid-column: 1 / -1; }
.ax-or-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.2fr); gap: 12px; align-items: start; }
.ax-or-grid:has(> :only-child) { grid-template-columns: 1fr; }
.ax-or-map { min-height: 360px; }
.ax-or-curve { display: block; max-width: 640px; }
.ax-or-dot { cursor: pointer; }
.ax-or-reschips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; font-size: 12px; }
.ax-or-chip { display: inline-block; padding: 2px 8px; border-radius: 12px; background: #eef4fa; border: 1px solid #d5e3f0; white-space: nowrap; }
.ax-or-chip.cost { background: #fff5e6; border-color: #f1d29b; }
.ax-or-tbl tr.ax-or-fac { cursor: pointer; }
.ax-or-tbl tr.ax-or-fac.open td { background: #f4f8fb; }
.ax-or-tbl .ax-or-rescol { background: #f7fafc; }
.ax-or-chips i { display: inline-block; font-style: normal; font-size: 10px; padding: 0 4px; margin: 1px 2px 1px 0; border-radius: 8px; background: #e7f0fa; color: #21597f; }
.ax-or-captag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 8px; background: #fff3d6; color: #8a5a00; border: 1px solid #f1d29b; vertical-align: middle; }
.ax-or-caltbl td.ax-or-cell small { display: block; font-size: 9.5px; color: #5c6f7c; line-height: 1.1; }
.ax-or-caltbl td.ax-or-cell.peak { background: #e9f6ee; }
.ax-or-caltbl td.ax-or-cell.over { background: #fde8e6; color: #b3392f; }
.ax-or-strip { display: flex; gap: 3px; align-items: flex-end; margin: 6px 0 0; height: 44px; }
.ax-or-strip span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; height: 100%; }
.ax-or-strip i { display: block; width: 100%; max-width: 22px; background: #1d5fa8; border-radius: 2px 2px 0 0; }
.ax-or-strip u { text-decoration: none; font-size: 9px; color: #5c6f7c; margin-top: 2px; white-space: nowrap; overflow: hidden; max-width: 100%; }
.ax-or-pin span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 11px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.ax-or-exp { max-height: 50vh; overflow: auto; }
.ax-or-exp code { font-size: 12px; background: #f2f6f9; padding: 1px 5px; border-radius: 4px; }
.ax-or-tip { white-space: normal; max-width: 280px; }
.ax-or-card .ax-or-head { font-size: 12.5px; }
@media (max-width: 900px) { .ax-or-grid { grid-template-columns: 1fr; } }
.sit-pin span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 11px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* a legend on a WebGL map card, where there is no Leaflet control to hold it */
.gl-legend { position: absolute; left: 10px; bottom: 10px; z-index: 5; }

/* ---- a section's own action on its header --------------------------------
   Save on the sections that edit the analysis, Run on Results: the header is
   a div acting as a button, so it can hold one. */
.ax-sec-h { cursor: pointer; user-select: none; }
.ax-sec-h:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ax-sec-h .ax-sec-act { margin-left: 12px; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ax-sec-h .ax-sec-act:empty { display: none; }
.ax-sec-h .ax-sec-act .btn { text-transform: none; letter-spacing: 0; font-weight: 600; cursor: pointer; }
.ax-sec-h .ax-sec-act .btn:disabled { cursor: default; }
.ax-runmsg { margin: 6px 0 4px; min-height: 1.2em; }
.ax-runmsg:empty { display: none; }

/* a candidate site that was scored but not chosen, on the map's key */
.ax-candpin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #b8c2c9; border: 1.5px solid #5c6f7c; }
.ax-candpin.inl { vertical-align: middle; margin-right: 5px; }
.ax-cand-tbl tr.on-chosen td { background: #eef7f0; }

/* candidates placed by hand on the working map */
.ax-candpin.placed { background: #8ab4e8; border-color: #1d5fa8; }
.ax-cand-placing { cursor: crosshair !important; }
.ax-candlist { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; max-height: 160px; overflow: auto; }
.ax-candrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.ax-candrow input { width: 150px; padding: 3px 6px; font-size: 12px; }
.ax-cand-tbl th.ax-bandcol, .ax-cand-tbl td.ax-bandcol { white-space: nowrap; }

/* the verdict on a candidate site */
.ax-verdict { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ax-verdict.strong { background: #dff3e4; color: #1e7b45; }
.ax-verdict.good { background: #e7f0fa; color: #1d5fa8; }
.ax-verdict.marginal { background: #fff3d6; color: #8a5a00; }
.ax-verdict.shorter { background: #eeeaf7; color: #5b3f9e; }
.ax-verdict.none { background: #f1f3f5; color: #5c6f7c; }
.ax-cand-tbl td.ax-verdict-cell { min-width: 260px; max-width: 420px; white-space: normal; font-size: 11.5px; }

/* ---- a row of boxes with its button ---------------------------------------
   The boxes' labels carried the section's 10 px bottom margin, so with the row
   aligned on its bottom edge every select sat 10 px above the button. The
   labels lose that margin here, the hint under a box is taken out of the flow
   so a box with a hint stays level with one without, and the row makes room
   for the hints underneath. */
.ax-zdctl-inline > .form-row, .ax-zdcard > .form-row { align-items: flex-end; }
.ax-zdctl-inline > .form-row > .fld, .ax-zdcard > .form-row > .fld { margin: 0; position: relative; }
.ax-zdctl-inline > .form-row > .fld > small, .ax-zdcard > .form-row > .fld > small {
  position: absolute; left: 0; top: 100%; margin-top: 3px; white-space: nowrap; font-size: 11px; line-height: 1.3; color: var(--muted); font-weight: 400; }
.ax-zdctl-inline > .form-row:has(> .fld > small), .ax-zdcard > .form-row:has(> .fld > small) { padding-bottom: 18px; }
.ax-zdctl-inline > .form-row > .btn, .ax-zdcard > .form-row > .btn { margin: 0; align-self: flex-end; }
.ax-zdctl-inline > .form-row > .ne, .ax-zdcard > .form-row > .ne { align-self: center; }

/* ---- every card scrolls -----------------------------------------------------
   A card clips at its edge (.dash-w is overflow: hidden, for its rounded
   corners); its body was clipped with it, so a long answer simply ended
   mid-table. The body scrolls now, on every card, and a scroll inside a card
   stays inside it rather than moving the page. A table inside an answer keeps
   no ceiling of its own on a card — the card is the thing that scrolls. */
.dash-wb { overflow: auto; overscroll-behavior: contain; }
.dash-w.is-group > .dash-wb { overflow: visible; }
.dash-wb .ax-how .tbl-wrap, .dash-wb .ax-popcheck .tbl-wrap { max-height: none !important; overflow: visible; }

/* "One under another", on a card whose boxes are laid out in a grid */
.ax-grp.ctl-stack .ax-fields { grid-template-columns: 1fr; }

/* ---- the scenarios an analysis holds -------------------------------------- */
.ax-scens { margin-bottom: 12px; }
.ax-scenlist { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.ax-scenrow { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; }
.ax-scenrow.on { border-color: var(--brand); background: var(--bg-soft); }
.ax-scenrow .ax-scen-n { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ax-scenrow .ax-scen-n b { font-size: 12.5px; }
.ax-scenrow .ax-scen-n span { font-size: 11.5px; }
.ax-scenpick .fld { font-size: 12.5px; }

/* ---- the ⓘ beside a field, and the one tooltip they share ------------------ */
.fi { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px;
  border: 1px solid var(--muted); border-radius: 50%; background: #fff; color: var(--muted);
  font: 700 9.5px/1 Georgia, "Times New Roman", serif; font-style: normal; cursor: help;
  vertical-align: super; margin-left: 4px; flex: 0 0 auto; user-select: none; }
.fi:hover, .fi:focus { border-color: var(--brand); color: var(--brand); background: var(--bg-soft); outline: none; }
.ax-sec-b .chk .fi { vertical-align: middle; }
.fi-tip { position: fixed; left: 0; top: 0; z-index: 100000; display: none; max-width: 300px;
  padding: 7px 10px; border-radius: 6px; background: #26333d; color: #fff;
  font-size: 11.5px; line-height: 1.45; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); pointer-events: none; }

/* two columns of ticks in one group, so a box is not left half empty */
.ax-ticks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 22px; align-items: start; }
.ax-ticks > div { min-width: 0; }
.ax-subh { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }

/* a result opened under the run it belongs to, inside the list of runs */
.ax-runs > .ax-drawer { border-left: 3px solid var(--brand); border-radius: 0 0 7px 7px;
  margin: -2px 0 6px; padding: 2px 0 0 10px; }

/* help chat: the nearest topics when it is not sure */
.ha-near { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.ha-near .ha-chip { text-align: left; }

/* phones: the top bar wraps instead of pushing the page sideways, and the tab
   strip scrolls within itself */
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 10px; }
  .topbar .crumb { flex-basis: 100%; order: 1; font-size: 12px; }
  .topbar .spacer { display: none; }
  .topbar .user-chip { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the tab strip's sideways scroll is in the tablet block below (max-width: 1100px) */
  /* the pane's height follows the measured header (--shell-top); nothing to guess here any more */
  body { overflow-x: hidden; }
}
/* tablets and phones: fifteen tabs do not fit in 1100 px; below that the strip scrolls sideways within itself
   instead of wrapping each label onto two lines and pushing the page wider than the screen */
@media (max-width: 1100px) {
  .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
  /* a shadow on the side with more tabs beyond it (the "local" layers cover it once the end is reached) */
  .tabs { background:
      linear-gradient(to right, var(--ribbon) 40%, transparent) left / 36px 100% no-repeat local,
      linear-gradient(to left, var(--ribbon) 40%, transparent) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.35), transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.35), transparent) right / 12px 100% no-repeat scroll,
      var(--ribbon); }
  .tab { white-space: nowrap; padding: 8px 10px; flex: none; }
}
/* phones and tablets held upright: the map's side panels stack above and below it instead of squeezing it to a
   strip between them (a 768 px tablet left the map 430 px wide beside an empty feature panel) */
@media (max-width: 900px) {
  #map-row { flex-direction: column; overflow-y: auto; }
  #map-row > .side-l, #map-row > .side-r { width: 100% !important; max-height: 30vh; border: 0; border-bottom: 1px solid var(--line); }
  #map-row > .splitter { display: none; }
  #map-row > #map { min-height: 55vh; }
}

/* Share bar card: a headline share over one 100 % bar of ordered answers */
.dscale { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 0; padding: 2px 4px 4px; container-type: inline-size; }
.dscale .sb-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dscale .sb-n { font-size: clamp(26px, 15cqw, 46px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.dscale .sb-w { font-size: 13px; font-weight: 600; color: #26323a; }
.dscale .sb-s { font-size: 11.5px; color: #6b7c86; margin-top: 4px; }
.dscale .sb-bar { display: flex; gap: 1px; height: 20px; border-radius: 6px; overflow: hidden; margin: 12px 0 9px; flex: none; }
.dscale .sb-bar i { display: block; min-width: 3px; height: 100%; }
.dscale .sb-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 3px 14px; font-size: 11.5px; color: #4a5a64; overflow: auto; min-height: 0; }
.dscale .sb-key span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dscale .sb-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dscale .sb-key em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dscale .sb-key b { margin-left: auto; font-weight: 600; color: #26323a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dscale.clk .sb-bar i, .dscale.clk .sb-key span { cursor: pointer; }
.dscale.clk .sb-bar i:hover { filter: brightness(1.08); }
.dscale.clk .sb-key span:hover em { text-decoration: underline; }

/* 100 squares card: twenty across, five down; a wide card gets twenty-five by four */
.dwaffle .wf-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; width: 100%; max-width: 460px; margin: 4px 0 10px; flex: none; }
.dwaffle .wf-grid i { display: block; aspect-ratio: 1; border-radius: 2px; }
@container (min-width: 560px) { .dwaffle .wf-grid { grid-template-columns: repeat(25, 1fr); max-width: 600px; } }
.dwaffle .sb-head { margin-bottom: 8px; }
.dwaffle .sb-s { margin-top: 8px; }
.dwaffle.clk .wf-grid i { cursor: pointer; }
.dwaffle.clk .wf-grid i:hover { filter: brightness(1.1); }

/* SVG cards (dot strip, dumbbell, slope, beeswarm, cartogram, bivariate map) */
.gx-wrap { width: 100%; height: 100%; min-height: 0; }
.gx-wrap svg { max-width: none; }
.gx-wrap [data-gk] { transition: opacity .12s; }
.gx-wrap [data-gk]:hover { opacity: .75; }

/* one chip per selection in the dashboard's banner */
.dash-xfilter .xf-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 6px 0 2px; padding: 1px 4px 1px 8px; border: 1px solid #cfdbe3; border-radius: 999px; background: #fff; white-space: nowrap; }
.dash-xfilter .xf-chip a { color: #6b7c86; text-decoration: none; padding: 0 4px; border-radius: 50%; font-size: 11px; }
.dash-xfilter .xf-chip a:hover { background: #eef2f5; color: #b3392f; }

/* the Share bar family takes the card's text colour and size from the Builder's typography */
.dscale .sb-w, .dscale .sb-key em, .dscale .sb-key b { color: var(--sb-ink, #26323a); }
.dscale .sb-w { font-size: calc(13px * var(--sb-k, 1)); } .dscale .sb-s { font-size: calc(11.5px * var(--sb-k, 1)); } .dscale .sb-key { font-size: calc(11.5px * var(--sb-k, 1)); }

/* Database studio: the object tree */
.dbs-tree { width: 290px; }
.dbt-db { font-size: 12px; padding: 2px 2px 6px; border-bottom: 1px solid #e3e8ec; margin-bottom: 4px; }
.dbt-f, .dbt-l { display: flex; align-items: center; gap: 5px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 5px; padding: 2px 4px; cursor: pointer; font: inherit; font-size: 12px; color: #26323a; }
.dbt-f:hover, .dbt-l:hover { background: #f3f6f8; } .dbt-l.on { background: #e9f1f6; border-color: #cfe0ea; } .dbt-l.ro { cursor: default; }
.dbt-c { width: 11px; color: #8a97a1; font-size: 10px; flex: none; } .dbt-i { width: 15px; text-align: center; flex: none; font-size: 11px; color: #5b7f9f; }
.dbt-n { font-family: Consolas, monospace; font-size: 11.5px; color: var(--brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.dbt-m { font-size: 10px; color: var(--muted); flex: none; } .dbt-ch { margin-left: 13px; border-left: 1px dotted #d5dde3; padding-left: 3px; }
.dbt-s { margin-bottom: 2px; } .dbt-s.sys > .dbt-f b { color: #8a97a1; font-weight: 600; } .dbt-sys { display: flex; gap: 5px; align-items: center; font-size: 11px; margin-top: 8px; color: #56696f; }
/* Database studio: the query window */
.sqw-warn { font-size: 11.5px; background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 8px; padding: 6px 10px; color: #6b4e00; margin-bottom: 8px; }
.sqw-tabs { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #dfe6ea; }
.sqw-tab { font-size: 12px; padding: 4px 6px 4px 10px; border: 1px solid #dfe6ea; border-bottom: none; border-radius: 7px 7px 0 0; background: #f3f6f8; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.sqw-tab.on { background: #fff; font-weight: 600; position: relative; top: 1px; } .sqw-tab a { color: #8a97a1; text-decoration: none; font-size: 10px; } .sqw-tab a:hover { color: #b3392f; }
.sqw-ed { position: relative; } .sqw-ed .sql-editor { min-height: 190px; resize: vertical; tab-size: 2; white-space: pre; }
.sqw-ac { position: absolute; z-index: 40; width: 330px; max-height: 250px; overflow: auto; background: #fff; border: 1px solid #cfd8df; border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.16); font-size: 12px; }
.sqw-aci { display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; cursor: pointer; font-family: Consolas, monospace; } .sqw-aci .ne { font-family: inherit; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqw-aci.on, .sqw-aci:hover { background: #e9f1f6; }
.sqw-res { margin-bottom: 12px; } .sqw-rh { display: flex; gap: 10px; align-items: center; font-size: 12px; margin-bottom: 4px; }

/* Database studio: SQL under a table's rows */
.sqd { margin-top: 10px; border-top: 1px solid #dfe6ea; padding-top: 6px; } .sqd-h { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.sqd .sql-editor { white-space: pre; tab-size: 2; resize: vertical; }

/* Coverage estimates tab */
.ce-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 8px 0 14px; }
.ce-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .ce-split { grid-template-columns: 1fr; } }
.ce-map { height: 440px; border: 1px solid var(--line); border-radius: 8px; background: #f4f6f8; }
.ce-legend { font-size: 12px; color: var(--muted); margin-top: 6px; }
.ce-rampbar { display: inline-block; width: 120px; height: 9px; border-radius: 5px; vertical-align: middle; margin-right: 6px; }
.ce-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 5px 0 2px; vertical-align: baseline; }
.ce-rng { position: relative; display: inline-block; width: 90px; height: 10px; vertical-align: middle; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.ce-rng i { position: absolute; top: 3px; height: 4px; border-radius: 2px; background: #9db4c4; }
.ce-rng b { position: absolute; top: 1px; width: 3px; height: 8px; margin-left: -1px; border-radius: 1px; background: var(--brand); }
.ce-warn, .ce-ok { margin: 10px 0; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
.ce-warn { background: #fff6e5; border: 1px solid #f0d49a; color: #6a4a00; }
.ce-ok { background: #ecf7f1; border: 1px solid #b9dfcb; color: #14513a; }
.ce-cov { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 18px; }
.ce-cov .chk { margin-bottom: 5px; }
.ce-r { margin-left: auto; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.ce-r i { display: inline-block; height: 6px; border-radius: 3px; width: calc(4px + 56px * var(--r)); background: var(--c); }
.ce-models .chk { align-items: flex-start; }
.ce-soft td b { color: var(--muted); font-weight: 600; }

.ce-cfg input, .ce-cfg select { width: 100%; min-width: 90px; padding: 4px 6px; font-size: 12.5px; }
.ce-cfg input[type=checkbox] { width: auto; min-width: 0; }
.ce-cov .chk .ce-covact { display: inline-flex; gap: 2px; margin-left: 6px; opacity: .35; }
.ce-cov .chk:hover .ce-covact { opacity: 1; }
tr.ce-on td { background: #eef6f2; font-weight: 600; }

/* the one area picker (levelPicker) of Accessibility, Supply chain and Small-area estimates */
.lp-cols { grid-template-columns: repeat(var(--lp-cols, 2), minmax(0, 1fr)); }
.lp-sub { padding: 4px 10px; font-size: 11px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.lp-solo { max-width: 760px; }
.ax-aoi-grid.lp-grid { grid-template-columns: minmax(320px, calc(215px * var(--lp-cols, 2))) minmax(280px, 1fr); }
.lp-grid .lp-cols { margin-top: 0; gap: 8px; }
.lp-grid .ax-col-b { max-height: 330px; }
.lp-map { min-height: 410px; border: 1px solid var(--line); border-radius: 8px; background: #f4f6f8; }
@media (max-width: 1100px) { .ax-aoi-grid.lp-grid { grid-template-columns: 1fr; } }
.ce-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0 4px; border-top: 1px dashed var(--line); }
.ce-step:first-child { border-top: 0; padding-top: 2px; }
.ce-step > i { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.ce-step h4 { margin: 2px 0 8px !important; }
.ce-chain { align-self: center; font-size: 12px; }
.ce-chain b { font-weight: 600; color: var(--ink); }

.lp-map { position: relative; }
.lp-busy { position: absolute; z-index: 900; left: 50%; top: 12px; transform: translateX(-50%); padding: 4px 12px; border-radius: 12px; background: rgba(255,255,255,.92); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }

.lp-switch { display: flex; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.lp-switch button { border: 0; background: #fff; padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--ink); border-right: 1px solid var(--line); }
.lp-switch button:last-child { border-right: 0; }
.lp-switch button.on { background: var(--brand); color: #fff; }

/* Small-area estimates · Data & covariates: a chip per source, its covariates at the left, the map at the right */
.ce-src-grid { grid-template-columns: minmax(340px, 44%) minmax(0, 1fr); margin-top: 8px; }
.ce-srclist { border: 1px solid var(--line); border-radius: 8px; max-height: 300px; overflow: auto; background: #fff; }
.ce-srcrow { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 10px; border-bottom: 1px solid var(--line); }
.ce-srcrow:last-child { border-bottom: 0; }
.ce-srcrow.on { background: #eef6fb; }
.ce-srcrow .chk { flex: 1; margin: 0 !important; min-width: 0; }
.ce-srcrow .ce-r { margin-left: 0; }
.ce-srcact { display: inline-flex; gap: 2px; opacity: .45; }
.ce-srcrow:hover .ce-srcact, .ce-srcrow.on .ce-srcact { opacity: 1; }
.ax-chip2 button i { font-style: normal; font-size: 11px; opacity: .75; margin-left: 4px; }
@media (max-width: 1100px) { .ce-src-grid { grid-template-columns: 1fr; } }

.ce-srcnew { opacity: .62; }
.ce-srcnew:hover { opacity: 1; }
.ce-srcnew .ne { font-size: 11px; font-variant-numeric: tabular-nums; }

.ce-pickrow { align-items: flex-end; }
.ce-data th { cursor: pointer; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.ce-data td { white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.ce-rowout td { color: var(--muted); }
tr.ce-rowout td b { font-weight: 400; text-decoration: line-through; }
.ce-src-grid > div:first-child { min-width: 0; }

.ce-vals { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.ce-vals .chk { margin: 0 !important; }

.ce-multi { display: block; position: relative; margin-top: 4px; }
.ce-multi > summary { list-style: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 28px 8px 10px; background: #fff; cursor: pointer; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.ce-multi > summary::-webkit-details-marker { display: none; }
.ce-multi > summary::after { content: "▾"; position: absolute; right: 10px; top: 7px; color: var(--muted); }
.ce-multi .ax-refmenu { max-height: 320px; overflow: auto; min-width: 100%; width: max-content; max-width: 520px; }
.ce-multi .ax-refmenu label { display: flex; align-items: center; gap: 8px; }
.ce-multi .ax-refmenu label > span:first-of-type { flex: 1; min-width: 0; }

.ce-multiopts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 12px; }
.ce-multiopts select { max-width: 220px; padding: 2px 4px; font-size: 12px; }
.ce-multi .ax-refmenu input[type=number], .ce-multi .ax-refmenu input:not([type]) { padding: 2px 6px; font-size: 12px; }

.ce-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); flex: 0 0 auto; }

/* a row of pickers never grows past its column: each picker may shrink, and its text is cut with an ellipsis */
.ce-pickrow { flex-wrap: nowrap !important; min-width: 0; }
.ce-pickrow > .fld { min-width: 0 !important; overflow: visible; }
.ce-pickrow > .fld > select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
.ce-multi { min-width: 0; max-width: 100%; }
.ce-multi > summary { display: block; max-width: 100%; box-sizing: border-box; }
.ce-multi > summary > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-multi .ax-refmenu { right: auto; left: 0; }
.ce-src-grid > div { min-width: 0; }
@media (max-width: 760px) { .ce-pickrow { flex-wrap: wrap !important; } }

.ce-lvsw { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 2px 0 12px; }
.ce-lvsw > button { border: 1px solid var(--line); background: #fff; padding: 6px 14px; font-size: 12.5px; cursor: pointer; color: var(--ink); margin-right: -1px; }
.ce-lvsw > button:first-child { border-radius: 8px 0 0 8px; }
.ce-lvsw > button:last-of-type { border-radius: 0 8px 8px 0; margin-right: 10px; }
.ce-lvsw > button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; position: relative; }
.ce-lvsw > button.bad { color: var(--muted); }
.ce-cells { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.ce-cells .chk { margin: 0 !important; }
/* small-area estimates: the covariates ranked by the check, a level that could not be run, headers a keyboard can sort by */
.ce-ranked { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 3px 16px; margin-top: 8px; font-size: 12px; }
.ce-ranked > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-lvsw > button:disabled { cursor: not-allowed; background: #f6f7f8; }
.ce-data th[data-ctsort]:focus-visible, .ce-tbl th[data-cesort]:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ce-viewlv { margin: 8px 0 10px; }
.ce-viewlv > span:first-child + button { border-radius: 8px 0 0 8px; }
.ce-viewlv > button { padding: 4px 12px; }
/* accessibility: the status bar of a run */
.ax-prog { margin: 6px 0 10px; }
.ax-prog-bar { height: 10px; border-radius: 6px; background: #e6ebef; overflow: hidden; }
.ax-prog-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand), #2f9e6e); transition: width .9s linear; }
.ax-prog-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.ax-prog-row b { color: var(--ink); }
.ax-prog-quiet { color: #b26a00; margin: 5px 0 0; font-size: 12.5px; }
.ax-prog-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; }
.ax-prog-steps > span { padding: 2px 9px; border-radius: 10px; background: #f0f3f5; color: var(--muted); }
.ax-prog-steps > span.on { background: var(--brand); color: #fff; font-weight: 600; }
.ax-prog-steps > span.done { background: #e3f3ea; color: #1b6b47; }
.ax-prog-cancel { margin-left: auto; }
.ax-prog-steps { align-items: center; }
/* a question's map: the answer of the same row, named on the map */
.gfa-tip { background: #d6249f; color: #fff; border: 0; font-size: 11.5px; padding: 2px 7px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.gfa-tip::before { border-top-color: #d6249f !important; }
/* layer list: a survey's heading inside 'From the forms' */
.ax-refh2 { font-size: 11px; font-weight: 600; color: var(--muted); padding: 5px 7px 2px 14px; letter-spacing: .02em; }
.ax-refh2.mine { color: var(--brand); }
/* an area question's map on the form: a working map, not a stamp */
.geo-mini.mid { max-width: 100%; height: 280px; cursor: grab; }
@media (max-width: 700px) { .geo-mini.mid { height: 230px; } }

/* "only in the area of the facility being filled" in a question map's layer filter */
.ax-farea { display: flex; gap: 6px; align-items: baseline; margin: 4px 0 6px; font-size: 12.5px; }
.ax-farea input { width: auto; }

/* ✅ Your next steps (My Microplan) */
.mp-check { margin: 10px 0 4px; border: 1px solid #d6e4dc; background: #f5faf7; border-radius: 10px; padding: 8px 12px; }
.mp-check-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mp-check ul { list-style: none; margin: 6px 0 2px; padding: 0; }
.mp-check li { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 13px; }
.mp-check .ck-ic { flex: 0 0 18px; text-align: center; }
.mp-check .ck-go { border: 0; background: none; padding: 0; text-align: left; color: var(--brand); cursor: pointer; font: inherit; }
.mp-check .ck-go:hover { text-decoration: underline; }
.mp-check li.ck-done { color: #5f6f78; }
.mp-check li.ck-todo { font-weight: 600; }
.mp-check .ck-more { border: 0; background: none; padding: 0; font-size: 11px; color: #5f6f78; cursor: pointer; text-decoration: underline; }
.wn-rel ul { margin: 4px 0 12px 18px; padding: 0; }
.wn-rel li { margin: 3px 0; }
/* the printable manual picker in ❓ Help */
.man-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; padding: 8px 10px; background: var(--panel2, rgba(0,0,0,.03)); border-radius: 8px; }
.man-pick .hint { flex-basis: 100%; margin: 0; }
/* ⓘ help icons beside the harder controls */
.hi-btn { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin: 0 0 0 6px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--accent, #0b7285); font: 600 11px/1 Georgia, serif; font-style: italic; cursor: help; vertical-align: middle; opacity: .75; flex: none; }
.hi-btn:hover, .hi-btn:focus-visible { opacity: 1; background: var(--accent, #0b7285); color: #fff; }

/* teaching the help from the missed questions (Admin ▸ Security) */
.hm-card { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line, #d5dde3); border-radius: 8px; background: var(--panel2, rgba(0,0,0,.02)); }
.hm-card textarea, .hm-card input:not([type=radio]), .hm-card select { box-sizing: border-box; }
.hm-hit { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dotted var(--line, #d5dde3); cursor: pointer; }

/* short screen recordings under help answers */
.ha-media { margin-top: 6px; }
.ha-watch.on { background: var(--accent, #0b7285); color: #fff; }
.ha-gif { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line, #d5dde3); border-radius: 6px; cursor: zoom-in; }
.ha-gifbig { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.78); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.ha-gifbig img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }

/* 🎓 the practice area: an unmistakable bar, and a tinted frame round the page */
.practice-bar { position: sticky; top: 0; z-index: 3000; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 6px 16px; background: #e8590c; color: #fff; font-weight: 600; font-size: 13px; text-align: center; }
.practice-bar .btn { background: #fff; color: #b8430a; border: 0; }
body.in-practice { box-shadow: inset 0 0 0 4px #e8590c; }

/* the 💬 panel, bigger on request: wide, full screen, or dragged by its top-left corner */
.ha-panel.ha-wide { width: min(760px, calc(100vw - 24px)); height: min(820px, calc(100vh - 90px)); }
.ha-panel.ha-full { left: 12px; top: 12px; right: 12px; bottom: 12px; width: auto; height: auto; z-index: 3100; }
.ha-panel .ha-grip { position: absolute; left: 0; top: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 2;
  background: linear-gradient(135deg, rgba(0,0,0,.28) 0 2px, transparent 2px 5px, rgba(0,0,0,.28) 5px 7px, transparent 7px); border-top-left-radius: 14px; }
.ha-panel.ha-full .ha-grip { display: none; }
.ha-panel.ha-dragging { user-select: none; transition: none; }
.ha-panel.ha-wide .ha-gif, .ha-panel.ha-full .ha-gif { max-width: 900px; }
@media (max-width: 600px) { .ha-panel.ha-wide { width: calc(100vw - 16px); right: 8px; } }

.ha-gifx { position: absolute; top: 14px; right: 18px; background: #fff; color: #222; border: 0; border-radius: 50%; width: 34px; height: 34px; font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* small-area estimates: a unit the data cannot place */
.ce-tbl tr.ce-noinfo td { color: #8a959d; }

/* The Layers tab's table-and-map panel, carried into the list under the layer it
   belongs to. It is a table row, so it has to look like a fold-out and not like
   another layer: inset, tinted, with a line joining it to the row above. */
tr.lyr-detail-row > td { padding: 0 0 8px 0; background: var(--panel-2, #f4f7f9); border-top: 0; }
/* The layers table is far wider than the window and scrolls sideways; a cell
   spanning it would put the panel 2,800 px wide, mostly off screen. Sticky to
   the left edge of that scroller keeps the whole panel where it can be read,
   whichever column the list is scrolled to. */
tr.lyr-detail-row #lyr-detail { position: sticky; left: 0; box-sizing: border-box;
  width: min(100%, calc(100vw - 80px)); margin: 0 8px 0 18px;
  border-left: 3px solid var(--accent, #2f6f9f); padding-left: 10px; }
tr.lyr-detail-row #lyr-detail:empty { display: none; }

/* The map inside the fold-out row: its usual 5 % side margins resolve against
   the table cell, which sent it off to one side and made fitBounds aim at the
   wrong box. Inside the list it simply fills the row. */
tr.lyr-detail-row [id^="tbl-map"] { width: auto; margin-left: 0; margin-right: 0; }
tr.lyr-detail-row [id^="tbl-map"].big { height: 460px; }
tr.lyr-detail-row .tbl-wrap, tr.lyr-detail-row table.attr { max-width: 100%; }

/* The Layers tab's section tables share one column plan, so Core and Uploaded
   line up and neither is dragged wide by its longest layer name or button row. */
table.lyr-tbl { table-layout: fixed; width: 100%; }
table.lyr-tbl col.c-name { width: 24%; } table.lyr-tbl col.c-src { width: 8%; }
table.lyr-tbl col.c-geom { width: 9%; }  table.lyr-tbl col.c-n { width: 7%; }
table.lyr-tbl col.c-clr { width: 6%; }   table.lyr-tbl col.c-sym { width: 20%; }
table.lyr-tbl col.c-edit { width: 6%; }  table.lyr-tbl col.c-act { width: 20%; }
table.lyr-tbl td, table.lyr-tbl th { overflow-wrap: anywhere; }
table.lyr-tbl td .btn { white-space: nowrap; }

/* A layer is one line: the row buttons carry an icon and keep their words in the
   tooltip, so Symbol / line and Actions no longer wrap onto three lines. */
table.lyr-tbl td .btn { padding: 2px 7px; margin: 1px; font-size: 13px; line-height: 1.5; }
table.lyr-tbl td.lyr-acts, table.lyr-tbl td:nth-child(6) { white-space: nowrap; }
table.lyr-tbl col.c-name { width: 28%; }
table.lyr-tbl col.c-sym  { width: 15%; }
table.lyr-tbl col.c-act  { width: 21%; }

/* ---- Layers tab rows -------------------------------------------------------
   The controls were boxed buttons three deep in two columns; a list of thirty
   layers read as a wall. Now each control is a 16 px line icon that only shows
   a box under the pointer, the ones that are switched on carry the brand
   colour, and a hairline separates what changes a layer from what removes it. */
.licon-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0; margin: 0 1px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; color: var(--muted); vertical-align: middle; }
.licon-btn:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
.licon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.licon-btn.on { color: var(--brand); background: #e8f0f6; border-color: #cfe0ec; }
.licon-btn.danger:hover:not(:disabled) { color: var(--danger); background: #fbeceb; border-color: #f0cdc9; }
.licon-btn:disabled { opacity: .35; cursor: default; }
.licon-btn .li { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; }
.licon-btn.icon-pick { width: auto; padding: 0 5px; gap: 2px; }
.licon-sep { display: inline-block; width: 1px; height: 16px; margin: 0 5px; vertical-align: middle;
  background: var(--line); }

table.lyr-tbl td { padding: 6px 8px; vertical-align: middle; }
table.lyr-tbl tbody tr.lyr-row:hover > td, table.lyr-tbl tr.lyr-row:hover > td { background: #f7fafc; }
table.lyr-tbl .lyr-nm { display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
table.lyr-tbl .lyr-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
table.lyr-tbl .lyr-kind { display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
table.lyr-tbl td .ne { color: var(--muted); }
table.lyr-tbl input[type="color"] { width: 34px; height: 22px; padding: 0; border: 1px solid var(--line);
  border-radius: 5px; background: none; }

/* The layer's own cell stays on one line: the name gives way with an ellipsis
   (the full one is in its tooltip) so the CORE chip and the author keep their
   place instead of being pushed onto a second line. */
table.lyr-tbl td:first-child { white-space: nowrap; }
table.lyr-tbl td:first-child .lyr-nm { max-width: calc(100% - 96px); }
table.lyr-tbl td:first-child .chip { white-space: nowrap; }
table.lyr-tbl .lyr-grip { color: var(--line); cursor: grab; margin-right: 2px; }
table.lyr-tbl .lyr-grip:hover { color: var(--muted); }
table.lyr-tbl thead th, table.lyr-tbl tr:first-child th { position: sticky; top: 0; z-index: 2;
  background: #fff; box-shadow: inset 0 -1px 0 var(--line); }

/* Headings stay on their own line, and on a narrower screen the two columns a
   planner rarely reads (where it came from, what shape it is) give their room
   to the layer's name and its controls. */
table.lyr-tbl th { white-space: nowrap; }
/* Hiding a column while its <col> still claims width made the figures wrap one
   digit per line; on a narrow screen the columns are re-shared instead. */
table.lyr-tbl .lyr-num, table.lyr-tbl .lyr-kind, table.lyr-tbl td.ne { white-space: nowrap; }
@media (max-width: 1250px) {
  table.lyr-tbl col.c-name { width: 30%; } table.lyr-tbl col.c-src  { width: 9%; }
  table.lyr-tbl col.c-geom { width: 9%; }  table.lyr-tbl col.c-n    { width: 9%; }
  table.lyr-tbl col.c-clr  { width: 6%; }  table.lyr-tbl col.c-sym  { width: 15%; }
  table.lyr-tbl col.c-edit { width: 6%; }  table.lyr-tbl col.c-act  { width: 16%; }
}

/* Every control keeps the same width, and an action a layer does not have keeps
   an empty place of that width, so each icon sits in a column of its own down
   the whole list - across both sections and whatever a row happens to offer. */
.licon-btn, .licon-gap { width: 30px; }
.licon-gap { display: inline-block; height: 26px; margin: 0 1px; vertical-align: middle; }
.licon-btn.icon-pick, .licon-gap.wide { width: 52px; }
.licon-gap.wide { display: inline-block; }
table.lyr-tbl td.lyr-acts, table.lyr-tbl td:nth-child(6) { text-align: left; font-size: 0; }
table.lyr-tbl td.lyr-acts > *, table.lyr-tbl td:nth-child(6) > * { font-size: 14px; }

/* The fiscal-year picker of the computed layers sits on the row's own line. */
table.lyr-tbl .lyr-fy { display: inline-block; margin-left: 6px; vertical-align: middle; }
table.lyr-tbl .lyr-fy select { height: 24px; padding: 0 4px; font-size: 12px; }

/* ⛶ on the table's map: the whole panel opens over the page, map on top and
   the table scrolling underneath, so both get the room instead of the map
   taking it from the table. */
/* Stronger than the rule that keeps the panel inside its row, and stronger
   than the inline heights the table wrapper carries, or the panel opens over
   the page while the table inside it keeps its 260 px. */
tr.lyr-detail-row #lyr-detail.lyr-max,
body.lyr-max-open #lyr-detail.lyr-max, body.lyr-max-open #dm-detail.lyr-max,
#lyr-detail.lyr-max, #dm-detail.lyr-max {
  position: fixed; inset: 12px; z-index: 900; margin: 0; padding: 10px 14px 12px;
  background: #fff; border: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 18px 60px rgba(20, 40, 60, .28);
  display: flex; flex-direction: column; overflow: hidden; width: auto; max-width: none;
}
#lyr-detail.lyr-max [id^="tbl-map"], #dm-detail.lyr-max [id^="tbl-map"] {
  height: 46vh !important; width: 100% !important; margin: 6px 0 0 !important; flex: 0 0 auto;
}
#lyr-detail.lyr-max .tbl-wrap, #dm-detail.lyr-max .tbl-wrap {
  flex: 1 1 auto; min-height: 0 !important; max-height: none !important; height: auto !important;
  overflow: auto; margin-top: 8px;
}
/* Only the table gives and takes room; the search line, the map and the
   toolbar under it keep their own height (the toolbar was squeezed to 19 px). */
#lyr-detail.lyr-max > *, #dm-detail.lyr-max > * { flex: 0 0 auto; }
#lyr-detail.lyr-max .tbl-footer, #dm-detail.lyr-max .tbl-footer { padding-top: 6px; }
#lyr-detail.lyr-max .lyr-det-x, #dm-detail.lyr-max .lyr-det-x {
  position: sticky; top: 0; background: #fff; z-index: 2; padding-bottom: 6px;
}
body.lyr-max-open { overflow: hidden; }

/* The fold-out's own title bar: inline it is a small ✕ in the corner (the row
   above already names the layer), and only the page-wide view shows the name. */
tr.lyr-detail-row #lyr-detail { position: sticky; }
tr.lyr-detail-row #lyr-detail .lyr-det-x { position: absolute; top: 2px; right: 6px; z-index: 6;
  padding: 0; margin: 0; background: transparent; border: 0; }
tr.lyr-detail-row #lyr-detail .lyr-det-x .lyr-det-nm,
tr.lyr-detail-row #lyr-detail .lyr-det-x .lyr-det-word { display: none; }
tr.lyr-detail-row #lyr-detail .lyr-det-x .btn { width: 26px; height: 24px; padding: 0; line-height: 1;
  border-radius: 6px; color: var(--muted); }
tr.lyr-detail-row #lyr-detail .lyr-det-x .btn:hover { color: var(--danger); background: #fbeceb; }
#lyr-detail.lyr-max .lyr-det-x { position: sticky; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; }
tr.lyr-detail-row #lyr-detail.lyr-max .lyr-det-x .lyr-det-nm,
#lyr-detail.lyr-max .lyr-det-x .lyr-det-nm { display: inline; font-weight: 600; }
tr.lyr-detail-row #lyr-detail.lyr-max .lyr-det-x .lyr-det-word,
#lyr-detail.lyr-max .lyr-det-x .lyr-det-word { display: inline; }
tr.lyr-detail-row #lyr-detail.lyr-max .lyr-det-x .btn { width: auto; padding: 2px 10px; }

/* The panel's own two buttons, outside the map: expand the table WITH its map,
   and close. The map keeps its own ⛶ for the map alone. */
.lyr-det-btns { display: inline-flex; gap: 4px; align-items: center; }
tr.lyr-detail-row #lyr-detail .lyr-det-x .lyr-det-btns { background: rgba(255,255,255,.92);
  border: 1px solid var(--line); border-radius: 7px; padding: 1px; box-shadow: 0 1px 3px rgba(20,40,60,.12); }
tr.lyr-detail-row #lyr-detail .lyr-det-x .btn[data-detmax] { width: 26px; height: 24px; padding: 0; }

/* In the table's toolbar the two panel buttons are ordinary buttons with their
   words, and they keep to the left of the table's own tools. */
.lyr-det-btns.in-footer { margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--line); }
.lyr-det-btns.in-footer .btn { width: auto; height: auto; padding: 3px 9px; }
.lyr-det-btns.in-footer .lyr-det-word { display: inline !important; }
tr.lyr-detail-row #lyr-detail .lyr-det-x:empty, #lyr-detail .lyr-det-x:empty { display: none; }

/* The table's toolbar wraps onto a second line rather than scrolling sideways:
   a button out of sight is a button nobody finds. */
.tbl-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; overflow-x: visible; }
.tbl-footer .spacer { flex: 1 1 auto; min-width: 0; }
.tbl-footer .btn { white-space: nowrap; }
.lyr-det-btns.in-footer .btn { padding: 3px 8px; }

/* Data sources: the "read everything" run. A bar per table, because the API
   says how many pages it has - a spinner would only say "something is
   happening" for the twenty minutes a full read of three tables takes. */
.ds-runbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.ds-prog { flex: 1 1 100%; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; padding: 8px 10px; }
.ds-prog-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.ds-prog-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(90px, 2fr) minmax(180px, 2.4fr);
  gap: 10px; align-items: center; padding: 3px 0; }
.ds-prog-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.ds-prog-n { font-size: 12px; font-variant-numeric: tabular-nums; }
.ds-bar { display: block; height: 8px; border-radius: 5px; background: #e6edf2; overflow: hidden; }
.ds-bar i { display: block; height: 100%; background: var(--brand); transition: width .4s ease; }
.ds-prog-row.ds-done .ds-bar i { background: var(--ok); }
.ds-prog-row.ds-failed .ds-bar i { background: var(--danger); }
.ds-prog-row.ds-waiting { opacity: .6; }
.ds-prog-row.ds-reading .ds-bar i { background-image: linear-gradient(90deg, rgba(255,255,255,.35) 25%, transparent 25%,
  transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%);
  background-size: 18px 18px; animation: ds-stripe 1s linear infinite; }
@keyframes ds-stripe { to { background-position: 18px 0; } }

.ds-resume-note { font-size: 12px; color: #8a5a00; background: #fff6e5; border: 1px solid #f0dcb4;
  border-radius: 999px; padding: 1px 9px; }
.ds-stopped { color: #8a5a00; }
.ds-runbar select { height: 26px; }

/* Signing in is one line: six short fields sharing the width, each able to
   shrink, rather than a grid that dropped Scope onto a row of its own and let
   a long label run under its neighbour. */
.ds-auth { display: flex; gap: 10px; align-items: flex-end; flex-wrap: nowrap; }
.ds-auth > label { flex: 1 1 0; min-width: 0; font-size: 13px; }
.ds-auth > label input, .ds-auth > label select { width: 100%; min-width: 0; }
.ds-auth > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1150px) { .ds-auth { flex-wrap: wrap; } .ds-auth > label { flex: 1 1 220px; } }

/* One area level per row: key, name, the record's field, the boundary's property,
   and the second pair for a level that needs two (a ward inside its municipality). */
.ds-arow { display: grid; grid-template-columns: .7fr 1fr 1.2fr 1.2fr 1fr 1fr auto; gap: 6px; margin-bottom: 4px; }
.ds-arow input { min-width: 0; }
@media (max-width: 1150px) { .ds-arow { grid-template-columns: 1fr 1fr 1fr; } }

/* A platform reads down the page: what it is, its tables, what its fields mean.
   A table's own settings and its buttons are one block, not a settings list in
   one place and a row of buttons in another. */
.ds-step { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-weight: 600;
  border-top: 1px solid var(--line); padding-top: 10px; }
.ds-step:first-of-type { border-top: 0; padding-top: 0; }
.ds-step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; }
.ds-tbl-block { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  background: #fbfcfd; }
.ds-tbl-top { display: grid; grid-template-columns: .8fr 1.4fr 2fr auto; gap: 6px; align-items: center; }
.ds-tbl-acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.ds-tbl-held { font-size: 12px; color: var(--muted); margin-right: auto; }
.ds-tbl-held b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1150px) { .ds-tbl-top { grid-template-columns: 1fr 1fr; } }

/* A table's own field mapping, folded away inside its block: most tables of a
   platform mean the same thing by their fields, and the ones that do not can
   say so without a screen full of boxes for the ones that do. */
.ds-tbl-fields { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.ds-tbl-fields > summary { cursor: pointer; font-size: 13px; }
.ds-tf-body { padding: 8px 0 2px; }

/* What a table answered, under that table. The columns are chips rather than a
   table of their own: eighteen of them in a row of a settings screen reads
   better than eighteen rows, and the ones the source uses are marked. */
.ds-tout { position: relative; margin-top: 6px; padding: 8px 28px 8px 10px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); font-size: 12.5px; }
.ds-tout.bad { border-color: #f0cdc9; background: #fbeceb; color: var(--danger); }
.ds-tout-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; line-height: 1; }
.ds-cols { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ds-col { border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; background: var(--bg-soft); }
.ds-col.used { border-color: #cfe0ec; background: #e8f0f6; }
.ds-col i { font-style: normal; color: var(--brand); }

.btn.ghost.danger { color: var(--danger); }
.btn.ghost.danger:hover { background: #fbeceb; border-color: #f0cdc9; }

/* the question a check stopped at: outlined, with its message under it (QA review, 23 Sep 2026) */
.fld-bad { outline: 2px solid #b3392f; outline-offset: 1px; border-radius: 4px; }
.fld-err { color: #b3392f; font-size: 12px; margin: 3px 0 2px; line-height: 1.35; }

/* Data entry on a phone: the form list sat beside the form and left it 113 px wide (QA review, 23 Sep 2026). Below
   760 px the list goes above the form as a row of cards that scrolls sideways, and the form gets the full width. */
@media (max-width: 760px) {
  .entry-split { flex-direction: column; }
  .entry-forms-side { width: auto !important; max-width: none !important; border-right: none; border-bottom: 1px solid var(--line); }
  #entry-forms { display: flex; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  #entry-forms .fcard { flex: 0 0 72%; width: auto; }
  .entry-split > .entry-body { padding: 12px; }
}

/* A strip that scrolls sideways fades on the side where more is hidden, so a phone user knows there is more:
   six of a municipality's ten tabs sat off-screen with nothing to say so (QA review, 23 Sep 2026). */
.edge-l { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px); mask-image: linear-gradient(to right, transparent 0, #000 28px); }
.edge-r { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px); mask-image: linear-gradient(to left, transparent 0, #000 28px); }
.edge-l.edge-r { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
                 mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
/* phones: a select as wide as its longest option pushed the New user form past the screen edge */
@media (max-width: 700px) {
  /* a select is capped at the screen; a text field keeps its own minimum (its own min-width, or its natural size)
     so the row wraps instead of squeezing the field to two letters (Workflow stage names, webhook URL, 26 Sep 2026) */
  .form-row select { max-width: 100%; min-width: 0 !important; }
  .form-row input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
  .form-row .fld { max-width: 100%; min-width: 0; }
}

/* saved but worth a second look (an implausible ratio): amber, not the red of a refusal */
.fld-warn { outline: 2px solid #c98a12; outline-offset: 1px; border-radius: 4px; }
.fld-warn-note { color: #8a5a00; font-size: 12px; margin: 3px 0 2px; line-height: 1.35; }

/* Admin ▸ API clients */
.apic-form { border: 1px solid #d8e2e8; border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: #f8fbfc; }
.apic-once { border: 2px solid #e0a53a; border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: #fff8ea; }
.apic-val { background: #fff; border: 1px solid #e3d3b0; padding: 3px 6px; border-radius: 4px; word-break: break-all; }
.apic-pre { background: #f2f5f7; border: 1px solid #dde5ea; border-radius: 6px; padding: 8px 10px; font-size: 12px; white-space: pre-wrap; word-break: break-all; margin: 4px 0 8px; }
.dm-tables { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; font-size: 12px; }
.dm-tables code { background: #eef3f7; border-radius: 4px; padding: 1px 6px; }
#apic-box table.attr { width: 100%; }
#apic-box table.attr th, #apic-box table.attr td { padding: 6px 10px; vertical-align: top; }
.fld-new-code { background: #eef8f0 !important; border-color: #6fb07e !important; }
.spa-prerun-note { margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: #fff6e5; border: 1px solid #f0d49b; color: #6b4a00; font-size: 12.5px; }

/* ---- reports are dashboards with pages: the sheet, its bands, the document, the print page ---- */
.dash-doc { display: block; width: 100%; min-width: 0; flex: 1 1 auto; }
.dash-doc > .dash-page + .dash-page { margin-top: 18px; }
.dash-doc > .dash-page { margin-left: auto; margin-right: auto; }
.dash-doc .dash-page { background: #fff; box-shadow: 0 1px 4px rgba(20,40,60,.18); border: 1px solid #dbe2e7; }
.dash-sheet { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; }
/* a held page is sized by its aspect ratio; its sheet is pinned to that box so the 1fr rows have a height to share
   (they collapsed to their content: 16 rows covered 435 of 996 px - QA 30 Sep 2026) */
.dash-page:not(.flow) { position: relative; }
.dash-page:not(.flow) > .dash-sheet { position: absolute; inset: 0; height: auto; }
@media screen and (max-width: 900px) { .dash-page:not(.flow) > .dash-sheet { position: static; } }
.dash-sheet > .dash-grid.paged { flex: 1 1 auto; height: auto; min-height: 0; }
.dash-pband { display: flex; justify-content: space-between; gap: 12px; color: #6b7c86; font-size: max(8px, 1.1cqw); line-height: 1.3; }
.dash-pband.header { border-bottom: 1px solid #e3e9ee; padding-bottom: .5cqw; margin-bottom: 1cqw; }
.dash-pband.footer { border-top: 1px solid #e3e9ee; padding-top: .5cqw; margin-top: 1cqw; }
.dash-pband span:last-child { white-space: nowrap; }
body.print-mode { background: #fff !important; margin: 0; }
body.print-mode > :not(#print-root) { display: none !important; }
#print-root .dash-doc > .dash-page + .dash-page { margin-top: 0; }
#print-root .dash-page { width: var(--pg-wmm, 210mm); height: var(--pg-hmm, 297mm); aspect-ratio: auto !important; box-shadow: none; border: 0; break-after: page; page-break-after: always; overflow: hidden; }
/* the cards' and the maps' own buttons are for the screen */
#print-root #dash-xf, #print-root .dash-tabs, #print-root .dash-mode-note, #print-root .dash-wtools, #print-root .dash-rz, #print-root .leaflet-control-zoom, #print-root .leaflet-bar, #print-root .leaflet-control-container button { display: none !important; }
#print-root .dash-page:last-child { break-after: auto; page-break-after: auto; }
#print-root .dash-w { break-inside: avoid; }
/* pages that run on (layout.flow): rows grow to their cards, the page continues over as many sheets as it needs */
.dash-page.flow { aspect-ratio: auto !important; }
.dash-page.flow .dash-sheet { height: auto; }
.dash-page.flow .dash-grid.paged { height: auto; grid-template-rows: none; grid-auto-rows: minmax(var(--flow-row, 40px), auto); }
.dash-page.flow .dash-wb, .dash-page.flow .dash-wb .dash-tbl, .dash-page.flow .rpt-block { overflow: visible; height: auto; max-height: none; }
.dt-flow { opacity: .55; }
.dt-flow.on { opacity: 1; color: #21597f; font-weight: 700; }
#print-root .dash-page.flow { height: auto !important; overflow: visible; }
#print-root .dash-page.flow .dash-w { break-inside: auto; overflow: visible; }
#print-root .dash-page.flow .dash-w:not(.doc-fluid) { break-inside: avoid; }
#print-root .dash-page.flow tr, #print-root .dash-page.flow svg, #print-root .dash-page.flow img { break-inside: avoid; }
/* printed with pages that run on, the printer holds the margin: the sheets lose theirs */
#print-root.pg-flowdoc .dash-page { width: calc(var(--pg-wmm) - 2 * var(--pg-mmm)); }
#print-root.pg-flowdoc .dash-page:not(.flow) { height: calc(var(--pg-hmm) - 2 * var(--pg-mmm)); }
#print-root.pg-flowdoc .dash-sheet { padding: 0 !important; }
.rpt-sec { display: block; }
/* tables on pages that run on: as wide as the page and wrapped, never cut at the edge; printed, the header row repeats
   on every sheet a table goes on over (a sticky header does not print) */
.dash-page.flow .dash-tbl table { width: 100%; }
.dash-page.flow .dash-tbl th, .dash-page.flow .dash-tbl td { white-space: normal; overflow-wrap: break-word; word-break: normal; }
#print-root .dash-page.flow .dash-tbl thead { display: table-header-group; }
#print-root .dash-page.flow .dash-tbl thead th { position: static; box-shadow: none; }
/* a run-on page printed as bands (flowBands): side-by-side cards keep a grid of their own and print whole */
#print-root .flow-band.multi { display: grid; grid-template-columns: repeat(var(--dash-cols, 12), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--flow-row, 40px), auto); break-inside: avoid; }
#print-root .flow-band.one > .dash-w { height: auto; }

/* ---- the facility report's own cards ---- */
.doc-head { height: 100%; box-sizing: border-box; border-radius: 8px; padding: 10px 16px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.doc-head.plain { color: inherit; padding: 2px 4px; }
.doc-head .dh-kick { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; opacity: .85; }
.doc-head .dh-title { font-size: 21px; font-weight: 700; line-height: 1.2; }
.doc-head.plain .dh-title { color: #21597f; }
.doc-head .dh-sub { font-size: 12px; opacity: .92; margin-top: 3px; }
.rpt-block { font-size: 12px; line-height: 1.45; overflow: auto; height: 100%; }
.rpt-block h2 { font-size: 13.5px; margin: 0 0 6px; color: #21597f; }
.rpt-block h3 { font-size: 12px; margin: 8px 0 2px; }
.rpt-block p { margin: 0 0 6px; }
.rpt-block table { border-collapse: collapse; width: 100%; font-size: 11px; }
.rpt-block td, .rpt-block th { border: 1px solid #ccd4da; padding: 2px 6px; text-align: left; }
.rpt-block th { background: #eef3f7; }
.rpt-block .muted { color: #7c8a94; }
.fac-head { padding: 2px 4px; }
.fac-name { font-size: 22px; font-weight: 700; color: #21597f; line-height: 1.2; }
.fac-ne { font-weight: 400; color: #6b7c86; font-size: 17px; margin-left: 6px; }
.fac-sub { margin-top: 4px; color: #56696f; font-size: 12.5px; }
.fac-map { width: 100%; height: 100%; min-height: 160px; border-radius: 6px; overflow: hidden; }
.fac-nophoto { height: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
  border: 1px dashed #b9c4cc; border-radius: 6px; color: #8a97a1; background: #f6f9fb; font-size: 12px; }
.fac-title { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #6b7c86; margin-bottom: 2px; }
/* the facility report read in a frame beside the plans: the same sheets, on grey, one under the other */
body.print-view { background: #e9eef2 !important; }
body.print-view #print-root { padding: 12px; }
body.print-view #print-root .dash-doc > .dash-page { margin: 0 auto; box-shadow: 0 1px 4px rgba(20,40,60,.25); }
body.print-view #print-root .dash-doc > .dash-page + .dash-page { margin-top: 12px; }

/* ---- phones, tablets and the installed app (responsive pass, 26 Sep 2026) ---------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* a finger, not a pointer: the tab strip and the header's buttons are tall enough to hit, and controls do not wait
   for a possible double tap */
@media (pointer: coarse) {
  .tab { min-height: 42px; }
  .topbar .btn.small, .lang-btn { min-height: 34px; }
  button, [role=button], .tab, .lyr, a { touch-action: manipulation; }
  /* the small icon buttons of a layer row, a card's info dot and the strip arrows get a finger-sized hit area */
  .lyr .lbl-t, .lyr .rm, .hi-btn, .dv-arrow, .fb-ib { min-width: 28px; min-height: 28px; }
  /* the checklist, "Show 7 done", 👍, the assistant's Getting started and EN / नेपाली were 17-22 px high, and the
     report and low-bandwidth boxes 13-15 px (QA review, 27 Sep 2026) */
  .mp-check .ck-go, .mp-check .ck-more, .cm-act, .ha-startlink, .ha-lb { min-height: 32px; }
  input[data-sel], input[data-selall], #lite-ck { width: 24px; height: 24px; }
}
/* the location picker on a phone: a shorter map, so "✓ Use this location" is on the screen and not below a map that
   takes every swipe (inline height, hence !important) */
@media (max-width: 700px) { #gp-map { height: 48vh !important; } }
/* iOS zooms the page into a field whose text is under 16 px, and does not zoom back out; on a phone the fields are
   16 px so the page stays put */
@media (max-width: 700px) and (pointer: coarse) {
  /* !important: many bars set their own 12-13 px on inputs with a more specific selector, and iOS zooms on every one of them */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; }
}
/* opened from the home screen: the top bar clears the notch and status bar, the sides clear the rounded corners in
   landscape, and pulling down on the page does not reload the app */
@media (display-mode: standalone) {
  .topbar, .land-topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  #app-view, #landing-view, #login-view { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  html, body { overscroll-behavior-y: contain; }
}

/* phones: the data-entry bar's controls fit the width (a facility's name is long), and the map's search box sits
   between the layers panel and the map instead of over the panel once the panels stack */
@media (max-width: 700px) {
  .entrybar label { max-width: 100%; min-width: 0; }
  .entrybar select, .entrybar input:not([type=checkbox]):not([type=radio]) { max-width: 100%; min-width: 0; flex: 1 1 auto; width: auto; }
}
/* once the map's panels stack (max-width: 900px above), the search box sits between the panel and the map */
@media (max-width: 900px) {
  #map-row > .map-search { position: static; width: auto; max-width: none; margin: 6px 10px 0; }
  #map-row > #map { order: 1; }          /* panel, search box, map, feature panel */
  #map-row > .side-r { order: 2; }
}
/* a finger on a band: the 26 px controls of the entry bar, rails and ribbons grow to 34 px */
@media (pointer: coarse) {
  .entrybar .btn, .entrybar select, .entrybar input:not([type="checkbox"]), .dv-rail .btn, #cm-ribbon .btn, #dashb-sub .btn,
  #cm-ribbon input, #cm-ribbon select { height: auto; min-height: 34px; }
}

/* ---- narrow screens, second pass (26 Sep 2026): what the user found in a 600 px window ---------------------- */
/* Reports: a report's words take their own line above the unit picker and the buttons, instead of a one-word column
   beside them (inline flex:1 on the span, hence !important) */
@media (max-width: 760px) {
  [data-crep] > span[style*="flex:1"], #rpt-sec-avail .form-row > span[style*="flex:1"] { flex: 1 1 100% !important; }
  [data-crep] .crep-org { flex: 1 1 200px; max-width: 100%; min-width: 0; }
}
/* Builder: the card strip keeps card-sized cards on a phone - 82 % of the screen made one card fill the screen */
@media (max-width: 640px) { .bcards.strip > .bcard { flex-basis: min(240px, 62%); } }
/* Layers tab and the symbology library: the eight-column tables scroll sideways inside their box instead of
   squeezing every heading to three letters and pushing the last button out of the box */
@media (max-width: 900px) {
  table.lyr-tbl { min-width: 720px; }
  .pset-wrap { overflow-x: auto; }
}
/* Data tab: the data-source list goes above the panel as a sideways strip and the panel gets the whole width
   (a 280 px list beside a 300 px panel left the registry's map 165 px wide) */
@media (max-width: 900px) {
  #tab-data .dm-split { flex-direction: column; }
  #tab-data .dm-split > .side-l { width: auto !important; max-width: none; flex: none; border-right: 0;
    border-bottom: 1px solid var(--line); padding: 8px 12px; }
  #tab-data .dm-split > .side-l .panel-title { margin: 2px 0 6px; }
  #dm-list { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  #dm-list > * { flex: 0 0 min(240px, 70%); }
  /* Survey form data: the survey picker takes a line of its own, the forms below it as the strip */
  #dm-list:has(> #dm-survey) { flex-wrap: wrap; }
  #dm-list > #dm-survey, #dm-list > #dm-forms { flex: 1 1 100%; width: 100%; }
  #dm-forms { display: flex; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; }
  #dm-forms > * { flex: 0 0 min(240px, 70%); }
}
/* Admin ▸ Other systems: a feature-service address breaks at its slashes, not one letter per line */
@media (max-width: 900px) {
  table.attr td code[style*="break-all"] { display: inline-block; min-width: 200px; word-break: normal !important; overflow-wrap: anywhere; }
}
/* Admin ▸ Microplan ▸ Workflow: a stage's English and Nepali names each get a full line on a phone - the phone rule
   that lets a form's selects shrink had left them two letters wide */
@media (max-width: 700px) {
  [data-wfi] > .form-row > input[data-wl], [data-wfi] > .form-row > input[data-wn] { flex: 1 1 100% !important; }
}

/* ---- narrow screens, third pass (26 Sep 2026): every sub-screen crawled at 600 px ---------------------------- */
@media (max-width: 900px) {
  /* Reports ▸ Facility microplan reports: the facility table scrolls sideways in its box instead of folding the
     status into a column of words and cutting the Download button */
  .rpt-scroll { overflow-x: auto; }
  .rpt-scroll table.entry { min-width: 640px; }
  /* Layers tab: columns take the width their content needs (fixed 20 % shares left seven icon buttons spilling
     out of a 144 px cell); the table scrolls in its box */
  table.lyr-tbl { table-layout: auto; }
  /* Admin bar: a group's menu opens under the whole bar, the width of the screen, instead of hanging off the
     right edge when its button sits at the end of a wrapped row */
  #admin-rail { overflow: visible; }
  .adm-bar { position: relative; }
  .adm-grp { position: static; }
  .adm-menu { left: 4px !important; right: 4px !important; top: calc(100% + 4px); min-width: 0; max-width: none; }
  /* My account: the band's buttons wrap under the pills instead of running off the screen */
  #acct-ribbon .dv-rail { flex-wrap: wrap; }
  #acct-ribbon .dv-rail > span { flex: 1 1 100% !important; flex-wrap: wrap; margin-left: 0 !important; row-gap: 6px; }
  /* Database studio: the object tree sits above the detail, the view tabs wrap, wide tables scroll in the detail */
  .dbs { flex-direction: column; }
  .dbs-tree { width: auto !important; max-height: 38vh; border-right: 0; border-bottom: 1px solid #e3e8ec; padding-right: 0; }
  .dbs-tabs { flex-wrap: wrap; }
  .dbs-main { overflow-x: auto; }
  /* Admin ▸ Security: the missed-questions table scrolls instead of folding each question into a strip */
  #hm-list { overflow-x: auto; }
  #hm-list table { min-width: 820px; }
  /* Admin ▸ Microplan: the vaccine forecast and indicator tables scroll in place */
  /* (the vaccine forecast and indicator tables sit in a .tbl-wrap with their own min-width) */
  #ind-defs input[data-dk="formula"] { min-width: 260px; }   /* width:100% of an auto-laid cell collapses to nothing */
  /* Layers ▸ rasters: the bounds stay on one line; the table scrolls */
  #cl-rasters td.ne { white-space: nowrap; }
  /* Admin ▸ API clients / Other systems: the ArcGIS services table scrolls instead of folding its headings */
  #apic-box { overflow-x: auto; }
  #apic-box table.attr { min-width: 720px; }
}

/* phones: the card-rule ranges, the data-source forms and an analysis card's tag each take a full line */
@media (max-width: 700px) {
  .bbar .spacer { display: none; }                 /* the Builder bar's page arrows follow the count, not a new line */
  #cards-box .form-row > label.fld { flex: 1 1 100% !important; }
  #cards-box [data-crn] { flex: 1 1 0; width: auto; }
  .ds-auth > label { flex: 1 1 100% !important; white-space: normal; }
  .ds-tbl-top { grid-template-columns: 1fr; }
  .ds-arow { grid-template-columns: 1fr 1fr; }
  /* an analysis section's heading wraps, its tag on a line of its own */
  .ax-sec-h { flex-wrap: wrap; }
  .ax-sec-h .tag { flex: 1 1 100%; width: auto; margin-left: 0; }
}

/* dashboards on a narrow screen: a group's cards stack like the page's cards do - the group kept its twelve columns
   and drew each card 150 px wide (user's screenshot, 26 Sep 2026) */
@media screen and (max-width: 800px) {
  .dash-subgrid { display: flex; flex-direction: column; min-height: 0 !important; }
  .dash-subgrid > .dash-w { grid-area: auto !important; min-height: 220px; }
}

/* Admin ▸ Run storage: the summary reads as a list - headings on the left, sizes on one line */
#ret-box table.attr th { text-align: left; font-weight: 600; }
#ret-box table.attr td.r { white-space: nowrap; }

/* the person / people icon inside a layer's sharing chip: sized like the row's buttons draw it (without this the
   svg took the whole cell - nobody saw it while almost every layer was shared with everyone) */
.chip .li { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; flex: none; }
table.lyr-tbl td:first-child .chip.share-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* the targets layers' year picker: its own line inside the name cell, never wider than the cell (it ran 95 px into
   the Source and Geometry columns) */
table.lyr-tbl .lyr-fy { display: block; margin: 3px 0 0; max-width: 100%; }
table.lyr-tbl .lyr-fy select, table.lyr-tbl #cl-targets-fy { display: block; width: auto; max-width: 100%; margin-top: 2px; }

/* tablets (700-960 px): the header's buttons neither shrank nor wrapped, so at 768 px they ran 69 px off the right
   edge, "Sign out" was off-screen and the language switch was squeezed under Help (QA 27 Sep 2026). They wrap now,
   and the measured header height (fitShell) moves the pane down with them. */
@media (max-width: 960px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .topbar > * { flex-shrink: 0; }
  .topbar > .spacer { flex-shrink: 1; min-width: 0; }
  .topbar .user-chip { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* the inline report when the plan page is stacked: most of a screen tall, scrolling inside itself (it was 150 px) */
@media (max-width: 900px) {
  .mp-split .mp-report-frame { flex: none; height: 85vh; height: 85dvh; }
}
.entry-lock-mirror { margin-top: 4px; color: #8a4b00; font-weight: 600; }

/* v1782 - the crawl's leftovers (27 Sep 2026) */
/* the layers list: up to nine action icons of 32 px (core rows) need ~310 px; 21 % of a laptop table gave 252 and pushed 🗑 out */
@media (min-width: 1101px) {
  table.lyr-tbl col.c-act { width: 330px; }   /* core rows carry one icon more */
}
table.lyr-tbl td .chip { white-space: normal; max-width: 100%; }
/* the name cell: chips (⚙ computed, sharing) and "by …" go to the next line when the name is long */
#cl-list table.lyr-tbl td:first-child { white-space: normal; }
#sym-library td.pset-act { white-space: normal; }
/* Data ▸ Core layers ▸ built-in layers: the name was squeezed to 76 px by its row of buttons */
.cl-brow { flex-wrap: wrap; row-gap: 4px; }
.cl-brow > span:first-child { min-width: 200px; }
@media (max-width: 700px) {
  /* the survey carousel's arrows sat 8 px outside the page on a phone */
  .carnav.prev { left: 0; }
  .carnav.next { right: 0; }
  /* ▦ Table view of a repeat group (vaccination centres): wide by nature - it scrolls both ways in a box most of a
     screen tall, with its header row and first column kept in view, instead of a 237 px strip */
  .repeat-tbl-wrap { max-height: 70vh; overflow: auto; margin: 0 -6px; border: 1px solid #e3e8ec; }
  .repeat-tbl { width: max-content; min-width: 100%; }
  .repeat-tbl thead th { position: sticky; top: 0; z-index: 2; }
  .repeat-tbl th:first-child, .repeat-tbl td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
  .repeat-tbl thead th:first-child { z-index: 3; background: #f0f4f7; }
}

/* ---- the report look (reports redesign phase 1, 30 Sep 2026): a document reads as a report, not a board of cards ---- */
.dash-doc.look-report .dash-sheet { font-family: "Segoe UI", "Noto Sans", "Noto Sans Devanagari", Arial, sans-serif; color: #1d2a33; }
.dash-doc.look-report.font-serif .dash-sheet { font-family: Georgia, "Noto Serif", "Noto Serif Devanagari", "Times New Roman", serif; }
.look-report .dash-w { background: none; border: 0; border-radius: 0; padding: 0 0 .7cqw; box-shadow: none; }
.look-report .dash-grid.editing .dash-w:not(.sel) { outline: 1px dashed #c9d4dc; outline-offset: -1px; }
.look-report .dash-wh { margin-bottom: .5cqw; }
.look-report .dash-wt { color: #1d2a33; font-size: max(11px, 1.8cqw); font-weight: 700; white-space: normal; overflow: visible; line-height: 1.25; }
.look-report .dash-w.hdr-band .dash-wh { background: none; }
.look-report .dash-w.hdr-band .dash-wt { color: var(--doc-accent, #21597f); font-size: max(13px, 2.2cqw); text-align: left; }
.look-report .dash-cap { font-size: max(8px, 1.35cqw); color: #3d4d59; line-height: 1.35; margin: .5cqw 0 .2cqw; }
.look-report .dash-cap b { color: #1d2a33; }
.look-report .dash-cap.above { margin: 0 0 .5cqw; }
.look-report .dash-text { font-size: max(9px, 1.45cqw); line-height: 1.55; color: #2c3a44; }
.look-report .dash-text h3.rt-h { font-size: max(12px, 2cqw); color: var(--doc-accent, #21597f); margin: 1.2cqw 0 .5cqw; }
.look-report .dash-text a { color: var(--doc-accent, #21597f); }
.look-report .dash-kpi { align-items: flex-start; text-align: left; border-top: 3px solid var(--doc-accent, #21597f); padding-top: .8cqw; justify-content: flex-start; }
.look-report .dash-kpi .n { color: var(--doc-accent, #21597f); }
.look-report .dash-kpi .l { text-transform: uppercase; letter-spacing: .06em; font-size: max(7px, 1.15cqw); color: #6b7c86; }
.look-report .dash-tbl table.entry { font-size: max(8px, 1.35cqw); border-collapse: collapse; }
.look-report .dash-tbl table.entry th, .look-report .dash-tbl table.entry td { border: 0; border-bottom: 1px solid #e3e9ee; padding: .5cqw 1cqw; }
.look-report .dash-tbl table.entry th { background: var(--doc-accent, #21597f); color: #fff; font-weight: 600; box-shadow: none; }
.look-report .dash-tbl table.entry tbody tr:nth-child(even) td { background: #f6f9fb; }
.look-report .dash-pband { font-size: max(8px, 1.15cqw); letter-spacing: .02em; }
.look-report .doc-head { border-radius: 0; padding: 1.8cqw 2.6cqw; }
.look-report .doc-head .dh-kick { font-size: max(7px, 1.2cqw); }
.look-report .doc-head .dh-title { font-size: max(15px, 3.2cqw); }
.look-report .doc-head .dh-sub { font-size: max(9px, 1.5cqw); }
/* the cover page: the band bleeds to the sheet's edge (the sheet's margin is --pad), the rest sits on the margin */
.doc-cover { height: 100%; position: relative; display: flex; flex-direction: column; }
.doc-cover .dc-band { position: relative; background: var(--doc-accent, #21597f); color: #fff; padding: 5cqw 7cqw 5cqw;
  margin: calc(-1 * var(--pad, 0px)) calc(-1 * var(--pad, 0px)) 0; border-bottom: 1.1cqw solid rgba(255,255,255,.38); }
.doc-cover .dc-org { font-size: max(7px, 1.3cqw); letter-spacing: .14em; text-transform: uppercase; opacity: .88; max-width: 62cqw; line-height: 1.5; }
.doc-cover .dc-kick { margin-top: 5cqw; font-size: max(7px, 1.4cqw); letter-spacing: .18em; text-transform: uppercase; opacity: .88; }
.doc-cover .dc-title { font-size: max(20px, 5cqw); font-weight: 700; line-height: 1.15; margin-top: 1cqw; }
.doc-cover .dc-logo { position: absolute; right: 7cqw; top: 4.5cqw; height: 7cqw; max-width: 22cqw; object-fit: contain; background: #fff; border-radius: .6cqw; padding: .6cqw; }
.doc-cover .dc-body { padding: 4cqw 2cqw 0; }
.doc-cover .dc-sub { font-size: max(13px, 2.6cqw); color: var(--doc-accent, #21597f); font-weight: 600; }
.doc-cover .dc-meta { margin-top: 2.5cqw; font-size: max(9px, 1.65cqw); line-height: 1.9; color: #3d4d59; }
.doc-cover .dc-meta b { display: inline-block; width: 17cqw; color: #6b7c86; font-weight: 500; }
.doc-cover .dc-foot { margin-top: auto; padding: 1.2cqw 2cqw 0; display: flex; justify-content: space-between; gap: 2cqw; font-size: max(7px, 1.3cqw); color: #6b7c86; border-top: 1px solid #dbe2e7; }
.dash-doc:not(.look-report) .doc-cover .dc-band { margin: 0; border-radius: 8px 8px 0 0; }
/* a page that runs on, in the report look: a row is as small as it can be, a card of words or a table takes what it
   needs, and a chart, map, picture or key figure keeps the rows it was given (--wh from gridStyle) */
.look-report .dash-page.flow .dash-grid.paged { grid-auto-rows: minmax(min(1.2cqw, var(--flow-row, 40px)), auto); }
.look-report .dash-page.flow .dash-w:not(.doc-fluid) > .dash-wb { min-height: calc(var(--wh, 4) * var(--flow-row, 40px)); }
.look-report .dash-page.flow .dash-w.doc-fluid > .dash-wb { min-height: 0; }
#print-root .look-report .flow-band.multi { grid-auto-rows: minmax(1.2cqw, auto); }
.look-report .fac-name { font-size: max(15px, 3cqw); }
.look-report .fac-ne { font-size: max(11px, 2.2cqw); }
.look-report .fac-sub { font-size: max(9px, 1.5cqw); }
.look-report .fac-title { font-size: max(7px, 1.25cqw); }
/* a cover card fills its sheet; printed, what follows it starts on the next one */
.look-report .dash-page.flow .dash-w.doc-cover-w > .dash-wb { min-height: calc(var(--flow-row, 40px) * var(--dash-pagerows, 16) / 0.9); }
#print-root .dash-w.doc-cover-w { break-after: page; page-break-after: always; }
/* ---- the document editor (phase 2): the screen-dashboard controls step aside, the blocks lead the palette ---- */
.dash-editbar.doc-edit .dash-modes, .dash-editbar.doc-edit #dash-gridcols, .dash-editbar.doc-edit .dash-rowslider, .dash-editbar.doc-edit #dash-gridlines,
.dash-editbar.doc-edit #dash-gravity, .dash-editbar.doc-edit #dash-snap, .dash-editbar.doc-edit #dash-arrange, .dash-editbar.doc-edit #dm-wiring, .dash-editbar.doc-edit #dash-hint { display: none !important; }
.dash-side.doc-side details[data-wpsec="links"] { display: none; }
.doc-pal .dw-pb .ic { font-weight: 700; font-size: 13px; min-width: 22px; text-align: center; }
/* a call-out box: a rule on its left and a tint, for key findings and warnings */
.look-report .dash-w.callout { border-left: 4px solid var(--doc-accent, #21597f); background: #f6f9fb; padding: .8cqw 1.4cqw; margin: .4cqw 0 .8cqw; }
.look-report .dash-w.callout .dash-wt { font-size: max(10px, 1.55cqw); color: var(--doc-accent, #21597f); }
.dash-w.callout:not(.look-report .dash-w) { border-left: 4px solid var(--brand, #21597f); background: #f6f9fb; }
/* C10: a captioned card in the report look keeps its tools (💬, ⬇ Data, ⬇ Image) on hover, without a title bar */
.look-report .dash-wh.cap-tools { position: absolute; top: 0; right: 0; margin: 0; padding: 2px 4px; opacity: 0; transition: opacity .15s; background: rgba(255,255,255,.92); border-radius: 6px; z-index: 2; }
.look-report .dash-w:hover .dash-wh.cap-tools { opacity: 1; }
#print-root .dash-wh.cap-tools { display: none !important; }
/* A card's name is read whole (the user, 30 Sep 2026: "the names are cut"): it wraps to a second line instead of
   ending in an ellipsis, and on a reader's card the tools wait for the pointer instead of taking the name's room -
   they sit over the top right corner on hover or keyboard focus. Where there is no hover (a phone, a tablet) they
   stay in the bar as before. */
.dash-wh { align-items: flex-start; }
.dash-wt { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; overflow-wrap: anywhere; }
@media (hover: hover) {
  .dash-grid:not(.editing) .dash-w > .dash-wh:not(.cap-tools) > .dash-wtools { position: absolute; top: 5px; right: 8px; z-index: 3; opacity: 0; pointer-events: none;
    transition: opacity .12s; background: linear-gradient(90deg, rgba(255,255,255,0), #fff 16px); padding-left: 18px; border-radius: 6px; }
  .dash-grid:not(.editing) .dash-w:hover > .dash-wh:not(.cap-tools) > .dash-wtools,
  .dash-grid:not(.editing) .dash-w:focus-within > .dash-wh:not(.cap-tools) > .dash-wtools { opacity: 1; pointer-events: auto; }
  .dash-grid:not(.editing) .dash-w.bare > .dash-wh > .dash-wtools, .dash-grid:not(.editing) .dash-w.hdr-band > .dash-wh > .dash-wtools { background: none; }
}
/* GEMNEPAL-68: groups nest - the designer's trail, a group's heading inside a repeat row, sub-groups in table entry and print */
.fb-crumbs { margin: 2px 0 8px; padding: 6px 10px; background: #eef4f8; border: 1px solid #d5e1ea; border-radius: 8px; font-size: 13px; }
.fb-crumbs a { color: var(--brand); text-decoration: none; font-weight: 600; } .fb-crumbs a:hover { text-decoration: underline; }
.fb-ib.fb-open { color: var(--brand); font-weight: 700; white-space: nowrap; }
.repeat-ghead { font-weight: 700; color: var(--brand); border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; font-size: 12.5px; }
.fld-group .fld-group { margin: 8px 0 4px; background: rgba(33,89,127,.03); }
tr.et-sec.et-sub td { font-size: 12.5px; background: #f3f7fa; }
.pf-group.pf-sub { margin: 6px 0 8px 10px; border-left: 3px solid #d5e1ea; padding-left: 8px; }

/* Logs ▸ Problems (v1797) */
.clog-tbl td { vertical-align: top; }
.clog-seen td { opacity: .55; }
.clog-det > td { background: var(--panel-2, #f6f8fa); padding: 8px 12px 10px 40px; }
/* ---- XLSForm import: the check and the guide (3 Oct 2026) ---------------- */
.xls-panel { max-width: 920px; width: min(920px, 96vw); display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.xls-panel .preview-body { overflow: auto; flex: 1; min-height: 0; }
.xls-verdict { padding: 10px 12px; border-radius: 8px; font-weight: 600; margin-bottom: 8px; }
.xls-verdict.err { background: #fbe3e0; color: #8e2a1f; }
.xls-verdict.warn { background: #fdf0d5; color: #7a5200; }
.xls-verdict.ok { background: #e3f0e9; color: #2c6e49; }
.xls-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.xls-fact { background: #eef2f5; border-radius: 12px; padding: 2px 10px; font-size: 12px; }
.xls-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; flex-wrap: wrap; }
.xls-tab { background: none; border: 0; padding: 7px 12px; cursor: pointer; border-bottom: 2px solid transparent; font: inherit; color: #5f6b76; }
.xls-tab.on { border-bottom-color: var(--brand); color: inherit; font-weight: 600; }
.xls-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.xls-chips button { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
.xls-chips button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.xls-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: #fff; }
.xls-item.error { background: #fdf3f2; border-color: #efc2bc; }
.xls-item.warning { background: #fefaf1; border-color: #f1dcaa; }
.xls-item.info { background: #f5f9fd; border-color: #cfe0f0; }
.xls-ih { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #5f6b76; flex-wrap: wrap; }
.xls-loc { background: #eef2f5; border-radius: 4px; padding: 1px 6px; }
.xls-msg { margin: 3px 0; }
.xls-fix { font-size: 12.5px; color: #1d5d3b; }
.xls-val { font-size: 12px; color: #5f6b76; word-break: break-all; }
.xls-bar { display: inline-block; width: 80px; height: 7px; background: #eef2f5; border-radius: 4px; vertical-align: middle; overflow: hidden; }
.xls-bar i { display: block; height: 100%; background: #2c6e49; }
.xls-guide h4 { margin: 14px 0 6px; }
.xls-guide table { font-size: 12.5px; }
.xls-guide code, .xls-pane code { background: #f3f5f7; padding: 0 4px; border-radius: 3px; }
.xls-fns { line-height: 1.9; font-size: 12px; }
.xls-foot { display: flex; gap: 8px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.xls-sp { flex: 1; }
@media (max-width: 600px) { .xls-foot select { width: 100%; } .xls-sp { display: none; } }

/* Admin - Org levels (v1822) */
.ol-table th{font-size:11px;white-space:nowrap;text-align:left;padding:2px 4px}
.ol-table td{padding:2px 4px;vertical-align:top;font-size:12px}
.ol-table input,.ol-table select{font-size:12px}

/* v1851 - Disclaimer & credits: the card, the map strip */
.dash-credits { font-size: 10px; line-height: 1.4; color: #6b7c86; padding: 2px 4px; }
.dash-credits.al-center { text-align: center; } .dash-credits.al-right { text-align: right; }
.dash-credits p { margin: 0 0 4px; } .dash-credits .cr-lines b { font-weight: 600; color: #56636d; }
.look-report .dash-credits { font-size: max(7px, 1.1cqw); }
.dm-credits, .dm-disc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 999; font-size: 9px; line-height: 1.3; color: #4a5a64;
  background: rgba(255, 255, 255, .88); padding: 2px 6px; pointer-events: none; box-sizing: border-box; }
.dm-credits { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-disc { border-bottom: 1px solid #e3e9ee; }