/* ============================================================
   RAG Security Assessment.
   The MCP cheatsheet design system (mcp-assessment.css) recolored to a
   violet accent, plus RAG-specific components: the animated pipeline,
   the poisoned-document demo, the attack-surface map, the check
   accordion, and the scorecard. Scoped under .rag-shell.
   ============================================================ */

/* ---- accent: reuse the brand --purple token as this sheet's --mint ----
   publications.css re-declares `--mint: #b8c9b1` on `.ryv-editorial .ryv-mcp`
   inside an `@media screen` block. That is the same element as `.rag-shell`
   and a higher specificity, so a bare `.rag-shell{--mint}` lost and the sheet
   rendered sage on screen while every hardcoded rgba(181,159,214,...) border
   in this file stayed violet. Matching that specificity (and loading after
   publications.css) is what actually lands the per-sheet accent. */
.ryv-editorial .rag-shell,
.rag-shell{
  --mint:#b59fd6;            /* primary accent, was green on the MCP sheet */
  --accent-ink:#241b33;      /* dark text on the accent fill */
  --ok:#9fd6b5; --bad:#e0655c; --warn:#d8a373; --info:#8fb2e0;
  /* Type scale. The sheet previously ran 15 distinct sizes below 20px,
     including 11.5 / 12.5 / 13.5 / 14.5, which is what made it read as
     generated rather than designed. These six steps are the only sizes any
     .rag-* component may use, and they line up with the editorial ramp in
     publications.css (13 / 14 / 16 / 18 / 22) that the rest of the page and
     the MCP sheet already speak. */
  --rt-label:13px;   /* labels, meta, captions, fine print, inline code */
  --rt-ui:14px;      /* dense chrome: numerals, tiles */
  --rt-card:15px;    /* card body, list items, secondary copy */
  --rt-body:16px;    /* reading copy */
  --rt-lead:18px;    /* leads, callouts, card headings */
  --rt-sub:22px;     /* panel and group titles */
  /* Ink ladder. Every piece of small text used to resolve to --faint, the
     tertiary rung, so captions, form labels, tags and genuine fine print all
     rendered as the same dim grey. Colour and weight carry more hierarchy than
     size does at 13px, so small text now picks a rung on purpose:
       --muted  primary small text (values, emphasised meta)
       --soft   the default for 13-15px supporting copy
       --faint  reserved for true fine print: source dates, null states,
                "this is an illustration" notes. */
  padding:0 0 40px;
}
.rag-shell ::selection{ background:rgba(181,159,214,0.28); color:#fff; }
.rag-shell .ryv-mcp-chip{ padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(245,243,236,0.03); font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; color:var(--soft); }
.rag-shell .ryv-mcp-chip .d{ display:inline-block; width:5px; height:5px; border-radius:50%; }
.rag-shell .ryv-mcp-hero-stamp{ color:var(--soft); }
.rag-shell .ryv-mcp-btn:hover{ color:var(--accent-ink); }
.rag-shell .ryv-mcp-btn.sm{ padding:8px 13px; font-size:var(--rt-label); border-radius:8px; }
.rag-shell .ryv-mcp-btn.ghost.sm{ font-weight:500; }
.ryv-mcp-skip{ position:fixed; top:-100px; left:20px; z-index:10000; background:#b59fd6; color:#241b33; padding:12px 16px; border-radius:8px; font-family:var(--sans); font-weight:500; }
.ryv-mcp-skip:focus{ top:14px; }

/* ---- shared small helpers ---- */
.rag-shell .rag-h3{ font-size:clamp(24px,2.6vw,30px); letter-spacing:-0.025em; margin:52px 0 0; }
.rag-shell .rag-small{ font-size:var(--rt-label); line-height:1.7; color:var(--soft); }
.rag-shell p{ font-size:var(--rt-body); line-height:1.7; color:var(--muted); margin:20px 0 0; max-width:760px; }
.rag-shell .ryv-mcp-inner > h3 + p, .rag-shell .rag-h3 + p{ margin-top:14px; }
.rag-shell code{ font-family:var(--mono); font-size:var(--rt-label); background:rgba(245,243,236,0.06); border:1px solid var(--line-soft); border-radius:5px; padding:1px 6px; color:var(--cream); }
.rag-shell pre{ margin:20px 0 0; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow-x:auto; }
.rag-shell pre code{ background:none; border:0; padding:0; font-size:var(--rt-label); line-height:1.65; color:var(--muted); white-space:pre; }
/* Prose links only. Never restyle navigational or component anchors (the rail,
   the scorecard rows, the surface links), or they pick up a stray underline and
   the accent tint, which is exactly what made the rail differ from the MCP page. */
.rag-shell p a, .rag-shell .rag-steps a, .rag-shell dd a, .rag-shell figcaption a,
.rag-shell .rag-small a, .rag-shell .rag-callout a, .rag-shell .rag-ref-note a, .rag-shell .rag-related a{
  color:var(--mint); text-decoration:none; border-bottom:1px solid rgba(181,159,214,0.35);
}
.rag-shell p a:hover, .rag-shell .rag-steps a:hover, .rag-shell dd a:hover, .rag-shell figcaption a:hover,
.rag-shell .rag-small a:hover, .rag-shell .rag-callout a:hover, .rag-shell .rag-ref-note a:hover, .rag-shell .rag-related a:hover{
  color:#cbb8e6; border-color:#cbb8e6;
}

/* ---- callouts (mirror .ryv-mcp-plain: subtle full border + tint + dot-tag, no left stripe) ---- */
.rag-callout{ margin:32px 0 0; padding:20px 22px; border:1px solid rgba(181,159,214,0.28); border-radius:14px; background:rgba(181,159,214,0.05); }
.rag-callout .ryv-mcp-label{ display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--mint); }
.rag-callout .ryv-mcp-label::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--mint); }
.rag-callout p{ margin:0; color:var(--cream); font-size:var(--rt-lead); line-height:1.6; letter-spacing:-0.015em; max-width:none; }
.rag-callout--tip{ border-color:rgba(159,214,181,0.28); background:rgba(159,214,181,0.05); }
.rag-callout--tip .ryv-mcp-label, .rag-callout--tip .ryv-mcp-label::before{ color:var(--ok); background-color:var(--ok); }
.rag-callout--tip .ryv-mcp-label{ background:none; }
.rag-callout--tip p{ font-size:var(--rt-body); color:var(--muted); letter-spacing:0; }

/* ---- figures (pipeline + surface framing) ---- */
.rag-figure{ margin:34px 0 4px; }
.rag-figframe{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:26px 24px; }
.rag-figure figcaption{ margin:18px 0 0; text-align:left; font-size:var(--rt-label); line-height:1.7; color:var(--soft); max-width:720px; }
.rag-figure figcaption strong{ color:var(--cream); font-weight:500; }

/* ---- poisoned-document demo ---- */
.rag-demo{ margin:30px 0 0; border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden; }
.rag-demo-toggle{ display:flex; gap:0; border-bottom:1px solid var(--line); }
.rag-demo-toggle button{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 12px; background:transparent; border:0; border-right:1px solid var(--line); color:var(--soft); font-family:var(--sans); font-size:var(--rt-card); font-weight:500; cursor:pointer; transition:background .2s ease, color .2s ease; }
.rag-demo-toggle button:last-child{ border-right:0; }
.rag-demo-toggle button .dot{ width:9px; height:9px; border-radius:50%; background:var(--faint); transition:background .2s ease; }
.rag-demo-toggle button[aria-pressed="true"]{ color:var(--cream); background:rgba(181,159,214,0.08); }
.rag-demo-toggle button[data-demo="clean"][aria-pressed="true"] .dot{ background:var(--ok); }
.rag-demo-toggle button[data-demo="poison"][aria-pressed="true"] .dot{ background:var(--bad); }
.rag-demo-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:0; padding:26px 24px; }
.rag-demo-col{ min-width:0; }
.rag-demo-col > .ryv-mcp-label{ margin-bottom:9px; }
.rag-demo-card{ margin:0; padding:14px 15px; border:1px solid var(--line); border-radius:11px; background:rgba(245,243,236,0.02); font-family:var(--mono); font-size:var(--rt-label); line-height:1.6; color:var(--muted); white-space:pre-wrap; }
.rag-demo-card b{ color:var(--cream); font-weight:500; }
.rag-demo-card.is-bad{ border-color:rgba(224,101,92,0.5); background:rgba(224,101,92,0.06); }
.rag-demo-card.is-bad b{ color:#f0a99f; }
.rag-demo-prompt{ font-family:var(--sans); font-size:var(--rt-card); display:flex; flex-direction:column; gap:8px; }
.rag-demo-line{ display:block; }
.rag-demo-q{ color:var(--soft); }
.rag-demo-ctx{ color:var(--mint); font-family:var(--mono); font-size:var(--rt-label); padding:6px 9px; border:1px dashed rgba(181,159,214,0.4); border-radius:7px; transition:color .25s ease, border-color .25s ease; }
.rag-demo.is-poison .rag-demo-ctx{ color:#f0a99f; border-color:rgba(224,101,92,0.5); }
.rag-demo-out{ font-size:var(--rt-body); color:var(--cream); font-weight:500; }
.rag-demo-out.is-bad{ font-family:var(--mono); font-size:var(--rt-label); color:#f0a99f; }
.rag-demo-verdict{ margin:12px 0 0 !important; font-size:var(--rt-label) !important; line-height:1.5; color:var(--soft) !important; display:flex; flex-direction:column; gap:7px; }
.rag-demo-badge{ align-self:flex-start; font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; padding:5px 11px; border-radius:999px; border:1px solid; }
.rag-demo-badge.is-ok{ color:var(--ok); border-color:rgba(159,214,181,0.4); background:rgba(159,214,181,0.08); }
.rag-demo-badge.is-bad{ color:#f0a99f; border-color:rgba(224,101,92,0.5); background:rgba(224,101,92,0.08); }
.rag-demo-arrow{ position:relative; width:46px; height:2px; background:var(--line); margin:52px 4px 0; align-self:start; }
.rag-demo-arrow::after{ content:""; position:absolute; right:-1px; top:-3px; border-left:6px solid var(--line); border-top:4px solid transparent; border-bottom:4px solid transparent; }
.rag-demo-packet{ position:absolute; top:-4px; left:0; width:10px; height:10px; border-radius:50%; background:var(--mint); opacity:0; }
.rag-demo.is-animating .rag-demo-packet{ animation:rag-demo-move 1.1s ease-in-out; }
.rag-demo.is-poison.is-animating .rag-demo-packet{ background:var(--bad); }
@keyframes rag-demo-move{ 0%{opacity:0;transform:translateX(0)} 15%{opacity:1} 85%{opacity:1} 100%{opacity:0;transform:translateX(42px)} }
.rag-shell .rag-demo-foot{ margin:0 !important; padding:16px 24px; border-top:1px solid var(--line); max-width:none; font-size:var(--rt-label) !important; color:var(--soft) !important; background:rgba(245,243,236,0.015); }

/* ---- four failure cards ---- */
.rag-fourcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:14px; margin:26px 0 0; }
.rag-fourcard{ padding:20px 18px; border:1px solid var(--line); border-radius:14px; background:rgba(245,243,236,0.02); }
.rag-fourcard .n{ font-family:var(--mono); font-size:var(--rt-label); color:var(--mint); }
.rag-fourcard h4{ margin:10px 0 7px; font-size:var(--rt-lead); font-weight:500; color:var(--cream); }
.rag-fourcard p{ margin:0; font-size:var(--rt-card); line-height:1.55; color:var(--soft); }
.rag-fourcard-fail{ display:inline-block; margin-top:14px; font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; color:var(--warn); }

/* ---- attack-surface map ---- */
.rag-surface{ margin:30px 0 0; }
.rag-surface-map{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.rag-surface-lane{ display:inline-flex; align-items:center; font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; color:var(--soft); padding:0 4px; }
.rag-surface-lane--answer{ margin-left:6px; }
.rag-surface-stage{ flex:1 1 180px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:15px 16px; border:1px solid var(--line); border-radius:12px; background:rgba(245,243,236,0.02); color:var(--soft); cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .18s ease; }
.rag-surface-stage b{ color:var(--cream); font-size:var(--rt-body); font-weight:500; letter-spacing:-0.015em; }
.rag-surface-stage small{ font-size:var(--rt-label); color:var(--soft); }
.rag-surface-dot{ width:8px; height:8px; border-radius:50%; background:var(--faint); transition:background .18s ease; }
.rag-surface-stage:hover{ border-color:rgba(181,159,214,0.4); transform:translateY(-2px); }
.rag-surface-stage[aria-pressed="true"]{ border-color:var(--mint); background:rgba(181,159,214,0.08); }
.rag-surface-stage[aria-pressed="true"] .rag-surface-dot{ background:var(--mint); }
.rag-surface-panels{ margin-top:14px; }
.rag-surface-panel{ padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:var(--card); animation:rag-fade .25s ease; }
.rag-surface-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.rag-surface-panel-head h4{ margin:0; font-size:var(--rt-sub); font-weight:500; color:var(--cream); }
.rag-surface-panel p{ margin:12px 0 0; font-size:var(--rt-body); }
.rag-surface-collect{ margin-top:16px; padding:14px 16px; border-radius:11px; background:rgba(245,243,236,0.02); border:1px solid var(--line-soft); }
.rag-surface-collect p{ margin:5px 0 0; font-size:var(--rt-card); color:var(--soft); }
.rag-surface-link{ display:inline-block; margin-top:16px; font-size:var(--rt-card); font-weight:500; color:var(--mint); }
@keyframes rag-fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.rag-map-tag{ font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; color:var(--mint); padding:4px 10px; border:1px solid rgba(181,159,214,0.35); border-radius:999px; white-space:nowrap; }

/* ---- kinds of system ---- */
.rag-kinds{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:24px 0 0; }
.rag-kind{ padding:18px 20px; border:1px solid var(--line); border-radius:13px; background:rgba(245,243,236,0.02); }
.rag-kind h4{ margin:0 0 7px; font-size:var(--rt-lead); font-weight:500; color:var(--cream); }
.rag-kind p{ margin:0; font-size:var(--rt-card); line-height:1.6; color:var(--soft); }

/* ---- two-column panels, ticklist, access ---- */
.rag-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0 0; }
.rag-panel{ padding:22px 24px; border:1px solid var(--line); border-radius:14px; background:rgba(245,243,236,0.02); }
.rag-panel .ryv-mcp-label{ margin-bottom:12px; }
.rag-panel p{ margin:0; }
.rag-ticklist{ margin:0; padding:0; list-style:none; }
.rag-ticklist li{ position:relative; padding:10px 0 10px 26px; font-size:var(--rt-card); line-height:1.55; color:var(--muted); border-top:1px solid var(--line-soft); }
.rag-ticklist li:first-child{ border-top:0; padding-top:0; }
.rag-ticklist li::before{ content:""; position:absolute; left:2px; top:14px; width:9px; height:9px; border-radius:2px; border:1.5px solid var(--mint); }
.rag-ticklist li:first-child::before{ top:5px; }
.rag-access{ margin:0; }
.rag-access > div{ padding:13px 0; border-top:1px solid var(--line-soft); }
.rag-access > div:first-child{ border-top:0; padding-top:0; }
.rag-access dt{ font-size:var(--rt-card); font-weight:500; letter-spacing:0; color:var(--mint); margin-bottom:6px; }
.rag-access dd{ margin:0; font-size:var(--rt-card); line-height:1.6; color:var(--soft); }

/* ---- command + fixtures ---- */
.rag-cmd{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0 0; padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.rag-cmd code{ font-size:var(--rt-card); background:none; border:0; padding:0; color:var(--cream); flex:1 1 auto; }
.rag-fixtures{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0 0; }
.rag-fixtures > .rag-fixture:last-child{ grid-column:1 / -1; }
.rag-fixture{ padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:rgba(245,243,236,0.02); }
.rag-fixture code{ display:inline-block; font-size:var(--rt-label); }
.rag-fixture span{ display:block; margin:10px 0 6px; font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; color:var(--mint); }
.rag-fixture p{ margin:0; font-size:var(--rt-card); line-height:1.55; color:var(--soft); }

/* ---- details disclosure ---- */
.rag-details{ margin:24px 0 0; border:1px solid var(--line); border-radius:13px; background:rgba(245,243,236,0.02); overflow:hidden; }
.rag-details > summary{ list-style:none; cursor:pointer; padding:17px 20px; font-family:var(--sans); font-size:var(--rt-body); font-weight:500; color:var(--cream); display:flex; align-items:center; gap:12px; }
.rag-details > summary::-webkit-details-marker{ display:none; }
.rag-details > summary::before{ content:"+"; font-size:var(--rt-lead); color:var(--mint); width:16px; text-align:center; }
.rag-details[open] > summary::before{ content:"\2013"; }
.rag-details[open] > summary{ border-bottom:1px solid var(--line); }
.rag-details-body{ padding:6px 20px 22px; }
.rag-details-body h4{ margin:20px 0 0; font-size:var(--rt-lead); font-weight:500; color:var(--cream); }
.rag-details-body p{ font-size:var(--rt-body); }

/* ---- worked-exercise walkthrough ---- */
.rag-walk{ margin:22px 0 0; padding:0; list-style:none; counter-reset:none; }
.rag-walk li{ display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line-soft); }
.rag-walk li:first-child{ border-top:0; }
.rag-walk li > div{ font-size:var(--rt-body); line-height:1.65; color:var(--muted); }
.rag-walk li strong{ color:var(--cream); font-weight:500; }
.rag-walk-n{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-family:var(--mono); font-size:var(--rt-ui); color:var(--mint); background:rgba(181,159,214,0.1); border:1px solid rgba(181,159,214,0.3); }

/* ---- runbook filter bar ---- */
.ryv-mcp-filterbar[hidden]{ display:none; }
.rag-filter-row{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:14px; margin:26px 0 0; }
.rag-field{ display:flex; flex-direction:column; gap:6px; }
.rag-field > span{ font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; color:var(--soft); }
.rag-field input, .rag-field textarea, .rag-select{ width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:rgba(245,243,236,0.02); color:var(--cream); font-family:var(--sans); font-size:var(--rt-card); }
.rag-field textarea{ resize:vertical; line-height:1.5; }
.rag-select{ cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23b59fd6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
.rag-field input:focus, .rag-field textarea:focus, .rag-select:focus{ outline:none; border-color:var(--mint); }
.rag-progress-wrap{ margin-top:16px; }
.rag-toolbar{ display:flex; flex-wrap:wrap; gap:9px; margin:16px 0 0; }
.rag-import-btn{ position:relative; overflow:hidden; }
.rag-downloads{ display:flex; flex-wrap:wrap; gap:8px 20px; margin:18px 0 0 !important; font-size:var(--rt-label) !important; }
.rag-downloads a{ font-size:var(--rt-label); font-weight:500; }
#rag-reset-confirm{ margin-top:12px; padding:14px 16px; border:1px solid rgba(224,101,92,0.4); border-radius:11px; background:rgba(224,101,92,0.05); }
#rag-reset-confirm p{ margin:0 0 10px; }
#rag-reset-confirm button{ margin-right:8px; }

/* ---- check groups + accordion ---- */
.rag-checks{ margin:24px 0 0; }
.rag-check-group{ margin-top:40px; }
.rag-check-group:first-child{ margin-top:24px; }
.rag-check-group[hidden]{ display:none; }
.rag-group-head{ display:flex; align-items:flex-start; gap:16px; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.rag-group-num{ flex:0 0 auto; font-family:var(--mono); font-size:var(--rt-ui); color:var(--mint); padding-top:5px; }
.rag-group-head h3{ margin:0; font-size:var(--rt-sub); font-weight:500; color:var(--cream); }
.rag-group-head p{ margin:6px 0 0; font-size:var(--rt-card); line-height:1.55; color:var(--soft); max-width:640px; }

.rag-check{ border-bottom:1px solid var(--line-soft); }
.rag-check[hidden]{ display:none; }
.rag-check-summary{ width:100%; display:flex; align-items:center; gap:14px; padding:16px 12px; margin:0 -12px; width:calc(100% + 24px); border-radius:10px; background:none; border:0; cursor:pointer; text-align:left; color:inherit; transition:background .16s ease; }
.rag-check-summary:hover{ background:rgba(245,243,236,0.035); }
.rag-check[data-open="true"] .rag-check-summary{ background:rgba(245,243,236,0.025); }
.rag-check-id{ flex:0 0 auto; font-family:var(--mono); font-size:var(--rt-label); color:var(--mint); width:62px; }
.rag-check-heading{ flex:1 1 auto; font-size:var(--rt-body); font-weight:500; letter-spacing:-0.015em; color:var(--cream); line-height:1.4; }
.rag-check-tags{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; flex:0 1 auto; min-width:0; }
.rag-check-tags:empty{ display:none; }
.rag-tag{ display:inline-flex; align-items:center; white-space:nowrap; font-size:12px; font-weight:500; line-height:1; letter-spacing:0.01em; padding:5px 9px; border-radius:6px; border:1px solid transparent; background:rgba(245,243,236,0.055); color:var(--soft); }
.rag-tag.is-first{ color:var(--mint); background:rgba(181,159,214,0.11); border-color:rgba(181,159,214,0.3); }
.rag-status-badge{ flex:0 0 auto; font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; padding:4px 11px; border-radius:999px; border:1px solid var(--line); color:var(--faint); }
.rag-status-badge[data-status-value="pass"]{ color:var(--ok); border-color:rgba(159,214,181,0.4); background:rgba(159,214,181,0.07); }
.rag-status-badge[data-status-value="fail"]{ color:var(--bad); border-color:rgba(224,101,92,0.5); background:rgba(224,101,92,0.08); }
.rag-status-badge[data-status-value="blocked"]{ color:var(--warn); border-color:rgba(216,163,115,0.45); background:rgba(216,163,115,0.08); }
.rag-status-badge[data-status-value="na"]{ color:var(--soft); }
.rag-check-icon{ flex:0 0 auto; width:18px; height:18px; color:var(--faint); transition:transform .25s ease, color .18s ease; }
.rag-check-summary:hover .rag-check-icon{ color:var(--mint); }
.rag-check[data-open="true"] .rag-check-icon{ transform:rotate(180deg); color:var(--mint); }
.rag-check-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.rag-check[data-open="true"] .rag-check-wrap{ grid-template-rows:1fr; }
.rag-check-body{ overflow:hidden; min-height:0; }
.rag-check[data-open="true"] .rag-check-body{ padding:4px 4px 26px; }
.rag-check-body .ryv-mcp-detail-lbl{ margin-top:20px; }
.rag-check-body > .ryv-mcp-detail-lbl:first-child{ margin-top:6px; }
.rag-check-body p{ margin:8px 0 0; font-size:var(--rt-body); max-width:none; }
.rag-steps{ margin:8px 0 0; padding-left:22px; }
.rag-steps li{ font-size:var(--rt-body); line-height:1.65; color:var(--muted); margin-top:8px; }
.rag-outcomes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.rag-outcome{ padding:15px 17px; border-radius:12px; border:1px solid var(--line-soft); background:rgba(245,243,236,0.015); }
.rag-outcome .ryv-mcp-detail-lbl{ margin-top:0; display:inline-flex; align-items:center; gap:7px; }
.rag-outcome .ryv-mcp-detail-lbl::before{ content:""; width:6px; height:6px; border-radius:50%; }
.rag-outcome.is-pass .ryv-mcp-detail-lbl{ color:var(--ok); }
.rag-outcome.is-pass .ryv-mcp-detail-lbl::before{ background:var(--ok); }
.rag-outcome.is-fail .ryv-mcp-detail-lbl{ color:var(--warn); }
.rag-outcome.is-fail .ryv-mcp-detail-lbl::before{ background:var(--warn); }
.rag-outcome p{ margin-top:9px; font-size:var(--rt-card); }
.rag-maps{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px !important; }
.rag-maps .ryv-mcp-label{ display:inline; margin-right:4px; }
.rag-maps .rag-small{ margin-left:4px; }
.rag-check-sources{ margin-top:16px !important; font-size:var(--rt-label) !important; }
.rag-check-sources .ryv-mcp-label{ display:block; margin-bottom:6px; }
.rag-record{ margin-top:22px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:rgba(245,243,236,0.02); display:grid; grid-template-columns:220px 1fr; gap:14px 18px; align-items:start; }
.rag-record[hidden]{ display:none; }
.rag-record .rag-field textarea{ min-height:44px; }
.rag-check-link{ grid-column:1 / -1; font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; color:var(--mint); }
.rag-check-link:hover{ color:#cbb8e6; }
.rag-detail-lbl, .ryv-mcp-detail-lbl{ font-size:var(--rt-label); font-weight:500; letter-spacing:0.01em; color:var(--soft); }

/* ---- scorecard ---- */
.rag-score{ margin:30px 0 0; border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden; }
.rag-score-head{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding:20px 24px; border-bottom:1px solid var(--line); }
.rag-score-head .st{ display:inline-flex; align-items:center; gap:8px; font-size:var(--rt-card); color:var(--soft); }
.rag-score-head .st b{ color:var(--cream); font-weight:500; }
.rag-score-head .d{ width:10px; height:10px; border-radius:3px; }
.rag-score-head .d[data-k="pass"]{ background:var(--ok); }
.rag-score-head .d[data-k="fail"]{ background:var(--bad); }
.rag-score-head .d[data-k="blocked"]{ background:var(--warn); }
.rag-score-head .d[data-k="na"]{ background:var(--soft); }
.rag-score-head .d[data-k="not-tested"]{ background:rgba(245,243,236,0.18); }
.rag-score-meter{ flex:1 1 120px; min-width:100px; height:8px; border-radius:5px; background:rgba(245,243,236,0.08); overflow:hidden; }
.rag-score-meter i{ display:block; height:100%; width:0; border-radius:5px; background:linear-gradient(90deg,var(--ok),var(--mint)); transition:width .5s cubic-bezier(.4,0,.2,1); }
.rag-score-rows{ padding:8px 12px 14px; }
.rag-score-row{ display:grid; grid-template-columns:1fr minmax(120px,200px) 54px; align-items:center; gap:18px; padding:12px 12px; border-radius:10px; color:inherit; text-decoration:none; transition:background .15s ease; }
.rag-score-row:hover{ background:rgba(245,243,236,0.03); }
.rag-score-row-name{ display:flex; align-items:center; gap:12px; font-size:var(--rt-body); letter-spacing:-0.015em; color:var(--cream); }
.rag-score-row-num{ font-family:var(--mono); font-size:var(--rt-label); color:var(--faint); }
.rag-score-track{ display:flex; height:8px; border-radius:5px; overflow:hidden; background:rgba(245,243,236,0.09); }
.rag-score-track .seg{ height:100%; width:0; transition:width .45s cubic-bezier(.4,0,.2,1); }
.rag-score-track .seg[data-seg="pass"]{ background:var(--ok); }
.rag-score-track .seg[data-seg="fail"]{ background:var(--bad); }
.rag-score-track .seg[data-seg="blocked"]{ background:var(--warn); }
.rag-score-track .seg[data-seg="na"]{ background:rgba(245,243,236,0.42); }
.rag-score-count{ justify-self:end; font-size:var(--rt-label); color:var(--soft); font-variant-numeric:tabular-nums; letter-spacing:0.01em; }
.rag-score-count b{ color:var(--cream); font-weight:500; }
.rag-score-count .sep{ margin:0 1px; opacity:0.7; }

/* ---- report: evidence ladder + template ---- */
.rag-evidence-flow{ display:flex; align-items:center; flex-wrap:wrap; gap:0; margin:28px 0 0; }
.rag-ev-step{ position:relative; padding:11px 16px; border:1px solid var(--line); border-radius:999px; font-size:var(--rt-card); font-weight:500; letter-spacing:0; color:var(--soft); background:rgba(245,243,236,0.02); opacity:0; transform:translateY(6px); animation:rag-ev-in .5s ease forwards; animation-delay:calc(var(--i) * .12s); }
.ryv-mcp-reveal:not(.in) .rag-ev-step{ opacity:0; animation:none; }
.rag-ev-step:last-child{ color:var(--mint); border-color:rgba(181,159,214,0.4); }
.rag-ev-sep{ width:22px; height:1px; background:var(--line); flex:0 0 auto; }
@keyframes rag-ev-in{ to{opacity:1;transform:none} }
.rag-template{ margin-top:20px; }
.rag-template code{ font-size:var(--rt-label); }

/* ---- reference: glossary + sources ----
   Both used to be flat lists under one heading: 32 stacked term/definition
   pairs, then 22 sources at three stacked lines each in a single full-width
   column, which left most of the row empty and repeated the same publisher
   line nine times. Both are now grouped, each group announces its size, and
   the sources became a two-up card grid so the section reads as two
   deliberate indexes instead of one long scroll. */
.rag-ref-block{ margin-top:56px; }
.rag-ref-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.rag-ref-head h3{ margin:0; font-size:var(--rt-sub); font-weight:500; letter-spacing:-0.02em; color:var(--cream); }
.rag-ref-count{ flex:0 0 auto; font-size:var(--rt-label); letter-spacing:0.01em; color:var(--faint); font-variant-numeric:tabular-nums; }

/* group headers carry the structure the old wall was missing */
.rag-gloss-group, .rag-src-group{ margin-top:34px; }
.rag-gloss-grouptitle, .rag-src-grouphead h4{
  display:flex; align-items:center; gap:10px; margin:0;
  font-size:var(--rt-body); font-weight:500; letter-spacing:-0.015em; color:var(--cream);
}
.rag-gloss-grouptitle .n, .rag-src-grouphead h4 .n{
  font-family:var(--mono); font-size:var(--rt-label); font-weight:400; color:var(--mint);
  padding:2px 8px; border-radius:999px; background:rgba(181,159,214,0.1); border:1px solid rgba(181,159,214,0.24);
}

/* glossary: term over definition, two up, hairline per row for scanning */
.rag-gloss-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin:10px 0 0; }
.rag-gloss{ padding:14px 0; border-top:1px solid var(--line-soft); }
.rag-gloss dt{ font-family:var(--sans); font-size:var(--rt-body); font-weight:500; letter-spacing:-0.015em; color:var(--cream); }
.rag-gloss dd{ margin:6px 0 0; font-size:var(--rt-card); line-height:1.6; color:var(--soft); }

/* the methodology note reads as a preamble to the bibliography, not fine print */
.rag-shell .rag-ref-note{
  margin:18px 0 0; max-width:800px;
  font-size:var(--rt-card); line-height:1.7; color:var(--soft);
}
.rag-src-grouphead p{ margin:6px 0 0; font-size:var(--rt-card); line-height:1.55; color:var(--soft); max-width:640px; }

/* sources: two-up cards. The visible counter was dropped - nothing cited it -
   and the underline moved to hover so 22 links stop reading as one blue wall. */
.rag-src-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0 0; }
.rag-src{
  display:flex; flex-direction:column; padding:16px 18px; border:1px solid var(--line-soft);
  border-radius:12px; background:rgba(245,243,236,0.02); color:inherit; text-decoration:none;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.rag-src:hover{ border-color:rgba(181,159,214,0.4); background:rgba(181,159,214,0.045); transform:translateY(-1px); }
.rag-src-title{
  display:flex; align-items:flex-start; gap:8px; font-size:var(--rt-card); font-weight:500;
  letter-spacing:-0.01em; line-height:1.45; color:var(--cream);
}
.rag-src-title svg{ flex:0 0 auto; width:12px; height:12px; margin-top:4px; color:var(--faint); transition:color .16s ease, transform .16s ease; }
.rag-src:hover .rag-src-title{ color:var(--mint); }
.rag-src:hover .rag-src-title svg{ color:var(--mint); transform:translate(1px,-1px); }
.rag-src-meta{ margin-top:7px; font-size:var(--rt-label); letter-spacing:0.01em; color:var(--faint); }
.rag-src-use{ margin-top:9px; font-size:var(--rt-label); line-height:1.6; color:var(--soft); }

.rag-shell .rag-related{ margin-top:56px !important; padding-top:22px; max-width:none; border-top:1px solid var(--line-soft); font-size:var(--rt-body) !important; color:var(--soft) !important; }

/* ---- OWASP risk-code list inside the "what do the codes mean" disclosure ---- */
.rag-glossary{ margin:0; }
.rag-glossary > div{ padding:10px 0; border-top:1px solid var(--line-soft); }
.rag-glossary > div:first-child{ border-top:0; }
.rag-glossary dt{ font-weight:500; color:var(--cream); font-size:var(--rt-card); }
.rag-glossary dd{ margin:5px 0 0; font-size:var(--rt-card); color:var(--soft); line-height:1.55; }

/* ---- responsive ---- */
@media (max-width:900px){
  .rag-gloss-grid, .rag-src-grid{ grid-template-columns:1fr; }
  .rag-ref-block{ margin-top:44px; }
  .rag-fixtures{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rag-fourcards{ grid-template-columns:repeat(2,1fr); }
  .rag-two, .rag-kinds{ grid-template-columns:1fr; }
  .rag-filter-row{ grid-template-columns:1fr; }
  .rag-demo-flow{ grid-template-columns:1fr; gap:16px; }
  .rag-demo-arrow{ width:2px; height:30px; margin:0 auto; }
  .rag-demo-arrow::after{ right:-3px; top:auto; bottom:-1px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid var(--line); border-bottom:0; }
  .rag-record{ grid-template-columns:1fr; }
  .rag-outcomes{ grid-template-columns:1fr; }
  .rag-score-row{ grid-template-columns:1fr 90px 46px; gap:12px; }
}
@media (max-width:560px){
  .rag-fixtures{ grid-template-columns:1fr; }
  .rag-fourcards{ grid-template-columns:1fr; }
  .rag-surface-stage{ flex-basis:100%; }
  .rag-check-summary{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px 12px;
    grid-template-areas:"id badge icon" "title title title" "tags tags tags";
  }
  .rag-check-id{ grid-area:id; width:auto; }
  .rag-check-heading{ grid-area:title; }
  .rag-check-tags{ grid-area:tags; justify-content:flex-start; }
  .rag-status-badge{ grid-area:badge; justify-self:end; }
  .rag-check-icon{ grid-area:icon; }
}
@media print{
  .rag-check-wrap{ grid-template-rows:1fr !important; }
  .rag-check-body{ overflow:visible !important; }
  .rag-details-body{ display:block !important; }
}

/* ---- rail active state ---- */
.rag-shell .ryv-mcp-rail-item.is-active{ color:var(--cream); }
.rag-shell .ryv-mcp-rail-item.is-active .ryv-mcp-rail-n{ color:var(--mint); }
.rag-shell .ryv-mcp-rail-item.is-active::before,
.rag-shell .ryv-mcp-rail-item[aria-current]::before{ background:var(--mint); }

/* ---- runbook rules grid (brief) ---- */
.rag-shell .ryv-mcp-brief{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:14px; margin:28px 0 0; overflow:hidden; background:rgba(245,243,236,0.02); }
@media (max-width:900px){ .rag-shell .ryv-mcp-brief{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .rag-shell .ryv-mcp-brief{ grid-template-columns:1fr; } }

/* ---- editorial heading tracking (match the tuned Geist treatment, not default web type) ---- */
.rag-shell h3, .rag-shell h4{ letter-spacing:-0.015em; }
.rag-shell .rag-group-head h3, .rag-shell .rag-surface-panel-head h4{ letter-spacing:-0.02em; }