/* ============================================================
   Astra Origins — Repository (The Cosmic Library) · page styles
   Shared shell lives in cosmos.css. Loaded globally in master so
   right-pane swaps stay styled.
   ============================================================ */

/* ── Library hero ─────────────────────────────────────── */
.rp-hero { position: relative; overflow: hidden; border-radius: 14px; padding: 26px 24px; margin-bottom: 16px; color: white;
  background: radial-gradient(ellipse at 80% 20%, oklch(0.4 0.16 270 / 0.8), transparent 55%), radial-gradient(ellipse at 15% 90%, oklch(0.4 0.14 220 / 0.7), transparent 55%), linear-gradient(135deg, oklch(0.16 0.06 265), oklch(0.08 0.03 250)); }
.rp-hero-stars { position: absolute; inset: 0; opacity: 0.55;
  background-image: radial-gradient(1px 1px at 10% 24%, white 50%, transparent 51%), radial-gradient(1.5px 1.5px at 28% 60%, white 50%, transparent 51%), radial-gradient(1px 1px at 46% 30%, white 50%, transparent 51%), radial-gradient(2px 2px at 66% 56%, white 50%, transparent 51%), radial-gradient(1px 1px at 82% 26%, white 50%, transparent 51%), radial-gradient(1.5px 1.5px at 92% 70%, white 50%, transparent 51%); }
.rp-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(oklch(0.7 0.05 250 / 0.08) 1px, transparent 1px), linear-gradient(90deg, oklch(0.7 0.05 250 / 0.08) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at 70% 50%, black, transparent 75%); }
.rp-hero-body { position: relative; z-index: 1; }
.rp-hero-eye { font-size: 9px; letter-spacing: 0.22em; font-weight: 800; color: oklch(0.8 0.06 250); }
.rp-hero-title { font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin: 8px 0 6px; }
.rp-hero-sub { font-size: 13px; line-height: 1.55; opacity: 0.85; margin: 0 0 16px; max-width: 62ch; }
.rp-hero-search { display: flex; align-items: center; gap: 10px; background: oklch(0.98 0.005 250 / 0.12); border: 1px solid oklch(0.98 0.005 250 / 0.25); border-radius: 10px; padding: 10px 14px; max-width: 520px; backdrop-filter: blur(8px); }
.rp-hero-search .bi { color: oklch(0.85 0.04 250); }
.rp-hero-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: white; font-size: 13px; }
.rp-hero-search input::placeholder { color: oklch(0.78 0.03 250 / 0.8); }
.rp-hero-search kbd { font-size: 10px; padding: 3px 6px; border-radius: 5px; background: oklch(0.98 0.005 250 / 0.18); color: oklch(0.9 0.02 250); }

/* ── Section header strip ─────────────────────────────── */
.rp-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.rp-sh-h { font-size: 15px; font-weight: 800; letter-spacing: -0.005em; }
.rp-sh-meta { font-size: 9px; color: var(--ink-3); letter-spacing: 0.14em; font-weight: 700; }

/* ── Catalogue shelf cards ────────────────────────────── */
.rp-shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rp-card { display: grid; grid-template-columns: 48px 1fr 16px; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; position: relative; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.rp-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity 0.15s; }
.rp-card:hover { border-color: var(--accent-line); transform: translateX(2px); box-shadow: 0 10px 24px oklch(0 0 0 / 0.08); }
.rp-card:hover::before { opacity: 1; }
.rp-card-ic { width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center; color: white; font-size: 20px; }
.rp-card-title { font-size: 14px; font-weight: 800; letter-spacing: -0.005em; }
.rp-card-sum { font-size: 11px; color: var(--ink-2); line-height: 1.5; margin: 3px 0 6px; }
.rp-card-meta { font-size: 8px; color: var(--ink-3); letter-spacing: 0.12em; font-weight: 700; }
.rp-card-chev { color: var(--ink-3); }

/* ── Featured fact sheets (static) ────────────────────── */
.rp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rp-fact { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.rp-fact:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 12px 28px oklch(0 0 0 / 0.08); }
.rp-fact-orb { height: 84px; position: relative; }
.rp-fact-media { height: 84px; position: relative; overflow: hidden; background: var(--surface-2); }
.rp-fact-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-fact-orb::after { content: ""; position: absolute; inset: 0; opacity: 0.5; background-image: radial-gradient(1px 1px at 20% 40%, white 50%, transparent 51%), radial-gradient(1px 1px at 70% 30%, white 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 65%, white 50%, transparent 51%); }
.rp-fact-body { padding: 12px 14px 14px; }
.rp-fact-cat { font-size: 8px; color: var(--accent); letter-spacing: 0.16em; font-weight: 800; }
.rp-fact-title { font-size: 16px; font-weight: 800; margin: 4px 0 10px; }
.rp-fact-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.rp-fact-rows li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.rp-fact-rows li:last-child { border-bottom: none; }
.rp-fr-k { font-size: 9px; color: var(--ink-3); letter-spacing: 0.1em; font-weight: 700; }
.rp-fr-v { font-size: 11px; color: var(--ink); font-weight: 600; text-align: right; }

/* Featured fact sheets — horizontal slider (5 default, load more on scroll) */
.rp-facts-slider { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rp-facts-slider::-webkit-scrollbar { height: 8px; }
.rp-facts-slider::-webkit-scrollbar-track { background: transparent; }
.rp-facts-slider::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.rp-facts-slider::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.rp-facts-track { display: flex; gap: 12px; align-items: stretch; }
.rp-facts-track .rp-fact { flex: 0 0 282px; max-width: 282px; scroll-snap-align: start; display: flex; flex-direction: column; }
.rp-facts-track .rp-fact-body { display: flex; flex-direction: column; flex: 1; }
.rp-facts-track .rp-fact-rows { margin-bottom: 4px; }
.rp-fact-more { margin-top: 12px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); text-decoration: none; transition: gap 0.15s; }
.rp-fact-more:hover { gap: 9px; }
.rp-fact-spin { flex: 0 0 64px; display: grid; place-items: center; }
@media (max-width: 768px) { .rp-facts-track .rp-fact { flex-basis: 80%; max-width: 80%; } }

/* ── Timeline (static) ────────────────────────────────── */
.rp-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.rp-timeline::before { content: ""; position: absolute; left: 46px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.rp-timeline li { display: grid; grid-template-columns: 40px 16px 1fr; align-items: start; gap: 10px; padding: 8px 0; position: relative; }
.rp-tl-year { font-size: 11px; font-weight: 800; color: var(--accent); text-align: right; padding-top: 2px; }
.rp-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); margin: 3px auto 0; z-index: 1; }
.rp-tl-title { font-size: 13px; font-weight: 700; }
.rp-tl-desc { font-size: 11px; color: var(--ink-2); margin-top: 2px; }

/* ── Breadcrumb path + back arrow ─────────────────────── */
.rp-path-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.rp-back { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink-2); cursor: pointer; flex-shrink: 0; }
.rp-back:hover { border-color: var(--accent-line); color: var(--accent); }
.rp-path { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 10px; letter-spacing: 0.06em; min-width: 0; }
.rp-path-sep { font-size: 9px; color: var(--ink-3); }
.rp-path-link { color: var(--ink-3); text-decoration: none; font-weight: 700; }
.rp-path-link:hover { color: var(--accent); }
.rp-path-cur { color: var(--ink); font-weight: 800; }

/* ── Category header ──────────────────────────────────── */
.rp-cat-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 6px; }
.rp-cat-ic { width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; color: white; font-size: 24px; flex-shrink: 0; }
.rp-cat-eye { font-size: 9px; letter-spacing: 0.18em; font-weight: 800; color: var(--ink-3); }
.rp-cat-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 5px 0 0; }
.rp-cat-sum { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 6px 0 0; max-width: 70ch; }

/* ── Entry grid + cards ───────────────────────────────── */
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .rp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .rp-grid { grid-template-columns: 1fr; } }
.rp-bcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.rp-bcard:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 14px 28px oklch(0 0 0 / 0.1); }
.rp-bcard-img { position: relative; height: 130px; overflow: hidden; display: grid; place-items: center; }
.rp-bcard-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.rp-bcard-ph { font-size: 30px; color: oklch(1 0 0 / 0.55); z-index: 0; }
.rp-bcard-body { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.rp-bcard-title { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-bcard-sum { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rp-bcard-link { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--accent); }

/* ── Article (blog detail) ────────────────────────────── */
.rp-article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 6px; }
.rp-article-media { position: relative; width: 100%; height: clamp(320px, 46vh, 540px); overflow: hidden; display: grid; place-items: center; }
.rp-article-media.is-empty { height: clamp(220px, 30vh, 320px); }
.rp-article-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.rp-article-ph { font-size: 46px; color: oklch(1 0 0 / 0.5); z-index: 0; }
/* Fullscreen control overlaid top-right inside the image */
.rp-article-controls { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; gap: 8px; }
.rp-stage-ctl { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid oklch(1 0 0 / 0.18); background: oklch(0.12 0.02 250 / 0.55); backdrop-filter: blur(8px); color: #fff; font-size: 15px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.rp-stage-ctl:hover { background: oklch(0.12 0.02 250 / 0.8); border-color: oklch(1 0 0 / 0.4); transform: translateY(-1px); }
.rp-jump-row { display: flex; justify-content: flex-end; padding: 14px 24px 0; }
.rp-jump-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 9px 16px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; cursor: pointer; transition: background 0.15s; }
.rp-jump-btn:hover { background: oklch(from var(--accent) calc(l - 0.05) c h); }
.rp-jump-arrow { font-size: 13px; animation: rp-bounce 1.4s ease-in-out infinite; }
.rp-jump-btn:hover .rp-jump-arrow { animation-duration: 0.8s; }
@keyframes rp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .rp-jump-arrow { animation: none; } }
.rp-article-head { padding: 20px 24px 0; }
.rp-article-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rp-article-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.rp-share-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--ink-2); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.rp-share-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.rp-article-meta { font-size: 9px; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 8px; }
.rp-article-cap { font-size: 11px; color: var(--ink-3); font-style: italic; margin-top: 8px; }
.rp-article-body { padding: 16px 24px 24px; font-size: 14px; line-height: 1.8; color: var(--ink); overflow-wrap: anywhere; }
.rp-article-body p { margin: 0 0 14px; }
.rp-article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.rp-article-body ul, .rp-article-body ol { padding-left: 20px; margin: 0 0 14px; }
.rp-article-body a { color: var(--accent); }
/* Uploaded full-document HTML body — rendered isolated in an iframe so it keeps
   its own head styles/fonts and can't leak into the app. */
.rp-article-body--frame { position: relative; padding: 8px 24px 24px; min-height: 420px; }
.rp-article-frame { display: block; width: 100%; border: 0; background: #fff; border-radius: 12px; opacity: 0; transition: opacity 0.3s ease; }
/* Revealed once the iframe has loaded + been sized. */
.rp-article-body--frame.is-ready { min-height: 0; }
.rp-article-body--frame.is-ready .rp-article-frame { opacity: 1; }
.rp-article-body--frame.is-ready .rp-frame-skeleton { display: none; }

/* Animated placeholder shown while the iframe loads. */
.rp-frame-skeleton { position: absolute; inset: 8px 24px 24px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border-radius: 12px; overflow: hidden; }
.rp-frame-skeleton .rp-sk-line { height: 13px; border-radius: 7px; }
.rp-frame-skeleton .rp-sk-block { height: 220px; border-radius: 12px; margin: 4px 0; }
.rp-sk-glow { background: linear-gradient(100deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%); background-size: 200% 100%; animation: rp-shimmer 1.3s ease-in-out infinite; }
@keyframes rp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (max-width: 768px) {
  .rp-article-body--frame { padding: 8px 16px 18px; }
  .rp-frame-skeleton { inset: 8px 16px 18px; }
}
/* Fact sheet panel inside the blog detail */
.rp-factpanel { margin: 0 24px 22px; padding: 2px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.rp-factpanel-head { display: flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: 0.14em; color: var(--ink-3); font-weight: 700; padding: 14px 0 2px; }
.rp-factpanel-head .bi { font-size: 12px; color: var(--accent); }
.rp-factpanel-rows { list-style: none; padding: 0; margin: 0; }
.rp-factpanel-rows li { padding: 11px 0; }
@media (max-width: 768px) { .rp-factpanel { margin: 0 16px 18px; } }
.rp-article-body h2, .rp-article-body h3 { font-weight: 800; letter-spacing: -0.01em; margin: 18px 0 8px; }

/* ── Empty / loader / skeleton ────────────────────────── */
.rp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 16px; color: var(--ink-3); font-size: 11px; letter-spacing: 0.1em; }
.rp-empty .bi { font-size: 28px; opacity: 0.5; }
.rp-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; color: var(--ink-3); font-size: 10px; letter-spacing: 0.12em; }
.rp-loader[hidden] { display: none; }
.rp-loader-spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rp-rot 0.7s linear infinite; }
@keyframes rp-rot { to { transform: rotate(360deg); } }
.rp-sentinel { height: 1px; }

/* Distinct loader for in-repository navigation (category / blog) — restyles
   the cosmos pane loader into a simple centered spinner, like the events
   detail page. Keyed on `.rp-context` (set by repository.js while a repository
   view is on screen), so the main section keeps the default cosmos orb. */
.t-right.rp-context > .t-pane-loader .t-pane-loader-orb { display: none; }
.t-right.rp-context > .t-pane-loader .t-pane-loader-inner::before {
  content: ""; width: 32px; height: 32px; margin: 0 auto 14px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: rp-rot 0.7s linear infinite;
}
.t-right.rp-context > .t-pane-loader .t-pane-loader-text { color: var(--ink-3); letter-spacing: 0.16em; }
.rp-sk { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; animation: rp-pulse 1.4s ease-in-out infinite; }
.rp-sk-img { height: 130px; background: var(--surface-2); }
.rp-sk-body { padding: 13px 15px; }
.rp-sk-line { height: 11px; border-radius: 5px; background: var(--surface-2); margin-bottom: 9px; }
.rp-sk-line.w40 { width: 40%; } .rp-sk-line.w60 { width: 60%; } .rp-sk-line.w80 { width: 80%; }
@keyframes rp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) { .rp-facts { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .rp-shelf { grid-template-columns: 1fr; } .rp-hero-title { font-size: 21px; } .rp-cat-title { font-size: 20px; } .rp-article-title { font-size: 21px; } }