/* ===================================================================
   V1 STAGE 7 — THE SIGNALS WIRE

   Signals must read FASTER and LIGHTER than Events. Events are dossiers;
   Signals are a wire. So: no cards, no boxes, no badge clutter. Entries
   are separated by a hairline and carried by typography and whitespace,
   which is what lets a reader scan twenty of them without effort.

   SPECIFICITY NOTE — WHY THESE BUTTONS CARRY `.btn-flagship`.

   components.css styles buttons with `button:not(.a):not(.b)...` — seven
   :not() clauses, specificity (0,7,1). That beats ANY ordinary class
   rule a feature stylesheet can write: a `.content-signals` prefix only reaches
   (0,2,0), so it loses on every property the primitive also sets.

   Stage 8 measured this live and found the Apply button rendering in the
   primitive's grey instead of its own accent — the rules below were
   correct and simply never applied. The fix is not more specificity, it
   is to stop matching the primitive: `.btn-flagship` is a clause in that
   :not() chain, so a button carrying it is styled here and nowhere else.
   Every rule below must therefore be complete on its own.
   =================================================================== */

.content-signals { max-width: 1180px; }

/* -------------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------------- */
.sig-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
}
.sig-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.sig-standfirst {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  max-width: 60ch;
}
.sig-count {
  margin: 0;
  flex: none;
  font-size: var(--fs-meta);
  color: var(--text-muted);
  white-space: nowrap;
}
.sig-count .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* -------------------------------------------------------------------
   CONTROLS — search + Filters + view toggle on one row
   ------------------------------------------------------------------- */
/* PRIMARY ROW: search, then Filters and the view toggle. This is the
   loud row -- a real input with a border, and bordered controls. */
.sig-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-3);
}

.sig-search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-5);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.sig-search svg { flex: none; color: var(--text-disabled); }
.sig-search input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  padding: var(--sp-4) 0;
}
.sig-search input::placeholder { color: var(--text-disabled); }
.sig-search input:focus { outline: none; }
.sig-search:focus-within { border-color: var(--accent-muted); }

.sig-control-actions { display: flex; align-items: center; gap: var(--sp-4); flex: none; }

.content-signals .sig-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 0;
  padding: var(--sp-4) var(--sp-6);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
}
.content-signals .sig-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.content-signals .sig-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.content-signals .sig-btn[aria-expanded="true"] {
  color: var(--accent-primary);
  border-color: var(--accent-muted);
}
.sig-btn-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  color: var(--text-inverse);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------
   FILTER POPOVER — the Stage 6 control language, reused
   ------------------------------------------------------------------- */
.sig-popover-host { position: relative; }
.sig-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--sp-4));
  right: 0;
  width: 420px;
  max-width: calc(100vw - 2 * var(--sp-6));
  padding: var(--sp-6);
  background: var(--surface-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), var(--sheen-top);
}
.sig-popover-heading {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sig-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5) var(--sp-5);
}
.sig-filter { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sig-filter-wide { grid-column: 1 / -1; }
.sig-filter label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sig-filter select {
  width: 100%;
  min-width: 0;
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  padding: var(--sp-4);
}
.sig-filter select:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 1px; }

.sig-popover-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.content-signals .sig-apply {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: var(--sp-4) var(--sp-7);
  background: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  color: var(--text-inverse);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
}
.content-signals .sig-apply:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sig-clear { font-size: var(--fs-meta); color: var(--text-muted); }
.sig-clear:hover { color: var(--text-primary); }

/* -------------------------------------------------------------------
   VIEW TOGGLE + SUBCONTROLS
   ------------------------------------------------------------------- */
.sig-viewtoggle {
  display: flex;
  flex: none;
  padding: 3px;
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.sig-viewtoggle-option {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.sig-viewtoggle-option:hover { color: var(--text-primary); }
.sig-viewtoggle-option[aria-current="true"] {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* SECONDARY ROW: scope | timeframe | sort. Deliberately quieter --
   borderless, smaller, muted -- so the toolbar reads as one block with
   an obvious primary, instead of three unrelated control groups. The
   single hairline underneath closes the toolbar as a unit. */
.sig-subcontrols {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-meta);
}

.sig-tabs { display: flex; gap: var(--sp-5); }
.sig-tab {
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.sig-tab:hover { color: var(--text-primary); }
.sig-tab[aria-current="true"] { color: var(--text-primary); border-bottom-color: var(--accent-primary); }

.sig-time { display: flex; gap: 2px; margin: 0 auto; }
.sig-time-option {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.sig-time-option:hover { color: var(--text-primary); background: var(--surface-raised); }
.sig-time-option[aria-current="true"] {
  background: var(--accent-primary);
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
}

.sig-sort { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.sig-sort-label {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sig-sort-option {
  color: var(--text-muted);
  font-size: var(--fs-meta);
  text-decoration: none;
  white-space: nowrap;
}
.sig-sort-option:hover { color: var(--text-primary); }
.sig-sort-option[aria-current="true"] { color: var(--accent-primary); font-weight: var(--fw-medium); }
.sig-sort-note { font-size: var(--fs-caption); color: var(--text-muted); }

/* -------------------------------------------------------------------
   THE FEED
   ------------------------------------------------------------------- */
.sig-day { margin-bottom: var(--sp-7); }
/* A scanning anchor, not a section card: the label plus a hairline that
   runs to the edge of the reading measure, sticking under the shell
   header so the reader always knows which day they are in. */
.sig-day-heading {
  position: sticky;
  top: var(--topbar-height);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  max-width: 880px;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) 0;
  background: var(--surface-base);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.sig-day-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-subtle);
}

/* The feed keeps an editorial reading measure while the toolbar above
   it uses the full workspace: a Signal's prose should not stretch the
   whole width of a 1180px page, but the controls legitimately may. */
.sig-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 880px;
}
.sig-list-flat { margin-top: var(--sp-5); }

/* An entry, not a card: one hairline, generous vertical rhythm, and a
   quiet hover that confirms the whole row is a target. */
/* V1 Stage 7.1: tightened for wire density. The entry keeps its
   hairline and its hover, but loses the padding and inter-row gaps that
   made it read as a news card. Measured: 184px -> ~140px per Signal. */
.sig-item {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  margin-left: calc(-1 * var(--sp-6));
  border-bottom: 1px solid var(--border-subtle);
  border-left: 2px solid transparent;
  border-radius: var(--radius-xs);
  transition: background var(--dur-fast, 120ms) ease, border-color var(--dur-fast, 120ms) ease;
}
.sig-item:hover { background: var(--surface-panel); border-left-color: var(--accent-muted); }
.sig-item:last-child { border-bottom: 0; }

.sig-meta-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-micro);
}
.sig-time-ago {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Source trust, translated. The stored value is Tier 1/2/3; a
   subscriber never sees that vocabulary. */
.sig-trust {
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.sig-trust-tier1 { color: var(--accent-primary); }
.sig-trust-tier2 { color: var(--provenance-fact); }
.sig-trust-tier3 { color: var(--text-muted); }

.sig-match {
  padding: 1px var(--sp-3);
  border-radius: var(--radius-xs);
  background: var(--wash-accent);
  color: var(--accent-primary);
  font-weight: var(--fw-medium);
}

.sig-headline {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-headline);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.sig-headline a { color: var(--text-primary); text-decoration: none; }
.sig-headline a:hover { color: var(--accent-hover); }
.sig-headline a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Clamped to two lines as well as truncated server-side: the character
   limit bounds the text, this bounds the layout whatever the glyphs. */
.sig-summary {
  margin: 0 0 var(--sp-3);
  max-width: 78ch;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ONE metadata line. Classification, significance, geography, source
   and the Event link all describe the same Signal, so they sit on one
   wrapping row separated by hairline middots. Weight and colour carry
   the hierarchy -- category is the brightest, source the quietest, the
   Event link gold -- rather than each getting its own row. */
.sig-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.sig-meta > * + *::before {
  content: "·";
  margin-right: var(--sp-4);
  color: var(--border-strong);
}
.sig-category { color: var(--text-secondary); font-weight: var(--fw-medium); }
.sig-significance {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.sig-source { color: var(--text-muted); }
.sig-event-link {
  color: var(--accent-primary);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.sig-event-link:hover { color: var(--accent-hover); }
.sig-more {
  margin-left: var(--sp-2);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

/* -------------------------------------------------------------------
   TABLE — the optional power-user ledger
   ------------------------------------------------------------------- */
.sig-trust-inline {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .content-signals { max-width: none; }
}

@media (max-width: 860px) {
  .sig-masthead { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .sig-controls { flex-wrap: wrap; }
  .sig-search { flex: 1 1 100%; order: -1; }
  .sig-subcontrols { gap: var(--sp-4) var(--sp-6); }
  .sig-time { margin-left: 0; }
  .sig-popover {
    position: fixed;
    top: auto;
    left: var(--sp-5);
    right: var(--sp-5);
    bottom: var(--sp-5);
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
  }
}

@media (max-width: 560px) {
  .sig-filter-grid { grid-template-columns: 1fr; }
  .sig-headline { font-size: var(--fs-section); }
  .sig-item { padding-left: var(--sp-5); margin-left: calc(-1 * var(--sp-5)); }
  /* The footer stacks rather than pushing the Event link off the row. */
  .sig-event-link { margin-left: 0; }
  .sig-day-heading { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sig-item { transition: none; }
}

/* -------------------------------------------------------------------
   PIPELINE DISCLOSURE — retained subscriber education, restyled to cost
   one quiet line rather than a block.
   ------------------------------------------------------------------- */
.content-signals .pipeline-disclosure { margin: 0 0 var(--sp-6); }
.content-signals .pipeline-disclosure-summary {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  cursor: pointer;
}
.content-signals .pipeline-disclosure-summary:hover { color: var(--text-secondary); }
.content-signals .pipeline-disclosure-body {
  margin-top: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}