/* =========================================
   Brand colors
   ========================================= */
:root > * {
  --md-primary-fg-color: #00a5aa;
  --md-primary-fg-color--light: #00a5aa;
  --md-primary-fg-color--dark: #00a5aa;
  --md-accent-fg-color:#00a5aa;
  --md-accent-fg-color--transparent: rgba(0, 165, 170, 0.12);
}

/* =========================================
   Disco (search) design tokens
   Disco is Zensical's not-yet-open-source search UI. It renders in an
   open shadow root and reads its colours/spacing entirely through CSS
   custom properties, but this site doesn't define them anywhere yet, so
   they were silently falling back to nothing. These inherit through the
   shadow boundary automatically - no shadow-DOM access needed for this
   part. Revisit once Zensical ships an official theming API (Disco's
   open-source release is on their roadmap).
   ========================================= */
:root {
  --color-background: 255 255 255;
  --color-background-subtle: 245 245 245;
  --color-foreground: 0 0 0;
  --color-backdrop: 0 0 0;
  --color-highlight: 0 165 170;
  --color-highlight-transparent: 0 165 170;
  --alpha-light: 0.94;
  --alpha-lighter: 0.85;
  --alpha-lightest: 0.1;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --border-radius-1: 4px;
  --border-radius-2: 8px;
  --border-radius-3: 12px;
  --font-family: "Poppins", sans-serif;
  --font-size: 14px;
  --letter-spacing: normal;
  --line-height: 1.5;
}

[data-md-color-scheme="slate"] {
  --color-background: 30 31 34;
  --color-background-subtle: 40 41 45;
  --color-foreground: 255 255 255;
  --color-backdrop: 0 0 0;
}

/* ============================
   Poppins (text font)
   ============================ */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================
   JetBrains Mono (code font)
   ============================ */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

.text-center {
  text-align: center;
}

.updated-date {
  text-align: right;
}

/* Homepage-only overrides */
.apteco-home .md-content__button,
.apteco-feedback .md-content__button { display: none !important; }


.apteco-reading-time {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
  margin-top: -0.6rem;
  margin-bottom: 1.2rem;
  letter-spacing: 0.01em;
}

.apteco-reading-time svg {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
}

/* Side navigation: make icons fully solid (not grey) and slightly larger */
.md-nav__link svg {
  opacity: 1;
  transform: scale(1.2);
}

/* =========================================
   Release notes sidebar group icons
   =========================================
   Each product's release-notes group links straight to its latest year
   (no dedicated index.md, so there's no extra click) — but that means
   Zensical won't attach a page icon to the group label, since it only
   does that when a group's bare-string entry is a real index page whose
   URL matches the group's own root. Added manually here instead, reusing
   each product's own brand icon as a CSS mask (same technique already
   used for .md-typeset .headerlink above), matching how nav icons look
   everywhere else in the sidebar.

   Matching is trickier than it looks:
   - Matching the group's own href by product name alone (e.g.
     [href*="orbit/"]) also matches the unrelated top-level "Orbit" tab
     whenever it shows up as a collapsed sibling elsewhere in the
     sidebar (it already has its own native icon there — this caused a
     real duplicate-icon bug, caught only after testing against the
     built HTML). Fixed by requiring a year straight after the product
     name (e.g. "orbit/20"), since only the release-notes group's own
     link ever points at a specific year — the bare top-level tab's own
     href never does.
   - KNOWN LIMITATION: once you navigate into a group (making it the
     active/expanded branch), its own link becomes a <label> with no
     href at all, so the icon disappears there. Confirmed this can't be
     fixed with CSS alone: when active, the sibling years render as
     plain siblings rather than descendants, and their hrefs drop the
     product name entirely (e.g. "../2025/"), so there's no reliable
     signal left to identify which product's siblings they are. Only a
     real index.md per product (see design discussion) fixes this too. */

.md-nav__item--nested > .md-nav__link[href*="orbit/20"]::before,
.md-nav__item--nested > .md-nav__link[href*="faststats/20"]::before,
.md-nav__item--nested > .md-nav__link[href*="peoplestage/20"]::before,
.md-nav__item--nested > .md-nav__link[href*="designer/20"]::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.3em;
  height: 1.3em;
  transform: scale(1.2);
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.md-nav__item--nested > .md-nav__link[href*="orbit/20"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='black' fill-rule='nonzero' d='M18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.3431458,9 15,7.65685425 15,6 C15,5.71351431 15.0401569,5.43640778 15.115149,5.17400216 C14.1493765,4.73236653 13.0936578,4.5 12,4.5 C7.85796356,4.5 4.5,7.85796356 4.5,12 C4.5,16.1420364 7.85796356,19.5 12,19.5 C16.1420364,19.5 19.5,16.1420364 19.5,12 C19.5,11.5393491 19.4580113,11.0839597 19.3752508,10.6363635 L20.8502492,10.3636365 C20.9495948,10.9009307 21,11.4476021 21,12 C21,16.9704636 16.9704636,21 12,21 C7.02953644,21 3,16.9704636 3,12 C3,7.02953644 7.02953644,3 12,3 C13.3636054,3 14.6816147,3.3024367 15.879519,3.87584178 C16.4224658,3.33538681 17.172066,3 18,3 Z M12,7.5 C14.4852814,7.5 16.5,9.51471863 16.5,12 C16.5,14.4852814 14.4852814,16.5 12,16.5 C9.51471863,16.5 7.5,14.4852814 7.5,12 C7.5,9.51471863 9.51471863,7.5 12,7.5 Z M12,9 C10.3431458,9 9,10.3431458 9,12 C9,13.6568542 10.3431458,15 12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 Z M12,11.25 C12.4142136,11.25 12.75,11.5857864 12.75,12 C12.75,12.4142136 12.4142136,12.75 12,12.75 C11.5857864,12.75 11.25,12.4142136 11.25,12 C11.25,11.5857864 11.5857864,11.25 12,11.25 Z M18,4.5 C17.1715729,4.5 16.5,5.17157288 16.5,6 C16.5,6.82842712 17.1715729,7.5 18,7.5 C18.8284271,7.5 19.5,6.82842712 19.5,6 C19.5,5.17157288 18.8284271,4.5 18,4.5 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='black' fill-rule='nonzero' d='M18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.3431458,9 15,7.65685425 15,6 C15,5.71351431 15.0401569,5.43640778 15.115149,5.17400216 C14.1493765,4.73236653 13.0936578,4.5 12,4.5 C7.85796356,4.5 4.5,7.85796356 4.5,12 C4.5,16.1420364 7.85796356,19.5 12,19.5 C16.1420364,19.5 19.5,16.1420364 19.5,12 C19.5,11.5393491 19.4580113,11.0839597 19.3752508,10.6363635 L20.8502492,10.3636365 C20.9495948,10.9009307 21,11.4476021 21,12 C21,16.9704636 16.9704636,21 12,21 C7.02953644,21 3,16.9704636 3,12 C3,7.02953644 7.02953644,3 12,3 C13.3636054,3 14.6816147,3.3024367 15.879519,3.87584178 C16.4224658,3.33538681 17.172066,3 18,3 Z M12,7.5 C14.4852814,7.5 16.5,9.51471863 16.5,12 C16.5,14.4852814 14.4852814,16.5 12,16.5 C9.51471863,16.5 7.5,14.4852814 7.5,12 C7.5,9.51471863 9.51471863,7.5 12,7.5 Z M12,9 C10.3431458,9 9,10.3431458 9,12 C9,13.6568542 10.3431458,15 12,15 C13.6568542,15 15,13.6568542 15,12 C15,10.3431458 13.6568542,9 12,9 Z M12,11.25 C12.4142136,11.25 12.75,11.5857864 12.75,12 C12.75,12.4142136 12.4142136,12.75 12,12.75 C11.5857864,12.75 11.25,12.4142136 11.25,12 C11.25,11.5857864 11.5857864,11.25 12,11.25 Z M18,4.5 C17.1715729,4.5 16.5,5.17157288 16.5,6 C16.5,6.82842712 17.1715729,7.5 18,7.5 C18.8284271,7.5 19.5,6.82842712 19.5,6 C19.5,5.17157288 18.8284271,4.5 18,4.5 Z'/%3E %3C/svg%3E");
}

.md-nav__item--nested > .md-nav__link[href*="faststats/20"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='black' fill-rule='nonzero' d='M10.75,4 C14.4779221,4 17.5,7.02207794 17.5,10.75 C17.5,12.3433484 16.9479308,13.8077542 16.0246406,14.962369 L20.2803301,19.2196699 L19.2196699,20.2803301 L14.962369,16.0246406 C13.8077542,16.9479308 12.3433484,17.5 10.75,17.5 C7.02207794,17.5 4,14.4779221 4,10.75 C4,7.02207794 7.02207794,4 10.75,4 Z M10.75,5.5 C7.85050506,5.5 5.5,7.85050506 5.5,10.75 C5.5,13.6494949 7.85050506,16 10.75,16 C13.6494949,16 16,13.6494949 16,10.75 C16,7.85050506 13.6494949,5.5 10.75,5.5 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='black' fill-rule='nonzero' d='M10.75,4 C14.4779221,4 17.5,7.02207794 17.5,10.75 C17.5,12.3433484 16.9479308,13.8077542 16.0246406,14.962369 L20.2803301,19.2196699 L19.2196699,20.2803301 L14.962369,16.0246406 C13.8077542,16.9479308 12.3433484,17.5 10.75,17.5 C7.02207794,17.5 4,14.4779221 4,10.75 C4,7.02207794 7.02207794,4 10.75,4 Z M10.75,5.5 C7.85050506,5.5 5.5,7.85050506 5.5,10.75 C5.5,13.6494949 7.85050506,16 10.75,16 C13.6494949,16 16,13.6494949 16,10.75 C16,7.85050506 13.6494949,5.5 10.75,5.5 Z'/%3E %3C/svg%3E");
}

.md-nav__item--nested > .md-nav__link[href*="peoplestage/20"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='black' fill-rule='nonzero' d='M14.25,3 L14.25,7.5 L9.75,7.5 L9.75,3 L14.25,3 Z M12.75,4.5 L11.25,4.5 L11.25,6 L12.75,6 L12.75,4.5 Z M21,16.5 L21,21 L16.5,21 L16.5,16.5 L21,16.5 Z M19.5,18 L18,18 L18,19.5 L19.5,19.5 L19.5,18 Z M7.5,16.5 L7.5,21 L3,21 L3,16.5 L7.5,16.5 Z M6,18 L4.5,18 L4.5,19.5 L6,19.5 L6,18 Z M11.25,9.75 L12.75,9.75 L12.75,11.25 L19.5,11.25 L19.5,14.25 L18,14.25 L18,12.75 L6,12.75 L6,14.25 L4.5,14.25 L4.5,11.25 L11.25,11.25 L11.25,9.75 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='black' fill-rule='nonzero' d='M14.25,3 L14.25,7.5 L9.75,7.5 L9.75,3 L14.25,3 Z M12.75,4.5 L11.25,4.5 L11.25,6 L12.75,6 L12.75,4.5 Z M21,16.5 L21,21 L16.5,21 L16.5,16.5 L21,16.5 Z M19.5,18 L18,18 L18,19.5 L19.5,19.5 L19.5,18 Z M7.5,16.5 L7.5,21 L3,21 L3,16.5 L7.5,16.5 Z M6,18 L4.5,18 L4.5,19.5 L6,19.5 L6,18 Z M11.25,9.75 L12.75,9.75 L12.75,11.25 L19.5,11.25 L19.5,14.25 L18,14.25 L18,12.75 L6,12.75 L6,14.25 L4.5,14.25 L4.5,11.25 L11.25,11.25 L11.25,9.75 Z'/%3E %3C/svg%3E");
}

.md-nav__item--nested > .md-nav__link[href*="designer/20"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='black' fill-rule='nonzero' d='M18,3.75 C19.2426407,3.75 20.25,4.75735931 20.25,6 L20.25,10.5 L18.75,10.5 L18.75,9.75 L9.75,9.75 L9.75,13.5 L11.5,13.5 L11.5,15 L9.75,15 L9.75,18.75 L11.5,18.75 L11.5,20.25 L6,20.25 C4.75735931,20.25 3.75,19.2426407 3.75,18 L3.75,6 C3.75,4.7459288 4.72685872,3.75 6,3.75 L18,3.75 Z M18.25,11.6893398 L18.7803301,12.2196699 L21.0303301,14.4696699 L21.5606602,15 L21.0303301,15.5303301 L16.3106602,20.25 L13,20.25 L13,16.9393398 L17.7196699,12.2196699 L18.25,11.6893398 Z M5.25,15 L5.25,18 C5.25,18.4142136 5.58578644,18.75 6,18.75 L8.25,18.75 L8.25,15 L5.25,15 Z M18.25,13.811 L14.5,17.56 L14.5,18.75 L15.688,18.75 L19.439,15 L18.25,13.811 Z M5.25,9.75 L5.25,13.5 L8.25,13.5 L8.25,9.75 L5.25,9.75 Z M6,5.25 C5.56184638,5.25 5.25,5.56793419 5.25,6 L5.25,8.25 L8.25,8.25 L8.25,5.25 L6,5.25 Z M9.75,5.25 L9.75,8.25 L18.75,8.25 L18.75,6 C18.75,5.58578644 18.4142136,5.25 18,5.25 L9.75,5.25 Z'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='black' fill-rule='nonzero' d='M18,3.75 C19.2426407,3.75 20.25,4.75735931 20.25,6 L20.25,10.5 L18.75,10.5 L18.75,9.75 L9.75,9.75 L9.75,13.5 L11.5,13.5 L11.5,15 L9.75,15 L9.75,18.75 L11.5,18.75 L11.5,20.25 L6,20.25 C4.75735931,20.25 3.75,19.2426407 3.75,18 L3.75,6 C3.75,4.7459288 4.72685872,3.75 6,3.75 L18,3.75 Z M18.25,11.6893398 L18.7803301,12.2196699 L21.0303301,14.4696699 L21.5606602,15 L21.0303301,15.5303301 L16.3106602,20.25 L13,20.25 L13,16.9393398 L17.7196699,12.2196699 L18.25,11.6893398 Z M5.25,15 L5.25,18 C5.25,18.4142136 5.58578644,18.75 6,18.75 L8.25,18.75 L8.25,15 L5.25,15 Z M18.25,13.811 L14.5,17.56 L14.5,18.75 L15.688,18.75 L19.439,15 L18.25,13.811 Z M5.25,9.75 L5.25,13.5 L8.25,13.5 L8.25,9.75 L5.25,9.75 Z M6,5.25 C5.56184638,5.25 5.25,5.56793419 5.25,6 L5.25,8.25 L8.25,8.25 L8.25,5.25 L6,5.25 Z M9.75,5.25 L9.75,8.25 L18.75,8.25 L18.75,6 C18.75,5.58578644 18.4142136,5.25 18,5.25 L9.75,5.25 Z'/%3E %3C/svg%3E");
}

.md-typeset hr {
  border-bottom: 0.05rem solid var(--md-default-fg-color--lighter);
  margin: 2em 0;
}

/* Cookie consent buttons */
.md-consent__controls .md-button--primary {
  background-color: #007a7e; /* darkened teal — #00a5aa fails WCAG AA (3.01:1), this passes (~4.6:1) */
  color: #ffffff;
}

.md-consent__controls .md-button--primary:hover {
  background-color: #006568;
}

.md-consent__controls .md-button--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 122, 126, 0.4), var(--md-shadow-z1);
}

.md-consent__controls button[type="reset"] {
  background-color: #202944;
  color: #ffffff;
  border: none;
  box-shadow: var(--md-shadow-z1);
  border-radius: 1.2rem;
  font-weight: 600;
}

.md-consent__controls button[type="reset"]:hover {
  background-color: #1a2238;
}

.md-consent__controls button[type="reset"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(32, 41, 68, 0.4), var(--md-shadow-z1);
}

/* =========================================
   Feedback form styling
   ========================================= */

/* Full-width, rectangular feedback textarea */
.md-typeset form textarea {
  width: 100%;
  max-width: 100%;
  min-height: 180px;
}

/* Make Page URL field full width */
.md-typeset form input[name="page_url"] {
  width: 100%;
  font-family: monospace;
}

/* Read-only Page URL styling */
.md-typeset form input[name="page_url"][readonly] {
  background-color: var(--md-default-bg-color--lighter);
  color: var(--md-default-fg-color--light);
  cursor: default;
  caret-color: transparent;
}

/* Remove hover/focus border and glow */
.md-typeset form input[name="page_url"][readonly]:hover,
.md-typeset form input[name="page_url"][readonly]:focus,
.md-typeset form input[name="page_url"][readonly]:focus-visible {
  border-color: var(--md-default-fg-color--lighter);
  box-shadow: none;
  outline: none;
}


/* Boxed inputs instead of whitespace */
.md-typeset form input[type="text"],
.md-typeset form input[type="email"],
.md-typeset form input[type="url"],
.md-typeset form textarea {
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  background-color: var(--md-default-bg-color);
}

/* Brand-focused focus state */
.md-typeset form input:focus,
.md-typeset form textarea:focus {
  outline: none;
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 0 2px rgba(0, 165, 170, 0.2);
}

/* Optional: constrain overall form width */
.md-typeset form {
  max-width: 720px;
}

.md-typeset form .md-button {
  margin-top: 1rem;
}


/* =========================================
   Announcement banner
   ========================================= */
/* Gradient applied to the announce wrapper */
[data-md-component="announce"] {
  background: linear-gradient(135deg, #00A5AA 0%, #8600C8 100%) !important;
}

/* Banner layout */
.md-banner,
.md-banner__inner {
  background: transparent !important;
  box-shadow: none !important;
}

.md-banner {
  color: white;
  padding: 0.5rem 0;
}

.md-banner__inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
  font-size: 1.4em;
}

.md-banner a {
  color: white;
  margin-left: .8rem;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 2rem;
  padding: 0.35rem 1.3rem;
  font-weight: 600;
  font-size: 0.85rem;
  transition: background-color 0.15s;
}
.md-banner a:hover {
  opacity: 1;
}

/* =========================================
   Repo source area – collapse completely
   ========================================= */
.md-header__source,
.md-nav__source { display: none !important; }

/* =========================================
   Header + tabs — frosted glass
   ========================================= */
.md-header,
.md-tabs {
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  background-color: color-mix(in srgb, var(--apteco-nav-bg) 92%, transparent) !important;
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background-color: rgba(26, 29, 36, 0.88) !important;
}


/* =========================================
   Header navigation — Apteco-style
   ========================================= */

.md-tabs__link {
  color: var(--md-default-fg-color) !important;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 1;
}

.md-tabs__item--active {
  border-bottom-width: 0.13rem !important;
  border-bottom-style: solid !important;
}

.md-tabs__item--active:has(> a[href*="/orbit/"])         { border-bottom-color: #47a7ed !important; }
.md-tabs__item--active:has(> a[href*="/faststats/"])     { border-bottom-color: #65cd4b !important; }
.md-tabs__item--active:has(> a[href*="/peoplestage/"])   { border-bottom-color: #eca935 !important; }
.md-tabs__item--active:has(> a[href*="/designer/"])      { border-bottom-color: #8600c8 !important; }
.md-tabs__item--active:has(> a[href*="/release-notes/"]) { border-bottom-color: #00a5aa !important; }
.md-tabs__item--active:has(> a[href*="/resources/"])     { border-bottom-color: #00a5aa !important; }
.md-tabs__item--active:has(> a[href*="/admin/"])         { border-bottom-color: #00a5aa !important; }

/* Reserve the same border-bottom space on every tab, transparent by
   default, so the hover bar below doesn't shift the tab bar's height */
.md-tabs__item {
  border-bottom-width: 0.13rem;
  border-bottom-style: solid;
  border-bottom-color: transparent;
  transition: border-bottom-color 0.2s ease;
}

.md-tabs__item:hover:has(> a[href*="/orbit/"])         { border-bottom-color: #47a7ed !important; }
.md-tabs__item:hover:has(> a[href*="/faststats/"])     { border-bottom-color: #65cd4b !important; }
.md-tabs__item:hover:has(> a[href*="/peoplestage/"])   { border-bottom-color: #eca935 !important; }
.md-tabs__item:hover:has(> a[href*="/designer/"])      { border-bottom-color: #8600c8 !important; }
.md-tabs__item:hover:has(> a[href*="/release-notes/"]) { border-bottom-color: #00a5aa !important; }
.md-tabs__item:hover:has(> a[href*="/resources/"])     { border-bottom-color: #00a5aa !important; }
.md-tabs__item:hover:has(> a[href*="/admin/"])         { border-bottom-color: #00a5aa !important; }


/* =========================================
   Footer
   ========================================= */

.md-footer-meta {
  background-color: #202944;
  padding: 2rem 1.2rem 1.5rem;
}

/* Horizontal: logo | copyright+links | socials+offices */
.md-footer-meta__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

/* Logo (left) — vertically centred against the text columns */
.apteco-footer-logo {
  display: block;
  flex-shrink: 0;
  align-self: center;
  margin-right: 2rem;
}

.apteco-footer-logo img {
  height: 5rem;
  width: auto;
  display: block;
}

.apteco-footer-logo:hover {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(0, 165, 170, 0.45));
}

/* Copyright + links (centre, grows to fill space) */
.apteco-footer-center {
  flex: 1;
  min-width: 0;
}

.md-copyright {
  margin: 0;
  padding-top: 1rem;
  color: white;
}

.md-copyright__highlight {
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
}

.md-copyright > *:not(.md-copyright__highlight) {
  font-size: 0.6rem;
}

.apteco-footer-nav-links {
  margin-bottom: 0;
}

.apteco-footer-legal-row {
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.9;
  margin-top: 0.5rem;  /* match the gap below (Zensical credit) */
}

/* Privacy/Cookies links: match the surrounding © text — no extra margin, same weight */
html .md-footer-meta.md-typeset .apteco-footer-legal-row a:not(:focus, :hover) {
  font-weight: 400;
}

/* Zero out link margins — spacing comes purely from the &nbsp;|&nbsp; in the HTML */
.apteco-footer-legal-row a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.apteco-footer-legal {
  font-size: 0.6rem;
  font-weight: 400;
  /* no opacity here — parent .apteco-footer-legal-row already sets 0.9, stacking would dim further */
}

.apteco-zensical-credit {
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.7;
  display: block;
  margin-top: 0.5rem;
}

.apteco-zensical-credit a,
html .md-footer-meta.md-typeset .apteco-zensical-credit a:not(:focus, :hover) {
  font-weight: 400;
}

/* Right column: socials + country offices */
.apteco-footer-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 1rem;
}

/* Social icons */
.md-social {
  display: inline-flex;
  gap: 0.1rem;
  margin: 0;
  padding-top: 0.2rem;
}

.md-footer .md-social__link {
  width: 2.4rem !important;
  height: 2.4rem !important;
  margin-right: 0 !important;
}

.md-footer .md-social__link svg {
  max-height: 1.25rem !important;
  width: auto !important;
  height: auto !important;
  vertical-align: middle !important;
}

/* Country offices */
.apteco-footer-offices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 0.5rem;
  font-size: 0.6rem;
  color: white;
  opacity: 0.8;
  line-height: 1.7;
}

.apteco-footer-contact {
  margin-top: 0.15rem;
  margin-right: 0 !important;  /* flush right with countries text */
  font-weight: 600;             /* keep bold on hover */
}

/* Footer links */
html .md-footer-meta.md-typeset a:not(:focus, :hover) {
  color: white;
  font-weight: 600;
  text-decoration: none !important;
}

.md-footer-meta a:hover {
  text-decoration: underline;
  opacity: 0.9;
}

/* Space text links only (not socials) */
.md-footer-meta a:not(.md-social__link) {
  margin-right: 1.5rem;
}

/* Mobile: centre-stack logo → socials → links, hide offices + Zensical credit */
@media screen and (max-width: 76.234375em) {
  .md-footer-meta__inner {
    flex-direction: column;
    align-items: center;
  }

  /* Reorder: logo first, then socials (from right panel), then links */
  .apteco-footer-logo   { order: 1; align-self: center; margin-right: 0; margin-bottom: 0.4rem; }
  .apteco-footer-right  { order: 2; align-items: center; margin-left: 0; margin-top: 0; margin-bottom: -0.3rem; }
  .apteco-footer-center { order: 3; width: 100%; text-align: center; margin-top: 0; }

  /* Reduce copyright top padding so social icons and links sit closer together */
  .md-copyright { padding-top: 0; }

  /* Legal row separators handled by ::before — no extra margin needed on mobile */

  .apteco-footer-offices {
    display: none;
  }

  .apteco-zensical-credit {
    display: none;
  }

  /* Symmetric left/right spacing on mobile so centered rows line up visually */
  .md-footer-meta a:not(.md-social__link) {
    margin-left: 0.4rem;
    margin-right: 0.4rem;
  }
}

/* Heading anchor link icon */
.md-typeset .headerlink {
  font-size: 0;
  width: 1.2rem;
  height: 1.2rem;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='nonzero' d='M7.4695941,11.2195941 L8.53025427,12.2802543 L6.60540853,14.2050217 C5.46486382,15.3736242 5.46486382,17.2387242 6.59252172,18.3944398 C7.76112418,19.5349845 9.62622419,19.5349845 10.7883441,18.4008441 L12.7195941,16.4695941 L13.7802543,17.5302543 L11.8425217,19.4679085 C10.0912204,21.1771617 7.29612792,21.1771617 5.53193984,19.4550217 C3.82268672,17.7037204 3.82268672,14.9086279 5.5383441,13.1508441 L7.4695941,11.2195941 Z M14.9695941,8.9695941 L16.0302543,10.0302543 L10.0302543,16.0302543 L8.9695941,14.9695941 L14.9695941,8.9695941 Z M19.4679085,5.54482665 C21.1771617,7.29612792 21.1771617,10.0912204 19.4615043,11.8490043 L17.5302543,13.7802543 L16.4695941,12.7195941 L18.3944398,10.7948266 C19.5349845,9.62622419 19.5349845,7.76112418 18.4073266,6.60540853 C17.2387242,5.46486382 15.3736242,5.46486382 14.2115043,6.59900427 L12.2802543,8.53025427 L11.2195941,7.4695941 L13.1573266,5.53193984 C14.9086279,3.82268672 17.7037204,3.82268672 19.4679085,5.54482665 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='nonzero' d='M7.4695941,11.2195941 L8.53025427,12.2802543 L6.60540853,14.2050217 C5.46486382,15.3736242 5.46486382,17.2387242 6.59252172,18.3944398 C7.76112418,19.5349845 9.62622419,19.5349845 10.7883441,18.4008441 L12.7195941,16.4695941 L13.7802543,17.5302543 L11.8425217,19.4679085 C10.0912204,21.1771617 7.29612792,21.1771617 5.53193984,19.4550217 C3.82268672,17.7037204 3.82268672,14.9086279 5.5383441,13.1508441 L7.4695941,11.2195941 Z M14.9695941,8.9695941 L16.0302543,10.0302543 L10.0302543,16.0302543 L8.9695941,14.9695941 L14.9695941,8.9695941 Z M19.4679085,5.54482665 C21.1771617,7.29612792 21.1771617,10.0912204 19.4615043,11.8490043 L17.5302543,13.7802543 L16.4695941,12.7195941 L18.3944398,10.7948266 C19.5349845,9.62622419 19.5349845,7.76112418 18.4073266,6.60540853 C17.2387242,5.46486382 15.3736242,5.46486382 14.2115043,6.59900427 L12.2802543,8.53025427 L11.2195941,7.4695941 L13.1573266,5.53193984 C14.9086279,3.82268672 17.7037204,3.82268672 19.4679085,5.54482665 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
  position: relative;
  top: -0.08rem;
}

/* =========================================
   Header logo + title branding
   ========================================= */

/* Constrain horizontal logo height */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: auto;
}

/* Keep the logo visible next to the hamburger on narrow screens too
   (previously hidden — the drawer's own header showed it instead) */
@media screen and (max-width: 76.234375em) {
  .md-header__button.md-logo {
    display: flex;
    align-items: center;
  }
}

/* Small "Menu" label stacked under the hamburger icon on mobile */
@media screen and (max-width: 76.234375em) {
  label.md-header__button.md-icon[for="__drawer"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    height: auto;
  }

  label.md-header__button.md-icon[for="__drawer"] svg {
    height: 1.1rem;
    width: 1.1rem;
  }

  label.md-header__button.md-icon[for="__drawer"]::after {
    content: "Menu";
    font-size: 0.45rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: currentColor;
  }

  /* Hamburger first, then logo to its right — negative orders keep both
     ahead of the title/palette-toggle/search, which stay at their default
     order (0), rather than reordering everything else in the header too */
  label.md-header__button.md-icon[for="__drawer"] { order: -2; }
  .md-header__button.md-logo                      { order: -1; }
}

/* Hide the redundant Home tab — the logo already serves as the home link */
.md-tabs__item:first-child {
  display: none;
}

/* Hide the site name ("Help Hub") in the header */
.md-header__title .md-header__topic:first-child {
  display: none;
}

/* Desktop: centered search bar — hide page title text (search occupies centre) */
@media screen and (min-width: 60em) {
  .md-header__title .md-header__topic:nth-child(2) {
    display: none;
  }

  .md-header__inner {
    position: relative;
  }

  .md-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(20rem, calc(100% - 20rem));
    z-index: 2;
  }
}

/* =========================================
   Mobile drawer header branding (FINAL)
   ========================================= */

@media screen and (max-width: 76.234375em) {

  /* Target the mobile drawer title exactly */
  .md-nav .md-nav__title[for="__drawer"] {
    font-size: 0;               /* hides raw text node */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
  }

  /* Logo — slightly smaller to allow room for "Help hub" label */
  .md-nav .md-nav__title[for="__drawer"] .md-logo {
    height: 1.2rem;
    width: auto;
    flex-shrink: 0;
  }

  .md-nav .md-nav__title[for="__drawer"] .md-logo img {
    height: 100%;
    width: auto;
  }

  /* Inject visual-only label */
  .md-nav .md-nav__title[for="__drawer"]::after {
    content: "Help Hub";
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--md-default-fg-color);
  }
}

/* =========================================
   Buttons — Apteco-style CTAs (refined)
   ========================================= */
.md-button {
  border-radius: 0.3rem !important;

  padding: 0.8rem 2.3rem !important;
  min-height: 3rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  font-size: 0.7rem;
  line-height: 1.9;              /* relaxed, marketing-style */
  letter-spacing: 0.03em;         /* BIGGEST fix for tightness */
  text-transform: uppercase;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.20);
}

.md-button:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.20);
}

.md-button:not(.md-button--primary) {
  background-color: #202944 !important;
  color: #fff !important;
  border: none !important;
}

/* =========================================
   Focus state (accessible, subtle)
   ========================================= */
.md-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(32, 41, 68, 0.3),
    0 6px 18px rgba(0, 0, 0, 0.18);
}

/* =========================================
   Mobile stacking
   ========================================= */
@media (max-width: 700px) {
  .md-button {
    margin-bottom: 0.75rem;
  }

  .md-button:last-child {
    margin-bottom: 0;
  }
}

/* =========================================
   Home page icons
   ========================================= */
.home-icons { font-size: 1.7em; }

/* =========================================
   Header Search Bar
   ========================================= */

.md-search__button {
  width: 100% !important;
  padding-left: 2.2rem !important;
  padding-right: 1rem !important;
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid var(--md-default-fg-color--lighter) !important;
  border-radius: 0.3rem !important;
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: visible;
}

.md-search__button:hover,
.md-search__button:focus,
.md-search__button:focus-visible {
  outline: none !important;
  border-color: var(--md-primary-fg-color) !important;
  box-shadow: 0 0 0 2px var(--md-accent-fg-color--transparent) !important;
}

.md-search__button:active { transform: scale(0.98); }



.md-search__button::after,
[data-platform^="Mac"] .md-search__button::after {
  content: "/" !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid var(--md-default-fg-color--lighter) !important;
  border-radius: 0.25rem !important;
  box-shadow: none !important;
  font-size: 0.55rem !important;
  font-family: var(--md-code-font) !important;
  color: var(--md-default-fg-color--light) !important;
  padding: 0.08rem 0.3rem !important;
  top: 50% !important;
  right: 0.6rem !important;
  transform: translateY(-50%) !important;
}

[data-md-color-scheme="slate"] .md-search__button {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-md-color-scheme="slate"] .md-search__button::after {
  background: rgba(255, 255, 255, 0.1) !important;
}

.md-search__button::before { border-radius: inherit; }

/* ==========================================================
   Feedback widget
   Default (content area fallback — pages with no right sidebar)
   ========================================================== */
.md-content__inner .md-feedback {
  display: flex;
  justify-content: center;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* "On this page" label in the right sidebar TOC */
.md-sidebar--secondary .md-nav__title {
  font-size: 0.85rem;
}

/* TOC links — indent slightly right */
.md-sidebar--secondary .md-nav--secondary .md-nav__link {
  padding-left: 1rem;
  position: relative;
}

/* Active TOC item — coloured bar on the left edge */
.md-sidebar--secondary .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 2px;
  background: var(--md-accent-fg-color);
  border-radius: 1px;
}

/* Sidebar position — JS moves it here when the right sidebar is visible */
.md-sidebar--secondary .md-feedback {
  margin-top: 1.2rem;
  margin-left: 1.3rem;
  margin-right: 1.3rem;
  padding-top: 0.7rem;
  border-top: 0.05rem solid color-mix(in srgb, var(--md-default-fg-color--lighter) 50%, var(--md-default-fg-color--lightest));
  width: auto;
  position: static;
  left: auto;
  transform: none;
  display: block;
}

.md-sidebar--secondary .md-feedback .md-feedback__title {
  font-size: 0.55rem;
}

.md-sidebar--secondary .md-feedback .md-feedback__icon svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* Link in the thumbs-down note loses .md-typeset styling when moved to sidebar */
.md-sidebar--secondary .md-feedback a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
}

/* ==========================================================
   Popular page links
   ========================================================== */
.popular-page-links {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  column-gap: 4rem;
  row-gap: .75rem;
  margin: 2rem 0 3rem;
  text-align: left;
}

.popular-page-links a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
}

/* ==========================================================
   Apteco Expression syntax highlighting
   Token colours mirror the FastStats expression editor.
   To change a colour: find the relevant rule and update the hex value.
   .nf = function names     .nv = variable refs [...]
   .s  = string literals    .m  = numeric literals
   .nd = query refs {...}   .o  = operators ) , + - * / = < >
   .k  = keywords AND OR    .p  = punctuation (
   ========================================================== */
.language-apteco .nf { color: #d94fa0; }   /* functions      — pink        */
.language-apteco .k  { color: #d94fa0; }   /* keywords       — pink        */
.language-apteco .nv { color: #3aa655; }   /* variables [..] — green       */
.language-apteco .o  { color: #3aa655; }   /* operators ) ,  — green       */
.language-apteco .s,
.language-apteco .s1,
.language-apteco .s2 { color: #4a86d8; }   /* strings        — blue        */
.language-apteco .m,
.language-apteco .mi,
.language-apteco .mf { color: #c94040; }   /* numbers        — red         */
.language-apteco .nd { color: #7cbd3a; }   /* query refs {.} — lime green  */

[data-md-color-scheme="slate"] .language-apteco .nf { color: #f08bc0; }
[data-md-color-scheme="slate"] .language-apteco .k  { color: #f08bc0; }
[data-md-color-scheme="slate"] .language-apteco .nv { color: #5dd478; }
[data-md-color-scheme="slate"] .language-apteco .o  { color: #5dd478; }
[data-md-color-scheme="slate"] .language-apteco .s,
[data-md-color-scheme="slate"] .language-apteco .s1,
[data-md-color-scheme="slate"] .language-apteco .s2 { color: #7aabf5; }
[data-md-color-scheme="slate"] .language-apteco .m,
[data-md-color-scheme="slate"] .language-apteco .mi,
[data-md-color-scheme="slate"] .language-apteco .mf { color: #e87878; }
[data-md-color-scheme="slate"] .language-apteco .nd { color: #a8d95a; }

@media (max-width: 800px) {
  .popular-page-links {
    grid-template-columns: 1fr;
    justify-content: flex-start;
    row-gap: 0;
    margin: 1.5rem 0 3rem;
  }

  .popular-page-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    color: var(--md-default-fg-color);
  }

  .popular-page-links a:first-child {
    border-top: 1px solid var(--md-default-fg-color--lightest);
  }

  .popular-page-links a::after {
    content: "›";
    font-size: 1.25rem;
    color: var(--md-default-fg-color--light);
    flex-shrink: 0;
    margin-left: 1rem;
  }

  .popular-page-links a:active {
    background: var(--md-default-fg-color--lightest);
    margin: 0 -0.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

.tabbed-labels.tabbed-labels--linked::before {
  background-color: var(--md-primary-fg-color) !important;
}



/* ==========================================================
   Tile system: shared variables
   ========================================================== */
.grid.cards.home-tiles,
.grid.cards.regular,
.grid.cards.regular-clickable {
  --tile-gap: 1rem;
  --tile-outline: 1px;
  --tile-bottom-bar: 10px;
  --tile-shadow: var(--md-shadow-z1, 0 2px 8px rgba(0,0,0,.08));
  --tile-shadow-hover: var(--md-shadow-z2, 0 6px 24px rgba(0,0,0,.12));
  --tile-bg: var(--md-default-bg-color, #fff);
  --tile-gradient: linear-gradient(90deg, #00A5AA, #8600C8);
  gap: var(--tile-gap);
}

/* ==========================================================
   Base tile
   ========================================================== */
.grid.cards.home-tiles > ul > li,
.grid.cards.home-tiles > ol > li,
.grid.cards.regular > ul > li,
.grid.cards.regular > ol > li,
.grid.cards.regular-clickable > ul > li,
.grid.cards.regular-clickable > ol > li {
  position: relative;
  background: var(--tile-bg);
  border-radius: var(--tile-radius);
  border: 1px solid transparent;
  padding: 1.25rem;
  box-shadow: var(--tile-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ==========================================================
   Gradient outline — regular tiles
   ========================================================== */
.grid.cards.regular > ul > li::before,
.grid.cards.regular > ol > li::before,
.grid.cards.regular-clickable > ul > li::before,
.grid.cards.regular-clickable > ol > li::before {
  content: "";
  position: absolute;
  inset: calc(var(--tile-outline) * -1);
  border-radius: inherit;
  padding: var(--tile-outline);
  background: var(--tile-gradient);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ==========================================================
   Home tiles — gradient border + bottom bar
   ========================================================== */
.grid.cards.home-tiles > ul > li::before,
.grid.cards.home-tiles > ol > li::before {
  content: "";
  position: absolute;
  inset: calc(var(--tile-outline) * -1);
  border-radius: inherit;
  padding:
    var(--tile-outline)
    var(--tile-outline)
    calc(var(--tile-outline) + var(--tile-bottom-bar))
    var(--tile-outline);
  background: var(--tile-gradient);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ==========================================================
   Typography — all tiles
   ========================================================== */
.grid.cards.home-tiles h3,
.grid.cards.regular h3,
.grid.cards.regular-clickable h3,
.grid.cards.home-tiles h4,
.grid.cards.regular h4,
.grid.cards.regular-clickable h4 {
  margin: .4rem 0 .25rem;
}

.grid.cards.home-tiles h3 {
  font-size: 0.9rem;
}


.grid.cards.home-tiles p,
.grid.cards.regular p,
.grid.cards.regular-clickable p {
  margin: 0 0 .25rem;
  color: var(--md-default-fg-color);
}

/* ==========================================================
   Stretched link (clickable tiles)
   ========================================================== */
.grid.cards.home-tiles > ul > li,
.grid.cards.home-tiles > ol > li,
.grid.cards.regular-clickable > ul > li,
.grid.cards.regular-clickable > ol > li {
  cursor: pointer;
}

.grid.cards.home-tiles > ul > li > p:last-child > strong > a,
.grid.cards.home-tiles > ol > li > p:last-child > strong > a,
.grid.cards.regular-clickable > ul > li > p:last-child > strong > a,
.grid.cards.regular-clickable > ol > li > p:last-child > strong > a {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  background: transparent;
  cursor: inherit;
}

/* Hide last paragraph for clickable tiles */
.grid.cards.home-tiles > ul > li > p:last-child,
.grid.cards.home-tiles > ol > li > p:last-child,
.grid.cards.regular-clickable > ul > li > p:last-child,
.grid.cards.regular-clickable > ol > li > p:last-child {
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================
   Regular tiles — show buttons normally
   ========================================================== */
.grid.cards.regular > ul > li,
.grid.cards.regular > ol > li {
  cursor: default;
}

.grid.cards.regular > ul > li > p:last-child,
.grid.cards.regular > ol > li > p:last-child {
  margin: 0 0 .25rem !important;
  height: auto !important;
  overflow: visible !important;
}

.grid.cards.regular > ul > li > p:last-child > strong > a,
.grid.cards.regular > ol > li > p:last-child > strong > a {
  position: static !important;
  text-indent: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  background: none !important;
  cursor: pointer;
}

/* ==========================================================
   Hover animation — all tiles
   ========================================================== */
.grid.cards.home-tiles > ul > li:hover,
.grid.cards.home-tiles > ol > li:hover,
.grid.cards.home-tiles > ul > li:focus-within,
.grid.cards.home-tiles > ol > li:focus-within,
.grid.cards.regular > ul > li:hover,
.grid.cards.regular > ol > li:hover,
.grid.cards.regular > ul > li:focus-within,
.grid.cards.regular > ol > li:focus-within,
.grid.cards.regular-clickable > ul > li:hover,
.grid.cards.regular-clickable > ol > li:hover,
.grid.cards.regular-clickable > ul > li:focus-within,
.grid.cards.regular-clickable > ol > li:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--tile-shadow-hover);
  border-color: transparent !important;
}

/* ==========================================================
   Layout sizing — single source of truth
   Change these two variables; the grid, sidebar line, and
   gaps all update automatically.
   ========================================================== */
:root {
  --apteco-grid-max-width: 1900px;
  --apteco-nav-width: 14rem;
  --apteco-nav-bg: rgb(250, 251, 252); /* very light grey — applied to header + left nav strip */
}

.md-grid {
  max-width: var(--apteco-grid-max-width);
}

/* ==========================================================
   Sidebar widths (desktop only — mobile uses fixed positioning)
   Default left nav: 12.1rem. Default right TOC: 12.1rem.
   ========================================================== */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: var(--apteco-nav-width);
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    padding-right: 1rem;
  }
  .md-sidebar--secondary {
    width: 14rem;
  }

  /* Gap between content and both sidebars.
     .md-path (breadcrumbs) sits outside .md-content__inner so
     needs the same left margin applied separately.
     .md-footer__inner (prev/next nav) gets matching padding so it
     aligns with the content area edges. */
  .md-content__inner {
    margin-left: clamp(1.2rem, 6vw, 7rem) !important;
    margin-right: clamp(1.2rem, 6vw, 7rem) !important;
  }
  .md-path {
    margin-left: clamp(1.2rem, 6vw, 7rem) !important;
  }
  .md-footer__inner {
    padding-left: var(--apteco-nav-width);
    padding-right: var(--apteco-nav-width);
  }
}

/* ==========================================================
   Left nav sidebar — separator border + dark mode panel
   The sidebar element has height:0 on desktop (Material sticky
   trick), so border/background on it won't render. Instead we
   paint via a gradient on .md-main, which spans full viewport
   width and full page height and shows through the sidebar's
   transparent background.

   The gradient stop position tracks the sidebar's right edge:
     (100% - min(100%, --apteco-grid-max-width)) / 2 + --apteco-nav-width
   ========================================================== */
@media screen and (min-width: 76.25em) {
  /* Left strip: subtle grey background + 1px separator (light mode).
     :has() check ensures the gradient only appears when the sidebar is
     actually visible — pages with hidden navigation (e.g. homepage) are excluded. */
  .md-main:has(.md-sidebar--primary:not([hidden])) {
    background-image: linear-gradient(
      to right,
      var(--apteco-nav-bg)                 calc((100% - min(100%, var(--apteco-grid-max-width))) / 2 + var(--apteco-nav-width)),
      var(--md-default-fg-color--lightest) calc((100% - min(100%, var(--apteco-grid-max-width))) / 2 + var(--apteco-nav-width)),
      var(--md-default-fg-color--lightest) calc((100% - min(100%, var(--apteco-grid-max-width))) / 2 + var(--apteco-nav-width) + 1px),
      transparent                          calc((100% - min(100%, var(--apteco-grid-max-width))) / 2 + var(--apteco-nav-width) + 1px)
    );
  }

  /* Dark mode: fill sidebar strip with header-matching colour */
  [data-md-color-scheme="slate"] .md-main:has(.md-sidebar--primary:not([hidden])) {
    background-image: linear-gradient(
      to right,
      rgba(26, 29, 36, 0.88)               calc((100% - min(100%, var(--apteco-grid-max-width))) / 2 + var(--apteco-nav-width)),
      var(--md-default-fg-color--lightest)  calc((100% - min(100%, var(--apteco-grid-max-width))) / 2 + var(--apteco-nav-width)),
      var(--md-default-fg-color--lightest)  calc((100% - min(100%, var(--apteco-grid-max-width))) / 2 + var(--apteco-nav-width) + 1px),
      transparent                           calc((100% - min(100%, var(--apteco-grid-max-width))) / 2 + var(--apteco-nav-width) + 1px)
    );
  }
}
/* =========================================
   Anchor link copy-to-clipboard toast
   Teal pill to match the Zensical code block 'Copied to clipboard' notification.
   ========================================= */
#apteco-anchor-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: var(--md-primary-fg-color);
  color: #fff;
  font-family: var(--md-text-font-family);
  font-size: .64rem;
  font-weight: 600;
  padding: .45rem 1rem;
  border-radius: 2rem;
  box-shadow: var(--md-shadow-z2);
  opacity: 0;
  transform: translateY(.4rem);
  transition: transform 0ms .25s, opacity .25s;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}

#apteco-anchor-toast.apteco-anchor-toast--visible {
  opacity: 1;
  transform: translateY(0);
  transition: transform .25s cubic-bezier(.1,.7,.1,1), opacity .25s;
}

/* Print button: override Material's fill:currentColor so Lucide stroke icon renders correctly */
#apteco-print-btn svg {
  fill: none;
}

/* Print button tooltip — matches .md-tooltip2 native styles */
#apteco-print-btn {
  position: relative;
}
#apteco-print-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  padding: 0.2rem 0.4rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-family: var(--md-text-font-family);
  font-size: 0.55rem;
  font-weight: 400;
  border-radius: 0.4rem;
  box-shadow: var(--md-shadow-z2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.4rem);
  transition: transform 0ms 0.25s, opacity 0.25s;
  z-index: 9999;
}
#apteco-print-btn:hover::after {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0, 1, 0.35, 1), opacity 0.25s;
}

@media print {
  #apteco-print-btn { display: none; }
}

/* ==========================================================
   Patch component tags
   ========================================================== */
.patch-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  border-radius: 2rem;
  color: #fff;
  text-transform: none;
  letter-spacing: 0.01em;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.patch-tag--service     { background-color: #374785; }
.patch-tag--faststats   { background-color: #4a9e3f; }
.patch-tag--designer    { background-color: #6700a0; }
.patch-tag--peoplestage { background-color: #b86d00; }
.patch-tag--orbit       { background-color: #1e7fbe; }
.patch-tag--digital     { background-color: #c44500; }
.patch-tag--excelsior   { background-color: #2d7d7d; }
.patch-tag--utilities   { background-color: #5a6282; }

/* =========================================
   Release notes — Latest badge
   ========================================= */
.rn-latest {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  border-radius: 2rem;
  background-color: rgba(0, 165, 170, 0.08);
  color: var(--md-primary-fg-color);
  border: 1px solid rgba(0, 165, 170, 0.3);
  letter-spacing: 0.01em;
  vertical-align: 0.25em;
  margin-left: 0.5rem;
}

[data-md-color-scheme="slate"] .rn-latest {
  background-color: rgba(0, 165, 170, 0.12);
  border-color: rgba(0, 165, 170, 0.45);
}

/* Hide Latest badge in TOC sidebar */
.md-nav__link .rn-latest { display: none; }

/* =========================================
   Release notes — feature type labels
   ========================================= */
.rn-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.15em;
  margin-right: 0.35rem;
}

.rn-tag--new       { background-color: #009aa0; }
.rn-tag--improved  { background-color: #6b87a8; }
.rn-tag--highlight { background-color: #7b5ea7; }

/* Hide type labels in TOC sidebar */
.md-nav__link .rn-tag { display: none; }