/* GCMD Library — Answer card, moments band and timestamp chip, Reading Room
 * (PLAN-DESIGN-ROLLOUT-2026-09 Layer 2)
 *
 * The library answer (.lac-*, static/js/answer-card.js) is drawn by the search
 * results view (home_v2.html) and the content page (content_watch.html), each
 * with its own inline copy of the base styles. Under the flag this file gives
 * all of them one look: the answer in the serif on a paper card, sources as
 * rows with an ink thumbnail slot, content types as a dot on a paper pill
 * (never a tinted badge), follow-ups as outline pills, and the timestop strip's
 * timestamps in the mono face.
 *
 * Every selector starts with `html.rr-theme`, which out-ranks the pages'
 * single-class rules wherever they load, so no template CSS is edited (six
 * test files pin home_v2.html's text). Flag off, nothing here matches.
 */

/* ── the card ─────────────────────────────────────────────────────── */
html.rr-theme .lac {
  background: var(--rr-paper-raised);
  border: 1px solid var(--rr-rule);
  border-radius: var(--rr-radius-card);
  color: var(--rr-ink);
}
html.rr-theme .lac-lbl {
  font-family: var(--rr-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rr-ink-2);
}
html.rr-theme .lac p {
  font-family: var(--rr-font-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--rr-ink);
  text-wrap: pretty;
}
html.rr-theme .lac-warn {
  background: var(--color-warning-light);
  border-color: var(--rr-rule);
  border-radius: var(--rr-radius-media);
  color: var(--rr-ink);
}
html.rr-theme .lac-why { color: var(--rr-ink-2); }
html.rr-theme .lac-jump,
html.rr-theme .lac-correction a { color: var(--rr-accent); }
html.rr-theme .lac-label,
html.rr-theme .lac-foot,
html.rr-theme .lac-degraded,
html.rr-theme .lac-line { color: var(--rr-ink-3); }

/* sources: an ink slot whatever the kind — the badge beside it names it */
html.rr-theme .lac-thumbw,
html.rr-theme .lac-thumbw-video,
html.rr-theme .lac-thumbw-podcast,
html.rr-theme .lac-thumbw-doc {
  background: var(--rr-ink);
  color: var(--rr-paper);
  border-radius: var(--rr-radius-media);
}

/* the kind: a paper pill with the type's dot, never a tinted ground */
html.rr-theme .lac-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--rr-rule);
  border-radius: var(--rr-radius-pill);
  background: var(--rr-paper-sunken);
  color: var(--rr-ink-2);
  font-family: var(--rr-font-body);
}
html.rr-theme .lac-badge-video,
html.rr-theme .lac-badge-podcast { background: var(--rr-paper-sunken); color: var(--rr-ink-2); }
html.rr-theme .lac-badge::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--rr-radius-pill);
  background: var(--lac-dot, var(--rr-ink-3));
}
html.rr-theme .lac-badge-video { --lac-dot: var(--color-type-video); }
html.rr-theme .lac-badge-podcast { --lac-dot: var(--color-type-podcast); }

/* follow-ups: outline pills, like the homepage's starters */
html.rr-theme .lac-chip {
  border: 1px solid var(--rr-rule-strong);
  background: transparent;
  color: var(--rr-ink);
  font-family: var(--rr-font-body);
}
html.rr-theme .lac-chip:hover { border-color: var(--rr-ink); background: var(--rr-paper-raised); color: var(--rr-ink); }

/* the inline player: the ink letterbox */
html.rr-theme .lac-inline { background: var(--rr-ink); border-radius: var(--rr-radius-media); }
html.rr-theme .lac-ip-now { color: var(--rr-rule); }

/* ── the follow-up dock (library page) ────────────────────────────── */
html.rr-theme .ldock { background: var(--rr-paper); border-left-color: var(--rr-rule); }
html.rr-theme .ld-msg.a { background: var(--rr-paper-sunken); color: var(--rr-ink); }
html.rr-theme .ld-msg .ld-warn { background: var(--color-warning-light); color: var(--rr-ink); }
html.rr-theme .ld-sugg button { color: var(--rr-ink); border-color: var(--rr-rule-strong); }
html.rr-theme .ld-sugg button:hover { border-color: var(--rr-ink); background: var(--rr-paper-raised); }
html.rr-theme .ld-sugg .sl,
html.rr-theme .ld-disc { color: var(--rr-ink-3); }

/* ── moments band ─────────────────────────────────────────────────── */
html.rr-theme .lam {
  background: var(--rr-paper-raised);
  border: 1px solid var(--rr-rule);
  border-radius: var(--rr-radius-card);
}
html.rr-theme .lam-title {
  background: var(--rr-paper-raised);
  border-bottom-color: var(--rr-rule-soft);
  font-family: var(--rr-font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--rr-ink);
}
html.rr-theme .lam-h { font-family: var(--rr-font-body); letter-spacing: 0.1em; color: var(--rr-ink-2); }
html.rr-theme .lam-total { color: var(--rr-ink-3); }
html.rr-theme .lam-link { border-bottom-color: var(--rr-rule-soft); }
/* the label is "badge + title · 26:14 · Jun 2026" as one text run
   (answer-card.js), so the time cannot take the mono face on its own without
   a markup change; the label keeps the body face with tabular figures */
html.rr-theme .lam-label {
  font-family: var(--rr-font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--rr-accent);
}
html.rr-theme .lam-label .lac-badge { margin-right: 4px; }
html.rr-theme .lam-text { color: var(--rr-ink); }
html.rr-theme .lam-spk { color: var(--rr-ink-3); }

/* ── timestamp chip (the timestop strip under a video result) ─────── */
html.rr-theme .ts-strip { border-top-color: var(--rr-rule-soft); }
html.rr-theme .ts-strip-label { font-family: var(--rr-font-body); letter-spacing: 0.1em; color: var(--rr-ink-2); }
html.rr-theme .ts-chip {
  background: transparent;
  border: 1px solid var(--rr-rule-strong);
  color: var(--rr-ink);
  border-radius: var(--rr-radius-pill);
}
html.rr-theme .ts-chip:hover { background: var(--rr-ink); border-color: var(--rr-ink); color: var(--rr-paper); }
html.rr-theme .ts-chip-time {
  font-family: var(--rr-font-mono);
  font-weight: 500;
  color: var(--rr-accent);
}
html.rr-theme .ts-chip:hover .ts-chip-time { color: var(--rr-highlight); }