/* ============================================================
   HEP–ML Living Guide — custom theme
   Aesthetic: modern docs (Vercel / Astro / Linear). Restrained
   palette, generous spacing, flat surfaces, subtle borders.
   ============================================================ */

/* ---------- Color tokens ----------------------------------- */
:root {
  /* Primary: near-black charcoal (instead of saturated indigo) */
  --md-primary-fg-color:           #1a1a1a;
  --md-primary-fg-color--light:    #2d2d2d;
  --md-primary-fg-color--dark:     #0a0a0a;
  --md-primary-bg-color:           #ffffff;
  --md-primary-bg-color--light:    #ffffffbf;

  /* ---- Accent -------------------------------------------------------
     Teal, chosen to match the EmeraldGreen (#1ea78d) that the transition
     paper uses for citations and URLs, so the paper and the site read as
     one resource.

     To try a different hue, swap the four --hg-link* values here and the
     two in the slate block below. Tested alternatives:
       cyan-blue  light #0369a1 / underline #0369a159 / dark #7dd3fc
       indigo     light #4338ca / underline #4338ca59 / dark #a5b4fc
     Crimson is deliberately avoided: red is doing semantic work in the
     staleness warnings, and a red link would collide with it.
     ------------------------------------------------------------------- */
  --hg-link:                       #0f766e;
  --hg-link-hover:                 #115e59;
  --hg-link-underline:             #0f766e59;
  --hg-link-visited:               #155e63;

  --md-accent-fg-color:            var(--hg-link-hover);
  --md-accent-fg-color--transparent: #0f766e14;
  --md-accent-bg-color:            #ffffff;
  --md-accent-bg-color--light:     #ffffffbf;

  --md-typeset-a-color:            var(--hg-link);

  /* Surface tokens — flat, off-white, with hairline borders */
  --hg-surface:                    #fafaf9;
  --hg-surface-hover:              #f5f5f4;
  --hg-border:                     #e7e5e4;
  --hg-border-strong:              #d6d3d1;
  --hg-text-muted:                 #57534e;
  --hg-text-faint:                 #78716c;

  /* ---- Section status banner: all spacing in one place ----
     Wording and delimiters are in sections/_config.yml (status_banner:).
     These are the geometry knobs; change them here and every section page
     follows, in both color schemes. */
  --hg-status-row-gap:             0.42rem;  /* between the banner's rows */
  --hg-status-pad-bottom:          0.1rem;   /* below the last row */
  /* Zero on purpose: Markdown already emits a space after the bold label, so
     any margin here stacks on top of it. */
  --hg-status-label-gap:           0;
  --hg-idlink-size:                0.88em;   /* icon glyph size */
  /* These are margins, and the hover chip's padding sits inside them, so the
     optical gap is gap + pad on the name side but pad + gap + pad between two
     icons. gap-inner is therefore 0: the two paddings alone already separate
     adjacent icons by more than the name-side gap would otherwise be. */
  --hg-idlink-gap:                 0.20em;   /* name to its first icon */
  --hg-idlink-gap-inner:           0;        /* icon to icon */
  --hg-idlink-pad:                 0.1em;    /* hover chip padding */
  /* Centres the glyph on the capitals rather than below them. The names start
     with capitals, so aligning to x-height makes the icons look like they are
     sinking. */
  --hg-idlink-shift:              -0.08em;
  /* Faint, not muted: a solid filled shape at body-text weight competes with
     the name it is annotating. */
  --hg-idlink-color:               var(--hg-text-faint);
}

/* Material declares
     :root,[data-md-color-scheme=default] { --md-typeset-a-color: var(--md-primary-fg-color) }
   which ties with a bare :root on specificity. Redeclaring on the same
   attribute selector guarantees the cascade lands our way in light mode. */
[data-md-color-scheme="default"] {
  --hg-link:                       #0f766e;
  --hg-link-hover:                 #115e59;
  --hg-link-underline:             #0f766e59;
  --md-accent-fg-color:            var(--hg-link-hover);
  --md-accent-fg-color--transparent: #0f766e14;
  --md-typeset-a-color:            var(--hg-link);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:           #0a0a0a;
  --md-primary-fg-color--light:    #171717;
  --md-primary-fg-color--dark:     #000000;
  --md-primary-bg-color:           #ffffffe6;
  --md-primary-bg-color--light:    #ffffff99;

  /* Lighter, less saturated in dark mode so links stay legible without
     glowing against the near-black background. */
  --hg-link:                       #2dd4bf;
  --hg-link-hover:                 #99f6e4;
  --hg-link-underline:             #2dd4bf59;
  --hg-link-visited:               #2dd4bf;

  --md-accent-fg-color:            var(--hg-link-hover);
  --md-accent-fg-color--transparent: #2dd4bf1a;

  --md-typeset-a-color:            var(--hg-link);

  --md-default-bg-color:           #0c0c0c;
  --md-default-fg-color:           #e7e5e4;
  --md-default-fg-color--light:    #d6d3d1;
  --md-default-fg-color--lighter:  #a8a29e;
  --md-default-fg-color--lightest: #57534e;

  --md-code-bg-color:              #18181b;
  --md-code-fg-color:              #e7e5e4;

  --hg-surface:                    #161616;
  --hg-surface-hover:              #1f1f1f;
  --hg-border:                     #262626;
  --hg-border-strong:              #404040;
  --hg-text-muted:                 #a8a29e;
  --hg-text-faint:                 #78716c;
}

/* ---------- Typography ------------------------------------- */
body, .md-typeset {
  font-feature-settings: "ss01", "cv11", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset {
  font-size: 0.78rem;        /* ~15.6px — closer to Vercel-style docs */
  line-height: 1.7;
  letter-spacing: -0.003em;
}

.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-weight: 650;
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 0 0 1.5rem;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hg-border);
}

.md-typeset h3 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.75rem;
}

/* Slightly tighter code font */
.md-typeset code,
.md-typeset pre {
  font-size: 0.82em;
  font-feature-settings: "calt", "ss01";
}

.md-typeset :not(pre) > code {
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  background: var(--hg-surface);
  border: 1px solid var(--hg-border);
}

/* ---------- Header (nav bar) ------------------------------- */
.md-header {
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--hg-border);
}

.md-header[hidden] { display: none; }

.md-header__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-tabs {
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--hg-border);
}

.md-tabs__link {
  opacity: 0.7;
  font-weight: 500;
  font-size: 0.74rem;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* ---------- Logo -------------------------------------------
   Material renders theme.logo as a plain <img src>, so an external SVG
   cannot inherit currentColor and only one file can be configured. To get a
   genuinely different mark per scheme, the <img> is used for layout and
   hidden visually, and the artwork is painted as a background on the
   button itself, swapped by the scheme attribute.

   Accessibility is unaffected: Material already puts the accessible name on
   the surrounding anchor (aria-label), not on the img, so hiding the img
   costs nothing. The img is kept in flow rather than display:none so the
   button keeps its intrinsic size while the sheet is still loading.
   ------------------------------------------------------------ */
.md-header__button.md-logo,
.md-nav__button.md-logo {
  background-image: url("../assets/logo-light.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

[data-md-color-scheme="slate"] .md-header__button.md-logo,
[data-md-color-scheme="slate"] .md-nav__button.md-logo {
  background-image: url("../assets/logo-dark.png");
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg,
.md-nav__button.md-logo img,
.md-nav__button.md-logo svg {
  opacity: 0;
}

/* The lockup is roughly 1.43:1, so at Material's default 1.2rem height the
   wizard would be about eight pixels tall. Given the extra width, the header
   button is widened and raised rather than letting the mark shrink. */
.md-header__button.md-logo {
  width: 2.6rem;
  height: 1.85rem;
  padding: 0;
  margin-right: 0.4rem;
}

.md-nav__button.md-logo {
  width: 3.4rem;
  height: 2.4rem;
  padding: 0;
}

/* ---------- Content area ----------------------------------- */
.md-main__inner {
  margin-top: 1.5rem;
}

.md-content {
  max-width: 48rem;
}

.md-content__inner {
  padding-top: 1rem;
  padding-bottom: 4rem;
}

.md-content__inner:before { display: none; }  /* remove the empty spacer */

/* ---------- Links ------------------------------------------ */
/* Inline links must be identifiable without hovering. The previous rule
   used a transparent bottom border that only appeared on :hover, which
   means a mouse user had to guess and a keyboard or touch user got no cue
   at all. Color alone is also not a sufficient signal (WCAG 1.4.1), so
   every link carries a permanent underline; hover and focus strengthen it
   rather than introduce it. */
.md-typeset a {
  color: var(--hg-link);
  text-decoration: underline;
  text-decoration-color: var(--hg-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--hg-link-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.md-typeset a:focus-visible {
  outline: 2px solid var(--hg-link-hover);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Structural links are not prose links: heading anchors, buttons, the
   "edit this page" pencil and grid cards should stay undecorated. */
.md-typeset a.headerlink,
.md-typeset a.md-button,
.md-typeset .grid.cards a,
.md-typeset .md-content__button,
.md-typeset figure a,
.md-typeset .md-nav a {
  text-decoration: none;
}

.md-typeset .grid.cards a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Bibliography entries are dense with links; a slightly lighter underline
   keeps the annotation readable without losing the affordance. */
.md-typeset li > a:only-of-type {
  text-decoration-color: var(--hg-link-underline);
}

/* ---------- Admonitions (highlight boxes) ------------------
   Material ships a different hue for every admonition type, which against a
   teal accent reads as a rainbow. Restricted here to four roles that are
   actually used on this site, built around the accent:

     abstract  teal      — section status, the accent itself
     note      slate     — neutral asides, deliberately quiet
     info      cyan      — adjacent to teal, one step cooler
     warning   amber     — the staleness notice; complementary to teal, so it
                           reads as "attention" without competing with links

   Red is left unused: nothing on this site is an error, and reserving it
   keeps it available if something ever is.
   ------------------------------------------------------------ */
:root,
[data-md-color-scheme="default"] {
  --hg-adm-abstract:  #0f766e;
  --hg-adm-note:      #475569;
  --hg-adm-info:      #0e7490;
  --hg-adm-warning:   #b45309;
  --hg-adm-tint:      6%;
}

[data-md-color-scheme="slate"] {
  --hg-adm-abstract:  #2dd4bf;
  --hg-adm-note:      #94a3b8;
  --hg-adm-info:      #22d3ee;
  --hg-adm-warning:   #fbbf24;
  --hg-adm-tint:      10%;
}

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--hg-border);
  border-left: 3px solid var(--hg-adm-note);
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: none;
  background: var(--hg-surface);
  font-size: 0.78rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent;
  font-weight: 600;
  padding-top: 0.6rem;
  padding-bottom: 0.4rem;
}

/* Material draws the type icon as a mask, so it is recoloured with
   background-color rather than color. */
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--hg-adm-note);
}

.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  border-left-color: var(--hg-adm-abstract);
  background: color-mix(in srgb, var(--hg-adm-abstract) var(--hg-adm-tint), var(--hg-surface));
}
.md-typeset .admonition.abstract > .admonition-title::before,
.md-typeset details.abstract > summary::before {
  background-color: var(--hg-adm-abstract);
}

.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: var(--hg-adm-info);
  background: color-mix(in srgb, var(--hg-adm-info) var(--hg-adm-tint), var(--hg-surface));
}
.md-typeset .admonition.info > .admonition-title::before,
.md-typeset details.info > summary::before,
.md-typeset .admonition.tip > .admonition-title::before,
.md-typeset details.tip > summary::before {
  background-color: var(--hg-adm-info);
}

/* The 12-month staleness notice. Amber rather than red: it is a caveat about
   vintage, not a failure, and it must remain visually distinct from links. */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--hg-adm-warning);
  background: color-mix(in srgb, var(--hg-adm-warning) var(--hg-adm-tint), var(--hg-surface));
}
.md-typeset .admonition.warning > .admonition-title::before,
.md-typeset details.warning > summary::before {
  background-color: var(--hg-adm-warning);
}

/* Links inside a tinted box keep the accent, but the underline is lightened
   so dense reference lists stay legible against the tint. */
.md-typeset .admonition a {
  text-decoration-color: color-mix(in srgb, var(--hg-link) 45%, transparent);
}

/* ---------- Tables ----------------------------------------- */
.md-typeset table:not([class]) {
  font-size: 0.76rem;
  border: 1px solid var(--hg-border);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--hg-surface);
  font-weight: 600;
  border-bottom: 1px solid var(--hg-border);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--hg-border);
}

/* ---------- Grid cards (homepage feature blocks) ----------- */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  border: 1px solid var(--hg-border);
  border-radius: 0.6rem;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: none;
  background: transparent;
  transition: border-color 180ms ease, background 180ms ease;
}

.md-typeset .grid.cards > :is(ul, ol) > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--hg-border-strong);
  background: var(--hg-surface);
  transform: none;
  box-shadow: none;
}

.md-typeset .grid.cards > :is(ul, ol) > li > hr {
  display: none;
}

.md-typeset .grid.cards > :is(ul, ol) > li > p:first-child {
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  color: var(--md-default-fg-color);
}

.md-typeset .grid.cards > :is(ul, ol) > li > p:last-child {
  margin-bottom: 0;
}

/* ---------- Sidebar / nav ---------------------------------- */
.md-nav__title {
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: -0.005em;
  color: var(--md-default-fg-color);
}

.md-nav__item .md-nav__link {
  font-size: 0.74rem;
}

/* Only the page you are actually on is teal. Material also puts
   .md-nav__item--active on every ancestor, so coloring that made the
   parent section look like a second active link. Ancestors instead get
   normal foreground color at a heavier weight — present, not clickable-
   looking. */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link--active {
  color: var(--hg-link) !important;
  font-weight: 600;
}

.md-nav__item--active > .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.md-nav__item--nested > .md-nav__link {
  font-weight: 500;
}

.md-nav__link[for]:focus,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--hg-link-hover);
}

/* ---------- Footer ----------------------------------------- */
.md-footer {
  background: var(--md-default-bg-color, #fff);
  color: var(--hg-text-muted);
  border-top: 1px solid var(--hg-border);
}

.md-footer-meta {
  background: transparent;
}

.md-footer-meta .md-footer-copyright {
  color: var(--hg-text-muted);
  font-size: 0.7rem;
}

.md-footer-meta__inner {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Footer links: Material colors these with a higher-specificity rule, so
   they need matching specificity or they end up underlined but gray. */
html .md-footer-meta.md-typeset a {
  color: var(--hg-link);
}

html .md-footer-meta.md-typeset a:focus,
html .md-footer-meta.md-typeset a:hover {
  color: var(--hg-link-hover);
}

/* ---------- Search input ----------------------------------- */
.md-search__form {
  background: var(--hg-surface);
  border: 1px solid var(--hg-border);
  border-radius: 0.4rem;
}

.md-search__form:hover {
  background: var(--hg-surface-hover);
  border-color: var(--hg-border-strong);
}

/* ---------- Custom homepage hero --------------------------- */
.hg-hero {
  padding: 2.5rem 0 1.5rem;
  border-bottom: 1px solid var(--hg-border);
  margin-bottom: 2.5rem;
}

.hg-hero h1 {
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  font-weight: 700;
}

.hg-hero p.hg-lead {
  font-size: 1rem;
  color: var(--hg-text-muted);
  margin: 0 0 1.25rem;
  max-width: 36rem;
  line-height: 1.55;
}

.hg-hero .hg-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-typeset-a-color);
  margin-bottom: 0.75rem;
}

/* ---------- Author identifier icons ------------------------
   ORCID and INSPIRE badges after a contributor's name in the section status
   banner. The name itself is plain text: linking it made credit ambiguous,
   because a reader could not tell whether the link led to the person or to
   the section they wrote.

   Icons come from overrides/.icons/academicons/, so they are inlined as SVG
   and inherit currentColor. Nothing is loaded from a CDN. */
.md-typeset a.hg-idlink {
  /* Deliberately left inline. As an inline-block the link grew its own line
     box, and its baseline then came from that box rather than from the glyph,
     which fought the vertical-align below and cropped the icon. Inline padding
     still paints the hover chip without affecting line height. */
  /* The site-wide permanent underline is an affordance for prose links. Under
     a 1em glyph it reads as an artifact, so it is dropped here and the hover
     cue is carried by color and a background chip instead. */
  text-decoration: none;
  color: var(--hg-idlink-color);
  padding: var(--hg-idlink-pad);
  margin-left: var(--hg-idlink-gap);
  border-radius: 3px;
  transition: color 120ms ease, background-color 120ms ease;
}

/* Material sizes an icon through one custom property:
     .md-typeset .twemoji { --md-icon-size: 1.125em; height: var(--md-icon-size) }
     .md-typeset .twemoji svg { width: var(--md-icon-size); max-height: 100% }
   Setting width/height on the span alone left the svg still asking for
   1.125em against a shorter box, and the glyph got cropped. Overriding the
   variable instead keeps the span and the svg in agreement.

   It has to be set on .twemoji itself, not inherited from the link: the
   property is declared on that element, and an element's own declaration
   beats an inherited value however specific the ancestor rule is. */
.md-typeset a.hg-idlink .twemoji {
  --md-icon-size: var(--hg-idlink-size);
  /* Offsets the glyph's bottom edge from the text baseline, so the icon
     centres on the capitals. */
  vertical-align: var(--hg-idlink-shift);
}

.md-typeset a.hg-idlink:hover,
.md-typeset a.hg-idlink:focus-visible {
  color: var(--hg-link-hover);
  background: var(--hg-surface-hover);
  text-decoration: none;
}

/* Two icons on the same author sit tighter than the first does to the name.
   Scoped to .hg-author: `+` skips text nodes, so unscoped it also matched the
   next author's first icon across the separating comma. */
.md-typeset .hg-author a.hg-idlink + a.hg-idlink {
  margin-left: var(--hg-idlink-gap-inner);
}

/* ---------- Section status banner spacing ------------------
   The banner's rows are separate paragraphs, so their vertical rhythm is a
   margin rather than a hardcoded line break in the hook. .hg-status is added
   by hooks/section_status.py via the admonition's extra class, which keeps
   these rules off every other abstract admonition on the site.

   Wording and delimiters are not here: they are in sections/_config.yml under
   status_banner. */
.md-typeset .admonition.hg-status > p,
.md-typeset details.hg-status > p {
  margin-top: var(--hg-status-row-gap);
  margin-bottom: var(--hg-status-row-gap);
}

.md-typeset .admonition.hg-status > p:last-child {
  margin-bottom: var(--hg-status-pad-bottom);
}

/* Field labels are bold; this keeps the label column from crowding its value
   when a name wraps onto a second line on narrow screens. */
.md-typeset .admonition.hg-status > p > strong:first-child {
  margin-right: var(--hg-status-label-gap);
}

/* Brand colors, off by default.
   ORCID's display guidelines ask for the green iD icon wherever an iD is
   shown. Monochrome keeps the banner calm and matches the rest of the site,
   so the choice is left explicit rather than silent: uncomment to comply
   literally. Hover still resolves to the accent either way. */
/*
.md-typeset a.hg-idlink--orcid  { color: #a6ce39; }
.md-typeset a.hg-idlink--inspire { color: #1f4e79; }
[data-md-color-scheme="slate"] .md-typeset a.hg-idlink--inspire { color: #6fa8dc; }
*/