/* ==========================================================================
   EMXplore Radio Astronomy - student research portal components
   Loaded after radio-astronomy.css. Reuses the global EMXplore tokens
   (style.css): dark header/hero, light content sections, teal/gold accents.
   ========================================================================== */

/* ---- Header: eight portal links need the hamburger earlier than 680px ---- */
.ra-portal-header .wrap { max-width: 1320px; }
.ra-portal-nav { gap: 2px; }
.ra-portal-nav a { padding: 7px 10px; font-size: .85rem; white-space: nowrap; }

@media (max-width: 1180px) {
  .ra-portal-header .ra-portal-header-inner { position: relative; }
  .ra-portal-header .nav-toggle { display: flex; }
  .ra-portal-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(6, 16, 31, .97);
    border-bottom: 1px solid var(--border-dark);
    padding: 10px 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .ra-portal-nav.is-open { display: flex; }
  .ra-portal-nav a { padding: 12px 24px; font-size: .92rem; border-radius: 0; }
}

/* ---- Compact page hero ---- */
.ra-page-hero { padding: 132px 0 56px; }
.ra-page-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 22ch; }
.ra-page-hero .hero-intro { max-width: 64ch; font-size: 1.05rem; line-height: 1.7; }
.ra-hero .hero-intro { color: var(--text-muted); }
@media (max-width: 680px) {
  .ra-page-hero { padding: 118px 0 40px; }
  .ra-page-hero h1, .ra-hero.ra-page-hero h1 { max-width: none; }
  .ra-page-hero .hero-intro, .ra-hero.ra-page-hero p:not(.eyebrow) { max-width: none; }
}

/* ---- Text ---- */
.ra-prose { max-width: 72ch; }
.ra-prose p, .ra-prose li { line-height: 1.75; }
.ra-prose h3 { color: var(--text-dark); margin: 28px 0 8px; }
.ra-lead { font-size: 1.06rem; color: var(--text-body); line-height: 1.75; max-width: 70ch; }
.ra-muted { color: var(--text-dim); font-size: .9rem; }
.ra-portal-section a.ra-inline { color: var(--primary); font-weight: 600; }
.ra-portal-section p a, .ra-portal-section li a, .ra-portal-section dd a, .ra-portal-section figcaption a { color: var(--primary); }

/* ---- Grids and cards ---- */
.ra-grid-2, .ra-grid-3 { display: grid; gap: 18px; }
.ra-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ra-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ra-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 22px; box-shadow: 0 2px 12px rgba(15, 26, 46, .05); min-width: 0; }
.ra-card h3 { color: var(--text-dark); margin-bottom: 8px; font-size: 1.12rem; }
.ra-card p { color: var(--text-body); line-height: 1.65; }
.ra-card ul { margin: 8px 0 0; padding-left: 20px; }
.ra-card li { margin: 5px 0; line-height: 1.55; }

/* ---- Recommended path ---- */
.ra-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ra-steps li { min-width: 0; }
.ra-step { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 20px 18px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.ra-step:hover, .ra-step:focus-visible { border-color: rgba(14, 116, 144, .45); transform: translateY(-2px); outline: none; }
.ra-step-num { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--primary); }
.ra-step strong { color: var(--text-dark); font-size: 1.05rem; }
.ra-step .ra-step-text { color: var(--text-body); font-size: .92rem; line-height: 1.55; }

/* ---- Notes ---- */
.ra-note { border-left: 4px solid var(--primary); background: #fff; border-radius: 0 16px 16px 0; padding: 16px 18px; margin: 18px 0; color: var(--text-body); }
.ra-note strong { color: var(--text-dark); }
.ra-note--caution { border-left-color: var(--gold-dark); background: #fffaf0; }
.ra-note--history { border-left-color: var(--violet); }
.ra-note p { margin: 6px 0 0; line-height: 1.65; }
.ra-note p:first-child { margin-top: 0; }

/* ---- Featured block ---- */
.ra-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; background: #fff; border: 1px solid rgba(14, 116, 144, .28); border-radius: var(--radius-card); padding: 26px; box-shadow: 0 10px 34px rgba(15, 26, 46, .07); }
/* Live data Explorer panels (external PSU fixed-telescope archive) */
.ra-explorer { position: relative; overflow: hidden; border-radius: var(--radius-card); padding: 34px 36px; margin: 22px 0 26px; max-width: 980px; color: var(--text-light);
  border: 1px solid rgba(22, 215, 255, .38); box-shadow: 0 18px 48px rgba(6, 16, 31, .22), 0 0 0 1px rgba(22, 215, 255, .06) inset;
  background: radial-gradient(circle at 12% 0%, rgba(22, 215, 255, .20), transparent 26rem), radial-gradient(circle at 92% 10%, rgba(124, 58, 237, .16), transparent 24rem), linear-gradient(135deg, #06101f, #0b1730 58%, #100d28); }
.ra-explorer-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 14px; font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.ra-explorer-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: rgba(22, 215, 255, .14); border: 1px solid rgba(22, 215, 255, .45); color: var(--cyan); letter-spacing: .06em; }
.ra-explorer-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(22, 215, 255, .22); }
.ra-portal-section .ra-explorer h3 { margin: 0 0 10px; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.15; color: var(--text-light); }
.ra-portal-section .ra-explorer p { margin: 0 0 12px; line-height: 1.7; color: var(--text-muted); max-width: 70ch; }
.ra-portal-section .ra-explorer .ra-explorer-lead { font-size: 1.08rem; color: var(--text-light); }
.ra-portal-section .ra-explorer ul { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; max-width: 760px; }
.ra-portal-section .ra-explorer li { position: relative; padding-left: 22px; line-height: 1.5; color: var(--text-light); font-size: .95rem; }
.ra-explorer li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 2px; background: var(--cyan); }
.ra-portal-section .ra-explorer .ra-explorer-actions { margin: 6px 0 12px; }
.ra-portal-section .ra-explorer .ra-explorer-note { font-size: .86rem; margin: 10px 0 0; color: var(--text-muted); }
.section .ra-explorer .button-primary { background: var(--cyan); color: var(--ink); border-color: var(--cyan); box-shadow: 0 8px 26px rgba(22, 215, 255, .28); padding: 15px 28px; font-size: 1.02rem; white-space: normal; text-align: center; }
.section .ra-explorer .button-primary:hover { background: #3ee0ff; box-shadow: 0 12px 32px rgba(22, 215, 255, .36); }
.ra-explorer--compact { padding: 26px 30px; }
.ra-portal-section .ra-explorer--compact h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.ra-explorer--status { background: linear-gradient(135deg, rgba(14, 116, 144, .08), #fff 60%); color: var(--text-body); border: 1px solid rgba(14, 116, 144, .30); border-left: 5px solid var(--primary); box-shadow: 0 8px 26px rgba(15, 26, 46, .07); padding: 22px 26px; margin: 0 0 18px; }
.ra-explorer--status .ra-explorer-kicker { color: var(--primary); margin-bottom: 10px; }
.ra-explorer--status .ra-explorer-live { background: rgba(14, 116, 144, .10); border-color: rgba(14, 116, 144, .35); color: var(--primary); }
.ra-explorer--status .ra-explorer-live::before { background: var(--primary); box-shadow: 0 0 0 3px rgba(14, 116, 144, .18); }
.ra-portal-section .ra-explorer--status h3 { color: var(--text-dark); font-size: 1.35rem; }
.ra-portal-section .ra-explorer--status p { color: var(--text-body); }
.section .ra-explorer--status .button-primary { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 6px 18px rgba(14, 116, 144, .18); padding: 12px 22px; font-size: .95rem; }
.section .ra-explorer--status .button-primary:hover { background: var(--primary-hover); }
@media (max-width: 680px) {
  .ra-explorer { padding: 24px 20px; margin: 18px 0 22px; }
  .ra-portal-section .ra-explorer ul { grid-template-columns: 1fr; }
  .section .ra-explorer .button-primary { display: flex; width: 100%; justify-content: center; }
}
.ra-feature h3 { color: var(--text-dark); font-size: 1.35rem; margin: 8px 0 10px; }
.ra-feature p { line-height: 1.65; }

/* ---- Small textual labels (used sparingly) ---- */
.ra-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-alt); color: var(--text-body); border: 1px solid var(--border-light); white-space: nowrap; text-decoration: none; }
.ra-chip--current { background: rgba(22, 163, 74, .10); color: #166534; border-color: rgba(22, 163, 74, .28); }
.ra-chip--historical { background: var(--violet-soft); color: #5b21b6; border-color: rgba(124, 58, 237, .22); }
.ra-chip--recommended { background: rgba(14, 116, 144, .10); color: var(--primary); border-color: rgba(14, 116, 144, .30); }
.ra-chip--caution { background: var(--gold-soft); color: #7a4b03; border-color: rgba(214, 158, 46, .35); }
.ra-chips { display: flex; flex-wrap: wrap; gap: 6px; }
a.ra-chip:hover, a.ra-chip:focus-visible { border-color: var(--primary); outline: none; }

/* ---- Processing-level ladder ---- */
.ra-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ra-ladder li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; background: #fff; border: 1px solid var(--border-light); border-radius: 16px; padding: 12px 16px; }
.ra-ladder-level { font-family: var(--mono); font-weight: 800; font-size: 1.05rem; color: var(--primary); padding-top: 1px; }
.ra-ladder-def { color: var(--text-body); font-size: .93rem; line-height: 1.55; }
.ra-ladder-def strong { color: var(--text-dark); }
.ra-ladder .ra-chips { margin-top: 8px; }
.ra-ladder li.is-empty .ra-ladder-level { color: var(--text-dim); }

/* ---- Stage colour (always paired with a text label) ---- */
.ra-stage-acq { --stage: #0891b2; }
.ra-stage-proc { --stage: #7c3aed; }
.ra-stage-sci { --stage: #b7791f; }
.ra-stage-vis { --stage: #64748b; }
.ra-stage-rec { --stage: #0f766e; }
.ra-stage-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .86rem; color: var(--text-body); }
.ra-stage-legend li { display: inline-flex; align-items: center; gap: 7px; }
.ra-stage-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--stage); }

/* ---- Chain of the recommended campaign ---- */
.ra-chainlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ra-chainlist li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 12px; border-radius: 12px; background: var(--surface); border-left: 4px solid var(--stage, var(--primary)); }
.ra-chainlist .ra-lv { font-family: var(--mono); font-weight: 800; color: var(--text-dark); font-size: .85rem; }
.ra-chainlist a { font-weight: 600; text-decoration: none; color: var(--primary); }
.ra-chainlist .ra-kind { display: block; color: var(--text-dim); font-size: .82rem; }

/* ---- Dataset browser ---- */
.ra-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 8px 0 16px; }
.ra-filters label { display: grid; gap: 4px; font-size: .76rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.ra-filters select { font: inherit; font-size: .92rem; text-transform: none; letter-spacing: 0; color: var(--text-dark); padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 12px; background: #fff; min-width: 200px; }
.ra-filter-count { margin-left: auto; color: var(--text-dim); font-size: .9rem; }
.ra-dslist { display: grid; gap: 10px; }
.ra-ds { background: #fff; border: 1px solid var(--border-light); border-left: 5px solid var(--stage, var(--border-light)); border-radius: 16px; scroll-margin-top: 110px; }
.ra-ds[open] { box-shadow: 0 8px 26px rgba(15, 26, 46, .08); }
.ra-ds.is-target { outline: 2px solid var(--primary); outline-offset: 2px; }
.ra-ds summary { cursor: pointer; list-style: none; padding: 14px 18px; display: grid; gap: 6px; }
.ra-ds summary::-webkit-details-marker { display: none; }
.ra-ds summary::after { content: "Details"; justify-self: start; font-size: .78rem; font-weight: 700; color: var(--primary); }
.ra-ds[open] summary::after { content: "Hide details"; }
.ra-ds-top { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.ra-ds-title { color: var(--text-dark); font-weight: 700; line-height: 1.4; }
.ra-ds-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-dim); font-size: .86rem; }
.ra-ds-body { padding: 0 18px 18px; border-top: 1px solid var(--border-light); }
.ra-ds-body dl { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; margin: 14px 0 0; }
.ra-ds-body dt { color: var(--text-dark); font-weight: 700; font-size: .88rem; }
.ra-ds-body dd { margin: 0; color: var(--text-body); font-size: .92rem; line-height: 1.6; }
.ra-ds-body ul { margin: 0; padding-left: 18px; }
.ra-ds-body li { margin: 2px 0; }
.ra-inferred { font-family: var(--mono); font-size: .7rem; color: var(--gold-dark); margin-left: 4px; white-space: nowrap; }

/* ---- Figures ---- */
.ra-fig { margin: 0; }
.ra-fig img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(15, 26, 46, .12); background: #0b0f17; }
.ra-fig figcaption { margin-top: 10px; color: var(--text-body); font-size: .9rem; line-height: 1.6; }
.ra-fig figcaption strong { color: var(--text-dark); }
.ra-fig figcaption .ra-chips { margin-bottom: 6px; }

/* ---- Workflow ---- */
.ra-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: flow; }
.ra-flow-steps > li { position: relative; background: #fff; border: 1px solid var(--border-light); border-radius: 18px; padding: 18px 20px 18px 66px; min-width: 0; }
.ra-flow-steps > li::before { counter-increment: flow; content: counter(flow); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cyan); font-weight: 800; font-size: .85rem; }
.ra-flow-steps h3 { color: var(--text-dark); font-size: 1.08rem; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ra-flow-steps p { margin: 6px 0 0; line-height: 1.65; }
.ra-flow-group { margin: 34px 0 12px; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); }
.ra-flow-group:first-child { margin-top: 0; }

/* ---- Calibration timeline ---- */
.ra-epochs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ra-epoch { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; background: #fff; border: 1px solid var(--border-light); border-radius: 18px; padding: 18px; }
.ra-epoch.is-current { border: 2px solid rgba(22, 163, 74, .55); box-shadow: 0 10px 30px rgba(22, 163, 74, .10); }
.ra-epoch-id { font-family: var(--mono); font-weight: 800; font-size: 1.6rem; color: var(--text-dark); line-height: 1; }
.ra-epoch-id small { display: block; font-size: .72rem; font-weight: 600; color: var(--text-dim); margin-top: 8px; letter-spacing: .02em; line-height: 1.35; }
.ra-epoch h3 { color: var(--text-dark); font-size: 1.08rem; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ra-epoch p { margin: 6px 0 0; line-height: 1.6; }
.ra-eq { font-family: var(--mono); font-size: .86rem; background: var(--surface); border: 1px solid var(--border-light); border-radius: 10px; padding: 6px 10px; display: inline-block; margin-top: 8px; color: var(--text-dark); overflow-wrap: anywhere; }
.ra-params { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.ra-params div { background: #fff; border: 1px solid var(--border-light); border-radius: 16px; padding: 14px 16px; min-width: 0; }
.ra-params dt { color: var(--text-dim); font-size: .82rem; font-weight: 700; }
.ra-params dd { margin: 4px 0 0; color: var(--text-dark); font-size: 1.35rem; font-weight: 700; }
.ra-params dd small { font-size: .8rem; color: var(--text-dim); font-weight: 600; }

/* ---- Chart ---- */
.ra-chart { position: relative; background: #fff; border: 1px solid var(--border-light); border-radius: 18px; padding: 16px 16px 10px; }
.ra-chart h3 { color: var(--text-dark); font-size: 1.02rem; margin-bottom: 4px; }
.ra-chart svg { display: block; width: 100%; height: auto; }
.ra-chart .ra-axis text { fill: #6b7a94; font-size: 12.5px; font-family: var(--sans); }
.ra-chart .ra-grid line { stroke: #e7ebf2; stroke-width: 1; }
.ra-chart .ra-axis-title { fill: #3b4a63; font-size: 13px; font-family: var(--sans); }
.ra-chart .ra-label { fill: #3b4a63; font-size: 12.5px; font-family: var(--sans); }
.ra-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 8px; padding: 0; list-style: none; font-size: .86rem; color: var(--text-body); }
.ra-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ra-key-dot { width: 10px; height: 10px; border-radius: 50%; background: #0891b2; box-shadow: 0 0 0 2px #fff; }
.ra-key-line { width: 20px; height: 2px; border-radius: 2px; background: #b7791f; }
.ra-tooltip { position: absolute; pointer-events: none; background: var(--ink); color: var(--text-light); font-size: .8rem; line-height: 1.45; padding: 8px 10px; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .12s ease; max-width: 230px; z-index: 5; }
.ra-tooltip.is-on { opacity: 1; }
.ra-table-scroll { overflow-x: auto; }
.ra-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
.ra-table th, .ra-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.ra-table th { color: var(--text-dark); background: var(--surface); font-weight: 700; }
.ra-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ra-disclosure { margin-top: 12px; }
.ra-disclosure summary { cursor: pointer; color: var(--primary); font-weight: 700; }
.ra-disclosure[open] summary { margin-bottom: 8px; }

/* ---- Instruments ---- */
.ra-gen-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ra-gen-strip > * { background: #fff; border: 1px solid var(--border-light); border-radius: 18px; padding: 16px 18px; text-decoration: none; color: inherit; min-width: 0; display: grid; gap: 4px; }
.ra-gen-strip strong { color: var(--text-dark); font-size: 1.05rem; }
.ra-gen-strip span { color: var(--text-body); font-size: .9rem; line-height: 1.5; }
.ra-gen-strip .is-active { border: 2px solid rgba(14, 116, 144, .45); }
.ra-instr { display: grid; gap: 18px; }
.ra-instr-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 24px; scroll-margin-top: 100px; }
.ra-instr-card.is-active { border: 2px solid rgba(14, 116, 144, .45); }
.ra-instr-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.ra-instr-head h3 { color: var(--text-dark); font-size: 1.3rem; margin: 0; }
.ra-instr-card > p { line-height: 1.65; }
.ra-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.ra-facts div { background: var(--surface); border: 1px solid var(--border-light); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.ra-facts dt { color: var(--text-dim); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ra-facts dd { margin: 3px 0 0; color: var(--text-dark); font-size: .95rem; overflow-wrap: anywhere; line-height: 1.45; }

/* ---- Research tracks ---- */
.ra-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ra-track { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 22px; min-width: 0; }
.ra-track h3 { color: var(--text-dark); font-size: 1.15rem; margin: 4px 0 8px; }
.ra-track-q { color: var(--text-dark); line-height: 1.6; }
.ra-track dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; margin: 12px 0 0; font-size: .9rem; }
.ra-track dt { color: var(--text-dim); font-weight: 700; }
.ra-track dd { margin: 0; color: var(--text-body); line-height: 1.55; }
.ra-difficulty { font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--gold-dark); letter-spacing: .06em; text-transform: uppercase; }

/* ---- Project log ---- */
.ra-log { list-style: none; margin: 0; padding: 0 0 0 24px; border-left: 2px solid var(--border-light); display: grid; gap: 14px; }
.ra-log li { position: relative; background: #fff; border: 1px solid var(--border-light); border-radius: 16px; padding: 14px 18px; }
.ra-log li::before { content: ""; position: absolute; left: -32px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--log, var(--primary)); box-shadow: 0 0 0 3px var(--surface); }
.ra-log time { font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--text-dim); }
.ra-log h3 { color: var(--text-dark); font-size: 1.02rem; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ra-log p { margin: 4px 0 0; line-height: 1.6; color: var(--text-body); }
.ra-log-type { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.ra-log-observation { --log: #0891b2; }
.ra-log-processing { --log: #7c3aed; }
.ra-log-calibration { --log: #16a34a; }
.ra-log-software { --log: #64748b; }
.ra-log-result { --log: #b7791f; }
.ra-log-key { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0; margin: 0 0 18px; font-size: .86rem; color: var(--text-body); }
.ra-log-key li { display: inline-flex; align-items: center; gap: 7px; }
.ra-log-key li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--log); }

/* ---- Learning-path navigation ---- */
.ra-np { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.ra-np a { display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--border-light); background: #fff; text-decoration: none; min-width: 240px; }
.ra-np a span { font-size: .76rem; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ra-np a strong { color: var(--primary); }
.ra-np a.is-next { margin-left: auto; text-align: right; }
.ra-np a:hover, .ra-np a:focus-visible { border-color: var(--primary); outline: none; }

.ra-noscript { background: #fffaf0; border: 1px solid rgba(214, 158, 46, .35); border-radius: 14px; padding: 12px 16px; color: #7a4b03; }
.ra-render-error { color: #7a4b03; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .ra-grid-3, .ra-steps, .ra-gen-strip, .ra-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-feature, .ra-tracks { grid-template-columns: 1fr; }
  .ra-params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ra-grid-2, .ra-grid-3, .ra-steps, .ra-gen-strip, .ra-facts, .ra-params { grid-template-columns: 1fr; }
  .ra-ds-body dl, .ra-track dl { grid-template-columns: 1fr; gap: 2px; }
  .ra-ds-body dd, .ra-track dd { margin-bottom: 8px; }
  .ra-epoch { grid-template-columns: 1fr; gap: 8px; }
  .ra-filters label { flex: 1 1 100%; }
  .ra-filters select { min-width: 0; width: 100%; }
  .ra-filter-count { margin-left: 0; }
  .ra-np a { min-width: 0; flex: 1 1 100%; }
  .ra-np a.is-next { text-align: left; }
  .ra-feature { padding: 18px; }
  .ra-flow-steps > li { padding: 16px 16px 16px 56px; }
  .ra-flow-steps > li::before { left: 12px; }
  .ra-ladder li { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
}


/* ==========================================================================
   Information-architecture additions: status chips, archive lineage,
   product cards, station hierarchy. Placeholders share the live visual
   language but are dashed and always carry an explicit status word.
   ========================================================================== */

/* Status chips (always paired with text, never colour alone) */
.ra-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; }
.ra-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ra-status--available  { background: rgba(22, 163, 74, .10);  color: #166534; border-color: rgba(22, 163, 74, .28); }
.ra-status--processing { background: var(--gold-soft);        color: #7a4b03; border-color: rgba(214, 158, 46, .35); }
.ra-status--validation { background: rgba(234, 88, 12, .09);  color: #9a3412; border-color: rgba(234, 88, 12, .28); }
.ra-status--planned    { background: var(--violet-soft);      color: #5b21b6; border-color: rgba(124, 58, 237, .24); }
.ra-status--awaiting   { background: rgba(107, 122, 148, .10); color: #475569; border-color: rgba(107, 122, 148, .35); }
.ra-status--awaiting::before, .ra-status--planned::before { background: transparent; border: 1.5px solid currentColor; }
.ra-status--soon       { background: rgba(107, 122, 148, .08); color: var(--text-dim); border-color: rgba(107, 122, 148, .25); }
.ra-status--live       { background: var(--cyan-soft);        color: var(--primary); border-color: rgba(14, 116, 144, .25); }
.ra-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; margin: 14px 0 0; padding: 0; align-items: center; }
.ra-legend li { display: inline-flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--text-body); }

/* Breadcrumb inside page heroes */
.ra-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; margin: 0 0 14px; padding: 0; list-style: none; color: var(--text-muted); }
.ra-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .55; }
.ra-crumbs a { color: var(--text-muted); text-decoration: none; }
.ra-crumbs a:hover, .ra-crumbs a:focus-visible { color: var(--cyan); }

/* Station hierarchy (telescopes + archives hubs) */
.ra-tier { margin: 0 0 34px; }
.ra-tier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-bottom: 14px; }
.ra-tier-head h3 { font-size: 1.25rem; color: var(--text-dark); margin: 0; }
.ra-tier-head p { margin: 0; color: var(--text-body); font-size: .92rem; flex: 1 1 320px; }
.ra-station { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid rgba(15, 26, 46, .16); border-radius: var(--radius-card); padding: 24px 24px 22px; text-decoration: none; color: inherit; box-shadow: 0 6px 22px rgba(15, 26, 46, .08); min-width: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ra-station, .ra-station * { text-decoration: none; }
a.ra-station:hover, a.ra-station:focus-visible { transform: translateY(-4px); border-color: rgba(14, 116, 144, .55); box-shadow: 0 16px 38px rgba(15, 26, 46, .14); outline: none; }
a.ra-station:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.ra-station.is-placeholder { background: rgba(255, 255, 255, .6); border-style: dashed; box-shadow: none; }
.ra-station h3, .ra-station h4 { margin: 0; color: var(--text-dark); font-size: 1.2rem; line-height: 1.25; }
.ra-station p { margin: 0; color: var(--text-body); font-size: .92rem; line-height: 1.6; }
.ra-station .ra-station-kind { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-dark); }
.ra-station .ra-station-meta { font-size: .84rem; color: var(--text-dim); }
.ra-station .ra-station-cta, .ra-station .project-link { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: .88rem; color: var(--primary); }
.ra-station .ra-station-cta::after { content: " \2192"; }
.ra-station--featured { border-left: 5px solid var(--primary); padding: 28px 28px 26px; background: linear-gradient(135deg, rgba(14, 116, 144, .07), #fff 55%); }
.ra-station--featured h3 { font-size: 1.45rem; }
.ra-station--featured p { font-size: 1rem; max-width: 70ch; }
.ra-station-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--mono); font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.ra-tier-label { font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 12px; }

/* Archive: process strip (TXT -> MAT -> ... -> FITS) */
.ra-pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.ra-pipe li { display: flex; align-items: center; gap: 8px; }
.ra-pipe li + li::before { content: "\2192"; color: var(--text-dim); font-weight: 700; }
.ra-pipe span { display: block; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border-light); font-size: .84rem; font-weight: 600; color: var(--text-dark); }
.ra-pipe .is-measured span { border-color: rgba(14, 116, 144, .45); background: rgba(14, 116, 144, .06); }
.ra-pipe .is-later span { border-style: dashed; color: var(--text-body); }
.ra-pipe small { display: block; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
@media (max-width: 680px) {
  .ra-pipe { flex-direction: column; align-items: stretch; }
  .ra-pipe li { flex-direction: column; align-items: stretch; gap: 4px; }
  .ra-pipe li + li::before { content: "\2193"; text-align: center; }
}

/* Archive: vertical lineage ladder with measured / derived marking */
.ra-lineage { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ra-lin { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 0 0 22px; }
.ra-lin:last-child { padding-bottom: 0; }
.ra-lin::before { content: ""; position: absolute; left: 31px; top: 46px; bottom: -2px; width: 2px; background: repeating-linear-gradient(to bottom, rgba(15, 26, 46, .22) 0 6px, transparent 6px 11px); }
.ra-lin:last-child::before { display: none; }
.ra-lin-code { width: 64px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--ink); color: var(--cyan); font-family: var(--mono); font-weight: 800; font-size: .95rem; }
.ra-lin--derived .ra-lin-code { background: #fff; color: var(--text-dark); border: 1.5px dashed rgba(15, 26, 46, .4); }
.ra-lin-body { background: #fff; border: 1px solid var(--border-light); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.ra-lin--measured .ra-lin-body { border-left: 4px solid var(--primary); }
.ra-lin--derived .ra-lin-body { border-left: 4px dashed rgba(124, 58, 237, .55); }
.ra-lin.is-placeholder .ra-lin-body { background: rgba(255, 255, 255, .65); border-style: dashed; }
.ra-lin-body h3 { margin: 0 0 6px; color: var(--text-dark); font-size: 1.05rem; }
.ra-lin-body p { margin: 6px 0 0; color: var(--text-body); font-size: .92rem; line-height: 1.6; }
.ra-lin-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ra-origin { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); }
.ra-origin--measured { background: rgba(14, 116, 144, .10); color: var(--primary); }
.ra-origin--derived { background: var(--violet-soft); color: #5b21b6; }
@media (max-width: 680px) {
  .ra-lin { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .ra-lin-code { width: 48px; height: 40px; font-size: .82rem; }
  .ra-lin::before { left: 23px; top: 40px; }
}

/* Archive: product cards */
.ra-prod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ra-prod { background: #fff; border: 1px solid var(--border-light); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: 0 2px 12px rgba(15, 26, 46, .04); }
.ra-prod.is-placeholder { background: rgba(255, 255, 255, .65); border-style: dashed; box-shadow: none; }
.ra-prod-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ra-prod h3 { margin: 0; font-size: 1.05rem; color: var(--text-dark); flex: 1 1 200px; }
.ra-prod p { margin: 0; color: var(--text-body); font-size: .9rem; line-height: 1.6; }
.ra-prod .ra-prod-note { font-size: .82rem; color: var(--text-dim); }
.ra-formats { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ra-formats li { font-family: var(--mono); font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: var(--surface-alt); color: var(--text-body); border: 1px solid var(--border-light); }
.ra-prod ul.ra-prod-list { margin: 2px 0 0; padding-left: 18px; font-size: .84rem; color: var(--text-body); }
.ra-prod ul.ra-prod-list li { margin: 3px 0; }
.ra-prod summary { cursor: pointer; font-size: .84rem; color: var(--primary); font-weight: 600; }
@media (max-width: 760px) { .ra-prod-grid { grid-template-columns: 1fr; } }

/* Level table (A / P / L vocabularies) */
.ra-leveltable { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border-light); font-size: .88rem; }
.ra-leveltable th, .ra-leveltable td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.ra-leveltable th { background: var(--surface-alt); color: var(--text-dark); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.ra-leveltable td:first-child { font-family: var(--mono); font-weight: 800; color: var(--text-dark); white-space: nowrap; }
.ra-leveltable tr:last-child td { border-bottom: 0; }
.ra-tablewrap { overflow-x: auto; border-radius: 16px; }

/* Three transformations hub */
.ra-xform { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ra-xform a { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 22px; text-decoration: none; color: inherit; box-shadow: 0 2px 12px rgba(15, 26, 46, .05); transition: transform .2s ease, border-color .2s ease; }
.ra-xform a:hover, .ra-xform a:focus-visible { transform: translateY(-4px); border-color: rgba(22, 215, 255, .45); outline: none; }
.ra-xform .ra-xform-num { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--gold-dark); text-transform: uppercase; }
.ra-xform h3 { margin: 0; font-size: 1.12rem; color: var(--text-dark); }
.ra-xform .ra-xform-chain { font-weight: 700; color: var(--primary); font-size: .95rem; }
.ra-xform p { margin: 0; color: var(--text-body); font-size: .9rem; line-height: 1.6; }
@media (max-width: 900px) { .ra-xform { grid-template-columns: 1fr; } }

/* Original vs derived quantity pair */
.ra-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ra-pair > div { background: #fff; border: 1px solid var(--border-light); border-radius: 18px; padding: 16px 18px; }
.ra-pair h3 { margin: 0 0 6px; font-size: 1rem; color: var(--text-dark); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ra-pair p { margin: 0; font-size: .9rem; color: var(--text-body); line-height: 1.6; }
@media (max-width: 680px) { .ra-pair { grid-template-columns: 1fr; } }

/* Placeholder panel for explorers that are not built yet */
.ra-placeholder { border: 1.5px dashed rgba(107, 122, 148, .5); border-radius: 18px; padding: 20px 22px; background: rgba(255, 255, 255, .6); }
.ra-placeholder h3 { margin: 0 0 8px; color: var(--text-dark); font-size: 1.08rem; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ra-placeholder p { margin: 6px 0 0; color: var(--text-body); font-size: .92rem; line-height: 1.65; }


/* Plain reading layouts (no boxes) */
.ra-prose-wrap > h2 { color: var(--text-dark); font-size: 1.5rem; margin: 0 0 10px; }
.ra-prose-wrap > h2 + p, .ra-prose-wrap > p, .ra-prose-wrap > ul, .ra-prose-wrap > ol, .ra-prose-wrap > .ra-eq { max-width: 72ch; }
.ra-prose-wrap > p, .ra-prose-wrap li { line-height: 1.75; color: var(--text-body); }
.ra-prose-wrap > p { margin: 0 0 12px; }
.ra-prose-wrap ul, .ra-prose-wrap ol { padding-left: 22px; margin: 0 0 14px; }
.ra-prose-wrap li { margin: 5px 0; }
.ra-prose-wrap h3 { color: var(--text-dark); font-size: 1.12rem; margin: 22px 0 6px; }
.ra-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; max-width: 980px; }
.ra-cols h3 { margin-top: 6px; }
@media (max-width: 760px) { .ra-cols { grid-template-columns: 1fr; } }
.ra-steplist { counter-reset: s; list-style: none; padding: 0; max-width: 72ch; }
.ra-steplist li { counter-increment: s; position: relative; padding: 4px 0 4px 40px; }
.ra-steplist li::before { content: counter(s); position: absolute; left: 0; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cyan); font-weight: 800; font-size: .8rem; }
.ra-rows { list-style: none; padding: 0 !important; margin: 0 0 18px; max-width: 980px; }
.ra-rows > li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); gap: 4px 24px; padding: 14px 0; margin: 0; border-bottom: 1px solid var(--border-light); }
.ra-rows > li:first-child { border-top: 1px solid var(--border-light); }
.ra-rows strong { color: var(--text-dark); }
.ra-rows .ra-status { margin-left: 8px; vertical-align: middle; }
.ra-rows .ra-row-sub { display: block; font-size: .86rem; color: var(--text-dim); margin-top: 3px; }
@media (max-width: 680px) { .ra-rows > li { grid-template-columns: 1fr; } }
.ra-cta-line { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--border-light); max-width: 72ch; }
.ra-cta-line h2 { margin: 0 0 6px; }

/* Links inside dark panels must stay legible (the generic section-link colour is for light backgrounds) */
.ra-portal-section .ra-dark-panel p a, .ra-portal-section .ra-dark-panel a.project-link { color: var(--cyan); }