/* ============================================================
   DISCOVERY.CSS
   Phase 2. Shared surface for Global Power Search and, from 2C,
   Power Screener.

   Built from the tokens already in main.css - the same hairline,
   surface, ink and accent the rest of the product uses. Nothing
   here introduces a gradient, a glow, a large radius or a
   decorative badge. Density is the point: this is meant to read
   like a research terminal, so rows are short, type is small and
   the dividers are thin.
   ============================================================ */

/* ---------- command palette ---------- */

.gs-overlay { position: fixed; inset: 0; z-index: 900; }
.gs-overlay[hidden] { display: none; }
.gs-backdrop { position: absolute; inset: 0; background: rgba(18, 22, 20, .38); }
body.gs-open { overflow: hidden; }

.gs-panel {
  position: relative; margin: 9vh auto 0; max-width: 680px; width: calc(100% - 32px);
  background: var(--bg, #fff); border: 1px solid var(--hairline); border-radius: 8px;
  box-shadow: 0 18px 48px rgba(18, 22, 20, .16);
  display: flex; flex-direction: column; max-height: 74vh;
}

.gs-inputrow {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--hairline);
}
.gs-icon { width: 17px; height: 17px; flex: 0 0 auto; fill: none;
  stroke: var(--ink-dim); stroke-width: 2; stroke-linecap: round; }
.gs-input {
  flex: 1 1 auto; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--ink); min-width: 0;
}
.gs-input::placeholder { color: var(--ink-dim); }
.gs-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gs-esc {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--ink-dim); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 3px 7px; cursor: pointer;
}
.gs-esc:hover { color: var(--ink); }

.gs-results { overflow-y: auto; padding: 6px 0; }

.gs-group { padding: 4px 0 6px; }
.gs-group + .gs-group { border-top: 1px solid var(--hairline); }
.gs-group-head {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 14px 4px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim);
}
.gs-group-n { font-size: 10px; color: var(--ink-dim); }

.gs-row { padding: 6px 14px; cursor: pointer; border-left: 2px solid transparent; }
.gs-row:hover { background: var(--surface); }
.gs-row.is-active { background: var(--surface); border-left-color: var(--accent); }
.gs-row-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gs-row-name { font-size: 13.5px; color: var(--ink); }
.gs-row-alias, .gs-row-why {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim);
}
.gs-row-sub { font-size: 11.5px; color: var(--ink-dim); margin-top: 1px; }
.gs-row-why { margin-top: 2px; }

.gs-more, .gs-viewall {
  padding: 7px 14px; font-size: 12px; color: var(--accent); cursor: pointer;
}
.gs-more:hover, .gs-viewall:hover { background: var(--surface); }
.gs-viewall { border-top: 1px solid var(--hairline); }
.gs-fuzzy { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); }

.gs-hint { padding: 16px 14px 18px; }
.gs-hint-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px;
}
.gs-hint-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-chip {
  font-size: 11.5px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 3px 8px;
}
.gs-hint-note { font-size: 12px; line-height: 1.55; color: var(--ink-dim);
  margin: 10px 0 0; max-width: 56ch; }
.gs-zero { font-size: 13.5px; color: var(--ink); }

.gs-foot {
  display: flex; gap: 14px; padding: 8px 14px;
  border-top: 1px solid var(--hairline); font-size: 11px; color: var(--ink-dim);
}
.gs-foot kbd {
  font-family: var(--mono); font-size: 10px; border: 1px solid var(--hairline);
  border-radius: 3px; padding: 1px 4px; margin-right: 3px; background: var(--surface);
}

/* header trigger: deliberately small, the header had 74px spare */
.pb-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  border: 1px solid var(--hairline); border-radius: 6px; background: transparent;
  color: var(--ink-dim); cursor: pointer; padding: 0;
}
.pb-search-btn:hover { color: var(--ink); border-color: var(--accent); }
.pb-search-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-search-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; }

/* ---------- shared discovery page furniture ---------- */

.ds-wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 64px; }
.ds-kicker { font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px; }
.ds-h1 { font-size: 1.9rem; color: var(--ink); margin: 0 0 10px; line-height: 1.2;
  text-wrap: balance; }
.ds-sub { font-size: .9rem; color: var(--ink-dim); line-height: 1.6; max-width: 68ch;
  margin: 0 0 22px; }
.ds-sub kbd, .ds-h1 kbd {
  font-family: var(--mono); font-size: 11px; border: 1px solid var(--hairline);
  border-radius: 3px; padding: 1px 5px; background: var(--surface); color: var(--ink);
}
.ds-btn {
  font-family: inherit; font-size: .85rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 6px; padding: 8px 14px; cursor: pointer;
}
.ds-btn:hover { border-color: var(--accent); }

.ds-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--hairline);
  margin-bottom: 16px; }
.ds-tab {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px;
  font-size: .82rem; color: var(--ink-dim); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ds-tab:hover { color: var(--ink); }
.ds-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.ds-tab-n { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; }

.ds-list { display: flex; flex-direction: column; }
.ds-item {
  display: block; padding: 11px 2px; text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.ds-item:hover { background: var(--surface); }
.ds-item-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ds-item-name { font-size: .95rem; color: var(--ink); }
.ds-item-type { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim); }
.ds-item-sub { font-size: .8rem; color: var(--ink-dim); margin-top: 2px; }
.ds-item-why { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); margin-top: 3px; }

.ds-empty {
  padding: 15px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 6px; font-size: .85rem; line-height: 1.6; color: var(--ink-dim);
}

@media (max-width: 560px) {
  .gs-panel { margin-top: 4vh; max-height: 86vh; }
  .gs-foot { display: none; }
  .ds-wrap { padding: 20px 16px 48px; }
}

/* ============================================================
   POWER SCREENER + INSTITUTIONAL TABLE (Phase 2C / 2D)
   Density is the design. Thin dividers, small type, tight rows,
   tabular numerals so columns of figures line up. No cards, no
   avatars, no status colours beyond the one accent already in the
   product.
   ============================================================ */

.scr-wrap { max-width: 1420px; }
.scr-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 22px; align-items: start; }

.scr-filters { position: sticky; top: 12px; }
.scr-filters-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 10px;
}
.scr-clear { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: .06em; }

.scr-f { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.scr-f-label { display: flex; align-items: baseline; justify-content: space-between;
  font-size: .74rem; color: var(--ink); margin-bottom: 6px; }
.scr-f-cov { font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; }
.scr-f-none { font-size: .72rem; color: var(--ink-dim); }
.scr-opts { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto; }
.scr-opt { display: flex; align-items: center; gap: 6px; padding: 2px 0;
  font-size: .76rem; color: var(--ink-dim); cursor: pointer; }
.scr-opt:hover { color: var(--ink); }
.scr-opt.is-on { color: var(--ink); }
.scr-opt input { margin: 0; flex: 0 0 auto; }
.scr-opt-v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-opt-n { font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; }
.scr-num, .scr-text {
  width: 100%; padding: 5px 8px; border: 1px solid var(--hairline); border-radius: 4px;
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: .78rem;
}
.scr-num:focus, .scr-text:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.scr-bool { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--ink-dim); cursor: pointer; }

.scr-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-bottom: 10px; }
.scr-count { font-size: .82rem; color: var(--ink-dim); }
.scr-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.scr-tools { display: flex; gap: 6px; }
.scr-tool { font-family: inherit; font-size: .74rem; color: var(--ink-dim);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 4px 9px; cursor: pointer; }
.scr-tool:hover { color: var(--ink); border-color: var(--accent); }

.scr-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
.scr-chip { font-family: inherit; font-size: .72rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 3px 8px; cursor: pointer; }
.scr-chip:hover { border-color: var(--accent); }

.scr-tablewrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 6px; }
.scr-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.scr-table th, .scr-table td {
  text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--hairline);
  white-space: nowrap; vertical-align: middle;
}
.scr-table.is-comfy th, .scr-table.is-comfy td { padding: 9px 12px; }
.scr-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg, #fff);
  border-bottom: 1px solid var(--hairline);
}
.scr-table tbody tr:hover { background: var(--surface); }
.scr-table td.is-num, .scr-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.scr-sort {
  display: inline-flex; align-items: baseline; gap: 4px; background: none; border: 0; padding: 0;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-dim); cursor: pointer;
}
.scr-sort:hover { color: var(--ink); }
.scr-sort.is-on { color: var(--ink); }
.scr-arrow { font-size: 9px; }
.scr-name { color: var(--ink); text-decoration: none; }
.scr-name:hover { color: var(--accent); text-decoration: underline; }
.scr-null { color: var(--ink-dim); font-style: normal; opacity: .75; }
.scr-more { font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim); margin-left: 4px; }
.scr-cov { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; color: var(--ink-dim); }
.scr-cov-3 { color: var(--ink); }

.scr-pager { display: flex; align-items: center; gap: 12px; padding: 12px 2px; }
.scr-page { font-family: inherit; font-size: .76rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 5px 11px; cursor: pointer; }
.scr-page[disabled] { opacity: .45; cursor: default; }
.scr-page-n { font-family: var(--mono); font-size: .72rem; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; }

.scr-modal { position: fixed; inset: 0; z-index: 950; }
.scr-modal-bd { position: absolute; inset: 0; background: rgba(18,22,20,.38); }
.scr-modal-panel { position: relative; margin: 10vh auto 0; max-width: 420px;
  width: calc(100% - 32px); background: var(--bg, #fff); border: 1px solid var(--hairline);
  border-radius: 8px; box-shadow: 0 18px 48px rgba(18,22,20,.16); max-height: 72vh;
  display: flex; flex-direction: column; }
.scr-modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); }
.scr-esc { font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 3px 7px; cursor: pointer; }
.scr-modal-body { overflow-y: auto; padding: 6px 0; }
.scr-colrow { display: flex; align-items: center; gap: 8px; padding: 6px 14px;
  font-size: .8rem; color: var(--ink); cursor: pointer; }
.scr-colrow:hover { background: var(--surface); }
.scr-colrow span:nth-child(2) { flex: 1 1 auto; }
.scr-lock { font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim); }
.scr-move button { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 3px; color: var(--ink-dim); cursor: pointer; font-size: 10px;
  padding: 1px 5px; margin-left: 3px; }
.scr-move button:hover { color: var(--ink); }
.scr-modal-foot { display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--hairline); }

/* A grid item defaults to min-width:auto, which stops it shrinking
   below its content - so the table forced the whole layout to its own
   width instead of scrolling inside .scr-tablewrap. minmax(0, 1fr) on
   both the single and two column cases, plus min-width:0 on the
   column itself, is what lets overflow-x actually engage. */
.scr-main { min-width: 0; }

@media (max-width: 900px) {
  .scr-layout { grid-template-columns: minmax(0, 1fr); }
  .scr-filters { position: static; }
  .scr-opts { max-height: 150px; }
}

/* ---------- saved views (Phase 2E) ---------- */
.sv-newrow { display: flex; gap: 8px; padding: 10px 14px 12px; border-bottom: 1px solid var(--hairline); }
.sv-newrow .scr-text { flex: 1 1 auto; }
.sv-row { display: flex; align-items: center; gap: 8px; padding: 7px 14px; }
.sv-row:hover { background: var(--surface); }
.sv-row.is-confirm { background: var(--surface); }
.sv-load { flex: 1 1 auto; text-align: left; background: none; border: 0; padding: 0;
  cursor: pointer; min-width: 0; }
.sv-name { display: block; font-size: .84rem; color: var(--ink); }
.sv-meta { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim); margin-top: 1px; }
.sv-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.sv-acts button { font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 3px;
  padding: 2px 6px; cursor: pointer; }
.sv-acts button:hover { color: var(--ink); border-color: var(--accent); }
.sv-none { padding: 14px; font-size: .82rem; line-height: 1.55; color: var(--ink-dim); }

/* ---------- saved searches (Phase 3A) ---------- */
.ss-explain { padding: 12px 14px 0; margin: 0; font-size: .8rem; line-height: 1.55;
  color: var(--ink-dim); }
.ss-explain em { color: var(--ink); font-style: normal; }
.ss-none { padding: 14px; font-size: .82rem; line-height: 1.55; color: var(--ink-dim); }
.ss-none strong { color: var(--ink); }
.ss-paused { font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em;
  color: var(--ink-dim); border: 1px solid var(--hairline); border-radius: 3px; padding: 1px 5px; }
.ss-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: #fff; font-size: .82rem; padding: 9px 15px;
  border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 980; max-width: calc(100% - 32px);
}
.ss-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .ss-toast { transition: none; } }

/* ============================================================
   ALERT CENTER (Phase 3D) and preferences (3E)

   Reads as a monitoring log, not a social feed. Density is
   deliberate: a scanning user should see roughly ten changes
   without scrolling, so rows are compact and importance is
   carried by a small typographic label rather than colour
   blocks. The only colour signal is the unread rail.
   ============================================================ */

.pb-alerts-btn {
  position: relative; display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: 6px; flex: 0 0 auto;
  border: 1px solid var(--hairline-strong); border-radius: 8px;
  background: var(--bg); color: var(--ink-dim); text-decoration: none;
}
.pb-alerts-btn:hover { color: var(--ink); border-color: var(--accent); }
.pb-alerts-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-alerts-btn svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.ac-badge {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff;
  font: 600 10px/16px var(--sans); text-align: center;
  font-variant-numeric: tabular-nums;
}

.ac-wrap { max-width: 940px; }

.ac-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: 20px 0 4px;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.ac-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-tools { display: flex; gap: 8px; flex: 0 0 auto; }

.ac-filter {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--hairline-strong); border-radius: 999px;
  background: var(--bg); color: var(--ink-dim);
  font: 500 12.5px/1 var(--sans); cursor: pointer;
}
.ac-filter:hover { color: var(--ink); border-color: var(--ink-muted); }
.ac-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-filter.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.ac-filter-n {
  font: 600 11px/1 var(--mono); opacity: .65; font-variant-numeric: tabular-nums;
}

.ac-list { list-style: none; margin: 0; padding: 0; }

.ac-item {
  position: relative; padding: 14px 0 14px 16px;
  border-bottom: 1px solid var(--hairline);
}
/* The unread rail is the only colour signal in the list. It reads
   at a glance down the left edge without turning the row into a
   coloured block. */
.ac-item.is-unread::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px; background: var(--accent); border-radius: 2px;
}

.ac-item-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 5px;
}
.ac-imp {
  font: 600 9.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 3px;
  background: var(--surface-raised); color: var(--ink-muted);
}
.ac-imp-high { background: var(--accent-pale); color: var(--accent-bright); }
.ac-when {
  font: 500 12px/1 var(--sans); color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.ac-when-sub { color: var(--ink-muted); font-weight: 400; }
.ac-kind {
  font: 500 11.5px/1 var(--sans); color: var(--ink-muted);
  padding-left: 10px; border-left: 1px solid var(--hairline-strong);
}
.ac-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  margin-left: auto; flex: 0 0 auto;
}

.ac-summary {
  font: 600 15px/1.42 var(--sans); color: var(--ink);
  text-wrap: pretty; margin-bottom: 4px;
}
.ac-item.is-unread .ac-summary { color: var(--ink); }
.ac-item:not(.is-unread) .ac-summary { font-weight: 500; color: var(--ink-dim); }

/* The reason line is the product. It is set smaller than the summary
   but not greyed into invisibility - it carries the "why this matters
   to you" that separates an alert from a log entry. */
.ac-reason {
  font: 400 13.5px/1.5 var(--sans); color: var(--ink-dim);
  max-width: 68ch; text-wrap: pretty;
}

.ac-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; }
.ac-act {
  font: 500 12.5px/1 var(--sans); color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: none; border-bottom: 1px solid transparent;
}
.ac-act:hover { border-bottom-color: currentColor; }
.ac-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ac-act-quiet { color: var(--ink-muted); }

.ac-more {
  font: 400 12.5px/1 var(--sans); color: var(--ink-muted);
  margin: 16px 0 0; text-align: center;
}

/* preferences */
.ac-pref {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 0;
  border-bottom: 1px solid var(--hairline); cursor: pointer;
}
.ac-pref:last-child { border-bottom: 0; }
.ac-pref input { margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }
.ac-pref-main { display: flex; flex-direction: column; gap: 3px; }
.ac-pref-name { font: 600 13.5px/1.35 var(--sans); color: var(--ink); }
.ac-pref-note { font: 400 12.5px/1.5 var(--sans); color: var(--ink-dim); max-width: 56ch; }
.ac-pref.is-off { cursor: default; padding-left: 27px; }
.ac-pref.is-off .ac-pref-name { color: var(--ink-muted); }

@media (max-width: 640px) {
  .ac-bar { flex-direction: column; align-items: stretch; }
  .ac-tools { justify-content: flex-end; }
  .ac-kind { padding-left: 0; border-left: 0; }
  .ac-summary { font-size: 14.5px; }
}

/* ---- Alert quality (Phase 3F) ---- */

/* A rollup must not read as a summary that hides its contents, so
   the collapsed changes are listed plainly and indented under the
   row that replaced them. */
.ac-rollup {
  list-style: none; margin: 9px 0 0; padding: 0 0 0 13px;
  border-left: 2px solid var(--hairline-strong);
}
.ac-rollup li {
  font: 400 13px/1.5 var(--sans); color: var(--ink-dim); padding: 2px 0;
}
.ac-rollup a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.ac-rollup a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.ac-muted { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.ac-muted-head {
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 9px;
}
.ac-muted-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; font: 400 13px/1.4 var(--sans); color: var(--ink-dim);
}
.ac-muted-row strong {
  font: 600 13px/1.4 var(--sans); color: var(--ink);
  font-variant-numeric: tabular-nums;
}