/* RouteAll admin (Growth, Users). Read only. Console tokens only (styles.css):
   --accent (primary), --green (good), --red (bad), neutrals --bg/--card/--line/--text/--dim.
   Every number uses tabular figures (body already sets tabular-nums). Mobile first. */
.adm { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px 16px 120px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 561px) { .adm { padding: 24px 20px 40px; } }
.adm h1 { margin: 6px 0 0; }
.adm h2 { font-size: 18px; margin: 0; }
.adm h3 { font-size: 15px; margin: 0; }
.adm-muted { color: var(--dim); font-size: 14px; line-height: 1.5; margin: 0; }
.adm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.adm-head .grow { flex: 1; }
.adm-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.adm-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-card { border: 1px solid transparent; border-radius: var(--r); background: var(--card); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Stat tile: the label, the number (the answer wins), one line under it. */
.adm-tile { flex: 1 1 175px; min-width: 0; border: 1px solid transparent; border-radius: 10px; background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-align: left; color: var(--text); font: inherit; }
button.adm-tile { cursor: pointer; }
button.adm-tile:hover { border-color: var(--dim); }
.adm-tile .k { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; font-size: 13px; line-height: 22px; color: var(--dim); }
/* The change badge stays top-right on every tile, as on Real Users; a long label wraps its own text instead. */
.adm-tile .k > span:first-child { flex: 1 1 auto; min-width: 0; }
.adm-tile .k > .adm-pill { flex: none; }
.adm-tile .v { font-size: 24px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.25; overflow-wrap: anywhere; }
.adm-tile .v.word { font-size: 14px; font-weight: 400; color: var(--dim); letter-spacing: 0; line-height: 1.6; }
.adm-tile .s { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; line-height: 1.45; }
.adm-tile .def { font-size: 13px; color: var(--dim); line-height: 1.5; }

.adm-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; min-height: 22px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; border: 1px solid var(--line); color: var(--dim); font-variant-numeric: tabular-nums; }
.adm-pill.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.adm-pill.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); }
.adm-pill.acc { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.adm-pill.warn { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 12%, transparent); }
/* Users rows (owner, 2026-10-27: "Milo has highlighting"): the counts that matter read at a glance. */
.adm-pill.big { font-size: 13.5px; min-height: 24px; }
.adm-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Horizontal bars on one scale. */
.adm-bars { display: flex; align-items: flex-start; gap: 4px; overflow-x: auto; scrollbar-width: thin; max-width: 100%; padding-bottom: 4px; }
.adm-bar { flex: 1 1 84px; min-width: 72px; max-width: 140px; display: flex; flex-direction: column; gap: 4px; border-radius: 4px; font-size: 13px; }
.adm-bars.adm-tight .adm-bar { flex-basis: 36px; min-width: 36px; }
.adm-bar .t { height: 152px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.adm-bar .n { font-variant-numeric: tabular-nums; line-height: 18px; white-space: nowrap; }
.adm-bar .stack { width: min(24px, 80%); display: flex; flex-direction: column; gap: 2px; }
.adm-bar .stack i { display: block; width: 100%; background: var(--accent); }
.adm-bar .stack > i:first-child { border-radius: 4px 4px 0 0; }
.adm-bar .stack > i.ghost { position: relative; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.adm-bar .stack > i.ghost > i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 0 0; }
.adm-bar .l { text-align: center; line-height: 1.3; overflow-wrap: anywhere; }
.adm-bar .s { text-align: center; font-size: 12px; line-height: 1.3; color: var(--dim); font-variant-numeric: tabular-nums; }
.adm-bar:hover .t, .adm-bar:focus-visible .t { background: var(--line-soft); }
.adm-bar.muted .l { color: var(--dim); }
.adm-bar.muted .stack i { background: var(--dim); }
.adm-bar.hot .l { color: var(--red); font-weight: 500; }
.adm-bar.hot .stack i { background: var(--red); }
.adm-bar.good .stack i { background: var(--green); }
/* The horizontal form: long free text, and the goal meter. */
.adm-bars.adm-h { flex-direction: column; align-items: stretch; gap: 6px; overflow-x: visible; padding-bottom: 0; }
.adm-h .adm-bar { flex: none; max-width: none; min-width: 0; flex-direction: row; align-items: center; gap: 10px; font-size: 14px; min-height: 24px; }
.adm-h .adm-bar .l { flex: 0 0 40%; max-width: 170px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.adm-h .adm-bar .t { flex: 1; min-width: 30px; height: 8px; border-radius: 4px; border-bottom: 0; background: var(--line-soft); overflow: hidden; display: block; }
.adm-h .adm-bar .t > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.adm-h .adm-bar .n { flex: 0 0 auto; min-width: 44px; text-align: right; }

/* Funnel: the signature. One scale, the biggest drop in red. */

/* Copyable value: the text, then a 44px copy button. */
.adm-copy { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.adm-copy .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.adm-copy button { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--dim); border-radius: 8px; cursor: pointer; }
.adm-copy button:hover { color: var(--text); background: var(--line-soft); }
.adm-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Owned dropdown (never a native select). */
.adm-dd { position: relative; }
.adm-dd > button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.adm-dd > button .lbl { color: var(--dim); }
.adm-dd > button svg { width: 14px; height: 14px; flex: none; align-self: center; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.adm-dd > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.adm-dd ul { position: absolute; left: 0; z-index: 30; min-width: 100%; max-height: 400px; overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.adm-dd ul.down { top: calc(100% + 4px); }
.adm-dd ul.up { bottom: calc(100% + 4px); }
.adm-dd.right ul { left: auto; right: 0; }
.adm-dd li { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 6px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.adm-dd li[aria-selected="true"] { color: var(--accent); }
.adm-dd li.active { background: var(--raised-2); }
.adm-dd li .h { color: var(--dim); font-variant-numeric: tabular-nums; }

/* Chips: a short fixed set of choices. */
.adm-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid transparent; border-radius: 10px; background: var(--card); }
.adm-chips button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--dim); font: inherit; font-size: 14px; cursor: pointer; }
.adm-chips button[aria-pressed="true"] { background: var(--raised-2); color: var(--text); }

.adm-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.adm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 16px; }
.adm-search:focus-within { border-color: var(--accent); }
.adm-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Expandable rows (months, users). */
.adm-list { border: 1px solid transparent; border-radius: var(--r); background: var(--card); padding: 0 14px; }
.adm-row { border-top: 1px solid var(--line-soft); }
.adm-row:first-child { border-top: 0; }
.adm-row .sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.adm-row .sum .chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--dim); stroke-width: 2; transition: transform .15s; }
.adm-row .sum[aria-expanded="true"] .chev { transform: rotate(90deg); }
.adm-row .who { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; color: var(--text); gap: 2px; flex: 1 1 200px; min-width: 0; }
.adm-row .who > * { max-width: 100%; }
.adm-row .who b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row .who span { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row .detail { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 0 16px; }
.adm-row .detail > * { flex: 1 1 280px; min-width: 0; }
.adm-kv { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.adm-kv .k { color: var(--dim); font-size: 13px; }

.adm-month-bar { flex: 1 1 160px; min-width: 120px; height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; display: flex; }
.adm-month-bar > i { display: block; height: 100%; }

/* Timeline. */
.adm-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.adm-tl li { display: flex; gap: 10px; min-height: 30px; }
.adm-tl .dot { flex: 0 0 10px; display: flex; flex-direction: column; align-items: center; }
.adm-tl .dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; margin-top: 7px; background: var(--dim); }
.adm-tl .dot::after { content: ""; flex: 1; width: 1px; background: var(--line); }
.adm-tl li:last-child .dot::after { display: none; }
.adm-tl li.ok .dot::before { background: var(--green); }
.adm-tl li.bad .dot::before { background: var(--red); }
.adm-tl li.acc .dot::before { background: var(--accent); }
.adm-tl .body { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; min-width: 0; font-size: 14px; }
.adm-tl .body .when { color: var(--dim); font-size: 13px; }
.adm-tl .body .d { color: var(--dim); font-size: 13px; overflow-wrap: anywhere; }

.adm-table-wrap { overflow-x: auto; }
.adm-table { border-collapse: separate; border-spacing: 3px; font-size: 13px; width: 100%; min-width: 340px; }
.adm-table th { font-weight: 400; color: var(--dim); white-space: nowrap; text-align: center; }
.adm-table th[scope=row] { text-align: left; }
.adm-table td { text-align: center; height: 26px; min-width: 30px; border-radius: 4px; font-variant-numeric: tabular-nums; }

.adm-alert { border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--text); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
/* Loading: the spinner line says what is being read; the blocks below it are the final layout with flat bars
   where the values land (styles.css .skel), so nothing jumps when the data arrives. */
.adm-loading-line { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--dim); font-size: 14px; min-height: 24px; }
.adm-loading-line .spinner { width: 16px; height: 16px; color: var(--accent); }
.adm-loading .adm-tile, .adm-loading .adm-card { gap: 10px; }
/* The map's own attribution "i" is a details too: kept at its 24px, or its icon tiles twice. */
.adm details:not(:where(.maplibregl-ctrl-attrib)) > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--dim); font-size: 14px; }

/* ── Filter toolbar (taste run 2026-10-24) ─────────────────────────────────
   Row 1: search, Stage, Plan … Sort. Row 2: three labelled segmented controls.
   Controls are 36px (44 on touch), on the card tone with no outer frame around groups. */
.adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-toolbar + .adm-toolbar { margin-top: 10px; }
.adm-tool-gap { flex: 1 1 0; min-width: 0; }
.adm-toolbar .adm-search { flex: 0 1 360px; min-height: 36px; border-color: transparent; background: var(--card); }
.adm-toolbar .adm-search input { font-size: 14.5px; }
.adm-toolbar .adm-dd > button { min-height: 36px; border-color: transparent; background: var(--card); }
.adm-toolbar-2 { gap: 6px 22px; }
.adm-seg { display: inline-flex; align-items: center; gap: 8px; }
.adm-seg-k { font-size: 12.5px; color: var(--dim); }
.adm-seg .adm-chips { padding: 2px; border: 0; background: var(--card); border-radius: 9px; }
.adm-seg .adm-chips button { min-height: 30px; padding: 0 10px; font-size: 13.5px; border-radius: 7px; }
@media (pointer: coarse) { .adm-toolbar .adm-search, .adm-toolbar .adm-dd > button { min-height: 44px; } .adm-seg .adm-chips button { min-height: 40px; } }
@media (max-width: 560px) {
  .adm-toolbar .adm-search { flex: 1 1 100%; }
  .adm-tool-gap { display: none; }
  .adm-seg { flex: 1 1 100%; justify-content: space-between; }
}
/* Date range bar above Growth. */
.adm-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-range .adm-chips { padding: 2px; border: 0; background: var(--card); border-radius: 9px; }
.adm-range .adm-chips button { min-height: 30px; padding: 0 11px; font-size: 13.5px; }
.adm-range-note { font-size: 13px; }

/* ── Phone pass (taste run, app-screens §12; owner 2026-10-25: "designed much better for mobile") ──────────
   A chip group never wraps into ragged rows: it is one row that scrolls inside itself, at every width. */
.adm-chips { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.adm-chips::-webkit-scrollbar { display: none; }
.adm-chips button { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  /* Figures: a 2-column grid, never one full-width card per figure; an odd last figure takes the row. */
  .adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .adm-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .adm-tile { padding: 10px 12px; gap: 2px; }
  .adm-tile .k { font-size: 12.5px; line-height: 20px; }
  .adm-tile .k > .adm-pill { min-height: 20px; padding: 0 6px; font-size: 11.5px; }
  .adm-tile .v { font-size: 20px; }
  .adm-tile .s { font-size: 12px; line-height: 1.4; }
  /* At most one row of controls above a chart: the store chart's metric and period share one scrolling row. */
  .adm-filters { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
  .adm-filters::-webkit-scrollbar { display: none; }
  .adm-filters > .adm-chips { flex: none; overflow: visible; }
  /* The date range: its label and chips on one row, the explanation under them. */
  .adm-range { flex-wrap: wrap; row-gap: 6px; }
  .adm-range .adm-chips { flex: 1 1 0; min-width: 0; }
  .adm-range .adm-range-note { flex: 1 1 100%; }
  .adm-card { padding: 14px; }
}

/* Elevation by lightness alone (styles.css --nest): a panel, tile or control inside a card sits one step up,
   so the card needs no outline to hold it. */
.adm-card .adm-tile, .adm-card .adm-card, .adm-card .adm-chips, .adm-card .adm-search, .adm-card .adm-dd > button { background: var(--nest); border-color: transparent; }
.adm-card .adm-chips button[aria-pressed="true"] { background: var(--raised-2); }
.adm-card h3 { font-size: 15px; font-weight: 600; margin: 0; }
button.adm-tile:hover, .adm-card button.adm-tile:hover { border-color: transparent; background: var(--raised-2); }
/* A dropdown and a chip group sharing one control row (Store Discovery): never wraps, never scrolls. */
.adm-filters-1 { flex-wrap: nowrap; justify-content: space-between; overflow: visible; margin: 0; padding: 0; }
.adm-filters-1 .adm-dd > button { min-height: 36px; }
.adm-filters-1 > .adm-dd { flex: 1 1 0; min-width: 0; max-width: 240px; }
.adm-filters-1 .adm-dd > button { width: 100%; justify-content: space-between; white-space: nowrap; }
@media (max-width: 560px) { .adm-filters-1 > .adm-dd { max-width: none; } .adm-filters-1 .adm-dd .lbl { display: none; } }

/* Users rows (taste run 2026-10-25): at most two pills, then one grey line of facts, indented under the name. */
.adm-row-meta { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 12px; }
.adm-row-meta .adm-pills:empty { display: none; }
.adm-meta { font-size: 13px; line-height: 1.5; color: var(--dim); font-variant-numeric: tabular-nums; }
/* The Filters disclosure: always open on wider screens (its summary hidden), a 44px button on phones. */
.adm-more > summary { list-style: none; }
.adm-more > summary::-webkit-details-marker { display: none; }
.adm-more[open] { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 561px) { .adm .adm-more > summary { display: none; } }
@media (max-width: 560px) {
  .adm .adm-more > summary { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 14px;
    border-radius: 10px; background: var(--card); color: var(--text); font-size: 14.5px; cursor: pointer; }
  .adm-more > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); margin-top: -4px; }
  .adm-more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
  .adm-row-meta { padding-left: 0; }
}

/* Users timeline: a trip's way into Permit Review. */
.adm-open { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; color: var(--accent); font-size: 13px; text-decoration: none; }
.adm-open:hover { text-decoration: underline; }
@media (pointer: coarse) { .adm-open { min-height: 44px; } }

/* Users: the driver's trips, above the folded timeline. */
.adm-row .detail > .adm-wide { flex-basis: 100%; }
.adm-trips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; }
.adm-trips > li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-top: 1px solid var(--line); }
.adm-trips > li:first-child { border-top: 0; }
.adm-trips .body { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.adm-trips .body b { font-weight: 500; }
.adm-trips .when { color: var(--dim); font-size: 13px; }
.adm-open-btn { background: transparent; font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--accent); color: var(--accent); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.adm-open-btn:hover { background: var(--accent); color: var(--bg); }
@media (pointer: coarse) { .adm-open-btn { min-height: 44px; } }
@media (max-width: 560px) { .adm-open-btn { flex: 1 1 100%; } }
.adm .adm-fold > summary { list-style: none; justify-content: space-between; gap: 12px; font-weight: 500; color: var(--text); }
.adm-fold > summary::-webkit-details-marker { display: none; }
.adm-fold > summary::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); margin: -4px 4px 0 0; }
.adm-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }

/* ── One driver's page (users.html?user=…, owner 2026-10-28) ─────────────────────────────────────────────── */
.adm-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); font-size: 14px; text-decoration: none; }
.adm-back:hover { color: var(--text); }
.adm-user { gap: 20px; }
.adm-user h2 { font-size: 16px; font-weight: 500; }
.adm-ids { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; margin-top: -12px; }
.adm-fact { font-size: 20px; }
.adm-help .adm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-help .adm-acts > * { flex: 0 0 auto; }
@media (max-width: 560px) { .adm-help .adm-acts > * { flex: 1 1 100%; } }
.adm-up-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.adm-up-files:empty { display: none; }
.adm-up-files li { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.adm-up-files li > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-up-msg { margin: 0; font-size: 14px; color: var(--dim); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-up-msg:empty { display: none; }
.adm-up-msg.bad { color: var(--red); }
.adm-trip-id .txt { font-size: 12.5px; color: var(--dim); }
.adm-open-btn.is-primary { background: var(--accent); color: var(--bg); }
.adm-two { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.adm-two > * { flex: 1 1 280px; }

/* The trip's journey: Uploaded → Read → Reviewed → Confirmed → Driving → Done. The page's one signature: done steps
   carry a check, the next one a ring, the rest stay quiet; a line joins them. */
.adm-journey { list-style: none; margin: 4px 0 0; padding: 0; display: flex; width: 100%; max-width: 520px; }
.adm-journey li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; font-size: 12px; color: var(--dim); }
.adm-journey li::before { content: ''; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.adm-journey li:first-child::before { display: none; }
.adm-journey li.done::before, .adm-journey li.now::before { background: var(--accent); }
.adm-journey .mark { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 2px solid var(--line); font-size: 12px; font-weight: 600; }
.adm-journey .mark svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.adm-journey li.done .mark { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.adm-journey li.now .mark { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.adm-journey li.now { color: var(--text); font-weight: 500; }
.adm-journey li.bad .mark { border-color: var(--red); color: var(--red); }
.adm-journey li.bad { color: var(--red); }
.adm-journey .lbl { white-space: nowrap; }
@media (max-width: 560px) { .adm-journey li { font-size: 11px; } }

/* The activity timeline: filters, then days newest first, each a header and its events. */
.adm-fold-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; text-align: left; }
.adm-fold-btn .chev { width: 16px; height: 16px; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.adm-fold-btn[aria-expanded="true"] .chev { transform: rotate(180deg); } /* points up while open, down while closed */
.adm-tlx { display: flex; flex-direction: column; gap: 16px; }
.adm-tlx-days { display: flex; flex-direction: column; gap: 20px; }
.adm-tlx-day { display: flex; flex-direction: column; gap: 10px; }
.adm-tlx-day > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.adm-tlx-day > header b { font-weight: 500; font-size: 14.5px; }
.adm-tlx-sum { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; flex: 1 1 200px; }
.adm-tlx-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.adm-tlx-n { color: var(--dim); font-variant-numeric: tabular-nums; }
.adm-tl li.warn .dot::before { background: var(--amber); }
.adm-tl .when { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .adm-tlx-ctl .adm-seg { flex: 1 1 100%; } }
.adm-link { display: inline-flex; align-items: center; text-decoration: none; min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; }
.adm-link:hover { text-decoration: underline; }
@media (pointer: coarse) { .adm-link { min-height: 44px; } }

/* Status summary: four answers, then the help flags (owner, 2026-10-28). */
.adm-sum .adm-fact.is-ok { color: var(--green); }
.adm-sum .adm-fact.is-warn { color: var(--amber); }
.adm-sum .adm-fact.is-acc { color: var(--accent); }
.adm-sum .adm-fact { font-size: 18px; overflow-wrap: anywhere; }
.adm-help-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.adm-flag { display: inline-flex; align-items: center; gap: 2px; }
/* A chip row inside a flex row scrolls inside itself instead of widening the page (375px check). */
.adm-seg, .adm-seg .adm-chips, .adm-trips-h > .adm-chips { min-width: 0; max-width: 100%; }
.adm-trow-acts .adm-copy { flex: 1 1 160px; }
@media (max-width: 560px) { .adm-trow-acts .adm-open-btn { flex: 1 1 100%; } }
@media (max-width: 400px) { .adm-journey li { font-size: 10.5px; } }
/* Every user card: who they are on the left (the email copies, under the name), Open Driver alone on the right. */
.adm-row-head { display: flex; align-items: flex-start; gap: 8px 16px; padding: 12px 0 4px; }
.adm-row-head .who { flex: 1 1 auto; }
.adm-row-name { font-weight: 500; font-size: 15px; color: var(--text); text-decoration: none; }
.adm-row-name:hover { text-decoration: underline; }
.adm-row-head .who .adm-copy { margin: -10px 0 -10px -2px; }
.adm-row-head .who .adm-copy .txt { font-size: 13.5px; color: var(--text); }
.adm-row-head > .adm-open-btn { flex: none; }
@media (max-width: 560px) { .adm-row-head { flex-direction: column; align-items: stretch; } }
/* Users filters: one row of dropdowns, then Clear Filters once any is on. */
.adm-filters { gap: 8px; }
.adm-clear { min-height: 36px; padding: 0 6px; }
.adm-clear[hidden] { display: none; }
.adm-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.adm-more[hidden] { display: none !important; }
.adm-dd[hidden] { display: none; }
/* A driver's page (owner, 2026-10-30): four facts in one strip, what needs RouteAll, then every trip as a row. */
.adm-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); }
.adm-strip-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; }
.adm-strip-c + .adm-strip-c { border-left: 1px solid var(--line-soft); }
.adm-strip-c .k { font-size: 13px; color: var(--dim); }
.adm-strip-c .v { font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.adm-strip-c .v.is-ok { color: var(--green); } .adm-strip-c .v.is-warn { color: var(--amber); } .adm-strip-c .v.is-bad { color: var(--red); } .adm-strip-c .v.is-acc { color: var(--accent); }
.adm-strip-c .s { font-size: 13px; color: var(--dim); line-height: 1.45; overflow-wrap: anywhere; }
.adm-tlink { color: var(--text); text-decoration: none; font-weight: 500; }
.adm-tlink:hover { text-decoration: underline; }
.adm-h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 500; }
.adm-h2-n { font-size: 13px; color: var(--dim); font-weight: 400; font-variant-numeric: tabular-nums; }
.adm-h3 { margin: 6px 0 0; font-size: 13px; font-weight: 400; color: var(--dim); }
.adm-att, .adm-trips-l { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); }
.adm-att > li { display: flex; align-items: center; gap: 8px 16px; min-height: 56px; padding: 10px 16px; }
.adm-att > li + li, .adm-trips-l > li + li { border-top: 1px solid var(--line-soft); }
.adm-att-l { flex: 0 0 170px; display: flex; }
.adm-att-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.adm-att-t > span { color: var(--dim); font-size: 13.5px; }
.adm-att > li > .adm-open-btn { flex: none; }
.adm-tr { position: relative; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 1.5fr) 210px 16px; align-items: center; gap: 12px 20px;
  min-height: 76px; padding: 12px 16px 12px 19px; color: var(--text); text-decoration: none; }
/* The Permits card's edge: green confirmed, amber waiting on the driver, red not read, grey done. */
.adm-tr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.adm-tr.is-ok::before { background: var(--green); } .adm-tr.is-warn::before { background: var(--amber); } .adm-tr.is-bad::before { background: var(--red); } .adm-tr.is-acc::before { background: var(--accent); }
.adm-tr:hover { background: var(--line-soft); }
.adm-trips-l > li { overflow: hidden; }
.adm-trips-l > li:first-child { border-radius: 10px 10px 0 0; } .adm-trips-l > li:last-child { border-radius: 0 0 10px 10px; } .adm-trips-l > li:only-child { border-radius: 10px; }
.adm-tr-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-tr-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.adm-tr-top b { font-weight: 500; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.adm-tr-top .adm-pill { flex: none; }
.adm-tr-sub { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Start → End, the miles between: the Permits card's endpoint panel. */
.adm-tr-ends { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; background: var(--line-soft); min-width: 0; }
.adm-tr-ends.is-empty { visibility: hidden; }
.adm-stub { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-stub.right { text-align: right; align-items: flex-end; }
.adm-stub .k { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.adm-stub .v { font-size: 13.5px; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.adm-gap { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-tr-when { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.adm-drove { font-size: 13px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-drove.is-yes { color: var(--text); }
.adm-tr-when .perm-state { font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-tr .chev { width: 14px; height: 14px; fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adm .adm-earlier > summary { color: var(--text); display: flex; justify-content: flex-start; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; }
.adm-earlier > summary::-webkit-details-marker { display: none; }
.adm-earlier > summary::after { content: ''; width: 7px; height: 7px; margin-left: 4px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); margin-top: -4px; }
.adm-earlier[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.adm-earlier[open] { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) {
  .adm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-strip-c:nth-child(3) { border-left: 0; }
  .adm-strip-c:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .adm-tr { grid-template-columns: minmax(0, 1fr) 16px; gap: 8px 12px; }
  .adm-tr-main, .adm-tr-ends, .adm-tr-when { grid-column: 1; }
  .adm-tr-when { align-items: flex-start; }
  .adm-tr .chev { grid-column: 2; grid-row: 1 / span 3; }
  .adm-tr-top { flex-wrap: wrap; }
  .adm-att > li { flex-wrap: wrap; } .adm-att-l { flex-basis: 100%; } .adm-att > li > .adm-open-btn { flex: 1 1 100%; }
}
.adm-head-back { min-height: 32px; margin-bottom: -8px; }

/* ── Account & Fleet (driver page, owner 2026-11-05): sign-in, email, fleet, and the three staff fixes ───────── */
.adm-acct-facts { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.adm-acct-facts > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.adm-acct-facts .k { flex: 0 0 120px; font-size: 13px; color: var(--dim); }
@media (max-width: 560px) { .adm-acct-facts .k { flex-basis: 100%; } }
.adm-acct-fields { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.adm-acct-fields .field-label, .adm-acct-fields .input-wrap { margin: 0; }
.adm-acct-confirm { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--nest); }
.adm-acct-confirm p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.adm-acct-log { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.adm-acct-log li { display: flex; flex-wrap: wrap; gap: 2px 10px; }

/* Account & Fleet: a form step sits in its own nested panel with a title, and its two buttons pair up (Cancel left,
   the action right) instead of stacking full-width on a phone (owner, 2026-11-05: "this can be designed better"). */
.adm-acct-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; background: var(--nest); }
.adm-acct-step { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.adm-acct-form .adm-dd > button { width: 100%; }
.adm-acct-form .adm-dd > button > span:not(.lbl) { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-acct-form .adm-meta b { font-weight: 600; color: var(--text); }
.adm-help .adm-acts.adm-acts-pair { flex-wrap: nowrap; }
@media (max-width: 560px) { .adm-help .adm-acts.adm-acts-pair > * { flex: 1 1 0; min-width: 0; } }
.adm-acct-form .adm-dd ul { right: 0; min-width: 0; max-width: 100%; }
/* Each option shows its full name (the owner's email is what tells fleets apart), the seat count beneath it. */
.adm-acct-form .adm-dd li { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 8px 10px; white-space: normal; }
.adm-acct-form .adm-dd li > span:first-child { overflow-wrap: anywhere; }
.adm-acct-form .adm-dd li > .h { font-size: 12.5px; }
.adm-acct-label { margin: 0 0 6px; font-size: 13px; color: var(--dim); }

/* Charts (charts.js). Marks: thin, 4px rounded data end, 2px surface gap; numbers in tabular figures. */
.adm-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.adm-chart-head h2 { margin: 0; }
.adm-how > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; color: var(--dim); }
.adm-see { align-self: flex-start; }
.adm-legend, .adm-toggles { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--dim); }
.adm-legend span, .adm-toggles button { display: inline-flex; align-items: center; gap: 6px; }
.adm-legend i.box { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.adm-legend i.line, .adm-toggles i.line { width: 16px; height: 0; flex: none; }
.adm-toggles { gap: 4px 6px; }
.adm-toggles button { min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--dim); font: inherit; font-size: 13px; cursor: pointer; }
.adm-toggles button[aria-pressed="true"] { color: var(--text); }
.adm-toggles button:hover { background: var(--line-soft); }
.adm-cols-wrap { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-cols { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.adm-col { flex: 1 1 0; min-width: 0; max-width: 88px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; border-radius: 4px; outline-offset: -1px; }
.adm-col:hover, .adm-col:focus-visible { background: var(--line-soft); }
.adm-col.faded .stack { opacity: .65; }
.adm-col .top { font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.adm-col .stack { width: min(24px, 80%); display: flex; flex-direction: column; gap: 2px; }
.adm-col .stack i { display: block; width: 100%; }
.adm-col .stack i:first-child { border-radius: 4px 4px 0 0; }
.adm-col-labels { display: flex; gap: 2px; }
.adm-col-labels span { flex: 1 1 0; min-width: 0; max-width: 88px; text-align: center; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-line-row { display: flex; gap: 8px; min-width: 0; }
.adm-axis { display: flex; flex-direction: column; justify-content: space-between; height: 150px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; text-align: right; min-width: 18px; }
.adm-line { position: relative; flex: 1 1 auto; min-width: 0; height: 150px; touch-action: pan-y; border-radius: 4px; }
.adm-line svg { display: block; width: 100%; height: 150px; overflow: visible; }
.adm-hair { position: absolute; top: 0; bottom: 4px; width: 1px; background: var(--dim); pointer-events: none; }
.adm-dates { display: flex; justify-content: space-between; gap: 8px; padding-left: 26px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.adm-tip { position: absolute; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; min-width: 130px; max-width: 240px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised, var(--card)); color: var(--dim); font-size: 13px; line-height: 1.4; box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; font-variant-numeric: tabular-nums; }
.adm-tip[hidden] { display: none; }
.adm-tip b { font-weight: 500; color: var(--dim); }
.adm-tip span { display: flex; align-items: center; gap: 6px; }
.adm-tip strong { color: var(--text); font-weight: 500; }
.adm-tip i { width: 12px; height: 0; border-top: 2px solid; flex: none; }
.adm-goal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.adm-goal > b { font-size: 28px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-minis { display: flex; flex-wrap: wrap; gap: 14px; }
.adm-mini { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-note { font-size: 13px; }
.adm-mini .adm-line, .adm-mini .adm-line svg, .adm-mini .adm-axis { height: 90px; }
.adm-card > .adm-chips, .adm-section > .adm-chips { align-self: flex-start; max-width: 100%; }
.adm-card-row { display: flex; flex-wrap: wrap; gap: 14px; min-width: 0; }
.adm-weekly { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc(25% - 6px)), 1fr)); gap: 8px; min-width: 0; } /* never more than four across */
.adm-week { gap: 4px; padding: 12px; }
.adm-week svg { display: block; width: 100%; height: 84px; font-variant-numeric: tabular-nums; }
.adm-week-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.adm-week-v b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
section[aria-label="Weekly Growth"] > h2 { font-size: 14px; font-weight: 600; color: var(--text); }
.adm-week-v .adm-muted, .adm-week .adm-note { font-size: 12px; }
.adm-week-wide { grid-column: 1 / -1; }
/* Permit Pipeline: Milo's GrowthUsers PermitPipeline. Each bar is 120px at the tallest week, with its count above it. */
.adm-vbars { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: thin; max-width: 100%; padding-bottom: 4px; }
.adm-vgroup { flex: 1 0 92px; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.adm-vplot { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 142px; border-bottom: 1px solid var(--line); }
.adm-vbar { flex: 0 1 24px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; font-size: 11px; color: var(--dim); }
.adm-vbar i { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.adm-vgroup.partial .adm-vbar i { opacity: .45; }
.adm-vday { font-size: 12px; color: var(--dim); white-space: nowrap; }

/* The permit behind a trip on the driver's page: details and PDF (owner, 2026-11-07). Mobile-first. */
.adm-pd-wrap { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 12px; }
.adm-pd-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-pd-note { font-size: 13px; color: var(--dim); }
.adm-permit-docs { display: flex; flex-direction: column; gap: 12px; }
.adm-pd { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 8px; }
.adm-pd-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.5; }
.adm-pd-row .k { color: var(--dim); }
.adm-pd-row .v { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .adm-pd-row { flex-direction: row; gap: 12px; } .adm-pd-row .k { flex: 0 0 110px; } }

/* Fleets → an internal fleet → Demo Fleet checklist (fleets.js demoChecklist). */
.adm-demo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.adm-demo-list > li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.adm-demo-list > li > .adm-pill { flex: none; min-width: 68px; justify-content: center; }
.adm-demo-list > li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.45; }

/* Live updates per store version (users.js versionTable). Phone: version + newest update, then three stats. */
.adm-lu { display: flex; flex-direction: column; min-width: 0; }
.adm-lu-head { display: none; }
.adm-lu-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; font-variant-numeric: tabular-nums; }
.adm-lu-row > .wide { grid-column: 1 / -1; }
.adm-lu .k { display: block; font-size: 12px; color: var(--dim); }
.adm-lu .big { font-size: 16px; font-weight: 600; }
.adm-lu .sub { display: block; font-size: 12px; color: var(--dim); }
.adm-lu .meter { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 4px; max-width: 160px; }
.adm-lu .meter > i { display: block; height: 100%; background: var(--green); }
.adm-lu details { grid-column: 1 / -1; font-size: 13px; color: var(--dim); }
.adm-lu summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.adm-lu ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; }
.adm-lu li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; border-top: 1px solid var(--line); color: var(--text); }
@media (min-width: 768px) {
  .adm-lu-head, .adm-lu-row { grid-template-columns: minmax(110px, 1fr) minmax(190px, 1.5fr) minmax(150px, 1.4fr) minmax(90px, .8fr) minmax(90px, .8fr); }
  .adm-lu-head { display: grid; gap: 12px; padding: 0 0 6px; font-size: 12px; color: var(--dim); }
  .adm-lu-row > .wide { grid-column: auto; }
  .adm-lu-row > .none { grid-column: 2 / -1; }
  .adm-lu-row .k { display: none; }
}
/* By App Release: "iOS 1.0.5 (17)" on one line, the update ID under it. */
.adm-bars.adm-rel .adm-bar { flex-basis: 116px; min-width: 112px; }
.adm-bars.adm-rel .adm-bar .l { white-space: nowrap; }
.adm-bar .s.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }

/* Admin → Feature Flags (flags.js). A tight list, a row per flag: name and one line left, the switch right. */
.ff-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.ff-tools .adm-search { flex: 1 1 260px; max-width: 420px; }
.ff-search-i { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--dim); stroke-width: 1.8; stroke-linecap: round; }
.ff-count { font-variant-numeric: tabular-nums; }
.ff-list { list-style: none; margin: 0; padding: 0 14px; border-radius: var(--r); background: var(--card); }
.ff-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; }
.ff-row:not([hidden]) ~ .ff-row:not([hidden]) { border-top: 1px solid var(--line-soft); }
.ff-row[hidden] { display: none; }
.ff-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ff-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ff-title { font-size: 15px; font-weight: 500; color: var(--text); }
.ff-name .adm-pill { min-height: 20px; font-size: 12px; align-self: center; }
.ff-meta { font-size: 12.5px; color: var(--dim); overflow-wrap: anywhere; }
.ff-desc { margin: 0; font-size: 14px; line-height: 1.45; color: var(--dim); }
.ff-err { margin: 2px 0 0; font-size: 13.5px; color: var(--red); }
.ff-none { padding: 16px 0; color: var(--dim); font-size: 14px; }

/* The switch: a real button with role="switch"; 44px tall to the thumb, the word beside the track (not colour alone). */
.ff-switch { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 0 0 8px;
  border: 0; border-radius: 10px; background: none; color: var(--dim); font: inherit; font-size: 13.5px; cursor: pointer; }
.ff-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ff-state { min-width: 2em; text-align: right; }
.ff-track { position: relative; width: 36px; height: 22px; border-radius: 999px; background: var(--line); transition: background .15s; }
.ff-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.ff-switch[aria-checked="true"] { color: var(--text); }
.ff-switch[aria-checked="true"] .ff-track { background: var(--green); }
.ff-switch[aria-checked="true"] .ff-knob { transform: translateX(14px); background: #fff; }
.ff-switch[aria-busy="true"] { cursor: progress; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .ff-track, .ff-knob { transition: none; } }

/* The confirm sheet (.up-dialog: a bottom sheet on a phone). One padding for everything inside it. */
.ff-dlg { width: min(400px, calc(100vw - 32px)); padding: 20px; }
.ff-dlg > * { margin: 0; }
.ff-dlg h2 { font-size: 18px; line-height: 1.3; }
.ff-dlg p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--body); }
.ff-dlg-acts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 20px; }
.ff-cancel, .ff-danger { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.ff-cancel { background: none; color: var(--text); }
.ff-cancel:hover { background: var(--raised-2); }
.ff-danger { background: var(--red); color: var(--bg); } /* white on the dark theme's red is under 3:1 */
.ff-danger:hover { filter: brightness(1.08); }
.ff-cancel:focus-visible, .ff-danger:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .ff-meta { display: none; } }
@media (max-width: 560px) { .ff-dlg { width: 100vw; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); } }