/* =========================================================
   RAQ.lk service page additions (prototype)
   Builds on ../homepage/styles.css (approved design system).
   No new colours: only the verified tokens defined there.
   ========================================================= */

/* ---------- Page hero ---------- */
.page-hero { background: var(--green-800); color: var(--on-dark); padding: 40px 0 64px; }
.page-hero__grid { display: grid; gap: 40px; }
.page-hero__title { color: #fff; font-weight: 600; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.06; letter-spacing: -0.032em; margin-bottom: 24px; max-width: 16ch; }
.page-hero__lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: #fff; max-width: 56ch; margin-bottom: 16px; }
.page-hero__text { font-size: 17px; color: var(--on-dark-muted); max-width: 58ch; margin-bottom: 32px; }
@media (min-width: 1000px) {
  .page-hero { padding: 56px 0 96px; }
  .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: end; }
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 40px; font-size: 14px; }
.breadcrumb li { color: var(--on-dark-muted); }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--on-dark-line-strong); }
.breadcrumb a { color: var(--on-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: #fff; }
.breadcrumb [aria-current="page"] { color: var(--on-dark-muted); }

/* On-this-page index */
.toc { border-top: 1px solid var(--on-dark-line-strong); padding-top: 20px; }
.toc__label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 4px; }
.toc__list a { display: grid; grid-template-columns: 36px 1fr; padding: 11px 0; border-bottom: 1px solid var(--on-dark-line); color: #fff; text-decoration: none; font-size: 15.5px; font-weight: 500; }
.toc__list a span { color: var(--gold-400); font-size: 13.5px; font-weight: 600; padding-top: 1px; }
.toc__list a:hover { color: var(--gold-400); }
@media (min-width: 1000px) { .toc { border-top: 0; border-left: 1px solid var(--on-dark-line-strong); padding: 0 0 0 32px; } }

/* Current nav item */
.primary-nav__list a[aria-current="true"] { color: var(--green-700); }
@media (min-width: 1024px) { .primary-nav__list a[aria-current="true"]::after { transform: scaleX(1); } }
.footer-col a[aria-current="page"] { color: var(--gold-400); }

/* ---------- Reading text ---------- */
.prose p { max-width: 66ch; }
.prose h3 { font-size: 20px; font-weight: 600; margin: 36px 0 12px; }
.note-line { margin-top: 4px; }

.rule-list { border-top: 1px solid var(--ink-900); }
.rule-list li { position: relative; padding: 16px 0 16px 26px; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink-900); line-height: 1.5; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: 27px; width: 12px; height: 1.5px; background: var(--green-700); }

/* Medical Devices audience: full-width heading, then portrait beside the list. */
.device-audience { display: grid; gap: 28px; }
.device-audience__head { grid-column: 1 / -1; }
.device-audience__head .section-intro__title { margin-bottom: 0; }
.device-audience > .editorial-photo { margin-top: 0; }
.device-audience__body { min-width: 0; }
@media (min-width: 760px) {
  .device-audience { grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); column-gap: 48px; align-items: center; }
}
@media (min-width: 1200px) { .device-audience { column-gap: 64px; } }

/* Claim / review status marker (stays visible in the review view; hidden by "Hide markers") */
.claim-status {
  display: inline-block; margin: 28px 0 0; padding: 3px 10px; font-size: 12.5px; font-weight: 500; line-height: 1.6;
  color: var(--ink-900); background: var(--warm-50); border: 1px dashed var(--green-700); border-radius: 4px;
}
.claim-status::before { content: "⏳ "; }
.claim-status--inline { margin: 0; }
.review-bar .claim-status { color: var(--ink-900); }
html.hide-markers .claim-status { display: none; }

/* ---------- Overview + key dates ---------- */
.overview { display: grid; gap: 48px; }
@media (min-width: 1000px) { .overview { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: start; } }
.facts { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-400); border-radius: var(--radius-sm); padding: 24px 24px 20px; }
@media (min-width: 1000px) { .facts { position: sticky; top: calc(var(--header-h) + 32px); } }
.facts__title { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); font-family: var(--font-body); margin-bottom: 8px; }
.facts__list { margin: 0; }
.facts__list > div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.facts__list dt { font-family: var(--font-head); font-weight: 600; color: var(--green-700); font-size: 15px; }
.facts__list dd { margin: 0; font-size: 15px; color: var(--ink-900); line-height: 1.5; }
.facts__note { font-size: 13.5px; color: var(--ink-500); margin: 14px 0 0; }

/* ---------- Pathways ---------- */
.pathways { display: grid; border-top: 1px solid var(--ink-900); }
.pathway { padding: 28px 0; border-bottom: 1px solid var(--line); }
.pathway__title { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.pathway p { font-size: 16px; max-width: 48ch; }
@media (min-width: 760px) {
  .pathways { grid-template-columns: 1fr 1fr; }
  .pathway:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--line); }
  .pathway:nth-child(even) { padding-left: 40px; }
}
@media (min-width: 1100px) {
  .pathways { grid-template-columns: repeat(3, 1fr); }
  .pathway { padding: 32px 36px 36px !important; border-right: 1px solid var(--line); }
  .pathway:nth-child(3n+1) { padding-left: 0 !important; }
  .pathway:nth-child(3n) { padding-right: 0 !important; border-right: 0; }
  .pathway:nth-child(odd), .pathway:nth-child(even) { border-left: 0; }
}

/* ---------- Document list ---------- */
.doclist { display: grid; border-top: 1px solid var(--ink-900); }
.doclist li { position: relative; padding: 15px 0 15px 34px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-900); line-height: 1.5; }
.doclist li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 14px; height: 14px; border: 1.5px solid var(--green-700); border-radius: 3px; }
@media (min-width: 900px) { .doclist { grid-template-columns: 1fr 1fr; column-gap: 56px; } }

/* ---------- After registration ---------- */
.after { display: grid; gap: 0; border-top: 1px solid var(--ink-900); margin-bottom: 56px; }
.after__item { padding: 28px 0; border-bottom: 1px solid var(--line); }
.after__item h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.after__item p { font-size: 16px; max-width: 52ch; }
@media (min-width: 900px) {
  .after { grid-template-columns: repeat(3, 1fr); }
  .after__item { padding: 32px 32px 32px 0; }
  .after__item + .after__item { padding-left: 32px; border-left: 1px solid var(--line); }
}
.vigilance { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .vigilance { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } }
.vigilance h3 { margin-top: 0; }
.timeline-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 15.5px; }
.timeline-table caption { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); padding-bottom: 10px; }
.timeline-table th { text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink-700); padding: 12px 16px; border-bottom: 1px solid var(--ink-900); }
.timeline-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-900); vertical-align: top; }
.timeline-table td:last-child { font-family: var(--font-head); font-weight: 600; color: var(--green-700); white-space: nowrap; }
.timeline-table tr:last-child td { border-bottom: 0; }

/* ---------- FAQ (native details/summary: keyboard accessible without JavaScript) ---------- */
.faq { border-top: 1px solid var(--ink-900); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0;
  font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--ink-900); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 26px; font-weight: 400; color: var(--green-700); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--green-700); }
.faq details p { padding: 0 44px 22px 0; font-size: 16.5px; max-width: 62ch; }

/* ---------- Sources ---------- */
.sources { padding: 48px 0; background: var(--warm-50); border-top: 1px solid var(--line-soft); }
.sources__title { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); font-family: var(--font-body); margin-bottom: 14px; }
.sources__list { display: grid; gap: 8px 40px; margin-bottom: 20px; }
@media (min-width: 800px) { .sources__list { grid-template-columns: 1fr 1fr; } }
.sources__list a { font-size: 15px; font-weight: 500; }
.sources__meta { font-size: 14px; color: var(--ink-500); margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

/* ---------- Closing call to action ---------- */
.cta-band { background: var(--green-800); color: var(--on-dark-muted); padding: var(--section-y) 0; }
.cta-band__inner { display: grid; gap: 32px; }
.cta-band__title { color: #fff; font-size: clamp(1.875rem, 1.35rem + 2vw, 2.75rem); font-weight: 600; letter-spacing: -0.026em; line-height: 1.12; margin-bottom: 16px; max-width: 20ch; }
.cta-band__text { font-size: 18px; max-width: 54ch; }
.cta-band__note { font-size: 15px; padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--on-dark-line); max-width: 60ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
@media (max-width: 479px) { .cta-band__actions .btn { flex: 1 1 100%; } }
@media (min-width: 1000px) { .cta-band__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: end; } .cta-band__actions { justify-content: flex-end; } }
.cta-band :focus-visible, .page-hero :focus-visible { outline-color: var(--gold-400); }

/* ---------- v2: conditional document groups ---------- */
.docgroups { display: grid; gap: 40px; }
@media (min-width: 900px) { .docgroups { grid-template-columns: 1fr 1fr; gap: 56px; } }
.docgroup__title { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); font-family: var(--font-body); margin-bottom: 12px; }
.doclist--single { grid-template-columns: 1fr !important; }
.step-note { margin: 0 0 40px; font-size: 16px; color: var(--on-dark-muted); max-width: 70ch; }

/* Spacing for source-backed continuing-compliance notes. */
.post-registration-note { margin: 36px 0; }

/* UX F2 (21 Oct 2026): "Back to contents" link at the end of each section on long pages (phones and tablets). */
.toc { scroll-margin-top: 96px; }
.back-to-contents { margin: 32px 0 0; font-size: 15px; }
.back-to-contents a { display: inline-block; padding: 8px 0; min-height: 24px; font-weight: 600; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.section--dark .back-to-contents a { color: var(--gold-400); }
@media (min-width: 1000px) { .back-to-contents { display: none; } }

/* UX F4 (21 Oct 2026): comfortable line length (about 80 characters) for body text. */
.prose p, .prose li { max-width: 40em; }

/* Decision #96 (22 Oct 2026): "At a glance" summary, NMRA route diagram, abbreviations */
.glance-band { padding: 40px 0 0; }
.glance { display: grid; gap: 18px 48px; padding: 28px; background: var(--warm-50); border: 1px solid var(--line); border-top: 3px solid var(--gold-400); border-radius: var(--radius-sm); }
@media (min-width: 1000px) { .glance { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); padding: 32px 36px; } .glance__head { grid-column: 1 / -1; } }
.glance__title { font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.glance__meta { margin-top: 6px; font-size: 14px; color: var(--ink-500); }
.glance__list { list-style: none; padding: 0; margin: 0; }
.glance__list li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; line-height: 1.55; max-width: 60ch; }
.glance__list li:last-child { border-bottom: 0; }
.glance__list strong { font-weight: 600; color: var(--ink-900); }
.glance__label { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-700); margin-bottom: 4px; }
.glance__start ul { list-style: none; padding: 0; margin: 0; }
.glance__start a { display: block; padding: 10px 0; min-height: 24px; font-weight: 600; border-bottom: 1px solid var(--line-soft); text-decoration: none; }
.glance__start a:hover { text-decoration: underline; }

.nmra-flow { margin: 40px 0 0; }
.nmra-flow__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.nmra-flow__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: none; }
@media (min-width: 1000px) { .nmra-flow__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.nmra-flow__steps li { position: relative; display: grid; gap: 4px; padding: 16px 16px 16px 56px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 15.5px; line-height: 1.5; }
@media (min-width: 1000px) { .nmra-flow__steps li { padding: 52px 16px 16px; } }
.nmra-flow__no { position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--green-700); color: #fff; font-weight: 600; font-size: 14px; }
.nmra-flow__steps strong { font-weight: 600; color: var(--ink-900); }
.nmra-flow__note { margin-top: 12px; font-size: 14.5px; color: var(--ink-500); max-width: 70ch; }

abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }

/* Decision #98: no trailing gap when only the (desktop-hidden) back link follows */
.after:has(+ .back-to-contents), .after:last-child { margin-bottom: 0; }