/* ---------------------------------------------------------------------------
   banner.css — alerts, plus the run-screen status chrome in the header.
   ---------------------------------------------------------------------------
   Scope note: this file also owns the small shared controls that live around
   the alerts and belong to no single pane — the filter chip used by the dropped
   column, the leads toolbar and the log, plus the header run context, the quota
   meter and the connection pill. They are here rather than duplicated into four
   component files.

   A banner is a paragraph, not a toast. It says what happened, then what that
   MEANS for the run in progress, because "error: request failed" does not tell
   an operator whether to keep watching or go and fix something.
--------------------------------------------------------------------------- */

.banners {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.banners[hidden] { display: none; }

.banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3);
  border: 1px solid var(--c-border);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  animation: banner-in var(--m-base) var(--m-ease);
}
@keyframes banner-in {
  from { opacity: 0; transform: translateY(calc(var(--s-1) * -1)); }
  to   { opacity: 1; transform: none; }
}

.banner__icon { display: block; flex: none; line-height: 0; }
.banner__icon svg { width: 20px; height: 20px; }

.banner__body { min-width: 0; }

.banner__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.banner__title {
  font-size: var(--t-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}

.banner__msg {
  margin: var(--s-1) 0 0;
  font-size: var(--t-base);
  color: var(--c-fg-muted);
}
.banner__detail {
  margin: var(--s-1) 0 0;
  font-size: var(--t-xs);
  color: var(--c-fg-faint);
}
/* The consequence line. Set apart from the message so the eye can jump to
   "what does this mean for me" without reading the provider's error text. */
.banner__so {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-3);
  border-left: 2px solid var(--c-border);
  font-size: var(--t-base);
  color: var(--c-fg-muted);
}
.banner__msg[hidden], .banner__detail[hidden], .banner__so[hidden] { display: none; }

.banner__actions { display: flex; gap: var(--s-2); flex: none; }
.banner__actions:empty { display: none; }

.banner--warn {
  background: var(--c-warn-soft);
  border-color: var(--c-warn);
}
.banner--warn .banner__icon,
.banner--warn .banner__title { color: var(--c-warn-ink); }
.banner--warn .banner__msg,
.banner--warn .banner__so { color: var(--c-warn-ink); }
.banner--warn .banner__so { border-left-color: var(--c-warn); }

.banner--error {
  background: var(--c-danger-soft);
  border-color: var(--c-danger);
}
.banner--error .banner__icon,
.banner--error .banner__title { color: var(--c-danger-ink); }
.banner--error .banner__msg,
.banner--error .banner__so { color: var(--c-danger-ink); }
.banner--error .banner__so { border-left-color: var(--c-danger); }

/* "7 times" instead of seven cards. The number is the signal. */
.banner__count {
  background: var(--c-surface);
  color: var(--c-fg-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .banner { grid-template-columns: auto minmax(0, 1fr); }
  .banner__actions { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Filter chip — dropped reasons, lead filters, log levels.
--------------------------------------------------------------------------- */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  min-height: 26px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-fg-muted);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background var(--m-fast) var(--m-ease),
              border-color var(--m-fast) var(--m-ease),
              color var(--m-fast) var(--m-ease);
}
.filter-chip:hover { border-color: var(--c-border-strong); color: var(--c-fg); }
.filter-chip.is-on {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary);
}
@media (pointer: coarse) {
  /* Visual size stays compact, the hit area does not. */
  .filter-chip { position: relative; }
  .filter-chip::after { content: ''; position: absolute; inset: -9px; }
}

/* ---------------------------------------------------------------------------
   Header run context
--------------------------------------------------------------------------- */
.runctx {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  flex-wrap: nowrap;
}
.runctx__label {
  font-weight: var(--fw-semi);
  color: var(--c-fg);
  max-width: 22ch;
}
.runctx__kw { background: var(--c-primary-soft); color: var(--c-primary); }
.runctx__where { white-space: nowrap; }
.runctx__elapsed { color: var(--c-fg); font-weight: var(--fw-medium); }
.runctx__where[hidden], .runctx__kw[hidden], .runctx__elapsed[hidden] { display: none; }

/* Quota is the irreversible resource. It sits in the header for the whole run,
   not in a panel somebody has to go and open. */
.runctx__quota {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}
.runctx__quota[hidden] { display: none; }
.runctx__quotalabel {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-fg-faint);
}
.quota {
  width: 72px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-idle-soft);
  overflow: hidden;
}
.quota__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  transition: width var(--m-base) var(--m-ease), background var(--m-base) var(--m-ease);
}
.runctx__quotatext { font-size: var(--t-xs); color: var(--c-fg-muted); }
.runctx__quota[data-level="high"] .quota__fill { background: var(--c-warn); }
.runctx__quota[data-level="high"] .runctx__quotatext { color: var(--c-warn-ink); }
.runctx__quota[data-level="full"] .quota__fill { background: var(--c-danger); }
.runctx__quota[data-level="full"] .runctx__quotatext { color: var(--c-danger-ink); font-weight: var(--fw-semi); }

/* ---------------------------------------------------------------------------
   Connection pill. A stream that has silently stopped means this screen is
   lying about a run that is still going, so it is never a bare grey dot.
--------------------------------------------------------------------------- */
.conn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-size: var(--t-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  flex: none;
}
.conn__label { color: var(--c-fg-muted); }
.conn[data-tone="live"] { border-color: var(--c-ok-soft); background: var(--c-ok-soft); }
.conn[data-tone="live"] .conn__label { color: var(--c-ok-ink); }
.conn[data-tone="warn"] { border-color: var(--c-warn); background: var(--c-warn-soft); }
.conn[data-tone="warn"] .conn__label { color: var(--c-warn-ink); }
.conn[data-tone="danger"] { border-color: var(--c-danger); background: var(--c-danger-soft); }
.conn[data-tone="danger"] .conn__label { color: var(--c-danger-ink); }

.runctx__status { flex: none; }

/* The header is a fixed 56px strip shared with the brand and the nav. Below
   1200px the context sheds its least load-bearing parts rather than wrapping
   into a second row that would break the shell height. */
@media (max-width: 1199px) {
  .runctx__quotalabel { display: none; }
  .runctx__label { max-width: 14ch; }
}
@media (max-width: 900px) {
  .runctx__where, .runctx__kw { display: none; }
}
@media (max-width: 700px) {
  .runctx { gap: var(--s-2); }
  .runctx__label { display: none; }
  .conn__label { display: none; }
  .conn { padding: var(--s-1); }
}