/* Rapid Alerts page (/rapid-alerts): tabs, chips, intel-context block, expand
   cue. Migrated out of inline <style> blocks in the engine plugin view
   (plugins/defcon-alerts/views/pages/rapid-alerts.php) as part of the Tier 3
   de-clutter op (Op 9) -- same rules, external file instead of ~150 inline
   lines per page load. Visually verified via workbench.py render, see
   ai/.op9-visual-harness.html in the engine rapid-alert-plan worktree. */

.ra-pagination { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.2rem 0; align-items: center; }
.ra-pagination .btn { min-width: 2.2rem; text-align: center; }
.ra-page--current { background: var(--accent, #0ea5e9) !important; color: #fff !important; border-color: var(--accent, #0ea5e9) !important; font-weight: 700; }
.ra-ellipsis { color: rgba(255,255,255,.5); padding: 0 .2rem; }
.pagination__info { color: rgba(255,255,255,.55); font-size: .84rem; margin-left: .4rem; }

/* ---- Primary filter: professional underline tab bar (single scrolling row) ---- */
.ra-tabs { display: flex; flex-wrap: nowrap; gap: .1rem; margin: 0 0 .1rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; border-bottom: 1px solid rgba(255,255,255,.12); -webkit-overflow-scrolling: touch; }
.ra-tabs::-webkit-scrollbar { height: 0; display: none; }
.ra-tabs .ra-tab { position: relative; flex: 0 0 auto; display: inline-block; padding: .55rem .85rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: rgba(255,255,255,.6); font-size: .86rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; letter-spacing: .01em; transition: color .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; }
.ra-tabs .ra-tab:link, .ra-tabs .ra-tab:visited { color: rgba(255,255,255,.6); text-decoration: none; }
.ra-tabs .ra-tab:hover, .ra-tabs .ra-tab:hover:link, .ra-tabs .ra-tab:hover:visited { color: #fff; border-bottom-color: rgba(255,255,255,.32); text-decoration: none; }
/* Tabs are <a> inside .content; keep typography-polish.css (.content a:focus{border-radius:2px} + hover underline) from touching them. */
.ra-tabs .ra-tab:focus { border-radius: 0; text-decoration: none; }
.ra-tabs .ra-tab:focus-visible { outline: 2px solid var(--accent, #0ea5e9); outline-offset: -2px; }
.ra-tabs .ra-tab--active, .ra-tabs .ra-tab--active:link, .ra-tabs .ra-tab--active:visited { color: #fff; border-bottom-color: var(--accent, #0ea5e9); font-weight: 700; }
/* Smooth feedback while a tab's filtered results load (set by the tab JS). */
#ra-cards-wrap { transition: opacity .18s ease; }
#ra-cards-wrap.ra-loading { opacity: .45; pointer-events: none; }
/* Pagination smooth-scroll target: clear the sticky site header so the first alert isn't hidden under it. */
.ra-tabs, #ra-cards-wrap { scroll-margin-top: 90px; }
.rapid-notice { font-size: .88rem; border-left: 3px solid var(--accent, #0ea5e9); padding: .5rem .75rem; margin-top: 1rem; opacity: .85; }

/* Special primary tabs keep a color identity within the underline metaphor. */
.ra-tabs .ra-tab--operator-filter, .ra-tabs .ra-tab--operator-filter:link, .ra-tabs .ra-tab--operator-filter:visited { color: rgba(251,191,36,.85); }
.ra-tabs .ra-tab--operator-filter:hover { color: #fbbf24; border-bottom-color: rgba(251,191,36,.55); }
.ra-tabs .ra-tab--operator-filter.ra-tab--active, .ra-tabs .ra-tab--operator-filter.ra-tab--active:link, .ra-tabs .ra-tab--operator-filter.ra-tab--active:visited { color: #fbbf24; border-bottom-color: #fbbf24; }
.ra-tabs .ra-tab--pinned-filter, .ra-tabs .ra-tab--pinned-filter:link, .ra-tabs .ra-tab--pinned-filter:visited { color: rgba(244,114,182,.9); }
.ra-tabs .ra-tab--pinned-filter:hover { color: #f472b6; border-bottom-color: rgba(244,114,182,.55); }
.ra-tabs .ra-tab--pinned-filter.ra-tab--active, .ra-tabs .ra-tab--pinned-filter.ra-tab--active:link, .ra-tabs .ra-tab--pinned-filter.ra-tab--active:visited { color: #f472b6; border-bottom-color: #f472b6; }
.rapid-item--operator { border-left: 3px solid rgba(251,191,36,.55); }
.rapid-chip--operator { background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.5); color: #fbbf24; font-weight: 600; }
/* Phase-2A Unit F chip variants */
.rapid-chip--live    { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.55); color: #22c55e; font-weight: 700; letter-spacing: .04em; }
.rapid-chip--updated { background: rgba(14,165,233,.12); border-color: rgba(14,165,233,.35); color: #7dd3fc; }
.rapid-chip--topic   { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.35); color: #c4b5fd; }
.rapid-chip--region  { background: rgba(249,115,22,.10); border-color: rgba(249,115,22,.30); color: #fdba74; }
.rapid-chip--unsorted{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.30); color: #fca5a5; font-style: italic; }
.rapid-chip--sev-1,.rapid-chip--sev-2 { background: rgba(234,179,8,.10); border-color: rgba(234,179,8,.30); color: #fde047; }
.rapid-chip--sev-3   { background: rgba(249,115,22,.14); border-color: rgba(249,115,22,.40); color: #fb923c; }
.rapid-chip--sev-4,.rapid-chip--sev-5 { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.40); color: #f87171; font-weight: 600; }

/* ---- Secondary filter: region facet chips (subordinate to the primary tabs) ---- */
.ra-tabs--region { border-bottom: 0; flex-wrap: wrap; overflow: visible; gap: .4rem; margin: .7rem 0 1.5rem; align-items: center; }
.ra-tabs__label { flex: 0 0 auto; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.38); margin-right: .15rem; }
.ra-tabs--region .ra-tab--region { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0; padding: 0 .8rem; min-height: 1.9rem; line-height: 1; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.58); }
.ra-tabs--region .ra-tab--region:hover { color: #fff; border-color: var(--accent, #0ea5e9); }
.ra-tabs--region .ra-tab--region.ra-tab--active, .ra-tabs--region .ra-tab--region.ra-tab--active:link, .ra-tabs--region .ra-tab--region.ra-tab--active:visited { background: rgba(14,165,233,.16); border-color: var(--accent, #0ea5e9); color: #fff; }
/* Keep region chips rounded on focus (beats typography-polish .content a:focus radius). */
.ra-tabs--region .ra-tab--region:focus, .ra-tabs--region .ra-tab--region:focus-visible, .ra-tabs--region .ra-tab--region.ra-tab--active { border-radius: 999px; }

/* Op 11 (RA4): reader-facing priority filter (All / High+ / Critical). Same pill
   language as the region facet chips just above, so it reads as a sibling control
   rather than a third competing tab style. Rendered + verified via workbench.py
   (scratchpad/ra-priority-filter-render.png): active-state contrast and pill shape
   both read clearly against the dark page background. */
.ra-priority-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; align-items: center; }
.ra-priority-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 1.9rem; padding: 0 .8rem; line-height: 1; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: transparent; font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.58); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ra-priority-btn:hover { color: #fff; border-color: var(--accent, #0ea5e9); }
.ra-priority-btn:focus-visible { outline: 2px solid var(--accent, #0ea5e9); outline-offset: 1px; }
.ra-priority-btn--active { background: rgba(14,165,233,.16); border-color: var(--accent, #0ea5e9); color: #fff; font-weight: 700; }

/* Phase-2A Unit G: intel-context block */
.ra-intel-ctx { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .75rem; margin: .55rem 0 .4rem; font-size: .8rem; color: rgba(255,255,255,.7); }
.ra-intel-ctx dt { font-weight: 600; color: rgba(255,255,255,.45); white-space: nowrap; }
.ra-intel-ctx dd { margin: 0; }
.ra-intel-link { color: rgba(14,165,233,.85); text-decoration: none; }
.ra-intel-link:hover { color: #7dd3fc; text-decoration: underline; }

/* Op 16 (KS11): branded signal line, composed server-side and stored; this rule
   only renders the stored string, it adds no meaning of its own. */
.ra-signal-line { margin: .5rem 0 .3rem; padding: .5rem .7rem; font-size: .82rem; font-weight: 600; line-height: 1.35; color: #e2e8f0; background: rgba(14,165,233,.08); border-left: 3px solid rgba(14,165,233,.6); border-radius: 4px; }

/* Op 17 (KS12): live-update pill (click-to-reveal fallback mode) + situation
   cards' "N updates" disclosure. Visually verified via workbench.py before
   writing (ai-toolkit visual-change gate). */
.ra-live-pill { display: block; margin: 0 auto 12px; padding: .55rem 1.1rem; font-size: .85rem; font-weight: 600; color: #e2e8f0; background: rgba(14,165,233,.14); border: 1px solid rgba(14,165,233,.55); border-radius: 999px; cursor: pointer; }
.ra-live-pill:hover { background: rgba(14,165,233,.24); }
.ra-situation-updates { margin-top: .3rem; }
.ra-situation-updates summary { cursor: pointer; color: rgba(14,165,233,.85); font-size: .78rem; font-weight: 600; }
.ra-situation-updates summary:hover { color: #7dd3fc; }
.ra-situation-update-list { list-style: none; margin: .4rem 0 0; padding: 0 0 0 .6rem; border-left: 2px solid rgba(14,165,233,.3); font-size: .78rem; color: rgba(255,255,255,.65); }
.ra-situation-update-list li { margin: 0 0 .35rem; }
.ra-situation-update-time { display: block; color: rgba(255,255,255,.4); font-size: .72rem; }

/* Op 17 (KS12): weekly "What mattered" digest page. */
.ra-digest-weeknav { display: flex; justify-content: space-between; gap: .5rem; margin: 1rem 0; }
.ra-digest-list { list-style: none; margin: 0; padding: 0; }
.ra-digest-item { display: grid; grid-template-columns: 150px 1fr auto; align-items: baseline; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ra-digest-item-time { font-size: .75rem; color: rgba(255,255,255,.45); white-space: nowrap; }
.ra-digest-item-title { color: #7dd3fc; text-decoration: none; font-weight: 600; }
.ra-digest-item-cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.4); }

.rapid-item--ex { cursor: pointer; transition: background .15s, border-color .15s; }
.rapid-item--ex:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.2); }
.rapid-expand-cue { display: flex; justify-content: center; padding: .55rem 0 .2rem; }
.rapid-expand-cue::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-right: 2.5px solid rgba(255,255,255,.4);
  border-bottom: 2.5px solid rgba(255,255,255,.4);
  transform: rotate(45deg) translateY(-4px);
  transition: border-color .18s, transform .22s;
}
.rapid-item--ex:hover .rapid-expand-cue::before { border-color: rgba(255,255,255,.82); }
.rapid-item--ex[aria-expanded="true"] .rapid-expand-cue::before {
  transform: rotate(-135deg) translateY(4px);
  border-color: rgba(255,255,255,.55);
}
.rapid-excerpt-full { margin-top: .5rem; }

/* ---- Op 9 additions: compact share affordance + collapsed command strip ---- */
.ra-share-compact { margin: .3rem 0 .6rem; font-size: .85rem; }
.ra-share-compact__link { color: rgba(14,165,233,.9); text-decoration: none; font-weight: 600; }
.ra-share-compact__link:hover { color: #7dd3fc; text-decoration: underline; }

.ra-commands-details { margin: 0 0 .75rem; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; }
.ra-commands-details > summary {
  cursor: pointer;
  list-style: none;
  padding: .5rem .85rem;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  user-select: none;
}
.ra-commands-details > summary::-webkit-details-marker { display: none; }
.ra-commands-details > summary::before { content: '\25B8\2002'; }
.ra-commands-details[open] > summary::before { content: '\25BE\2002'; }
.ra-commands-details[open] > summary { border-bottom: 1px solid rgba(255,255,255,.12); }
/* The shared .regional-menu-bar partial keeps its own top/bottom border by
   default (site-wide styling in share-footer.css); inside the disclosure that
   would double up against the details border, so drop it here only. */
.ra-commands-details .regional-menu-bar { border: 0; margin: 0; padding: .6rem 0; }