/* Standalone research-paper page styling.
   Theme + prose rules mirror the in-app research reader (index.html
   ".cc-doc-*"), so a standalone page is visually identical to its tab — but the
   content ships in the initial HTML (no opacity:0 streaming animation) so it is
   fully crawlable and readable without JavaScript. */

:root{
  --cyan: #7FE0FF;
  --cyan-bright: #9FF0FF;
  --cyan-dim: rgba(127, 224, 255, 0.4);
  --green: #7FFFB0;
  --bg: #0A0E14;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: #c4ecf9;
  font-family: var(--mono);
  line-height: 1.7;
  padding: clamp(16px, 4vw, 48px);
}

.rp-wrap{ max-width: 1080px; margin: 0 auto; }

/* top bar: wordmark + breadcrumb back to the site */
.rp-topbar{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(20px, 4vh, 40px);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(127,224,255,0.12);
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.12em;
}
.rp-wordmark{ color: var(--cyan-bright); text-decoration: none; font-weight: 500; letter-spacing: 0.2em; text-shadow: 0 0 10px rgba(127,224,255,0.35); }
.rp-wordmark:hover{ color: #fff; }
.rp-crumb{ color: var(--green); opacity: 0.7; }
.rp-topbar a{ color: var(--cyan); text-decoration: none; }
.rp-topbar a:hover{ color: var(--cyan-bright); }

/* ---- prose (copied from index.html .cc-doc-* so pages match the tab) ---- */
.cc-doc-panel{ max-width: 1080px; }
.cc-doc-head{ margin-bottom: clamp(14px, 2.5vh, 26px); }
.cc-doc-title{ font-size: clamp(20px, 2.6vw, 30px); letter-spacing: 0.04em; color: var(--cyan-bright); text-shadow: 0 0 12px rgba(127,224,255,0.4); line-height: 1.22; margin: 0; }
.cc-doc-sub{ margin: 10px 0 0; font-size: clamp(12px, 1.05vw, 15px); letter-spacing: 0.02em; color: var(--green); opacity: 0.9; line-height: 1.55; text-wrap: pretty; }
.cc-doc-dl{ display: inline-block; margin-top: 18px; font-family: var(--mono); font-size: clamp(9px, 0.8vw, 11px); letter-spacing: 0.16em; color: var(--cyan); text-decoration: none; border: 1px solid rgba(127,224,255,0.3); padding: 7px 14px; line-height: 1; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.cc-doc-dl:hover{ background: rgba(127,224,255,0.08); color: var(--cyan-bright); border-color: var(--cyan-bright); }
.cc-doc{ display: flex; flex-direction: column; }
.cc-doc-foot{ margin-top: clamp(24px, 5vh, 44px); padding-top: 14px; border-top: 1px dashed rgba(127,224,255,0.16); font-size: clamp(10px, 0.85vw, 12px); opacity: 0.75; }
.cc-doc-foot a{ color: var(--cyan-bright); text-decoration: none; border-bottom: 1px dotted var(--cyan-dim); }
.cc-doc-foot a:hover{ border-bottom-color: var(--cyan-bright); }

.cc-doc-h{ color: var(--cyan-bright); letter-spacing: 0.06em; line-height: 1.3; text-wrap: balance; }
.cc-doc-h2{ font-size: clamp(14px, 1.5vw, 19px); margin: clamp(20px,3.5vh,32px) 0 10px; padding-top: 14px; border-top: 1px solid rgba(127,224,255,0.12); }
.cc-doc-h3{ font-size: clamp(12px, 1.2vw, 15px); margin: clamp(16px,2.6vh,24px) 0 8px; color: var(--cyan); }
.cc-doc-h4{ font-size: clamp(11px, 1.05vw, 13px); margin: 14px 0 6px; opacity: 0.85; letter-spacing: 0.14em; text-transform: uppercase; }
.cc-doc-p{ font-size: clamp(11px, 0.98vw, 14px); line-height: 1.78; color: #c4ecf9; margin: 0 0 13px; text-wrap: pretty; }
.cc-doc-ul, .cc-doc-ol{ margin: 0 0 14px; padding-left: 28px; }
.cc-doc-ul li, .cc-doc-ol li{ font-size: clamp(11px, 0.95vw, 13px); line-height: 1.7; color: #c4ecf9; margin-bottom: 7px; }
.cc-doc-ul li::marker{ color: var(--cyan); }
.cc-doc-ol li::marker{ color: var(--cyan); }
.cc-doc-code{ font-family: var(--mono); font-size: 0.92em; color: var(--green); background: rgba(127,255,176,0.08); padding: 1px 5px; border-radius: 2px; word-break: break-word; }
.cc-doc-pre{ margin: 0 0 14px; padding: 13px 15px; border: 1px solid var(--cyan-dim); background: rgba(127,255,176,0.03); overflow-x: auto; }
.cc-doc-pre code{ font-family: var(--mono); font-size: clamp(10px, 0.85vw, 12px); line-height: 1.65; color: var(--green); white-space: pre; text-shadow: 0 0 3px rgba(127,255,176,0.25); }
.cc-mermaid{ margin: 0 0 16px; padding: clamp(12px,1.6vw,20px); border: 1px solid var(--cyan-dim); background: rgba(127,224,255,0.025); overflow-x: auto; box-shadow: inset 0 0 16px rgba(127,224,255,0.04); }
.cc-mermaid .mermaid{ display: flex; justify-content: center; min-width: min-content; }
.cc-mermaid .mermaid svg{ max-width: 100%; height: auto; }
.cc-mermaid .mermaid:not([data-processed="true"]){ visibility: hidden; min-height: 48px; }
.cc-doc-quote{ margin: 0 0 14px; padding: 10px 0 10px 16px; border-left: 2px solid var(--cyan-dim); font-style: italic; color: #a9dcea; font-size: clamp(11px, 0.95vw, 13px); line-height: 1.7; }
.cc-doc-hr{ border: none; border-top: 1px dashed rgba(127,224,255,0.16); margin: clamp(16px,3vh,26px) 0; }
.cc-doc a{ color: var(--cyan-bright); text-decoration: none; border-bottom: 1px dotted var(--cyan-dim); word-break: break-word; }
.cc-doc a:hover{ border-bottom-color: var(--cyan-bright); }
.cc-doc-tablewrap{ overflow-x: auto; margin: 0 0 14px; }
.cc-doc-table{ border-collapse: collapse; width: 100%; font-size: clamp(10px, 0.85vw, 12px); }
.cc-doc-table th, .cc-doc-table td{ border: 1px solid rgba(127,224,255,0.16); padding: 7px 10px; text-align: left; vertical-align: top; line-height: 1.55; color: #c4ecf9; }
.cc-doc-table th{ color: var(--cyan-bright); letter-spacing: 0.08em; background: rgba(127,224,255,0.05); font-weight: 500; }

/* ---- /research/ hub index: card grid linking to each paper (additive) ---- */
.rp-index-section{ margin-top: clamp(18px,3vh,30px); }
.rp-index-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.rp-card{ display: flex; flex-direction: column; text-decoration: none; border: 1px solid rgba(127,224,255,0.18); background: rgba(127,224,255,0.025); padding: 16px 18px; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; }
.rp-card:hover{ background: rgba(127,224,255,0.06); border-color: var(--cyan); transform: translateY(-2px); }
.rp-card-title{ margin: 0; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: 0.02em; color: var(--cyan-bright); line-height: 1.32; text-wrap: balance; }
.rp-card-sub{ margin: 8px 0 0; font-size: clamp(10px, 0.9vw, 12px); line-height: 1.6; color: #a9dcea; text-wrap: pretty; }
.rp-card-go{ margin-top: 12px; font-size: clamp(9px,0.78vw,11px); letter-spacing: 0.16em; color: var(--cyan); }
.rp-card:hover .rp-card-go{ color: var(--cyan-bright); }