/* 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); }

/* ── result signage (PLAN-REDESIGN-SPRINT-2026-10 #11-13, Todd) ─────
   The topic kicker above every result and mention, and the markers that
   tell a full recording from a clip. The kicker is ink, never a type
   colour; the marker takes the mono face like the timestamp chip. */
html.rr-theme .rs-topic {
  font-family: var(--rr-font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rr-ink-2);
}
html.rr-theme a.rs-topic { color: var(--rr-ink-2); }
html.rr-theme a.rs-topic:hover { color: var(--rr-ink); text-decoration: underline; }
/* the dark topic band (Ramy 2026-10-01) in Reading Room ink and paper */
html.rr-theme .search-result > .rs-topic, html.rr-theme .lam-row > .rs-topic,
html.rr-theme .search-result > a.rs-topic, html.rr-theme .lam-row > a.rs-topic {
  background: var(--rr-ink); color: var(--rr-paper);
  font-family: var(--rr-font-display); font-weight: 400; letter-spacing: 0;
}
html.rr-theme .search-result > .rs-topic { border-radius: var(--rr-radius-card) var(--rr-radius-card) var(--rr-radius-none) var(--rr-radius-none); }
html.rr-theme .search-result > a.rs-topic:hover, html.rr-theme .lam-row > a.rs-topic:hover { color: var(--rr-rule-strong); text-decoration: none; }
html.rr-theme .rs-marker {
  font-family: var(--rr-font-mono);
  font-weight: 500;
  background: transparent;
  border-color: var(--rr-rule-strong);
  border-radius: var(--rr-radius-pill);
  color: var(--rr-ink-2);
}
html.rr-theme .rs-marker--clip { background: var(--rr-paper-sunken); border-color: var(--rr-rule); color: var(--rr-ink); }

/* ── "N experts answered your question" (Todd's mockups, design review
   item 8; answer-card.js expertsHtml) ──────────────────────────────
   The search results view only. One row per clip: the expert's face and
   name on the left, what they said in a bubble on the right, the clip's
   own length on its button, and a strip of the whole recording with the
   clip's range marked. Three radii, no side bar, no type colour as text:
   the range is the accent, the strip's track a rule. */
html.rr-theme .lac--experts { padding: 28px 28px 20px; }
html.rr-theme .lax-head { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; }
html.rr-theme .lax-faces { display: inline-flex; flex: none; }
html.rr-theme .lax-faces .lax-face + .lax-face { margin-left: -14px; }
html.rr-theme .lax-h {
  margin: 0;
  font-family: var(--rr-font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  color: var(--rr-ink);
}
html.rr-theme .lax-sub { margin: 6px 0 0; font-family: var(--rr-font-body); font-size: 14px; color: var(--rr-ink-3); }
html.rr-theme .lac--experts .lax-sub { font-family: var(--rr-font-body); font-size: 14px; line-height: 1.45; color: var(--rr-ink-3); }

/* the face: initials under, the photo over them (a broken photo removes itself) */
html.rr-theme .lax-face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--rr-radius-pill);
  background: var(--rr-paper-sunken);
  border: 3px solid var(--rr-paper-raised);
  box-shadow: 0 0 0 1px var(--rr-rule);
  overflow: hidden;
}
html.rr-theme .lax-face--sm { width: 52px; height: 52px; }
html.rr-theme .lax-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.rr-theme .lax-ini { font-family: var(--rr-font-display); font-size: 24px; color: var(--rr-ink-2); }
html.rr-theme .lax-face--sm .lax-ini { font-size: 18px; }

/* the model's summary, folded away */
html.rr-theme .lax-summary {
  margin: 0 0 20px;
  padding: 12px 18px;
  background: var(--rr-paper);
  border: 1px solid var(--rr-rule);
  border-radius: var(--rr-radius-media);
}
html.rr-theme .lax-summary > summary {
  cursor: pointer;
  min-height: 24px;
  font-family: var(--rr-font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--rr-ink);
}
html.rr-theme .lax-summary[open] > summary { margin-bottom: 8px; }
html.rr-theme .lax-summary p { font-size: 17px; }

/* one clip */
html.rr-theme .lax-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
html.rr-theme .lax-clip {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0 20px;
  align-items: start;
  padding: 0;
  border: 0;
}
html.rr-theme .lax--nofaces .lax-clip { grid-template-columns: minmax(0, 1fr); }
html.rr-theme .lax--nofaces .lax-who--none { display: none; }
html.rr-theme .lax-who { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 4px; }
html.rr-theme .lax-face:not(.lax-face--sm) { width: 96px; height: 96px; }
html.rr-theme .lax-name { font-family: var(--rr-font-body); font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--rr-ink); }
html.rr-theme .lax-bubble {
  position: relative;
  padding: 20px 24px 18px;
  background: var(--rr-paper-raised);
  border: 1px solid var(--rr-rule);
  border-radius: var(--rr-radius-card);
}
/* the bubble's tail, pointing at the face */
html.rr-theme .lax-who:not(.lax-who--none) + .lax-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 38px;
  width: 14px;
  height: 14px;
  background: var(--rr-paper-raised);
  box-shadow: -1px 1px 0 var(--rr-rule);
  transform: rotate(45deg);
}
html.rr-theme .lac--experts .lax-said {   /* beats html.rr-theme .lac p */
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rr-rule-soft);
  font-family: var(--rr-font-display);
  font-size: 22px;
  line-height: 1.35;
  color: var(--rr-ink);
  text-wrap: pretty;
}
html.rr-theme .lac--experts .lax-said--why { font-size: 19px; }
/* T1-11 — only the speaker's own words are a speech bubble. A summary and the
   reason a clip was cited (classes the script adds only when the server marks
   the citation) lose the tail; the summary says who it is summarised from and
   the reason is a caption over the recording, with the face in that row. */
html.rr-theme .lax-who:not(.lax-who--none) + .lax-bubble.lax-bubble--summary::before,
html.rr-theme .lax-who + .lax-bubble.lax-bubble--why::before { content: none; }
html.rr-theme .lac--experts .lax-said--summary { margin-bottom: 8px; padding-bottom: 0; border-bottom: 0; }
html.rr-theme .lac--experts .lax-from {
  margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rr-rule-soft);
  font-family: var(--rr-font-body); font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--rr-ink-2);
}
html.rr-theme .lac--experts .lax-whylabel {
  margin: 0 0 4px; font-family: var(--rr-font-body); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--rr-ink-3);
}
html.rr-theme .lac--experts .lax-why {
  margin: 0 0 14px; font-family: var(--rr-font-body); font-size: 15px; line-height: 1.5; color: var(--rr-ink-2); text-wrap: pretty;
}
html.rr-theme .lax-src-who { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
html.rr-theme .lax-src-who .lax-face { width: 28px; height: 28px; }
html.rr-theme .lax-src-who .lax-face .lax-ini { font-size: 12px; }
html.rr-theme .lax-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
html.rr-theme .lax-play,
html.rr-theme .lax-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--rr-tap);
  padding: 0 18px;
  border-radius: var(--rr-radius-pill);
  font-family: var(--rr-font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
html.rr-theme .lax-play { background: var(--rr-ink); color: var(--rr-paper); border: 1px solid var(--rr-ink); }
html.rr-theme .lax-play:hover { background: var(--rr-accent); border-color: var(--rr-accent); color: var(--rr-paper); }
html.rr-theme .lax-read { background: transparent; color: var(--rr-ink); border: 1px solid var(--rr-rule-strong); }
html.rr-theme .lax-read:hover { border-color: var(--rr-ink); }

/* the recording, and where in it the clip was cut */
html.rr-theme .lax-strip {
  position: relative;
  display: block;
  height: 6px;
  margin: 4px 0 12px;
  background: var(--rr-rule-soft);
  border-radius: var(--rr-radius-pill);
}
html.rr-theme .lax-range {
  position: absolute;
  top: -3px;
  bottom: -3px;
  min-width: 8px;
  background: var(--rr-accent);
  border-radius: var(--rr-radius-pill);
}
html.rr-theme .lax-src { display: flex; align-items: center; gap: 12px; }
html.rr-theme .lax-src .lac-thumbw { flex: none; width: 96px; }
html.rr-theme .lax-src-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.rr-theme .lax-kicker { font-family: var(--rr-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rr-ink-2); }
html.rr-theme .lax-title { font-family: var(--rr-font-body); font-size: 14px; color: var(--rr-ink); text-decoration: underline; text-underline-offset: 2px; }
html.rr-theme .lax-meta { font-family: var(--rr-font-body); font-size: 12px; color: var(--rr-ink-3); }
html.rr-theme .lax-clip > .lac-inline { grid-column: 1 / -1; margin-top: 12px; }

@media (max-width: 640px) {
  html.rr-theme .lac--experts { padding: 20px 16px 16px; }
  html.rr-theme .lax-head { align-items: flex-start; gap: 12px; }
  html.rr-theme .lax-clip { grid-template-columns: minmax(0, 1fr); }
  html.rr-theme .lax-who { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 0 10px; text-align: left; }
  html.rr-theme .lax-who--none { display: none; }
  html.rr-theme .lax-face:not(.lax-face--sm) { width: 48px; height: 48px; }
  html.rr-theme .lax-face:not(.lax-face--sm) .lax-ini { font-size: 17px; }
  html.rr-theme .lax-who:not(.lax-who--none) + .lax-bubble::before { left: 18px; top: -8px; box-shadow: -1px -1px 0 var(--rr-rule); }
  html.rr-theme .lax-bubble { padding: 16px; }
  html.rr-theme .lac--experts .lax-said { font-size: 19px; }
  html.rr-theme .lax-src .lac-thumbw { width: 72px; }
}