/* ============================================================
   signals.css · page-unique structure for the flag feed.

   ONLY styles the Signals surface. Every rule is scoped under
   [data-page="signals"] so it can never repaint the shared chassis
   (aero.css owns .flag / .pill / .card / .stat / .callout / tokens).
   This file adds the pieces the shared kit does not carry: the feed
   toolbar (sort + severity filter), the severity mark + badge inside a
   flag, the flag detail line, the inline meta-pill row, and the
   recurrence mini-strip.

   Cyan/gold discipline (inherited):
     --accent  = the one accent (links, active control, info severity)
     --gold    = reserved for now/attention (watch severity, the gate-hold
                 pill, the single packet route control)

   Overflow-safe: minmax(0, 1fr) tracks + min-width:0 on content columns,
   no fixed widths that exceed 320px on a single column. Verified to not
   scroll at 1280px or 375px.
   ============================================================ */

/* lead paragraph under the page header */
[data-page="signals"] .sig-lead {
  font-size: 15px;
  color: var(--text-dim);
  max-width: 64ch;
  margin: 0 0 22px;
  line-height: 1.6;
}

/* the Guided-mode "how to read this feed" explainer, shown only in Guided */
[data-page="signals"] .sig-guide {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  background: var(--surface-2);
  padding: 12px 15px;
  margin: 0 0 20px;
}
[data-page="signals"] .sig-guide strong {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 5px;
}
[data-page="signals"] .sig-guide p {
  font-size: 13px; line-height: 1.55; color: var(--text-dim); margin: 0; max-width: 70ch;
}
[data-page="signals"] .sig-frame-strip { margin-bottom: 18px; }

/* the small derived method/footnote line under a section */
[data-page="signals"] .sig-method {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--text-dimmer);
  margin-top: 12px;
  line-height: 1.55;
}

/* a section wrapper to space the feed groups */
[data-page="signals"] .sig-section { margin-bottom: 30px; }

/* a count chip beside a section title (mirrors the rail's mono micro-labels) */
[data-page="signals"] .sig-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
[data-page="signals"] .sig-count.attention {
  color: var(--gold-deep);
  border-color: var(--gold-soft);
  background: var(--gold-pale);
}

/* ===== the feed toolbar: sort + severity filter (all client-side) ===== */
[data-page="signals"] .sig-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
[data-page="signals"] .sig-toolgroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
[data-page="signals"] .sig-toollabel {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dimmer);
  margin-right: 2px;
}
/* a single segmented control button (filter chip / sort chip) */
[data-page="signals"] .sig-seg {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
  white-space: nowrap;
}
[data-page="signals"] .sig-seg:hover { border-color: var(--border-accent); color: var(--accent-deep); }
[data-page="signals"] .sig-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-pale); }
[data-page="signals"] .sig-seg.is-on {
  background: var(--accent-pale);
  border-color: var(--border-accent);
  color: var(--accent-deep);
}
/* the count baked into a filter chip */
[data-page="signals"] .sig-seg .seg-n { opacity: 0.7; margin-left: 5px; font-weight: 600; }

/* ===== severity pieces inside a .flag (the kit gives .flag + sev-* bar) ===== */
/* the leading mark glyph sits in the 4px bar column the kit reserves */
[data-page="signals"] .flag .flag-mark {
  align-self: start;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-dimmer);
  width: 4px; /* lives in the kit's 4px first column, glyph overflows visually */
  text-align: center;
}
[data-page="signals"] .flag.sev-high .flag-mark { color: var(--warn); }
[data-page="signals"] .flag.sev-watch .flag-mark { color: var(--gold-deep); }
[data-page="signals"] .flag.sev-info .flag-mark { color: var(--accent); }

/* the body detail line, between title and the meta-pill row */
[data-page="signals"] .flag .flag-detail {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-top: 5px;
  max-width: 70ch;
}

/* the inline meta-pill row under a flag */
[data-page="signals"] .flag .flag-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
}
/* the program pill carries a corpus label that can be long; cap it and ellipsis
   so a wide label never pushes the row past the viewport at any width */
[data-page="signals"] .flag .flag-meta-row .pill.flag-program {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the person-action line (lead with the role, never the machine) */
[data-page="signals"] .flag .flag-act {
  font-size: 12.5px;
  color: var(--text);
  margin-top: 11px;
  line-height: 1.5;
}
[data-page="signals"] .flag .flag-act .act-verb {
  color: var(--accent-deep);
  font-weight: 600;
}

/* a link to the resolving packet (the result route) */
[data-page="signals"] .flag .flag-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--accent-deep);
  margin-top: 10px;
  border-bottom: 1px solid var(--accent-soft);
  white-space: nowrap;
}
[data-page="signals"] .flag .flag-link:hover { border-bottom-color: var(--accent); }

/* the severity badge in the kit's right (auto) column */
[data-page="signals"] .flag .flag-sev {
  align-self: start;
  font-family: var(--mono);
  font-size: 10.75px;
  font-weight: 650;
  letter-spacing: 0.55px;
  line-height: 1.25;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
}
[data-page="signals"] .flag.sev-high .flag-sev { color: var(--warn); border-color: rgba(229,120,108,0.4); background: var(--warn-wash); }
[data-page="signals"] .flag.sev-watch .flag-sev { color: var(--gold-deep); border-color: var(--gold-soft); background: var(--gold-pale); }
[data-page="signals"] .flag.sev-info .flag-sev { color: var(--accent-deep); border-color: var(--border-accent); background: var(--accent-pale); }

/* a gate-hold ribbon shown on a held flag (cannot close, evidence missing) */
[data-page="signals"] .flag .flag-hold {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  font-size: 12px;
  color: var(--gold-deep);
  background: var(--gold-pale);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  line-height: 1.45;
}
[data-page="signals"] .flag .flag-hold .hold-ico {
  font-family: var(--mono);
  font-weight: 700;
  flex-shrink: 0;
}

/* empty-state when a filter clears the whole feed */
[data-page="signals"] .sig-empty {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* ===== recurrence mini-strip (count-only, no record contents) ===== */
[data-page="signals"] .rec-strip {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 78px;
  margin: 6px 0 4px;
  min-width: 0;
}
[data-page="signals"] .rec-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
[data-page="signals"] .rec-bar {
  width: 100%;
  max-width: 34px;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
}
[data-page="signals"] .rec-col.peak .rec-bar {
  background: var(--gold-pale);
  border-color: var(--gold-soft);
}
[data-page="signals"] .rec-month {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--text-dimmer);
}
[data-page="signals"] .rec-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}
[data-page="signals"] .rec-col.peak .rec-val { color: var(--gold-deep); }

[data-page="signals"] .sig-viz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 16px;
  margin: 12px 0 4px;
  min-width: 0;
}
[data-page="signals"] .sig-viz-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* ===== responsive: stack the flag on narrow widths so nothing scrolls ===== */
@media (max-width: 560px) {
  [data-page="signals"] .flag {
    grid-template-columns: 4px minmax(0, 1fr);
  }
  /* pin the mark to the 4px column and the body to the wide column so the body
     never falls back into the 4px lane (which broke the title to one word per
     line). The severity badge then sits on its own row under the body. */
  [data-page="signals"] .flag .flag-mark { grid-column: 1; grid-row: 1; }
  [data-page="signals"] .flag .flag-body {
    grid-column: 2; grid-row: 1; min-width: 0;
  }
  [data-page="signals"] .flag .flag-sev {
    grid-column: 2; grid-row: 2;
    justify-self: start;
    margin-top: 10px;
  }
  /* long flag titles + details wrap on whole words, never one word per line */
  [data-page="signals"] .flag .flag-title,
  [data-page="signals"] .flag .flag-detail { overflow-wrap: anywhere; }
  [data-page="signals"] .sig-toolbar { gap: 10px; }
  [data-page="signals"] .sig-viz-grid { grid-template-columns: minmax(0, 1fr); }
}