/* Panthera palette — matches lib/core/theme/app_theme.dart */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --panthera-deep-purple: #2F1328;
  --panthera-mid-purple:  #5E3456;
  --panthera-gold:        #CD9C7F;
  --panthera-gold-soft:   #E4C6B0;
  --panthera-cream:       #F3EEE8;
  --panthera-aqua:        #36B6C3;

  /* Three-face system, used through the rest of this stylesheet:
     - --font-display : serif voice for page/section titles + the
       INSIGHT submark, matches the legal site's Didot feel.
     - --font-body    : Inter for body copy, lists, tables, links.
     - --font-label   : tracked uppercase sans for header chrome,
       footer notes, eyebrow ticks. */
  --font-display: "Cormorant Garamond", Didot, "Bodoni 72", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body,
.md-typeset,
.md-nav,
.md-search__input {
  font-family: var(--font-body);
}

/* ---- Light scheme ----
   Background warmed to a soft parchment so the page no longer reads
   as pure white-glare against the deep-purple chrome. */
[data-md-color-scheme="panthera-light"] {
  --md-primary-fg-color:           #2F1328;
  --md-primary-fg-color--light:    #5E3456;
  --md-primary-fg-color--dark:     #1A0E18;
  --md-primary-bg-color:           #F5EFE6;
  --md-primary-bg-color--light:    #ECE4D6;

  --md-accent-fg-color:            #5E3456;
  --md-accent-fg-color--transparent: rgba(94, 52, 86, 0.08);
  --md-accent-bg-color:            #F5EFE6;
  --md-accent-bg-color--light:     #ECE4D6;

  --md-default-bg-color:           #F0E9DC;
  --md-default-fg-color:           #2A1F1A;
  --md-default-fg-color--light:    #6B5A4A;
  --md-default-fg-color--lighter:  #B5A899;
  --md-default-fg-color--lightest: #D8CCB8;

  --md-typeset-a-color:            #5E3456;
  --md-code-bg-color:              #E6DDC9;
  --md-code-fg-color:              #2A1F1A;

  --md-footer-bg-color:            #1A1A1A;
  --md-footer-bg-color--dark:      #2F1328;
}

/* ---- Dark scheme (built on Material's `slate` base) ----
   Overriding slate (rather than declaring a fresh scheme) means every
   built-in component — cards, admonitions, tables, search drawer,
   code blocks — already flips to dark and only needs colour tints,
   so we never end up with default-black text on the deep-purple
   surface. */
[data-md-color-scheme="slate"] {
  --md-hue:                        290;

  --md-primary-fg-color:           #1A0E18;
  --md-primary-fg-color--light:    #2F1328;
  --md-primary-fg-color--dark:     #120A11;
  --md-primary-bg-color:           #F3EEE8;
  --md-primary-bg-color--light:    #E4C6B0;

  --md-accent-fg-color:            #CD9C7F;
  --md-accent-fg-color--transparent: rgba(205, 156, 127, 0.14);
  --md-accent-bg-color:            #1A0E18;
  --md-accent-bg-color--light:     #2F1328;

  --md-default-bg-color:           #1A0E18;
  --md-default-bg-color--light:    rgba(243, 238, 232, 0.05);
  --md-default-bg-color--lighter:  rgba(243, 238, 232, 0.025);
  --md-default-bg-color--lightest: rgba(243, 238, 232, 0.0125);
  --md-default-fg-color:           #F3EEE8;
  --md-default-fg-color--light:    #C7BBB1;
  --md-default-fg-color--lighter:  #8E8278;
  --md-default-fg-color--lightest: #3D2435;

  --md-typeset-a-color:            #E4C6B0;
  --md-code-bg-color:              #261621;
  --md-code-fg-color:              #F3EEE8;

  --md-footer-bg-color:            #1A0E18;
  --md-footer-bg-color--dark:      #120A11;
}

/* Slate's built-in card/admonition surfaces use --md-default-bg-color
   tints; tighten contrast against the deep purple bg. */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset details,
[data-md-color-scheme="slate"] .md-typeset .admonition {
  background-color: #261621;
  border-color: #3D2435;
  color: var(--panthera-cream);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background: #261621;
  color: var(--panthera-cream);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #2F1328;
  color: var(--panthera-gold-soft);
}

/* ---- Header brand: stacked wordmark + INSIGHT submark ----
   The site_name text "Panthera Insight" that Material normally renders
   beside the logo is hidden, and the logo button is converted into a
   vertical stack that drops "INSIGHT" below the PNG, matching the
   legal site's header pattern. */
.md-header__title {
  display: none !important;
}

.md-header {
  height: auto;
}
.md-header__inner {
  align-items: center;
  min-height: 56px;
}
.md-header__button.md-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  margin: 0;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 28px;
  width: auto;
  margin: 0;
}
.md-header__button.md-logo::after {
  content: "INSIGHT";
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.45em;
  text-indent: 0.45em; /* offset trailing letter-spacing for true centering */
  color: var(--panthera-gold);
  margin-top: 3px;
  line-height: 1;
}

/* Header chrome (search input, theme toggle tooltip, legal label,
   tabs) uses the tracked label face. */
.md-header,
.md-tabs,
.md-source__repository,
.md-search__input {
  font-family: var(--font-label);
}

/* ---- Header right cluster: search → theme toggle → legal ---------
   `.md-header__title` is hidden, so without an explicit spacer the
   search/option/source elements bunch up after the logo. Force the
   search field to take a `margin-left: auto`, which pushes itself
   and every flex item after it to the far right edge. The order
   property then locks the visual sequence as: search, theme toggle,
   legal shortcut. */
.md-header__inner {
  display: flex;
  align-items: center;
  gap: 0;
}
.md-header__title {
  display: none !important;
}
.md-search {
  order: 1;
  margin-left: auto !important; /* pins everything after to the right edge */
  flex: 0 0 auto;
  width: auto;
  padding: 0;
}
.md-search__form {
  width: 7.5rem;
  height: 1.6rem;
  min-width: 0;
  background: rgba(243, 238, 232, 0.08);
  border-radius: 4px;
}
.md-search__input {
  width: 100%;
  height: 1.6rem;
  padding-left: 1.6rem;
  font-size: 0.7rem;
}
.md-search__icon[for="__search"] {
  top: 0.3rem;
  left: 0.4rem;
  width: 0.9rem;
  height: 0.9rem;
}
.md-header__option {
  order: 2;
  margin: 0 0.05rem !important;
  padding: 0;
  flex: 0 0 auto;
}
.md-header__option .md-header__button {
  padding: 0.3rem;
  margin: 0;
}
.md-header__source {
  order: 3;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
  margin: 0 0.4rem 0 0.05rem;
  padding: 0;
}
.md-source {
  padding: 0 0.25rem;
  gap: 0.4rem;
}

/* Legal shortcut — Material absolute-positions the icon and label
   over each other; collapse to a clean inline-flex row with a
   comfortable gap so the icon and "Legal" label never overlap. */
.md-source {
  display: inline-flex !important;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0 0.5rem;
  height: auto;
  line-height: 1;
}
.md-source__icon {
  position: static !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
.md-source__icon svg {
  width: 1rem;
  height: 1rem;
  margin: 0;
}
.md-source__repository {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
  white-space: nowrap;
  max-width: none;
  overflow: visible;
  line-height: 1;
}
.md-source__facts {
  display: none; /* hide the "stars / forks" placeholders that show n/a */
}
.md-source:hover {
  opacity: 1;
  color: var(--panthera-gold);
}

/* ---- Top-tab navigation: clearer active state ---------------------
   No bottom border on the strip itself. Each tab gets a short gold
   underline that fades in on hover; the active (currently-navigated)
   tab keeps a solid underline regardless of pointer state. */
.md-tabs {
  border-bottom: 0 !important;
  font-size: 0.7rem;
}
.md-tabs__link {
  position: relative;
  opacity: 0.85;
  margin-top: 0;
  padding: 0.55rem 0 0.5rem;
  font-size: 0.7rem;
  transition: opacity 120ms ease, color 120ms ease;
}
.md-tabs__link::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 2px;
  height: 2px;
  background: var(--panthera-gold);
  opacity: 0;
  transition: opacity 160ms ease;
}
.md-tabs__link:hover::after {
  opacity: 0.6;
}
.md-tabs__item--active > .md-tabs__link::after,
.md-tabs__link--active::after {
  opacity: 1;
}
.md-tabs__item--active > .md-tabs__link,
.md-tabs__link--active {
  opacity: 1;
  font-weight: 600;
  color: var(--panthera-cream, #F3EEE8);
}

/* ---- Tab-strip fit: 10 top-level sections overflow the bar. Rather
   than wrap onto a second line, keep the strip on a single row that
   scrolls horizontally, with a prev / next chevron button injected at
   each edge (see javascripts/tab-scroll.js). The scrollbar itself is
   hidden — navigation is via the buttons (or trackpad/touch swipe). */
.md-tabs > .md-grid {
  position: relative;
}
.md-tabs__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;   /* Edge / IE */
  scrollbar-width: none;      /* Firefox */
  /* Inset so the first/last tab clears the chevron buttons. */
  padding: 0 1.6rem;
}
.md-tabs__list::-webkit-scrollbar {
  display: none;              /* WebKit / Blink */
}
.md-tabs__item {
  padding: 0 0.5rem;
  flex: 0 0 auto;            /* don't let items shrink below their text */
}

/* Chevron scroll buttons — hidden by default, faded in by the script
   only when there is more strip to reveal in that direction. */
.md-tabs__scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--panthera-cream, #F3EEE8);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, color 120ms ease;
}
.md-tabs__scroll.is-visible {
  opacity: 0.85;
  pointer-events: auto;
}
.md-tabs__scroll:hover {
  color: var(--panthera-gold);
  opacity: 1;
}
.md-tabs__scroll svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}
/* Position each button at its edge with a soft fade so tabs slide
   under it rather than colliding at a hard line. */
.md-tabs__scroll--prev {
  left: 0;
  justify-content: flex-start;
  padding-left: 0.2rem;
  background: linear-gradient(
    to right,
    var(--md-primary-fg-color) 55%,
    transparent
  );
}
.md-tabs__scroll--prev svg {
  transform: scaleX(-1);
}
.md-tabs__scroll--next {
  right: 0;
  justify-content: flex-end;
  padding-right: 0.2rem;
  background: linear-gradient(
    to left,
    var(--md-primary-fg-color) 55%,
    transparent
  );
}

/* ---- Strip stray Material blue + low-contrast purple-on-purple ---
   In dark mode the mid-purple sits one shade off the deep-purple bg
   and reads as a smudge. Anything that previously used mid-purple
   for hover/active state on dark mode is re-routed to gold; light
   mode keeps the mid-purple since contrast is fine on parchment. */
[data-md-color-scheme="panthera-light"] {
  --md-accent-fg-color:            var(--panthera-mid-purple);
}
[data-md-color-scheme="slate"] {
  --md-accent-fg-color:            var(--panthera-gold);
}
.md-typeset a:focus,
.md-typeset a:active,
.md-nav__link:focus,
.md-search-result__link:hover,
.md-search-result__link:focus {
  color: var(--panthera-gold) !important;
}
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--panthera-gold-soft);
}
[data-md-color-scheme="panthera-light"] .md-typeset a {
  color: var(--panthera-mid-purple);
}
[data-md-color-scheme="panthera-light"] .md-nav__link--active {
  color: var(--panthera-mid-purple);
}
.md-typeset code {
  color: var(--panthera-mid-purple);
  background: var(--md-code-bg-color);
}
[data-md-color-scheme="slate"] .md-typeset code {
  color: var(--panthera-gold-soft);
}
/* Search highlight pill — Material defaults to its accent (was
   mid-purple); use gold so it pops on the deep-purple dropdown. */
[data-md-color-scheme="slate"] .md-search-result mark {
  background: rgba(205, 156, 127, 0.30);
  color: var(--panthera-cream);
}

/* Text-selection highlight — replace the browser default blue with
   the Panthera palette. Scheme-split so the gold tint stays readable
   on both parchment (light) and deep-purple (dark) backgrounds.
   ::selection backgrounds are forced toward opaque by browsers, so
   these use solid palette colors rather than rgba tints. */
[data-md-color-scheme="panthera-light"] ::selection {
  background: var(--panthera-gold-soft);
  color: var(--panthera-deep-purple);
}
[data-md-color-scheme="slate"] ::selection {
  background: var(--panthera-gold);
  color: var(--panthera-deep-purple);
}

/* ---- TOC moved into the left nav (toc.integrate) ----------------
   The right-side secondary nav is removed entirely. The TOC entries
   now sit nested under the active page in the left sidebar; tighten
   their type and add a thin gold tick on the active anchor. */
.md-sidebar--secondary {
  display: none !important;
}
.md-content {
  max-width: none;
}
.md-nav__item .md-nav__link[href*="#"] {
  font-size: 0.66rem;
  padding: 0.18rem 0;
  opacity: 0.85;
  border-left: 2px solid transparent;
  padding-left: 0.5rem;
  transition: border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.md-nav__item .md-nav__link[href*="#"]:hover {
  opacity: 1;
}
.md-nav__link--active[href*="#"] {
  border-left-color: var(--panthera-gold);
  color: var(--panthera-gold) !important;
  font-weight: 600;
  opacity: 1;
}

/* ---- Footer ------------------------------------------------------
   Two-part layout:
     1. .md-footer__inner — prev/next page nav. Stays in normal flow
        at the end of the article, slim height.
     2. .md-footer-meta    — copyright + email row. Pinned to the
        viewport bottom like the header.
*/
.md-footer {
  position: static;          /* the parent itself does not pin */
  background: transparent;
}
.md-footer__inner {
  /* prev/next page strip — sits naturally after the page content
     and inherits text color from the active palette so the labels
     are not white-on-parchment in light mode. */
  position: static;
  padding: 0.35rem 0.7rem;
  min-height: 0;
  background: transparent;
  color: var(--md-default-fg-color);
  border-top: 1px solid var(--md-default-fg-color--lightest);
  margin-top: 1.6em;
}
.md-footer__inner .md-footer__link,
.md-footer__inner .md-footer__title,
.md-footer__inner .md-footer__direction,
.md-footer__inner .md-ellipsis {
  color: var(--md-default-fg-color);
}
.md-footer__inner .md-footer__direction {
  color: var(--md-default-fg-color--light);
}
.md-footer__inner .md-footer__link:hover,
.md-footer__inner .md-footer__link:focus {
  color: var(--md-accent-fg-color);
  opacity: 1;
}
.md-footer__link {
  padding: 0.2rem 0.4rem;
  /* Allow each side (prev / next) to take up to half the row, with
     normal wrapping if the page title is long, instead of clipping. */
  flex: 0 1 50%;
  min-width: 0;
}
.md-footer__title {
  font-size: 0.66rem;
  padding: 0 0.4rem;
  line-height: 1.25;
  max-width: none;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.md-footer__title .md-ellipsis,
.md-footer__title.md-ellipsis {
  /* Footer prev/next titles only — let them wrap rather than clip. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: block;
}
.md-footer__direction {
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  opacity: 0.65;
  font-family: var(--font-label, "Inter", sans-serif);
  text-transform: uppercase;
}
.md-footer__button {
  padding: 0.2rem;
  margin: 0.1rem;
  width: 1.2rem;
  height: 1.2rem;
}

/* Pinned copyright bar */
.md-footer-meta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 0.25rem 0.8rem;
  font-size: 0.6rem;
  font-family: var(--font-label);
  letter-spacing: 0.04em;
  background: var(--md-footer-bg-color--dark);
  border-top: 1px solid rgba(205, 156, 127, 0.18);
}
.md-footer-meta__inner {
  padding: 0;
  min-height: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.md-footer-copyright {
  padding: 0;
  font-size: 0.6rem;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}
.md-copyright {
  margin: 0;
  font-size: 0.6rem;
  line-height: 1.3;
}
.md-social {
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.md-social__link {
  height: auto;
  width: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.md-social__link svg {
  width: 0.85rem;
  height: 0.85rem;
}
/* envelope icon + email text on a single row */
.md-social__link[href^="mailto:"] {
  width: auto;
  padding: 0 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.md-social__link[href^="mailto:"]::after {
  content: "it@pantherafo.com";
  font-family: var(--font-display);
  font-size: 0.52rem;
  font-style: italic;
  letter-spacing: 0.01em;
  margin: 0;
  vertical-align: baseline;
  line-height: 1;
}

/* The pinned copyright bar sits over the document edge; offset the
   whole container by its height so the prev/next strip (which lives
   inside .md-footer) ends comfortably above it. */
.md-container {
  padding-bottom: 2.6rem;
}
.md-footer__inner {
  margin-bottom: 0.4rem;
}

/* Mobile / narrow tablet: the pinned copyright bar wraps onto two
   lines (long email + small viewport), so it's noticeably taller than
   on desktop. The default 2.6rem container offset is no longer enough
   and the lower half of the prev/next page-nav strip slides behind
   the fixed bar. Stack prev/next vertically, give them full width, and
   bump the container offset to clear the wrapped meta bar plus the
   iOS home-indicator safe area. */
@media screen and (max-width: 76.1875em) {
  .md-container {
    padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px));
  }
  .md-footer__inner {
    flex-wrap: wrap;
    row-gap: 0.6rem;
    margin-bottom: 1rem;
  }
  .md-footer__inner .md-footer__link {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .md-footer-meta {
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- Mobile header + drawer chrome ----
   Desktop layout is unchanged. On mobile we want the header to read
   left-to-right as:
     hamburger ▸ logo ▸ search ▸ theme toggle ▸ legal icon
   which means hiding the "Panthera Insight" text that Material renders
   between the logo and the right-side icon cluster. The opened side
   drawer then mirrors the header's INSIGHT submark instead of the
   white site-name string, and drops the legal link (it's already an
   icon in the header). */
@media screen and (max-width: 76.1875em) {
  /* Hide the site-name text in the top bar so the logo sits flush
     against the right-side icon row. */
  .md-header__title {
    display: none;
  }

  /* Material hides .md-header__source below 60em and .md-footer__inner
     below 76.1875em by default. We want the legal icon and the
     prev/next page-nav strip visible on phones too — force them on.
     On mobile, the source slot shows the icon only — the "Legal &
     privacy" repo-name label is suppressed so the header doesn't have
     a long text string next to the icon. */
  .md-header__source {
    display: block;
    width: auto;
    max-width: none;
    /* Right inset so the scale-balance glyph doesn't kiss the screen
       edge / device safe-area on phones. */
    margin-right: 0.4rem;
    padding-right: env(safe-area-inset-right, 0px);
  }
  .md-header__source .md-source__repository,
  .md-header__source .md-source__facts {
    display: none;
  }
  .md-header__source .md-source {
    padding: 0 0.4rem 0 0;
    width: auto;
  }
  .md-header__source .md-source__icon {
    margin: 0;
  }
  .md-footer__inner:not([hidden]) {
    display: flex;
  }
  /* Material's mobile defaults hide the inner title block of each
     prev/next link, leaving only the arrow icon. Force-show the
     direction label ("Previous" / "Next") and the page-title ellipsis
     so the link communicates what it leads to. */
  .md-footer__inner .md-footer__title,
  .md-footer__inner .md-footer__direction,
  .md-footer__inner .md-ellipsis {
    display: block;
  }
  .md-footer__inner .md-footer__title {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0.8rem;
  }
  .md-footer__inner .md-footer__direction {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.1rem;
  }
  .md-footer__inner .md-ellipsis {
    font-size: 0.72rem;
    line-height: 1.25;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Drawer header — replace the bold white "Panthera Insight"
     site-name with the gold-tracked INSIGHT submark used in the
     desktop header. The logo glyph + INSIGHT submark are vertically
     centred in the title strip via flex column centering so they
     never crowd the top edge. */
  .md-nav--primary > .md-nav__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 5.6rem;
    font-size: 0;            /* collapse the original site-name text node */
    line-height: 0;
    padding: 1rem 0.8rem;
    background-color: var(--md-primary-fg-color);
    color: var(--panthera-gold);
    text-align: center;
  }
  .md-nav--primary > .md-nav__title .md-nav__button.md-logo {
    display: block;
    line-height: normal;
    padding: 0;
  }
  .md-nav--primary > .md-nav__title .md-nav__button.md-logo img,
  .md-nav--primary > .md-nav__title .md-nav__button.md-logo svg {
    display: block;
    margin: 0 auto;
    height: 30px;
    width: auto;
  }
  .md-nav--primary > .md-nav__title::after {
    content: "INSIGHT";
    display: block;
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.5em;
    /* Trailing letter-spacing pushes the visual centre right; pad-left
       by the same amount so INSIGHT sits truly centred under the logo. */
    padding-left: 0.5em;
    color: var(--panthera-gold);
    line-height: 1;
  }

  /* Drawer-only: drop the legal/repo source row — that icon is now
     reachable directly from the header bar. */
  .md-nav--primary .md-nav__source {
    display: none;
  }

  /* Search input — the default mobile width clips the "Search"
     placeholder to "Sea". Stretch the input to fill the overlay
     header so the full hint fits, and pad the icon so it doesn't
     overlap the first letter. */
  .md-search__form {
    width: 100%;
  }
  .md-search__input {
    width: 100%;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }
  .md-search__input::placeholder {
    text-overflow: clip;
    overflow: visible;
  }
}

/* ---- Active nav item highlight ----
   Material's default uses the accent (deep purple) which, in the
   slate-derived dark scheme, falls back to a blue tint. Pin the
   active-section indicator to the Panthera palette across both
   schemes instead. */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link,
.md-nav__link[aria-current="page"] {
  color: var(--panthera-mid-purple);
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link,
[data-md-color-scheme="slate"] .md-nav__link[aria-current="page"] {
  color: var(--panthera-gold);
}

/* ---- Typography polish ----
   Smaller, denser hierarchy with a clear divider between top-level
   sections (H2) so pages read as scannable structure. */
.md-typeset {
  font-size: 0.72rem;
  line-height: 1.65;
}
/* H1 — clean serif title in a saturated theme color so the page
   title carries weight without needing a decorative rule. */
.md-typeset h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.005em;
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 0.2em 0 0.5em;
  color: var(--panthera-deep-purple);
}
[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--panthera-gold);
}
.md-typeset h1 + p {
  /* lede paragraph following H1 — slightly larger, muted */
  font-size: 0.76rem;
  color: var(--md-default-fg-color--light);
  margin-top: 0.4em;
}
/* H2 = section boundary. The top rule is the visible divider between
   sections; the gold left-tick anchors the heading in the column. */
.md-typeset h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.005em;
  margin: 2.4em 0 0.55em;
  line-height: 1.3;
  color: var(--md-default-fg-color);
}
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: var(--panthera-gold-soft);
  border-top-color: rgba(243, 238, 232, 0.08);
}
/* H3 — the tracked-uppercase subtitle ("MY SIGN-IN CODE NEVER…").
   Sits one rung below the saturated H1: same hue family, slightly
   lighter. Mid-purple in light mode, gold-soft in dark mode — both
   clearly distinct from white/cream body text. */
.md-typeset h3 {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.72rem;
  margin: 1.6em 0 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--panthera-mid-purple);
}
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--panthera-gold-soft);
}
.md-typeset hr {
  border: 0;
  height: 1px;
  background: var(--md-default-fg-color--lightest);
  margin: 2em 0;
}
.md-typeset p,
.md-typeset li {
  color: var(--md-default-fg-color);
}
[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset li {
  color: #E6DFD6;
}
.md-typeset strong {
  color: var(--md-default-fg-color);
  font-weight: 700;
}
[data-md-color-scheme="slate"] .md-typeset strong {
  color: var(--panthera-cream);
}

/* Subtle gold underline accents on key links */
.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.md-typeset a:hover {
  border-bottom-color: var(--panthera-gold);
}

/* Image-placeholder admonition — used in the user guide for spots
   where a screenshot or gif should be inserted later. */
.md-typeset .admonition.placeholder,
.md-typeset details.placeholder {
  border-color: var(--panthera-gold);
  background-color: var(--md-accent-fg-color--transparent);
}
.md-typeset .placeholder > .admonition-title,
.md-typeset .placeholder > summary {
  background-color: var(--md-accent-fg-color--transparent);
  font-weight: 600;
}
.md-typeset .placeholder > .admonition-title::before,
.md-typeset .placeholder > summary::before {
  background-color: var(--panthera-gold);
  -webkit-mask-image: var(--md-admonition-icon--example);
          mask-image: var(--md-admonition-icon--example);
}

/* Lede paragraph — first non-heading paragraph */
.md-typeset .lede {
  font-size: 1.05rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 1.5em;
}

/* Footer social row — show the email address as plain text after the
   envelope icon so users can read/copy it without hovering. */
.md-social__link[href^="mailto:"] {
  width: auto;
  padding: 0 0.4rem;
}
.md-social__link[href^="mailto:"]::after {
  content: "it@pantherafo.com";
  margin-left: 0.4rem;
  font-size: 0.72rem;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* Callout (legal disclaimers) */
.md-typeset .callout {
  border-left: 3px solid var(--panthera-gold);
  padding: 0.8em 1em;
  background-color: var(--md-accent-fg-color--transparent);
  margin: 1.2em 0;
  border-radius: 0 4px 4px 0;
}
.md-typeset .callout.danger {
  border-left-color: #A32D2D;
}

/* App store badges — Google's artwork ships with ~6% transparent padding,
   so the boxes are centred against each other rather than baseline-aligned. */
.md-typeset .store-badges,
.md-typeset .store-badges > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 1.2em 0;
}
.md-typeset .store-badges > p {
  margin: 0;
}
.md-typeset .store-badges a,
.md-typeset .store-badges img {
  margin: 0;
  display: block;
}