/* Shared ReliaPilot components — product-truthful visuals for the new design.
   Requires css/tokens.css. Link from any page that uses these blocks:
     <link rel="stylesheet" href="/css/agentic.css">
   Every example account or result shown with these components must carry
   an "Illustrative example" label (.rp-illus).

   Components
     .rp-pill            status / product pills
     .rp-trace           run trace: an agent's steps, the pause for a person, the controls passed
     .rp-layers          three layers of authority (nested)
     .rp-acord           certificate cut-out with red / amber / green findings
     .rp-doc             source-document excerpt with highlighted differences
     .rp-core, .rp-features, .rp-feat   Agency Brain core + extensible feature grid
*/

/* ---------- Pills ---------- */
.rp-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--rp-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
  background: var(--rp-violet-soft); color: var(--rp-violet);
}
.rp-pill.pilot  { background: var(--rp-amber-soft); color: var(--rp-amber-ink); }
.rp-pill.record { background: var(--rp-green-soft); color: var(--rp-green-ink); }
.rp-pill.on-dark { background: rgba(124, 58, 237, 0.18); color: #E4DBFF; }
.rp-sublabel { font-family: var(--rp-mono); font-size: 0.7rem; color: var(--rp-muted-l); }
.rp-illus { font-family: var(--rp-mono); font-size: 0.66rem; color: var(--rp-faint-d); }

/* ---------- Run trace ---------- */
.rp-trace {
  background: var(--rp-ink-2); border: 1px solid var(--rp-ink-line); border-radius: 14px;
  font-family: var(--rp-mono); font-size: 0.78rem; color: #C9C7D8;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); text-align: left;
}
.rp-trace-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--rp-ink-line); color: var(--rp-faint-d);
}
.rp-trace-h b { color: var(--rp-text-d); font-weight: 600; }
.rp-trace-h .agent { color: var(--rp-violet-2); }
.rp-steps { list-style: none; margin: 0; padding: 10px 0; }
.rp-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; padding: 9px 18px; align-items: start; }
.rp-step small { display: block; color: var(--rp-faint-d); font-size: 0.7rem; margin-top: 2px; }
.rp-step .t { color: var(--rp-faint-d); font-size: 0.7rem; padding-top: 2px; }
.rp-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; justify-self: center; background: var(--rp-green); }
.rp-step.gap { background: rgba(248, 113, 113, 0.06); }
.rp-step.gap .rp-dot { background: var(--rp-red); }
.rp-step.gap > span:nth-child(2) { color: #FCA5A5; }
.rp-step.wait { background: rgba(245, 184, 65, 0.07); }
.rp-step.wait .rp-dot { background: var(--rp-amber); box-shadow: 0 0 0 4px rgba(245, 184, 65, 0.18); }
.rp-step.wait > span:nth-child(2) { color: var(--rp-amber); }
.rp-trace-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 18px 16px 52px; }
.rp-trace-actions span { font-family: var(--rp-sans); font-weight: 700; font-size: 0.76rem; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--rp-ink-line); color: var(--rp-muted-d); }
.rp-trace-actions span.confirm { background: var(--rp-amber); border-color: var(--rp-amber); color: #1A1405; }
.rp-trace-f { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px; border-top: 1px solid var(--rp-ink-line); font-size: 0.7rem; color: var(--rp-faint-d); }
.rp-trace-f b { color: var(--rp-green); font-weight: 600; }
@media (max-width: 600px) {
  .rp-step { grid-template-columns: 22px minmax(0, 1fr); }
  .rp-step .t { display: none; }
  .rp-trace-actions { padding-left: 18px; }
}

/* ---------- Three layers of authority ---------- */
.rp-layers { font-family: var(--rp-sans); }
.rp-ly { border: 1px solid; border-radius: 14px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.rp-ly .lt { font-family: var(--rp-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.rp-ly .ld { font-size: 0.86rem; color: var(--rp-muted-d); }
.rp-ly.l1 { border-color: #33324A; }
.rp-ly.l1 > .lt { color: #C9C7D8; }
.rp-ly.l2 { border-color: #4C3A86; background: rgba(124, 58, 237, 0.05); margin-top: 6px; }
.rp-ly.l2 > .lt { color: var(--rp-violet-2); }
.rp-ly.l3 { border-color: var(--rp-violet); background: rgba(124, 58, 237, 0.1); margin-top: 6px; }
.rp-ly.l3 > .lt { color: #C4B5FD; }
.rp-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rp-flow span { font-weight: 700; font-size: 0.82rem; padding: 8px 12px; border-radius: 8px; }
.rp-flow .agent  { background: var(--rp-violet); color: #fff; }
.rp-flow .person { background: var(--rp-amber); color: #1A1405; }
.rp-flow .record { background: var(--rp-green); color: #04150F; }
.rp-flow em { font-style: normal; font-family: var(--rp-mono); color: var(--rp-faint-d); }

/* ---------- Certificate cut-out (COI review) ---------- */
.rp-acord { border: 1px solid #3A3854; border-radius: 6px; overflow: hidden; font-family: var(--rp-mono); font-size: 0.72rem; color: #C9C7D8; }
.rp-acord > div { display: grid; grid-template-columns: 1fr 76px 46px; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--rp-ink-line); }
.rp-acord > div:last-child { border-bottom: 0; }
.rp-acord .hd { color: var(--rp-faint-d); font-size: 0.62rem; letter-spacing: 0.08em; }
.rp-acord .ok  { outline: 2px solid rgba(52, 211, 153, 0.6); outline-offset: -2px; }
.rp-acord .ask { outline: 2px solid var(--rp-amber); outline-offset: -2px; background: rgba(245, 184, 65, 0.06); }
.rp-acord .gap { outline: 2px solid var(--rp-red); outline-offset: -2px; background: rgba(248, 113, 113, 0.08); }
.rp-clause { font-family: var(--rp-mono); font-size: 0.68rem; line-height: 1.5; color: var(--rp-faint-d); }
.rp-clause mark { background: rgba(245, 184, 65, 0.22); color: #F5D48A; padding: 0 2px; }

/* ---------- Source-document excerpt (Policy check & comparison) ---------- */
.rp-doc { background: #F4F3EE; color: #2B2A33; border-radius: 6px; padding: 10px 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 0.72rem; line-height: 1.55; display: flex; flex-direction: column; gap: 6px; }
.rp-doc-h { display: flex; justify-content: space-between; gap: 8px; font-family: var(--rp-mono); font-size: 0.6rem; color: #77758A; letter-spacing: 0.04em; border-bottom: 1px solid #DEDCD3; padding-bottom: 5px; }
.rp-doc p { margin: 0; }
.rp-doc mark { background: rgba(245, 184, 65, 0.35); outline: 1.5px solid #E0A21C; border-radius: 2px; padding: 0 2px; color: inherit; }
.rp-doc em { font-style: normal; font-family: var(--rp-mono); font-size: 0.6rem; color: var(--rp-amber-ink); background: var(--rp-amber-soft); border-radius: 3px; padding: 1px 4px; margin-left: 5px; white-space: nowrap; }

/* ---------- Agency Brain core + feature grid ---------- */
.rp-core { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); background: var(--rp-ink); color: var(--rp-text-d); border-radius: 18px; overflow: hidden; }
.rp-core-copy { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.rp-core-copy h3 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.rp-core-copy p { color: var(--rp-muted-d); margin: 0; }
.rp-core-note { font-family: var(--rp-mono); font-size: 0.74rem; color: var(--rp-green) !important; }
.rp-core-vis { background: var(--rp-ink-2); border-left: 1px solid var(--rp-ink-line); padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 12px; font-family: var(--rp-mono); font-size: 0.76rem; color: #C9C7D8; }
.rp-ask { align-self: flex-start; border: 1px solid #3A3854; border-radius: 8px; padding: 8px 11px; font-family: var(--rp-sans); font-size: 0.82rem; color: var(--rp-text-d); }
.rp-answer { border-left: 2px solid var(--rp-violet-2); padding: 2px 0 2px 11px; line-height: 1.55; }
.rp-sources { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-sources span { font-size: 0.62rem; color: var(--rp-faint-d); border: 1px solid var(--rp-ink-line); border-radius: 4px; padding: 2px 6px; }
.rp-rail { height: 28px; margin: 0 12% 24px; border: 2px dashed #C9C5DC; border-top: 0; border-radius: 0 0 10px 10px; position: relative; }
.rp-rail::before { content: ''; position: absolute; left: 50%; top: 0; height: 28px; border-left: 2px dashed #C9C5DC; }

/* Auto-fit grid: a fifth or sixth feature drops in with no layout change */
.rp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.rp-feat { background: var(--rp-white); border: 1px solid var(--rp-paper-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; color: var(--rp-text-l); text-decoration: none; transition: border-color .15s, transform .15s; }
a.rp-feat:hover { border-color: #C4B5FD; transform: translateY(-2px); }
.rp-feat-vis { background: var(--rp-ink); padding: 16px; min-height: 176px; display: flex; flex-direction: column; justify-content: center; gap: 8px; font-family: var(--rp-mono); font-size: 0.66rem; color: #C9C7D8; }
.rp-feat-vis .rp-acord { font-size: 0.66rem; }
.rp-feat-vis .rp-acord > div { grid-template-columns: minmax(0, 1fr) 64px 34px; gap: 6px; padding: 5px 8px; }
.rp-feat-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rp-feat-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-feat-num { font-family: var(--rp-mono); font-size: 0.7rem; font-weight: 600; color: var(--rp-violet); }
.rp-feat-body h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.rp-feat-body p { color: var(--rp-muted-l); font-size: 0.9rem; margin: 0; }
.rp-feat-more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 0.88rem; color: var(--rp-violet); }
.rp-q { border: 1px solid #3A3854; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.rp-q b { font-family: var(--rp-sans); font-size: 0.8rem; color: var(--rp-text-d); font-weight: 600; }
.rp-q .ans { color: var(--rp-violet-2); }
.rp-q .meta { color: var(--rp-faint-d); font-size: 0.6rem; }
.rp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-chips span { font-size: 0.62rem; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--rp-ink-line); }
.rp-chips .fit { color: var(--rp-green); border-color: rgba(52, 211, 153, 0.35); }
.rp-chips .maybe { color: var(--rp-amber); border-color: rgba(245, 184, 65, 0.35); }
.rp-pkg { border: 1px solid #3A3854; border-radius: 6px; overflow: hidden; }
.rp-pkg > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--rp-ink-line); }
.rp-pkg > div:last-child { border-bottom: 0; }
.rp-pkg .ready { color: var(--rp-green); }
.rp-pkg .draft { color: var(--rp-amber); }
.rp-pkg .pending { background: rgba(245, 184, 65, 0.06); }

@media (max-width: 1000px) {
  .rp-core { grid-template-columns: minmax(0, 1fr); }
  .rp-core-vis { border-left: 0; border-top: 1px solid var(--rp-ink-line); }
  .rp-rail { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .rp-step.wait .rp-dot { animation: rp-pulse 1.8s ease-in-out infinite; }
  @keyframes rp-pulse { 50% { box-shadow: 0 0 0 8px rgba(245, 184, 65, 0); } }
}