/* ==========================================================================
   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); }
.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; }
}