/* ── Bulk-action bar (person list) ────────────────────────────────────── */
/* Hidden until js/lists/bulk.js adds .is-active (≥1 row selected). Reserves no space when
   idle, so the list doesn't jump; slides in when a selection appears. */
.bulk-bar {
  display: none; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 14px;
  border: 1px solid var(--accent-2); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-2) 10%, var(--panel));
}
.bulk-bar.is-active { display: flex; }
.bulk-bar-info { font-size: 13px; }
.bulk-bar-info strong { color: var(--text-strong); font-family: var(--font-mono); }
.bulk-bar-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.btn-quiet {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font: inherit; padding: 4px 6px; text-decoration: underline;
}
.btn-quiet:hover { color: var(--text-strong); }
.col-check { width: 28px; text-align: center; }
.col-check input[type="checkbox"] { cursor: pointer; }

/* ── List footer: total count (left) + pagination (right) ─────────────── */
.list-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 16px; flex-wrap: wrap;
}
.list-footer .list-total { font-size: 13px; }
.list-footer .pagination { margin-top: 0; }

/* ── Pagination (numbered, right-aligned) ─────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; margin-top: 16px; flex-wrap: wrap;
}
.pagination-info {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px;
  color: var(--muted-2); text-transform: uppercase;
}
.pagination-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--border-bright); border-radius: var(--radius);
  background: var(--panel-2); color: var(--text);
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  transition: all .12s;
}
a.page-link:hover {
  border-color: var(--accent-2); color: var(--text-strong);
  background: var(--panel-3); text-decoration: none;
}
.page-link.active {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); cursor: default;
}
/* Quiet, not absent: the muted ink already says «disabled», so the extra opacity only
   has to soften it. At .5 the two multiplied out to a glyph that was there in the DOM
   and not on the screen. */
.page-link.disabled { color: var(--muted-2); opacity: .75; cursor: default; }
.page-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--muted-2); }
.messages { list-style: none; padding: 0; margin: 0 0 18px; }
.messages li { padding: 11px 16px; border-radius: var(--radius); margin-bottom: 8px; border: 1px solid var(--border);
  background: var(--panel); border-left: 3px solid var(--border-bright); }
.messages li.success { border-left-color: var(--ok); }
.messages li.error { border-left-color: var(--danger); }
.dl { display: grid; grid-template-columns: 200px 1fr; gap: 0; }
.dl dt { color: var(--muted); padding: 9px 0; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; }
.dl dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--border); }

/* `.stacked-sm` — a `.dl` that opts out of the narrow label column on a phone
   (`pages/person.css` sets it to 124px at this width) and stacks instead.

   It is for a list whose labels name an *entity* rather than a field: «Військовослужбовець»
   is nineteen characters with nowhere to wrap, so at 124px it ran straight over the ПІБ
   beside it and the row read as one mangled word. «Звання» and «Дата видачі» wrap or fit,
   which is why this is opt-in and not what every `.dl` does. Stacked, the label becomes a
   caption over its value: the row loses the hairline between the two halves, so the border
   moves to the pair's end and the padding closes up around the pair.

   A modifier beside `.dl` rather than `.settings-page .dl`, which is what it started as:
   the rule is about these *labels*, so a selector naming whichever container happened to
   hold them took the phone layout away — silently — the moment the readout moved out of
   `.settings-page` into its page's first tab. Higher specificity than the bare `.dl`
   overrides in the page layer, so it wins wherever it is loaded from. */
@media (max-width: 560px) {
  .dl.stacked-sm { grid-template-columns: minmax(0, 1fr); }
  .dl.stacked-sm dt { padding: 9px 0 0; border-bottom: none; }
  .dl.stacked-sm dd { padding: 3px 0 10px; }
}
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 12px 0 12px 22px; border-left: 2px solid var(--border); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent); }