/* ============================================================
 * DUSN UI / components.css
 * Rail-agnostic component styles for any DUSN-mounted feed UI.
 * ============================================================
 *
 * SCOPE
 *   Styles for components that are part of the DUSN UI contract,
 *   meaning every rail's feed surface uses them with the same
 *   visual semantics. Brand colors come from rail theme files;
 *   this file uses only the variables defined in tokens.css.
 *
 * COMPONENTS DEFINED HERE
 *   - .methodology-pin       — interactive chip with pin glyph
 *   - .methodology-popover   — versioned-ruleset disclosure panel
 *   - .toast                 — transient notification
 *   - feed list animations   — .reshuffling, .pivot-mode hooks
 *
 * COMPONENTS NOT DEFINED HERE
 *   - work-card, sponsor-card layout/copy chrome  (rail-specific)
 *   - sidebar copy panels                         (rail-specific)
 *   - header, brand mark                          (rail-specific)
 * ============================================================ */

/* ── METHODOLOGY PIN ───────────────────────────────────────
 * The clickable chip placed on every card that cites a methodology
 * version. Opens the methodology popover to teach DUSN's
 * methodology-pinning invariant. */
.methodology-pin {
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:var(--sage);
  background:var(--sage-light);
  border:1px solid transparent;
  border-radius:4px;
  padding:3px 7px 3px 5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:background 0.15s ease, border-color 0.15s ease;
  user-select:none;
}
.methodology-pin:hover {
  background:#dde9e7;
  border-color:var(--sage-mid);
}
.methodology-pin .pin-glyph {
  font-size:10px;
  line-height:1;
  opacity:0.8;
}

/* ── METHODOLOGY POPOVER ───────────────────────────────────
 * Single instance, reused across cards, positioned dynamically. */
.methodology-popover {
  position:absolute;
  z-index:200;
  width:320px;
  max-width:calc(100vw - 32px);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 32px rgba(45,63,62,0.12);
  padding:16px 18px 14px;
  font-family:'DM Sans',sans-serif;
  display:none;
  animation:methPopIn 0.16s ease-out;
}
.methodology-popover.open { display:block; }

@keyframes methPopIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

.meth-pop-header {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border2);
}
.meth-pop-title {
  font-family:'Syne',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  letter-spacing:0.01em;
}
.meth-pop-version {
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--sage);
  background:var(--sage-light);
  padding:2px 6px;
  border-radius:3px;
  letter-spacing:0.06em;
}
.meth-pop-plain {
  font-size:12px;
  color:var(--text2);
  line-height:1.55;
  margin-bottom:12px;
}
.meth-pop-rules-label {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:6px;
}
.meth-pop-rules {
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:var(--text);
  line-height:1.7;
  margin-bottom:12px;
}
.meth-pop-rules .rule-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.meth-pop-rules .rule-row span:first-child { color:var(--text2); }
.meth-pop-rules .rule-row span:last-child  { color:var(--text); font-weight:500; }

.meth-pop-pin-note {
  font-size:11px;
  color:var(--text2);
  line-height:1.5;
  padding:9px 11px;
  background:var(--accent-light);
  border-left:2px solid var(--accent);
  border-radius:0 4px 4px 0;
}
.meth-pop-pin-note strong { color:var(--text); font-weight:600; }

.meth-pop-close {
  position:absolute;
  top:8px; right:10px;
  width:22px; height:22px;
  border:none;
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  border-radius:4px;
}
.meth-pop-close:hover { background:var(--bg3); color:var(--text); }

/* ── TOAST ─────────────────────────────────────────────────
 * Transient notification, anchored top-right. */
.toast {
  position:fixed;
  top:100px; right:20px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 16px;
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
  max-width:320px;
  z-index:1000;
  opacity:0;
  transform:translateX(20px);
  pointer-events:none;
  transition:all 0.3s ease;
}
.toast.show {
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.toast-title {
  font-weight:600;
  font-size:13px;
  margin-bottom:2px;
  color:var(--text);
}
.toast-msg {
  font-size:12px;
  color:var(--text2);
}

/* ── FEED LIST RESHUFFLE ANIMATION ─────────────────────────
 * The engine adds .reshuffling to the list to play a cascade
 * intro for the first N cards. Only triggers on user actions
 * (filter change, pivot toggle) or genuine new arrivals. */
@keyframes feedCascadeIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
#feed-list.reshuffling .feed-card {
  animation:feedCascadeIn 0.4s ease both;
}
#feed-list.reshuffling .feed-card:nth-child(1) { animation-delay: 0ms; }
#feed-list.reshuffling .feed-card:nth-child(2) { animation-delay: 40ms; }
#feed-list.reshuffling .feed-card:nth-child(3) { animation-delay: 80ms; }
#feed-list.reshuffling .feed-card:nth-child(4) { animation-delay:120ms; }
#feed-list.reshuffling .feed-card:nth-child(5) { animation-delay:160ms; }
#feed-list.reshuffling .feed-card:nth-child(n+6) { animation-delay:200ms; }

/* ── PIVOT MODE ────────────────────────────────────────────
 * When a user clicks a sponsor card, the feed enters pivot mode:
 * the pivot card stays prominent, linked cards highlight, unrelated
 * cards dim. Hooks consumed by the feed engine. */
#feed-list.pivot-mode .feed-card:not(.pivot-active):not(.pivot-owned) {
  opacity:0.4;
  transition:opacity 0.3s ease;
}
#feed-list:not(.pivot-mode) .feed-card {
  opacity:1;
  transition:opacity 0.3s ease;
}

@keyframes livepulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.15); }
}