/* ============================================================
   BackupAssist — shared brand base stylesheet
   One copy of every structural rule the branded portals share.

   No literal product colors in here: every product-specific color
   is a var(--ba-…) role token that the product's own
   theme/docs/stylesheets/extra.css must define (its palette comes
   from brand-book.md §10/§11).  The only literals below are the
   estate-wide constants: the accent/status palettes (§12) and the
   four §11 product-chip colors, which are the same on every portal.

   Delivered by compose.py: a profile opts in by listing
   stylesheets/ba-base.css in its mkdocs.overrides.yml extra_css
   (before its own extra.css, so product overrides win).

   Role tokens a product must define:
     --ba-primary / --ba-primary-light / --ba-primary-dark
                          header, footer, Material primary
     --ba-header-shadow   header drop shadow color
     --ba-tabs-bg         tab bar background
     --ba-link            body links, active sidebar entry
     --ba-link-hover      sidebar hover
     --ba-accent          Material accent, admonition notes, permalinks
     --ba-accent-tint     translucent wash of the accent
     --ba-heading         h1/h2, table headers, card titles
     --ba-heading-sub     h3/h4
     --ba-tint            h1 underline, table row hover, screenshot borders
     --ba-header-tint     the header colour's 100 shade — idle search fill
     --ba-line            card borders, card rules, landing divider
     --ba-mark            search-result highlight
     --ba-hero-sub        landing subtitle
     --ba-card-face / --ba-card-shadow / --ba-card-hover-border
   ============================================================ */

/* ── Estate-wide constants ─────────────────────────────────── */
:root {
  --ba-orange:              #f78f1e;  /* Apricot Orange Primary (§12) */
  --ba-orange-dark:         #C76A07;  /* Apricot Orange Dark */
  --ba-green:               #57b94b;  /* Kelly Green Primary */
  --ba-green-dark:          #418C37;  /* Kelly Green Dark */
  --ba-green-light:         #82CB78;  /* Kelly Green Light */
  --ba-red:                 #cc0813;  /* Venetian Red Primary */
  --ba-red-dark:            #9A060E;  /* Venetian Red Dark */
  --ba-body-text:           #4e4e4f;  /* Shadow Black 500 (§10) */
}

/* ── Material palette overrides ────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:              var(--ba-primary);
  --md-primary-fg-color--light:       var(--ba-primary-light);
  --md-primary-fg-color--dark:        var(--ba-primary-dark);
  --md-primary-bg-color:              #ffffff;
  --md-primary-bg-color--light:       rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:               var(--ba-accent);
  --md-accent-fg-color--transparent:  var(--ba-accent-tint);

  --md-typeset-color:                 var(--ba-body-text);
  --md-typeset-a-color:               var(--ba-link);
}

/* ── Header ────────────────────────────────────────────────── */
.md-header {
  background-color: var(--ba-primary);
  box-shadow: 0 2px 6px var(--ba-header-shadow);
}

/* ── Navigation tabs (top-level sections) ──────────────────── */
.md-tabs {
  background-color: var(--ba-tabs-bg);
}

.md-tabs__link {
  color: rgba(255, 255, 255, 0.8);
}

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

.md-tabs__indicator {
  background-color: #ffffff;
}

/* ── Sidebar navigation ────────────────────────────────────── */
.md-nav__link--active {
  color: var(--ba-link) !important;
  font-weight: 600;
}

.md-nav__link:hover {
  color: var(--ba-link-hover);
}

/* ── Text size ───────────────────────────────────────────────
   Everything one step smaller: 90% of Material's root size at each
   of its breakpoints (125% / 137.5% / 150%), which is what Safari's
   one-step zoom-out looked right at on 365 (2026-09-29), then rolled
   out to every product. Every rem on the page — body, menu, headings,
   sidebar widths — follows it. */
html {
  font-size: 112.5%;
}
@media screen and (min-width: 100em) {
  html {
    font-size: 123.75%;
  }
}
@media screen and (min-width: 125em) {
  html {
    font-size: 135%;
  }
}

/* ── Flare-style left menu ─────────────────────────────────────
   Rebuilt from the published Flare 365 site's side menu
   (Resources/Stylesheets/CustomStyles.css and CustomDefaultStyles.css,
   ul.menu._Skins_SideMenu): pale panel, one row per section with its
   icon, a rule between sections, the current page white with an
   orange marker. Built on 365, then given to every product
   (DECISIONS.md 27, 29): Flare's #075266 becomes each product's
   --ba-primary. Flare's green current-page label (#74bc56) became the
   product colour too (DECISIONS.md 30); green survives on hover.
   compose.py sets no Material navigation features, so every section
   sits in this menu and only the one you are in opens.

   Every rule sets longhand properties only: a `background:` shorthand
   on one state resets the icon image on every row it matches.
   Desktop only: below 76.25em Material's slide-in drawer takes over,
   and these rules would fight it. */
@media screen and (min-width: 76.25em) {
  /* Material's default 12.1rem wraps nearly every label; 16rem was
     judged too wide (2026-09-29). */
  .md-sidebar--primary {
    width: 14rem;
  }
  /* Material pads the sidebar to hold its content at 11.5rem whatever
     the sidebar's width; without this the wider sidebar is just gap. */
  [dir=ltr] .md-sidebar--primary .md-sidebar__inner {
    padding-right: 0;
  }

  .md-nav--primary {
    width: 100%;
    background-color: var(--ba-card-face);
    font-size: 0.8rem;
  }

  /* Flare had no Home row or site-name title; the logo goes home. */
  .md-nav--primary > .md-nav__title,
  .md-nav--primary > .md-nav__list > .md-nav__item:first-child {
    display: none;
  }

  /* Material indents nested levels; Flare's rows ran edge to edge. */
  .md-nav--primary .md-nav__item,
  [dir] .md-nav--primary .md-nav__list {
    padding: 0;
    margin: 0;
  }

  /* Every layer of the menu paints the panel colour itself, rather
     than showing the panel through. Safari, after a hover, repaints
     the open section and everything below it without the panel
     behind — white, not pale — and only the first row survived.
     With no transparent layer left there is nothing to lose. */
  .md-nav--primary .md-nav,
  .md-nav--primary .md-nav__list,
  .md-nav--primary .md-nav__item {
    background-color: var(--ba-card-face);
  }

  /* One colour for a row at rest, focused or not. Material colours a
     focused row with its accent, and a clicked row keeps focus after
     the mouse leaves — which read as a hover that never let go. */
  .md-nav--primary .md-nav__link,
  .md-nav--primary .md-nav__link:focus,
  .md-nav--primary .md-nav__item--active > .md-nav__link:focus {
    position: relative;
    margin: 0;
    color: var(--ba-primary);
    background-color: var(--ba-card-face);
  }

  /* Section rows — and top-level links such as the MBC guides'
     console links, which line up with them but have no icon. */
  .md-nav--primary > .md-nav__list > .md-nav__item {
    border-top: 1px solid var(--ba-line);
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) {
    border-top: none;
  }

  .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
    align-items: center;  /* Material top-aligns; centre on the icon */
    min-height: 2.6rem;
    padding: 0.4rem 0.6rem 0.4rem 2.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    background-repeat: no-repeat;
    background-position: left 0.6rem center;
    background-size: 1.6rem 1.6rem;
  }

  /* No expand arrows: Flare's menu had none */
  .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link .md-nav__icon {
    display: none;
  }

  /* Icons by position, as Flare did and as the home-page cards do.
     These are the classic five; a product whose sections differ
     reassigns slots in its own extra.css (the MBC guides do). */
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) > .md-nav__link {
    background-image: url("../assets/brand/getting-started.svg");
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(3) > .md-nav__link {
    background-image: url("../assets/brand/backing-up-restoring.svg");
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(4) > .md-nav__link {
    background-image: url("../assets/brand/restores.svg");
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(5) > .md-nav__link {
    background-image: url("../assets/brand/management.svg");
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(6) > .md-nav__link {
    background-image: url("../assets/brand/best-practice-guides.svg");
  }

  /* On hover the row turns the product colour, so the icons' lines in
     that colour would vanish into it. Flare never had this problem
     because its section rows had no hover colour. compose.py derives
     each -white twin at build time: every colour but the orange
     becomes white. */
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) > .md-nav__link:hover {
    background-image: url("../assets/brand/getting-started-white.svg");
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(3) > .md-nav__link:hover {
    background-image: url("../assets/brand/backing-up-restoring-white.svg");
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(4) > .md-nav__link:hover {
    background-image: url("../assets/brand/restores-white.svg");
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(5) > .md-nav__link:hover {
    background-image: url("../assets/brand/management-white.svg");
  }
  .md-nav--primary > .md-nav__list > .md-nav__item:nth-child(6) > .md-nav__link:hover {
    background-image: url("../assets/brand/best-practice-guides-white.svg");
  }

  /* Page rows: indented a step past the section name, as in Flare */
  .md-nav--primary .md-nav[data-md-level="1"] .md-nav__link {
    padding: 0.3rem 0.4rem 0.3rem 3.15rem;
    font-size: 0.72rem;
  }
  [dir] .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__list {
    padding-bottom: 0.3rem;
  }

  /* A group's page list ends with the same small gap at every depth,
     so its last page does not run into the next group's name. */
  [dir] .md-nav--primary .md-nav[data-md-level="2"] > .md-nav__list,
  [dir] .md-nav--primary .md-nav[data-md-level="3"] > .md-nav__list,
  [dir] .md-nav--primary .md-nav[data-md-level="4"] > .md-nav__list {
    padding-bottom: 0.3rem;
  }
  /* ...which Material's -0.4rem bottom margin on every .md-nav would
     swallow. Level 1 keeps it: that spacing was already approved. */
  .md-nav--primary .md-nav[data-md-level="2"],
  .md-nav--primary .md-nav[data-md-level="3"],
  .md-nav--primary .md-nav[data-md-level="4"] {
    margin-bottom: 0;
  }

  /* Material rings a group's expand arrow in a tinted circle when the
     pointer is on it; on our dark hover row that reads as a smudge.
     The whole row already changes colour. */
  .md-nav--primary .md-nav__icon:hover {
    background-color: transparent;
  }

  /* Deeper groups (Classic nests five levels, ER three): one step in
     per level, so a group's pages sit visibly under its name. */
  .md-nav--primary .md-nav[data-md-level="2"] > .md-nav__list > .md-nav__item > .md-nav__link {
    padding-left: 3.85rem;
  }
  .md-nav--primary .md-nav[data-md-level="3"] > .md-nav__list > .md-nav__item > .md-nav__link {
    padding-left: 4.55rem;
  }
  .md-nav--primary .md-nav[data-md-level="4"] > .md-nav__list > .md-nav__item > .md-nav__link {
    padding-left: 5.25rem;
  }

  /* Hover: product-colour row, light green text — only while the
     mouse is on it. */
  .md-nav--primary .md-nav__link:hover,
  .md-nav--primary .md-nav__item--active > .md-nav__link:hover {
    color: var(--ba-green-light);
    background-color: var(--ba-primary);
  }

  /* The page you are on: white row, bold label in the product
     colour, orange marker — a bar down the left edge with a
     triangle pointing at the label. */
  .md-nav--primary .md-nav[data-md-level="1"] .md-nav__link--active,
  .md-nav--primary .md-nav[data-md-level="1"] .md-nav__link--active:focus {
    /* The product colour, bold — not Flare's green: Kelly Green on
       white is ~2.5:1, under WCAG AA's 4.5:1; Classic's navy is ~11:1.
       The white row and orange marker carry "you are here" (Linus,
       2026-09-29, DECISIONS.md 30). !important only to beat the
       "Sidebar navigation" rule's own on .md-nav__link--active. */
    color: var(--ba-primary) !important;
    font-weight: 700;
    background-color: #ffffff;
  }
  .md-nav--primary .md-nav[data-md-level="1"] .md-nav__link--active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--ba-orange);
  }
  .md-nav--primary .md-nav[data-md-level="1"] .md-nav__link--active::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 0.4rem 0 0.4rem 0.45rem;
    border-color: transparent transparent transparent var(--ba-orange);
  }
}

/* ── "On this page" (right-hand in-page menu) ──────────────── */
/* A thin rule down the whole block, title included; the heading you
   are reading turns bold with an orange mark on the rule. Chosen by
   Linus on 2026-09-29 from three candidates (a pale panel matching the
   left menu, this rule, a card) — the card was too heavy. Material
   moves .md-nav__link--active as you scroll. */
@media screen and (min-width: 60em) {
  .md-sidebar--secondary .md-nav--secondary {
    border-left: 2px solid var(--ba-line);
    margin-left: 0.2rem;
    padding-left: 0.6rem;
  }

  .md-sidebar--secondary .md-nav--secondary > .md-nav__title {
    color: var(--ba-primary);
    font-weight: 700;
    background: none;
    box-shadow: none;
    padding-left: 0;
  }

  /* body[dir] to outrank Material's [dir=ltr] indent on this list;
     nested headings keep theirs, one step in. */
  body[dir] .md-sidebar--secondary .md-nav--secondary > .md-nav__list {
    padding-left: 0;
  }

  .md-sidebar--secondary .md-nav--secondary .md-nav__link {
    position: relative;
    color: var(--ba-primary);
  }
  .md-sidebar--secondary .md-nav--secondary .md-nav__link:hover {
    color: var(--ba-primary-light);
  }

  /* Product colour, bold, for the same reason as the left menu's
     current page. !important only to beat the sidebar rule's own. */
  .md-sidebar--secondary .md-nav--secondary .md-nav__link--active {
    color: var(--ba-primary) !important;
    font-weight: 700;
  }
  .md-sidebar--secondary .md-nav--secondary .md-nav__link--active::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-0.6rem - 2px);
    width: 2px;
    background-color: var(--ba-orange);
  }
  .md-sidebar--secondary .md-nav--secondary .md-nav .md-nav__link--active::before {
    left: calc(-1.2rem - 2px);
  }
}

/* ── Headings ──────────────────────────────────────────────── */
.md-typeset h1 {
  color: var(--ba-heading);
  font-weight: 700;
  border-bottom: 2px solid var(--ba-tint);
  padding-bottom: 0.3em;
}

.md-typeset h2 {
  color: var(--ba-heading);
  font-weight: 600;
}

.md-typeset h3,
.md-typeset h4 {
  color: var(--ba-heading-sub);
  font-weight: 600;
}

/* ── Page width ────────────────────────────────────────────── */
/* Working selection 2026-10-01 (reports/table-styles.html, width W),
   pending more samples: Material's 61rem page left a 585px text column
   at a 1,400px window, too narrow for tables — short labels wrapped
   onto three lines beside a long column. 80rem gives 872px there. */
.md-grid {
  max-width: 80rem;
}

/* ── Tables ────────────────────────────────────────────────── */
/* Working selection 2026-10-01 (reports/table-styles.html, style C):
   a soft rounded frame, the dark header row, alternate rows in the
   palest brand tint. Text 0.75rem, up from Material's 0.64rem, which
   was 11.5px against 14.4px body text. */
.md-typeset table:not([class]) {
  font-size: 0.75rem;
  border: 1px solid var(--ba-line);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  /* Material's overflow: auto stays: it clips the rows to the rounded
     corners and still lets a table too wide for a phone scroll. */
}

.md-typeset table:not([class]) th {
  background-color: var(--ba-heading);
  color: #ffffff;
  font-weight: 600;
}

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

.md-typeset table:not([class]) tbody tr:nth-child(even) td {
  background-color: var(--ba-card-face);
}

.md-typeset table:not([class]) tbody tr:hover td {
  background-color: var(--ba-tint);
}

/* ── Admonitions ───────────────────────────────────────────── */

/* note → the product's accent */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--ba-accent);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: var(--ba-accent-tint);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--ba-accent);
}

/* warning → Apricot Orange */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--ba-orange);
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(247, 143, 30, 0.1);
  color: var(--ba-orange-dark);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--ba-orange);
}

/* danger / error → Venetian Red */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--ba-red);
}
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(204, 8, 19, 0.1);
  color: var(--ba-red-dark);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  background-color: var(--ba-red);
}

/* tip / success → Kelly Green */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--ba-green);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(87, 185, 75, 0.1);
  color: var(--ba-green-dark);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--ba-green);
}

/* ── Footer ────────────────────────────────────────────────── */
.md-footer {
  background-color: var(--ba-primary);
}

.md-footer-meta {
  background-color: var(--ba-primary-dark);
}

/* ── Search highlight ──────────────────────────────────────── */
.md-search-result mark {
  background-color: var(--ba-mark);
  color: inherit;
}

/* ── Permalink anchor color ────────────────────────────────── */
.md-typeset .headerlink {
  color: var(--ba-accent);
}

/* ── Header: product link and search width ─────────────────── */
/* Material reserves a fixed 11.7rem slot for the "repository"
   link (our Product home), leaving dead space right of the
   text. Decided 2026-08-25 (reports/header-search-options.html,
   option 3): the link shrinks to its text and sits hard right —
   0.8rem off the window edge with the inner padding — and the
   idle search bar widens to 20rem (400px). Material's focused
   overlay is 23.4rem, still wider, so the box never shrinks when
   clicked into. Desktop only: below 60em Material hides both. */
@media screen and (min-width: 60em) {
  .md-header__source {
    width: auto;
    max-width: none;
    margin-right: 0.6rem;
  }
  .md-source__repository {
    max-width: none;
  }
  .md-search__inner {
    width: 20rem;
  }

  /* Light idle search bar (decided 2026-08-25, background E in
     reports/header-search-options.html): Material's default fill
     is black at 26%, which reads near-black over Classic's dark
     Astronaut header. Instead: the header colour's 100 shade
     mixed half with white — per-profile --ba-header-tint — with
     the same dark text Material uses in the focused overlay, so
     the box no longer flips dark-to-light on click. Opaque on
     purpose: translucency would blend with the dark bar behind
     it and shift under forced dark mode. The :checked (focused)
     rules outrank these, so the overlay is untouched. */
  .md-search__form {
    background-color: color-mix(in srgb, var(--ba-header-tint) 50%, white);
  }
  .md-search__form:hover {
    background-color: color-mix(in srgb, var(--ba-header-tint) 75%, white);
  }
  .md-search__input {
    color: var(--md-default-fg-color);
  }
  .md-search__input::placeholder {
    color: var(--md-default-fg-color--light);
  }
  .md-search__input + .md-search__icon {
    color: var(--md-default-fg-color--light);
  }
}

/* ── Content screenshots ───────────────────────────────────── */
/* Most screenshots are white windows on a white page; the Flare
   originals framed them 2px hard grey (365/ER/MSP) or not at all
   (Classic/Dist). Decided 2026-08-25 (reports/screenshot-borders
   .html, option F): a 1px border in the product's 100 shade plus
   a faint shadow, on every content image. The ~3% of images with
   a baked-in border get a double frame, as they always did on the
   live sites — invisible at this strength. */
.md-typeset img {
  border: 1px solid var(--ba-tint);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* The landing page draws no content screenshots today; keep it
   that way for anything decorative it may gain later. */
.md-typeset .ba-landing img {
  border: none;
  box-shadow: none;
}

/* ============================================================
   Landing page  (.ba-landing wraps the front page, generated
   or hand-curated)
   ============================================================ */

/* The Flare home pages had no sidebars; hide them on the landing
   page only, so the hero and cards sit centered. */
.md-main:has(.ba-landing) .md-sidebar {
  display: none;
}

/* On scroll, Material swaps the header title for the page title —
   which on the home page reads "Home". Keep the site name there. */
body:has(.ba-landing) .md-header__topic:first-child {
  opacity: 1 !important;
  transform: none !important;
}
body:has(.ba-landing) .md-header__topic + .md-header__topic {
  display: none;
}

/* Hero */
.md-typeset .ba-landing h1 {
  text-align: center;
  border-bottom: none;
  font-size: 2.2em;
  margin-top: 0.6em;
  margin-bottom: 0.2em;
}

.md-typeset .ba-landing h1 + p {
  text-align: center;
  color: var(--ba-hero-sub);
  margin-top: 0;
  margin-bottom: 2em;
}

.md-typeset .ba-landing h2 {
  text-align: center;
  margin-top: 1.8em;
}

.md-typeset .ba-landing h1 .headerlink,
.md-typeset .ba-landing h2 .headerlink {
  display: none;
}

/* ── Category cards ───────────────────────────────────────── */

/* One row of five on wide screens. The inner ul is display:contents
   in Material — the div is the grid. Portals with fewer categories
   override the column count in their own stylesheet. */
@media screen and (min-width: 70em) {
  .md-typeset .ba-landing .grid.cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

.md-typeset .ba-landing .grid.cards > ul > li {
  background-color: var(--ba-card-face);
  border: 1px solid var(--ba-line);
  border-radius: 5px;
  padding-top: 0.4rem;
}

.md-typeset .ba-landing .grid.cards > ul > li:hover,
.md-typeset .ba-landing .grid.cards > ul > li:focus-within {
  box-shadow: 0 4px 10px var(--ba-card-shadow);
  border-color: var(--ba-card-hover-border);
}

/* Icon above the title, assigned by position — exactly how Flare's
   CustomStyles.css did it with nth-child. Each product recolors the
   same five SVGs into its own assets/brand/. Portals whose cards
   are not the classic five reassign slots in their own stylesheet. */
.md-typeset .ba-landing .grid.cards > ul > li::before {
  content: "";
  display: block;
  height: 50px;
  margin: 0.8em auto 0.2em auto;
  background: center / contain no-repeat;
}

.md-typeset .ba-landing .grid.cards > ul > li:nth-child(1)::before {
  background-image: url("../assets/brand/getting-started.svg");
}
.md-typeset .ba-landing .grid.cards > ul > li:nth-child(2)::before {
  background-image: url("../assets/brand/backing-up-restoring.svg");
}
.md-typeset .ba-landing .grid.cards > ul > li:nth-child(3)::before {
  background-image: url("../assets/brand/restores.svg");
}
.md-typeset .ba-landing .grid.cards > ul > li:nth-child(4)::before {
  background-image: url("../assets/brand/management.svg");
}
.md-typeset .ba-landing .grid.cards > ul > li:nth-child(5)::before {
  background-image: url("../assets/brand/best-practice-guides.svg");
}

/* Card title */
.md-typeset .ba-landing .grid.cards > ul > li > p:first-of-type {
  text-align: center;
  color: var(--ba-heading);
  font-weight: 700;
  margin: 0.2em 0 0.4em 0;
}

.md-typeset .ba-landing .grid.cards > ul > li > hr {
  border-bottom: 1px solid var(--ba-line);
  margin: 0.4em 0;
}

/* Card links */
.md-typeset .ba-landing .grid.cards > ul > li ul {
  list-style: none;
  margin-left: 0;
}

.md-typeset .ba-landing .grid.cards > ul > li ul li {
  margin-bottom: 0.3em;
}

.md-typeset .ba-landing .grid.cards > ul > li ul a {
  color: var(--ba-body-text);
  font-size: 0.85em;
}

.md-typeset .ba-landing .grid.cards > ul > li ul a:hover {
  color: var(--ba-link);
  text-decoration: underline;
}

/* ── Action buttons ────────────────────────────────────────── */
.md-typeset .ba-landing .ba-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  max-width: 62rem;
  margin: 2em auto;
}

@media screen and (max-width: 44em) {
  .md-typeset .ba-landing .ba-buttons {
    grid-template-columns: 1fr;
  }
}

.md-typeset .ba-landing .ba-buttons a {
  display: block;
  text-align: center;
  padding: 1.6em 0;
  border-radius: 5px;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.md-typeset .ba-landing .ba-buttons a:hover {
  opacity: 0.88;
  color: #ffffff;
}

/* Buttons wear §11 product colors: 365 Ocean Green, Classic Azure
   Blue, ER Prussian Blue — all 500 Primary. */
.md-typeset .ba-landing a.ba-365     { background-color: #005266; }
.md-typeset .ba-landing a.ba-classic { background-color: #008ECE; }
.md-typeset .ba-landing a.ba-er      { background-color: #193a66; }

/* ── The other guides, beside the copyright line ──────────────
   On every page, in place of the big buttons that ended each home
   page (Linus, 2026-10-25; DECISIONS.md 55). Below 60em the line
   wraps under the copyright. */
.md-footer-meta__inner {
  align-items: center;
}
.ba-other-guides {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.2rem;
  margin: auto 0.6rem;
  padding: 0.6rem 0;
  font-size: 0.64rem;
  color: var(--md-footer-fg-color--light);
}
.ba-other-guides a {
  color: var(--md-footer-fg-color);
}
.ba-other-guides a:hover {
  text-decoration: underline;
}

/* ── The trial button (DECISIONS.md 57) ───────────────────────
   Under the left-hand menu, below a thin line with space above it;
   in the product's colour (--ba-product, per profile). At the end of
   the page only where the menu is not a column (below 60em). */
.ba-trial--left {
  margin: 2rem 0.6rem 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset .ba-trial--end {
  margin: 2.5rem 0 0;
  max-width: 24rem;
}
@media screen and (min-width: 60em) {
  .md-typeset .ba-trial--end {
    display: none;
  }
}
.ba-trial a.ba-trial__btn {
  display: block;
  padding: 0.55rem 0.5rem;
  border-radius: 0.2rem;
  background-color: var(--ba-product);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.25s;
}
.md-typeset .ba-trial--end a.ba-trial__btn {
  font-size: 0.8rem;
}
.ba-trial a.ba-trial__btn:hover {
  opacity: 0.85;
  color: #ffffff;
}

/* ── The site's name in the header: a link to its front page ── */
/* It fades on hover as "Product home" does at the other end of the bar
   (Material's .md-source), with no underline (Linus, 2026-10-25). */
.md-header__topic a.ba-header-home {
  color: inherit;
  transition: opacity 0.25s;
}
.md-header__topic a.ba-header-home:hover {
  opacity: 0.7;
}

/* Search keywords (front matter `tags:`) rank pages but are not shown as
   labels under each search result: up to a dozen per result, and on an
   error article a repeat of its message. DECISIONS.md 33. */
.md-search-result .md-typeset .md-tags:not([hidden]) {
  display: none;
}

/* ── Topic panel at the top of a long page ───────────────────
   Linus, 2026-10-07 (page headings, Kind 1, style C): on long pages where
   background sections come before the task, one shaded panel after the
   opening paragraph lists the page's main topics, each linking to its
   section with a one-line description. The Markdown is
   <div class="ba-topics-panel" markdown> … </div> in content/. */
.md-typeset .ba-topics-panel {
  margin: 1em 0 1.6em;
  padding: 0.7em 1.1em;
  border-left: 4px solid var(--ba-accent);
  background-color: var(--ba-card-face);
  border-radius: 0 5px 5px 0;
}
.md-typeset .ba-topics-panel > p:first-child {
  margin: 0 0 0.3em;
  font-weight: 700;
  color: var(--ba-heading);
}
.md-typeset .ba-topics-panel > ul {
  margin: 0;
  columns: 2 18rem;
  column-gap: 2rem;
}
.md-typeset .ba-topics-panel > ul > li {
  -webkit-column-break-inside: avoid;   /* older Safari */
  break-inside: avoid;
  margin-bottom: 0.3em;
}