/* ============================================================
   The Packaging EPR Library — site-wide styles
   Carries the landing page's design tokens onto every article,
   so typography, colour and surfaces are consistent throughout.
   Landing-page elements (.hero-h, .sec-h, .lp) are excluded from
   article rules, since index.md ships its own scoped stylesheet.
   ============================================================ */

/* ---------- design tokens ---------- */
:root,
[data-md-color-scheme="default"] {
  --su:#fcfcfb;          /* raised surface */
  --pg:#f6f6f4;          /* page ground   */
  --ink:#0b0b0b;
  --ink2:#52514e;
  --muted:#898781;
  --line:#e6e5df;
  --blue:#2a78d6;
  --deep:#184f95;

  --md-default-bg-color:#fcfcfb;
  --md-default-fg-color:#0b0b0b;
  --md-default-fg-color--light:#52514e;
  --md-default-fg-color--lighter:#898781;
  --md-typeset-color:#25241f;
  --md-typeset-a-color:#2a78d6;
  --md-accent-fg-color:#184f95;
  --md-code-bg-color:#f2f1ec;
  --md-code-fg-color:#2f2e29;
}

[data-md-color-scheme="slate"] {
  --su:#1a1a19;
  --pg:#141413;
  --ink:#ffffff;
  --ink2:#c3c2b7;
  --muted:#898781;
  --line:#2c2c2a;
  --blue:#5598e7;
  --deep:#9ec5f4;

  --md-default-bg-color:#141413;
  --md-default-fg-color:#ffffff;
  --md-default-fg-color--light:#c3c2b7;
  --md-default-fg-color--lighter:#898781;
  --md-typeset-color:#dedcd2;
  --md-typeset-a-color:#5598e7;
  --md-accent-fg-color:#9ec5f4;
  --md-code-bg-color:#232321;
  --md-code-fg-color:#dedcd2;
}

/* ---------- frame ---------- */
body { background:var(--pg); }
.md-header { background:var(--ink); }
.md-header__title { font-weight:650; letter-spacing:-.01em; }
.md-tabs { background:var(--ink); }

.md-main__inner { margin-top:1.4rem; }
/* wider measure so multi-column reference tables fit without scrolling */
@media screen and (min-width:76.25em) {
  .md-main__inner.md-grid { max-width:78rem; }
}

/* article sits on a raised sheet, matching the landing page's cards */
.md-content__inner {
  background:var(--su);
  border:1px solid var(--line);
  border-radius:18px;
  padding:2.2rem 2.6rem 3rem;
  margin-bottom:2.5rem;
  box-shadow:0 10px 34px rgba(11,11,11,.04);
}
[data-md-color-scheme="slate"] .md-content__inner { box-shadow:none; }
@media screen and (max-width:76.1875em) {
  .md-content__inner { padding:1.5rem 1.25rem 2rem; border-radius:14px; }
}
/* the landing page supplies its own frame */
.md-content__inner:has(.lp) {
  background:none; border:none; border-radius:0; padding:0; box-shadow:none;
}

/* ---------- typography ---------- */
.md-typeset:not(:has(.lp)) { font-size:.78rem; line-height:1.72; color:var(--md-typeset-color); }

.md-typeset:not(:has(.lp)) h1:not(.hero-h) {
  font-size:clamp(1.75rem,3.4vw,2.45rem);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.022em;
  color:var(--ink);
  margin:0 0 .35rem;
}

/* opening paragraph reads as a standfirst */
.md-typeset:not(:has(.lp)) h1:not(.hero-h) + p {
  font-size:.92rem;
  line-height:1.68;
  color:var(--ink2);
  margin-bottom:1.5rem;
}

.md-typeset:not(:has(.lp)) h2:not(.sec-h) {
  font-size:1.22rem;
  font-weight:750;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:2.6rem 0 .85rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
/* accent rule above each section heading */
.md-typeset:not(:has(.lp)) h2:not(.sec-h)::before {
  content:"";
  display:block;
  width:2.4rem;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--deep));
  margin-bottom:.85rem;
}

/* an <hr> immediately before a section heading would double the rule */
.md-typeset:not(:has(.lp)) hr + h2:not(.sec-h) { border-top:none; padding-top:0; }
.md-typeset:not(:has(.lp)) hr:has(+ h2:not(.sec-h)) { margin-bottom:1.6rem; }

.md-typeset:not(:has(.lp)) h3 {
  font-size:.95rem;
  font-weight:700;
  letter-spacing:-.008em;
  color:var(--ink);
  margin:1.9rem 0 .6rem;
}
.md-typeset:not(:has(.lp)) h4 {
  font-size:.82rem;
  font-weight:700;
  color:var(--ink2);
  margin:1.5rem 0 .5rem;
}

.md-typeset:not(:has(.lp)) p { margin:0 0 1.05rem; }
.md-typeset:not(:has(.lp)) strong { color:var(--ink); font-weight:680; }

.md-typeset:not(:has(.lp)) a {
  color:var(--blue);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  transition:border-color .12s, color .12s;
}
.md-typeset:not(:has(.lp)) a:hover {
  color:var(--deep);
  border-bottom-color:var(--deep);
}
.md-typeset:not(:has(.lp)) h1 a, .md-typeset:not(:has(.lp)) h2 a, .md-typeset:not(:has(.lp)) h3 a { border-bottom:none; }
/* the landing page styles its own links */
.md-typeset .lp a { border-bottom:none; }

/* ---------- horizontal rules ---------- */
.md-typeset:not(:has(.lp)) hr {
  border:none;
  height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
  margin:2.2rem 0;
}

/* ---------- lists ---------- */
.md-typeset:not(:has(.lp)) ul li, .md-typeset:not(:has(.lp)) ol li { margin-bottom:.45rem; }
.md-typeset:not(:has(.lp)) ul li::marker { color:var(--muted); }
.md-typeset:not(:has(.lp)) ol li::marker { color:var(--muted); font-weight:600; }

/* ---------- tables ---------- */
/* chrome lives on the wrapper so wide tables scroll instead of clipping */
.md-typeset:not(:has(.lp)) .md-typeset__table {
  display:block;
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:14px;
  margin:1.4rem 0 1.7rem;
}
.md-typeset:not(:has(.lp)) table:not([class]) {
  border:none;
  border-radius:0;
  border-collapse:separate;
  border-spacing:0;
  font-size:.72rem;
  box-shadow:none;
  display:table;
  width:100%;
  margin:0;
}
.md-typeset:not(:has(.lp)) table:not([class]) th {
  background:var(--pg);
  color:var(--ink);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.01em;
  border-bottom:1px solid var(--line);
  padding:.7rem .8rem;
  vertical-align:bottom;
}
.md-typeset:not(:has(.lp)) table:not([class]) td {
  border-bottom:1px solid var(--line);
  padding:.65rem .8rem;
  vertical-align:top;
  line-height:1.55;
}
.md-typeset:not(:has(.lp)) table:not([class]) tr:last-child td { border-bottom:none; }
.md-typeset:not(:has(.lp)) table:not([class]) tbody tr { transition:background .12s; }
.md-typeset:not(:has(.lp)) table:not([class]) tbody tr:hover { background:var(--pg); }

/* ---------- admonitions (Disclosure boxes etc.) ---------- */
.md-typeset:not(:has(.lp)) .admonition, .md-typeset:not(:has(.lp)) details {
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  border-radius:14px;
  background:var(--pg);
  box-shadow:none;
  font-size:.75rem;
  padding:.15rem .95rem .1rem;
  margin:1.5rem 0;
}
.md-typeset:not(:has(.lp)) .admonition-title, .md-typeset:not(:has(.lp)) summary {
  background:transparent!important;
  font-weight:700;
  font-size:.76rem;
  color:var(--ink);
  padding:.7rem 0 .35rem .05rem;
  margin:0;
  border:none;
}
.md-typeset:not(:has(.lp)) .admonition-title::before, .md-typeset:not(:has(.lp)) summary::before { display:none; }
.md-typeset:not(:has(.lp)) .admonition > p:last-child { margin-bottom:.85rem; }

/* ---------- blockquote ---------- */
.md-typeset:not(:has(.lp)) blockquote {
  border-left:3px solid var(--line);
  color:var(--ink2);
  margin-left:0;
  padding-left:1rem;
  font-style:normal;
}

/* ---------- the closing verification note ---------- */
.md-typeset:not(:has(.lp)) > p:last-child:has(> em:only-child) {
  background:var(--pg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.85rem 1rem;
  font-size:.72rem;
  line-height:1.6;
  color:var(--ink2);
  margin-top:1.8rem;
}
.md-typeset:not(:has(.lp)) > p:last-child:has(> em:only-child) em { font-style:normal; }

/* ---------- theme landing pages: article cards ---------- */
.md-typeset .agrid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:.9rem;
  margin:1.2rem 0 2rem;
}
.md-typeset:not(:has(.lp)) .acard {
  position:relative;
  background:var(--pg);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.05rem 1.1rem 1.1rem;
  transition:transform .13s, box-shadow .13s, border-color .13s;
}
.md-typeset:not(:has(.lp)) .acard:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--blue) 45%, var(--line));
  box-shadow:0 10px 26px rgba(11,11,11,.07);
}
[data-md-color-scheme="slate"] .md-typeset .acard:hover { box-shadow:0 10px 26px rgba(0,0,0,.35); }

.md-typeset:not(:has(.lp)) .acard-n {
  display:inline-block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(120deg,var(--blue),var(--deep));
  border-radius:6px;
  padding:.16rem .42rem;
  margin-bottom:.5rem;
}
.md-typeset:not(:has(.lp)) .acard h3 {
  margin:0 0 .45rem;
  font-size:.86rem;
  line-height:1.4;
  font-weight:700;
}
.md-typeset:not(:has(.lp)) .acard h3 a { color:var(--ink); border-bottom:none; }
.md-typeset:not(:has(.lp)) .acard:hover h3 a { color:var(--blue); }
/* whole card is the click target */
.md-typeset .acard h3 a::after { content:""; position:absolute; inset:0; }
.md-typeset:not(:has(.lp)) .acard p {
  margin:0;
  font-size:.73rem;
  line-height:1.6;
  color:var(--ink2);
}
.md-typeset:not(:has(.lp)) .acard .headerlink { display:none; }

/* ---------- code ---------- */
.md-typeset:not(:has(.lp)) code {
  font-size:.85em;
  background:var(--md-code-bg-color);
  border-radius:5px;
  padding:.1em .38em;
}

/* ---------- sidebar navigation ---------- */
.md-nav { font-size:.7rem; }
.md-nav__title {
  font-size:.7rem; font-weight:700; color:var(--muted);
  letter-spacing:.04em; text-transform:uppercase;
  background:var(--pg)!important; box-shadow:none!important;
  padding-bottom:.7rem; padding-top:.5rem;
}
.md-nav__link { color:var(--ink2); transition:color .12s; border-radius:6px; }
.md-nav__link:hover { color:var(--blue); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color:var(--blue)!important; font-weight:650; }
.md-nav--secondary .md-nav__title { box-shadow:none; }

/* theme groupings in the left rail */
.md-nav--primary .md-nav__item--section > .md-nav__link {
  color:var(--muted);
  font-weight:700;
  font-size:.66rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-top:.9rem;
}

/* ---------- table of contents ---------- */
.md-nav--secondary .md-nav__link { font-size:.69rem; line-height:1.45; padding:.12rem 0; }

/* ---------- prev / next footer ---------- */
.md-footer { background:var(--ink); }
.md-footer__link {
  border-radius:12px;
  margin:.35rem;
  padding:.85rem 1rem;
  transition:background .12s, transform .12s;
}
.md-footer__link:hover { background:rgba(255,255,255,.07); transform:translateY(-1px); opacity:1; }
.md-footer__title { font-weight:650; }
.md-footer__direction { opacity:.7; }
.md-footer-meta { background:#000; }

/* ---------- search ---------- */
.md-search__form { border-radius:10px; }
.md-search__input::placeholder { color:var(--muted); }

/* ---------- print ---------- */
@media print {
  .md-content__inner { border:none; box-shadow:none; padding:0; }
}
