/* Living Relationship Engine tab (Feature B). Standalone, namespaced `rel-*`; uses the
   app's theme tokens (every palette, light/dark), the shared radius scale and the card /
   label / number vocabulary that surface.css defines. Responsive at 760px. */

/* ── The stack ─────────────────────────────────────────────────────────────── */

/* The view is the tinted ground and keeps the shared top gutter, so the `padding: 0`
   this file used to force is gone: under the sheet metaphor the view drew its own
   frame, under the card metaphor the ground supplies only space.
   The gap is tighter than the shared inter-section clamp on purpose — most of this
   stack is a LIST of like objects (one card per relationship), and a list wants a
   rhythm, not the separation a page gives to two unrelated sections. */
.rel-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 24px;
}

/* Every top-level block is a card floating on that ground. Applied to THIS file's own
   class names rather than by adding `.card` in the renderer because relationships.js
   builds its loading skeleton out of exactly these names — one rule then dresses the
   placeholder and the real board identically, and the two cannot drift. */
.rel-controls, .rel-summary, .rel-card, .rel-foot, .rel-empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.rel-empty { padding: 40px 24px; color: var(--text-muted); font-size: 14px; text-align: center; }
.rel-faint { color: var(--text-faint); }

/* ── Controls ──────────────────────────────────────────────────────────────── */

/* No bottom rule: cards are separated by the gap above them, never by a hairline drawn
   across the page — that was the sheet this design replaces. */
.rel-controls {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 14px 16px;
}
/* Headlines are the serif, and only headlines. */
.rel-title {
  font: 600 20px/1.25 var(--font-display);
  letter-spacing: -.015em;
  color: var(--text);
}
/* The heading-plus-gloss pairing: the gloss stays plain sentence-case UI text, which is
   what keeps the headline beside it readable as a sentence rather than as a slogan. */
.rel-title .rel-faint {
  font: 400 12px/1.5 var(--font-sans);
  letter-spacing: 0;
  color: var(--text-muted);
}
.rel-filters { display: flex; gap: 6px; align-items: center; }
/* The filter and Refresh controls carry the shared `.btn` (and `.btn--on` for the
   selected filter) alongside their `rel-*` names, so this file declares no button of
   its own. Restating the shared look is exactly how a page and the vocabulary drift
   apart, and the drift only shows up on the next retune. */

/* A one-line assertion card: how many links still hold, as of when. Tabular figures so
   the counts sit on the same rail as every other number on the page. */
.rel-summary {
  font: 400 12px/1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: 11px 16px;
}

.rel-tone--good { color: var(--bull-text); }
.rel-tone--warn { color: var(--warn-text); }
.rel-tone--bad { color: var(--bear-text); }
.rel-tone--neutral { color: var(--text-muted); }

/* ── One relationship ──────────────────────────────────────────────────────── */

/* overflow:hidden so the card frame carries the only rounding: the head's hover tint
   and the body's top rule are full-bleed and would otherwise square off the corners. */
.rel-card { overflow: hidden; }
.rel-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; }
.rel-head:hover { background: var(--surface-row-active); }
.rel-tw { color: var(--text-muted); width: 12px; }
/* Not uppercased: the name is the registry's own wording for the link, and a reader
   matching it against the registry should see it spelled the way it is stored. */
.rel-name { font-size: 14px; color: var(--text); flex: 1; }
.rel-rho { font: 400 11px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.rel-status {
  font: 500 11.5px/1 var(--font-sans); letter-spacing: .06em; white-space: nowrap;
}
/* Colour arrives from the status tone class the renderer pairs with it. */
.rel-chip {
  display: inline-flex; align-items: center;
  font: 500 10.5px/1 var(--font-sans); letter-spacing: .06em;
  padding: 4px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}

/* The expander is a nested surface, so it steps DOWN to the sunken tier. */
.rel-body {
  padding: 10px 16px 16px 36px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}
.rel-verdict { font-size: 13px; color: var(--text); margin: 6px 0; }
.rel-mech { font-size: 12px; color: var(--text-2); margin: 6px 0; line-height: 1.5; }
/* The design's signature label: uppercase mono at wide tracking in the quietest tier,
   so a sub-block can be introduced without a heading that competes with its content. */
.rel-sub {
  font: 500 9.5px/1.3 var(--font-mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--colhead);
  margin: 12px 0 5px;
}
.rel-why, .rel-alts { margin: 0; padding-left: 18px; }
.rel-why li, .rel-alts li { font-size: 12px; color: var(--text-2); margin: 3px 0; line-height: 1.5; }
.rel-pred { color: var(--text); font-weight: 600; text-transform: capitalize; }
.rel-alt-n { color: var(--text); }

/* Colour comes from the .rel-faint the renderer pairs with it. */
.rel-foot { font-size: 11px; padding: 13px 16px; }

@media (max-width: 760px) {
  .rel-head { flex-wrap: wrap; }
  .rel-rho { order: 3; width: 100%; }
  .rel-body { padding-left: 16px; }
}