/* justelesRCP - one small stylesheet, no external fonts, no framework. */
:root {
  --bg: #ffffff;
  --fg: #1a1c20;
  --muted: #5b616e;
  --accent: #0b6bcb;
  --line: #e4e7ec;
  --card: #f7f8fa;
  --maxw: 46rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --fg: #e7e9ee; --muted: #9aa2b1;
    --accent: #6db3ff; --line: #2a2e37; --card: #1c1f26;
  }
}
* { box-sizing: border-box; }
/* Smooth in-page jumps; scroll-padding keeps section titles clear of the
   sticky top bar when navigating from the sidebar table of contents. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- top bar (RCP pages) --- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line);
  /* z-index above the sticky ToC (z-index 5) so the ToC never paints over the
     bar where the two sticky elements overlap as you scroll. */
  position: sticky; top: 0; z-index: 10; background: var(--bg);
}
.brand { font-weight: 700; color: var(--fg); padding: .3rem 0; }
.back { font-size: .9rem; }
/* Roomy tap targets on the top nav for touch. */
.topnav a { margin-left: .3rem; padding: .5rem .55rem; font-size: .9rem; }

/* --- homepage --- */
.home { min-height: 100vh; display: flex; flex-direction: column; }
.hero {
  flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 12vh 1.2rem 2rem; text-align: center;
}
.hero h1 { font-size: 2.6rem; margin: 0 0 .3rem; letter-spacing: -.02em; }
.tag { color: var(--muted); margin: 0 0 2rem; }
.searchbox { position: relative; text-align: left; }
#q {
  width: 100%; padding: .9rem 1.1rem; font-size: 1.1rem;
  border: 1px solid var(--line); border-radius: .7rem;
  background: var(--card); color: var(--fg);
}
#q:focus { outline: 2px solid var(--accent); border-color: transparent; }
.results {
  list-style: none; margin: .4rem 0 0; padding: 0;
  border: 1px solid var(--line); border-radius: .7rem; overflow: hidden;
  display: none; background: var(--bg);
}
.results.open { display: block; }
.results li + li { border-top: 1px solid var(--line); }
.results a { display: block; padding: .65rem 1rem; color: var(--fg); }
.results a:hover, .results a.active { background: var(--card); text-decoration: none; }
.status { color: var(--muted); font-size: .85rem; margin-top: 1.2rem; }
.browse-link { margin-top: 1.6rem; font-size: .95rem; }

/* --- about --- */
.about { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }
.about h1 { font-size: 1.8rem; margin: 0 0 1rem; }
.about h2 { font-size: 1.2rem; margin: 2rem 0 .4rem; }
.about p { margin: .6rem 0; }
.about .ver { margin-top: 2rem; color: var(--muted); font-size: .8rem; opacity: .7; }

/* --- A-Z browse --- */
.browse { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }
.browse h1 { font-size: 1.6rem; margin: 0 0 1rem; }
.azbar { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.8rem; }
.azbar a, .azbar span {
  min-width: 2.4rem; text-align: center; padding: .55rem .35rem;
  border: 1px solid var(--line); border-radius: .4rem; font-weight: 600;
}
.azbar a { color: var(--accent); }
.azbar a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.azbar span.off { color: var(--muted); opacity: .4; }
.letter-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
}
.letter-grid a {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: 1rem .5rem; border: 1px solid var(--line); border-radius: .6rem;
  background: var(--card); color: var(--fg);
}
.letter-grid a:hover { text-decoration: none; border-color: var(--accent); }
.letter-grid b { font-size: 1.4rem; }
.letter-grid span { color: var(--muted); font-size: .8rem; }
.drug-list { list-style: none; margin: 0; padding: 0; }
.drug-list li { border-bottom: 1px solid var(--line); }
.drug-list a { display: block; padding: .55rem .2rem; }

/* --- RCP document + table-of-contents sidebar --- */
/* Single column on phones; a sticky sidebar + centered content on wide screens. */
/* overflow-x: clip (NOT hidden) contains long unbreakable tokens WITHOUT
   creating a scroll container, which would break the sticky .toc inside. */
.rcp-layout { max-width: 100%; padding: 0 1rem; overflow-x: clip; }
.rcp {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5rem .2rem 4rem;
  /* Buggy source pages can carry very long unbreakable tokens; never let them
     widen the reading column past its cap. Tables scroll on their own (below). */
  min-width: 0; overflow-wrap: break-word;
}
@media (min-width: 60rem) {
  .rcp-layout {
    display: grid; gap: 2.5rem; justify-content: center; align-items: start;
    /* Row 1: sidebar + reading column. Row 2: footer under the reading column,
       so it shares the content's exact left/right edges (col 2 = minmax(0,maxw)). */
    grid-template-columns: 15rem minmax(0, var(--maxw));
  }
  .rcp { grid-column: 2; grid-row: 1; padding: 1.5rem 0 4rem; }
  .rcp-layout .toc { grid-column: 1; grid-row: 1; }
  .rcp-layout .foot {
    grid-column: 2; grid-row: 2;
    /* Fill the reading column exactly (defeat the base max-width/margin auto and
       the grid item's fit-content shrink) so edges line up with .rcp above. */
    max-width: none; width: 100%; margin: 0; padding-left: 0; padding-right: 0;
  }
}

/* Table of contents. <details open>: a permanent sidebar on desktop, a
   collapsible "Sommaire" block on phones (tap the summary to fold it away). */
.toc {
  /* Sticky on phones too: sits just under the sticky top bar so, once
     collapsed, it rides along and lets you jump sections without scrolling
     back up. Internal scroll when the (open) list is taller than the screen. */
  position: sticky; top: 3.2rem; z-index: 5;
  max-height: calc(100vh - 3.6rem); overflow-y: auto;
  margin: 1rem 0 0; border: 1px solid var(--line); border-radius: .6rem;
  background: var(--card); padding: .2rem .7rem .6rem;
}
.toc > summary {
  cursor: pointer; font-weight: 700; padding: .7rem .2rem; list-style: none;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::before { content: "\2630\00a0"; opacity: .6; font-weight: 400; }
.toc nav ol { list-style: none; margin: 0; padding: 0; }
.toc nav li a {
  display: block; padding: .55rem .3rem; font-size: .9rem; line-height: 1.3;
  color: var(--fg); border-radius: .3rem;
}
.toc nav li a:hover { background: var(--bg); text-decoration: none; }
.toc .ver {
  margin: .8rem .3rem 0; padding-top: .6rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .7rem; opacity: .7;
}
@media (min-width: 60rem) {
  .toc {
    position: sticky; top: 3.6rem; margin-top: 1.5rem;
    max-height: calc(100vh - 4.5rem); overflow-y: auto;
  }
  /* On desktop the sidebar is a permanent, always-expanded panel. The <details>
     ships without `open` (so phones start collapsed), so here we reveal its
     contents regardless of open state: `display: revert` handles Firefox/Safari
     and older Blink; `::details-content` handles Chrome 131+ (content-visibility). */
  .toc:not([open]) > *:not(summary) { display: revert; }
  .toc::details-content { content-visibility: visible; }
  /* The toggle stays put but reads as a heading, not a control. */
  .toc > summary { cursor: default; }
}

/* Drug/presentation name header at the top of every page (RCP, full /eu/, stub);
   emitted from the {{TITLE}} template slot. Sits above the CIS line + banner. */
.rcp .rcp-title { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .3rem; }
.rcp .cis { color: var(--muted); font-size: .85rem; margin: 0 0 1.5rem; }
/* Freshness banner: ANSM's own revision date (.rcp-primary, the headline) plus
   a small "verified by us" line (.rcp-checked); see app-init.js. ".stale" is
   added client-side when OUR copy (not ANSM's text) is older than a year, which
   surfaces the .rcp-warn notice. */
.rcp-asof {
  margin: 0 0 1.5rem; padding: .5rem .8rem; font-size: .85rem;
  color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: .4rem;
}
.rcp-checked { display: block; margin-top: .3rem; font-size: .9em; opacity: .75; }
.rcp-asof.stale { border-color: #b45309; border-left-color: #b45309; }
.rcp-warn { display: block; margin-top: .5rem; color: #b45309; font-weight: 600; }
/* Link to the authoritative source page (ANSM on /rcp/, EMA on /eu/); shares the
   .official-link button look with the /eu/ stub's EMA button below. */
.rcp-source { margin: -.6rem 0 1.5rem; }
/* External-reference pill row (build.py _ref_links_html): the drug's BDPM record
   plus HAS / EMA / Vidal substance searches. A row of small, vaguely pill-shaped
   buttons under the freshness banner; wraps on narrow screens. */
.rcp-refs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 1.5rem; }
.ref-pill {
  display: inline-block; font-size: .8rem; font-weight: 600;
  padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: var(--card);
}
.ref-pill:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* On-demand refresh control (built by app-init.js when the companion service is
   reachable). Understated so it sits quietly under the freshness banner. */
.rcp-refresh { margin: -0.8rem 0 1.5rem; font-size: .85rem; }
.rcp-refresh button {
  font: inherit; cursor: pointer; color: var(--accent);
  background: transparent; border: 1px solid var(--line);
  border-radius: .4rem; padding: .3rem .7rem;
}
.rcp-refresh button:hover { border-color: var(--accent); }
.rcp-refresh button:disabled { color: var(--muted); cursor: default; opacity: .7; }
.rcp-refresh .msg { color: var(--muted); }
/* Cross-drug backlinks: inline links to other drugs' pages injected into the RCP
   body by build.py (_linkify), and the "Médicaments liés" list at the foot
   (_xref_html). Inline links get a dotted underline so a reader can tell they
   were added by us, not by the ANSM source text. */
.rcp .drug-xref { text-decoration: underline dotted; text-underline-offset: 2px; }
.rcp .drug-xref:hover { text-decoration: underline; }
.drug-xref-list {
  margin: 2.5rem 0 1rem; padding: .6rem .9rem; font-size: .9rem;
  background: var(--card); border: 1px solid var(--line); border-radius: .4rem;
}
.drug-xref-list > summary { cursor: pointer; font-weight: 600; color: var(--fg); }
.drug-xref-list ul { margin: .6rem 0 .3rem; padding-left: 1.2rem; }
.drug-xref-list li { margin: .2rem 0; }
.drug-xref-note { margin: .5rem 0 0; font-size: .8rem; color: var(--muted); }
/* Section titles are sidebar jump targets: keep them clear of the sticky bar. */
.rcp .AmmAnnexeTitre1[id] { scroll-margin-top: 4rem; }
.rcp p { margin: .5rem 0; }
/* ANSM class hooks kept from the source document */
.rcp .AmmAnnexeTitre1 {
  font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .5rem;
  padding-top: .8rem; border-top: 1px solid var(--line);
}
.rcp .AmmAnnexeTitre2 { font-weight: 700; margin: 1.3rem 0 .3rem; }
.rcp .AmmAnnexeTitre3 { font-weight: 600; margin: 1rem 0 .3rem; }
.rcp .AmmDenomination { font-size: 1.25rem; font-weight: 700; }
.rcp table { border-collapse: collapse; width: 100%; overflow-x: auto; display: block; }
.rcp td, .rcp th { border: 1px solid var(--line); padding: .3rem .5rem; }

/* EU-authorization pages (/eu/): a drug whose RCP is published by the EMA, not
   the ANSM, so it has no /rcp/ page here. build_stubs() renders either a
   lightweight stub (.rcp-stub, a pointer out) or, once scrape-ema.py has fetched
   and converted the EMA PDF, a full converted document (.rcp-eu, the same lead +
   the EMA SmPC/notice text). Both are noindex and reachable via search only.
   The name header (h1.rcp-title) comes from the shared template, above. */
.rcp-stub .stub-lead, .rcp-eu .stub-lead {
  padding: .7rem .9rem; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: .4rem;
}
/* Note on a full /eu/ page whose PDF we had to recover from the Internet Archive
   (the live EMA was unreachable at capture time). Warn-tinted, distinct from the
   plain lead. The source button above still points at the real EMA PDF. */
.rcp-eu .rcp-archive-note {
  border-left-color: #b45309; margin-top: .8rem; font-size: .92rem;
}
.rcp-stub .stub-meta, .rcp-eu .stub-meta { color: var(--muted); font-size: .9rem; margin: 1rem 0; }
.rcp-stub .stub-actions { margin: 1.3rem 0; }
.rcp-stub .stub-ema, .rcp-source .official-link {
  display: inline-block; font-weight: 600;
  padding: .5rem .9rem; border: 1px solid var(--accent); border-radius: .4rem;
}
.rcp-stub .stub-ema:hover, .rcp-source .official-link:hover {
  background: var(--accent); color: var(--bg); text-decoration: none;
}
.rcp-stub .stub-generics { margin: 1rem 0; }
.rcp-stub .stub-note { color: var(--muted); font-size: .8rem; margin-top: 2rem; }

/* Full /eu/ page: the converted EMA doc is grouped into collapsible <details>
   blocks (one per ANNEXE / the SmPC / the notice), so the reader gets a handful
   of foldable sections instead of a flat 300-heading wall (ema_pdf.convert). The
   SmPC group is rendered open. Figures embedded from the PDF scale to width. */
.rcp .ema-annexe { margin: 1.5rem 0; border-top: 2px solid var(--line); }
.rcp .ema-annexe > summary {
  cursor: pointer; font-weight: 700; font-size: 1.1rem;
  padding: .7rem 0; color: var(--fg); list-style-position: inside;
}
.rcp .ema-annexe > summary:hover { color: var(--accent); }
.rcp .ema-annexe[id], .rcp .ema-annexe > summary[id] { scroll-margin-top: 4rem; }
.rcp figure { margin: 1rem 0; text-align: center; }
.rcp figure img { max-width: 100%; height: auto; }
/* Two-level sidebar ToC on full /eu/ pages: the annex groups, with the SmPC's
   numbered sections nested under it. */
.toc nav ol ol { padding-left: .9rem; }
.toc nav ol ol a { font-size: .85em; opacity: .85; }

/* --- footer --- */
.foot {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1.2rem 2.5rem;
  color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line);
}
.foot p { margin: 0; }
.foot .ver { margin-top: .4rem; opacity: .6; font-size: .75rem; }