/* ============================================================
   MyAccountant Help Center — Claude-support-inspired theme
   Light, neutral, minimal. No top tabs, no left sidebar on desktop;
   collection cards + hero search on the home page; centered articles
   with breadcrumbs + right-hand contents. Indigo is an accent only.

   Tokens mirror the live product/marketing design system
   (paper #F7F5F1, warm-white cards #FFFDFB, navy #1F2B5D, hairline
   #E0DDDA). Type system per the brand guide §4: Fraunces for display
   (hero + page titles), Geist for headings/body/UI, JetBrains Mono for
   data. Fonts are loaded in overrides/main.html (theme.font is off). */

:root {
  --md-text-font: "Geist";
  --md-code-font: "JetBrains Mono";
}

/* ------------------------------------------------------------
   LIGHT  (scheme: default)
   ------------------------------------------------------------ */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #1F2B5D;
  --md-primary-fg-color--light: #3A4A86;
  --md-primary-fg-color--dark:  #18224A;
  --md-primary-bg-color:        #1B1A18;            /* header text/icons (header bg is white) */
  --md-primary-bg-color--light: rgba(27, 26, 24, 0.6);

  --md-accent-fg-color:             #2E3F7E;
  --md-accent-fg-color--transparent: rgba(31, 43, 93, 0.08);

  --md-default-bg-color:           #F7F5F1;         /* brand paper (matches product) */
  --md-default-fg-color:           rgba(20, 19, 17, 0.90);
  --md-default-fg-color--light:    rgba(20, 19, 17, 0.58);
  --md-default-fg-color--lighter:  rgba(20, 19, 17, 0.32);
  --md-default-fg-color--lightest: rgba(20, 19, 17, 0.07);

  --md-typeset-a-color:         #25356B;

  --md-code-bg-color:           #F1EFEA;
  --md-code-fg-color:           #171614;

  --md-footer-bg-color:         #FFFFFF;
  --md-footer-bg-color--dark:   #F4F2EE;

  --ma-card-bg:    #FFFDFB;                          /* warm white (matches product card) */
  --ma-border:     #E0DDDA;                          /* brand hairline */
  --ma-muted:      #5F5C59;                          /* brand muted */
  --ma-shadow:     rgba(38, 34, 98, 0.05);           /* navy-tinted (brand 6.5) */
  --ma-shadow-hover: rgba(38, 34, 98, 0.10);
  --ma-header-bg:  #FFFDFB;
  --ma-header-fg:  #1B1A18;
  --ma-search-bg:  #F1EEEA;
  --ma-icon-bg:    rgba(31, 43, 93, 0.08);
  --ma-accent:     #1F2B5D;                          /* product navy */
}

/* ------------------------------------------------------------
   DARK  (scheme: slate)
   ------------------------------------------------------------ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #4458A1;
  --md-primary-fg-color--light: #5A6FC0;
  --md-primary-fg-color--dark:  #1F2B5D;
  --md-primary-bg-color:        #EAE7E4;
  --md-primary-bg-color--light: rgba(234, 231, 228, 0.6);

  --md-accent-fg-color:             #5A6FC0;
  --md-accent-fg-color--transparent: rgba(120, 140, 230, 0.14);

  --md-default-bg-color:           #0E0D0C;
  --md-default-fg-color:           rgba(236, 233, 229, 0.90);
  --md-default-fg-color--light:    rgba(236, 233, 229, 0.60);
  --md-default-fg-color--lighter:  rgba(236, 233, 229, 0.32);
  --md-default-fg-color--lightest: rgba(236, 233, 229, 0.10);

  --md-typeset-a-color:         #93A3E6;

  --md-code-bg-color:           #1C1B19;
  --md-code-fg-color:           #EAE7E4;

  --md-footer-bg-color:         #141312;
  --md-footer-bg-color--dark:   #0A0908;

  --ma-card-bg:    #161513;
  --ma-border:     #2A2926;
  --ma-muted:      #908E89;
  --ma-shadow:     rgba(0, 0, 0, 0.30);
  --ma-shadow-hover: rgba(0, 0, 0, 0.50);
  --ma-header-bg:  #141312;
  --ma-header-fg:  #EAE7E4;
  --ma-search-bg:  #232220;
  --ma-icon-bg:    rgba(120, 140, 230, 0.14);
  --ma-accent:     #8EA0E6;
}

/* ============================================================
   Header — light bar, navy logo (cream in dark), pill search
   ============================================================ */
.md-header {
  background-color: var(--ma-header-bg);
  color: var(--ma-header-fg);
  box-shadow: 0 1px 0 var(--ma-border);
}
.md-header__title { color: var(--ma-header-fg); font-weight: 600; }
.md-header .md-header__button { color: var(--ma-header-fg); }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.1rem; width: auto; }
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url("../img/brand/ma-wordmark-light.svg");
}
/* hide the redundant site-name text beside the wordmark logo */
.md-header__topic:not([data-md-component="header-topic"]) { display: none; }

/* "Back to the main website" link, injected by help.js into the header */
.ma-header-site {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-left: auto; margin-right: .4rem;
  font-size: .62rem; font-weight: 600; white-space: nowrap;
  color: var(--ma-header-fg); opacity: .75; text-decoration: none;
}
.ma-header-site:hover { opacity: 1; color: var(--ma-accent); }
@media screen and (max-width: 44.9375em) {
  .ma-header-site { display: none; }   /* header space is tight on phones */
}

/* Centre the header search so its (native) dropdown opens centred, not in the
   corner — keeps Material's result rendering intact. */
@media screen and (min-width: 60em) {
  .md-header__inner { position: relative; justify-content: space-between; }
  .md-header__title { display: none; }   /* avoid colliding with the centred search */
  .md-search {
    position: absolute;
    width: min(34rem, 60vw);
    /* Centre WITHOUT transform: a transformed ancestor becomes the containing
       block for its position:fixed children, which would trap the full-page
       dim overlay inside this 34rem box (a vertical band). left/calc avoids
       that so the overlay can fill the viewport. */
    left: calc(50% - min(17rem, 30vw));
  }
  /* Full-page dim behind the active search. Material otherwise sizes the
     overlay to the centred search box. ONLY when search is open — otherwise a
     full-screen overlay would swallow every click on the page and re-open
     search. Default state stays zero-size / non-interactive. */
  .md-search__overlay { width: 0; height: 0; pointer-events: none; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    pointer-events: auto;
    background-color: rgba(15, 20, 40, 0.38);
  }
  /* Material right-floats and widens the inner panel when active, which makes
     it escape the centred box. Pin it to fill the centred container instead,
     in both the resting and active (focused) states. */
  .md-search__inner {
    position: relative !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

.md-search__form {
  background-color: var(--ma-search-bg);
  border-radius: 10px;
  box-shadow: none;
}
.md-search__form:hover { background-color: var(--ma-search-bg); }
.md-search__input { color: var(--ma-header-fg); }
.md-search__input::placeholder { color: var(--md-default-fg-color--light); }
.md-search__icon { color: var(--md-default-fg-color--light); }
/* Active search — keep Material's native search (so result rendering works),
   but skin the dropdown to match the card style. The header search sits in the
   centre of the bar (see header rules) so the dropdown opens centred, not
   tucked in the corner. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-radius: 10px 10px 0 0; }
.md-search__output {
  border-radius: 0 0 12px 12px;
  background-color: var(--ma-card-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   Layout — no left sidebar on desktop; centered reading column
   (mobile keeps the hamburger drawer)
   ============================================================ */
/* centre the whole header + content block to a moderate width (Claude-like) */
.md-grid { max-width: 57rem; }
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { display: none; }
}
.md-main__inner { margin-top: 2.2rem; }
.md-content__inner { max-width: 36rem; margin-inline: auto; padding-top: 0.6rem; padding-bottom: 3rem; }   /* ~720px reading column */
.md-content__inner::before { display: none; height: 0; }   /* kill the default top gap */

/* Homepage (has the hero) — wider, no narrow measure */
.md-content__inner:has(.ma-hero) { max-width: 56rem; padding-bottom: 4rem; }

/* ============================================================
   Breadcrumbs (navigation.path)
   ============================================================ */
.md-path {
  font-size: 0.72rem;
  padding: 0.2rem 0 0.2rem;
  color: var(--md-default-fg-color--light);
}
.md-path__list { gap: 0.35rem; }
.md-path__item a { color: var(--md-default-fg-color--light); }
.md-path__item a:hover { color: var(--ma-accent); }

/* ============================================================
   Typography
   ============================================================ */
.md-typeset { font-size: 0.84rem; line-height: 1.72; }
.md-typeset p { margin: 0 0 1.1em; }
/* Display headings use Fraunces (brand serif), optical-sized. */
/* Display type (brand §4.2): Fraunces for the homepage hero (Display L)
   and page titles (Display S). Section headings h2/h3 are Geist. */
.md-typeset h1,
.ma-hero h1 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96;
}
.md-typeset h1 {
  font-size: 1.6rem;            /* Display S — 32px page titles */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
  color: var(--md-code-fg-color);   /* ink */
}
.md-typeset h2 {
  /* Heading L (brand §4.2) — 24px/1.25/600, Geist */
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 2.8rem;
  margin-bottom: 0.9rem;
}
.md-typeset h3 {
  /* Heading M — 20px/1.3/600, Geist */
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-top: 1.8rem;
}
.md-typeset ul, .md-typeset ol { margin-bottom: 1.1em; }
.md-typeset li { margin-bottom: 0.45em; }

/* ============================================================
   Hero (homepage) — search lives in the centred header bar
   ============================================================ */
.ma-hero { text-align: center; padding: 4.2rem 0 3rem; }
.ma-hero h1 {
  /* Display L (brand §4.2) — 64px/1.05/500, Fraunces */
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.85rem;
  color: var(--md-code-fg-color);   /* ink */
}
.ma-hero p { color: var(--ma-muted); font-size: 1.05rem; line-height: 1.55; margin: 0 auto; max-width: 32rem; }

/* ============================================================
   Collection cards (home + section landing pages)
   ============================================================ */
.md-typeset .grid.cards {
  grid-gap: 0.9rem;
  /* narrower column floor than Material's 16rem so an extra card fits per row
     (the inner ul is display:contents — the outer div owns the columns) */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}
.md-typeset .grid.cards > ul { gap: 0.9rem; }
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--ma-border);
  border-radius: 14px;
  background: var(--ma-card-bg);
  box-shadow: 0 1px 2px var(--ma-shadow);
  padding: 1rem 1.1rem;
  font-size: .72rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--ma-accent);
  box-shadow: 0 4px 16px var(--ma-shadow-hover);   /* brand card-hover shadow */
  transform: translateY(-2px);
}
/* icon + title share one row (more compact than icon-stacked-above-title) */
.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0 0 0.1rem;
}
/* card title — Heading S (brand §4.2): 17px/1.3/600 */
.md-typeset .grid.cards > ul > li > p:first-child strong,
.md-typeset .grid.cards .twemoji.lg + strong { font-weight: 600; font-size: 0.85rem; line-height: 1.25; }
/* icon tile (sits inline, left of the title) */
.md-typeset .grid.cards .twemoji.lg {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 2rem; height: 2rem; border-radius: 10px;
  background: var(--ma-icon-bg); color: var(--ma-accent);
}
.md-typeset .grid.cards .twemoji.lg svg { width: 1.05rem; height: 1.05rem; }
.md-typeset .grid.cards .ma-count {
  margin: 0.1rem 0 0.2rem;
  font-size: 0.68rem;
  color: var(--ma-muted);
}
.md-typeset .grid.cards > ul > li > hr {
  margin: 0.55rem 0;
  border: none;
  border-top: 1px solid var(--ma-border);
}
.md-typeset .grid.cards > ul > li > p { margin: 0.3rem 0; }
.md-typeset .grid.cards .twemoji:not(.lg) { color: var(--ma-accent); }

/* muted count line under a collection heading */
/* article/lesson counts on cards — JetBrains Mono (brand: mono for data/meta) */
.md-typeset .ma-count {
  color: var(--ma-muted); font-size: 0.82rem; margin-top: -0.2rem;
  font-family: var(--md-code-font-family, "JetBrains Mono", monospace);
}

/* ============================================================
   Collection landing pages — article rows
   ============================================================ */
.md-typeset .ma-articles > ul { list-style: none; margin: 1.8rem 0; padding: 0; }
.md-typeset .ma-articles > ul > li { margin: 0 0 0.8rem; }
.md-typeset .ma-articles > ul > li > a {
  display: block;
  position: relative;
  padding: 1.1rem 2.9rem 1.1rem 1.35rem;   /* room on the right for the arrow */
  border: 1px solid var(--ma-border);
  border-radius: 14px;
  background: var(--ma-card-bg);
  color: var(--md-default-fg-color);
  font-weight: 500;
  box-shadow: 0 1px 2px var(--ma-shadow);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.md-typeset .ma-articles > ul > li > a:hover {
  border-color: var(--ma-accent);
  box-shadow: 0 4px 16px var(--ma-shadow-hover);
  transform: translateY(-1px);
}
.md-typeset .ma-articles > ul > li > a::after {
  content: "→";
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ma-muted);
}

/* ============================================================
   Tables, admonitions, code, images — light + gently rounded
   ============================================================ */
.md-typeset code { border-radius: 4px; padding: 0.12em 0.4em; }
.md-typeset .highlight > pre,
.md-typeset pre > code { border-radius: 10px; }
.md-typeset table:not([class]) {
  border: 1px solid var(--ma-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px var(--ma-shadow);
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: var(--ma-card-bg);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ma-muted);
}
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--ma-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px var(--ma-shadow);
}
.md-typeset img { border-radius: 10px; }
.md-typeset a > img { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); }

/* ============================================================
   "Was this helpful?" widget
   ============================================================ */
.ma-feedback {
  margin: 3rem 0 0;
  padding: 1.4rem 1rem 1.5rem;
  background: var(--md-code-bg-color);
  border-radius: 14px;
  text-align: center;
}
.ma-feedback__q { font-size: 0.9rem; font-weight: 400; color: var(--ma-muted); margin: 0 0 0.8rem; }
.ma-feedback__btns { display: inline-flex; gap: 1rem; }
.ma-feedback__btn {
  border: none;
  background: transparent;
  border-radius: 50%;
  padding: 0.1rem;
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  filter: grayscale(0.15);
  transition: transform .12s ease, filter .12s ease;
  color: var(--md-default-fg-color);
}
.ma-feedback__btn:hover:not(:disabled) { transform: scale(1.18); filter: none; }
.ma-feedback__btn.is-selected { transform: scale(1.18); filter: none; }
.ma-feedback__btn:disabled { cursor: default; }
.ma-feedback__btn:disabled:not(.is-selected) { filter: grayscale(1); opacity: 0.45; }
.ma-feedback__thanks { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--ma-muted); }

/* ============================================================
   Share row (under each article, above the feedback widget)
   ============================================================ */
.ma-share {
  margin: 2.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ma-share__label { font-size: 0.78rem; font-weight: 500; color: var(--ma-muted); margin-right: 0.15rem; }
.ma-share__btn {
  appearance: none;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: transparent;
  color: var(--md-default-fg-color--light);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font: inherit; font-size: 0.76rem; line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease;
}
.ma-share__btn:hover { border-color: var(--ma-accent); color: var(--ma-accent); }
.ma-share__btn.is-copied { border-color: var(--ma-accent); color: var(--ma-accent); }

/* ============================================================
   Related guides — bordered card list with chevron rows
   (targets the list right after the "Related guides" heading)
   ============================================================ */
.md-typeset #related-guides + ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.25rem 0;
  border: 1px solid var(--ma-border);
  border-radius: 14px;
  background: var(--ma-card-bg);
}
.md-typeset #related-guides + ul > li {
  position: relative;
  margin: 0;
  padding: 0.85rem 2.4rem 0.85rem 1.2rem;
}
.md-typeset #related-guides + ul > li + li { border-top: 1px solid var(--ma-border); }
.md-typeset #related-guides + ul > li::after {
  content: "";
  position: absolute; right: 1.1rem; top: 50%;
  width: 0.45rem; height: 0.45rem;
  border-top: 2px solid var(--ma-accent);
  border-right: 2px solid var(--ma-accent);
  transform: translateY(-50%) rotate(45deg);
}
.md-typeset #related-guides + ul > li > a { color: var(--md-default-fg-color); }
.md-typeset #related-guides + ul > li:hover > a { color: var(--ma-accent); }
/* make the whole row clickable when the link is the only content */
.md-typeset #related-guides + ul > li > a::before {
  content: ""; position: absolute; inset: 0;
}

/* ============================================================
   Footer — submark badge + copyright (left), tagline (right)
   ============================================================ */
.md-footer__inner { display: none; }            /* drop Material's footer prev/next */
.md-footer-meta {
  background-color: var(--md-default-bg-color);  /* blend with the paper page */
  color: var(--ma-muted);
  border-top: 1px solid var(--ma-border);
}
.md-footer-meta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.ma-foot__left { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
/* Footer text is JetBrains Mono (brand: mono for data/meta surfaces) */
.ma-foot__copy,
.ma-foot__right { font-family: var(--md-code-font-family, "JetBrains Mono", monospace); }
.ma-foot__copy { color: var(--ma-muted); font-size: 0.7rem; }
.ma-foot__right { color: var(--md-default-fg-color); font-size: 0.7rem; }
/* beat Material's footer link colour (its footers assume a dark background) */
.md-footer-meta.md-typeset .ma-foot__site,
.md-footer .ma-foot__site { color: var(--ma-accent); text-decoration: none; font-weight: 600; }
/* Material's footer :hover/:focus paints links white (dark-footer assumption) —
   pin the accent colour in every state */
.md-footer-meta.md-typeset .ma-foot__site:hover,
.md-footer-meta.md-typeset .ma-foot__site:focus,
.md-footer .ma-foot__site:hover,
.md-footer .ma-foot__site:focus { color: var(--ma-accent); text-decoration: underline; }
/* dark circular badge with the cream submark (swaps in dark mode) */
.ma-foot__badge {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background-color: #191919;
  background-image: url("../img/brand/submark-cream.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 54%;
}
[data-md-color-scheme="slate"] .ma-foot__badge {
  background-color: #EDEAE4;
  background-image: url("../img/brand/submark-navy.svg");
}
@media screen and (max-width: 44em) {
  .md-footer-meta__inner { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
}

/* ============================================================
   Academy — lesson layout
   ============================================================ */
.md-typeset .ma-academy-disclaimer {
  margin-top: 1.4rem;
  font-family: var(--md-code-font-family, "JetBrains Mono", monospace);
  font-size: 0.72rem;
  color: var(--ma-muted);
}
/* on the landing hero it sits as a third, centred row under the subtitle */
.md-typeset .ma-hero .ma-academy-disclaimer { margin-top: 0.9rem; }
/* path progress strip at the top of a lesson */
.md-typeset .ma-path-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.5rem 0.9rem;
  margin: 0 0 1.3rem;
  border-radius: 10px;
  background: var(--ma-icon-bg);
  color: var(--ma-muted);
  font-size: 0.72rem;
}
.md-typeset .ma-path-strip b { color: var(--ma-accent); }
.md-typeset .ma-path-strip .dots { display: inline-flex; gap: 0.32rem; }
.md-typeset .ma-path-strip .dots i {
  width: 0.46rem; height: 0.46rem; border-radius: 50%;
  background: #d6d4de; display: block;
}
.md-typeset .ma-path-strip .dots i.done { background: #3a9d5d; }
.md-typeset .ma-path-strip .dots i.on { background: var(--ma-accent); transform: scale(1.25); }
/* "How myaccountant handles this" product block */
.md-typeset .ma-prod {
  border: 1px solid #d9e6dd;
  background: #f4faf6;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 1.1rem 0;
}
.md-typeset .ma-prod > :first-child { margin-top: 0; }
.md-typeset .ma-prod > :last-child { margin-bottom: 0; }
/* "coming soon" future paths on the Academy landing — muted, non-clickable */
.md-typeset .ma-academy-soon { opacity: 0.6; }
.md-typeset .ma-academy-soon .grid.cards > ul > li { cursor: default; }
.md-typeset .ma-academy-soon .grid.cards > ul > li:hover {
  border-color: var(--ma-border); box-shadow: 0 1px 2px var(--ma-shadow); transform: none;
}

/* ------------------------------------------------------------
   Top tabs (Home / Help / Academy) — light, matches the header
   (override Material's default primary-colour navy bar)
   ------------------------------------------------------------ */
.md-tabs {
  background-color: var(--ma-header-bg);
  color: var(--ma-header-fg);
  border-bottom: 1px solid var(--ma-border);
  box-shadow: none;
}
.md-tabs__link {
  color: var(--ma-header-fg);
  opacity: 0.68;
  font-size: 0.72rem;
}
.md-tabs__link:hover,
.md-tabs__link:focus { opacity: 1; color: var(--ma-accent); }
.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active { opacity: 1; color: var(--ma-accent); font-weight: 600; }

/* ------------------------------------------------------------
   Lesson prev/next — in the content area, under the feedback widget
   (STP Essentials lessons only; rendered by overrides/main.html)
   ------------------------------------------------------------ */
.md-typeset .ma-lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.8rem;
  margin: 1.4rem 0 0.4rem;
}
.md-typeset .ma-lesson-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-width: 48%;
  border: 1px solid var(--ma-border);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  background: var(--ma-card-bg);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.md-typeset .ma-lesson-nav__link:hover {
  border-color: var(--ma-accent);
  box-shadow: 0 3px 12px var(--ma-shadow-hover);
  transform: translateY(-1px);
}
.md-typeset .ma-lesson-nav__next { text-align: right; align-items: flex-end; }
.md-typeset .ma-lesson-nav__dir { font-size: 0.68rem; color: var(--ma-muted); }
.md-typeset .ma-lesson-nav__title { font-weight: 600; color: var(--ma-accent); font-size: 0.82rem; }
.md-typeset .ma-lesson-nav__spacer { flex: 0 0 auto; }