/* ═══════════════════════════════════════════════════════════════
   SiriScore docs — design system ported from the web app
   (web/style.css @ github.com/siri-score/siriscore).
   All colour/size/weight values are taken verbatim from the app.
   ═══════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (copied from web/style.css; no CDN) ──── */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrainsmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrainsmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── App design tokens (verbatim) ───────────────────────────── */
:root {
  --bg:             #F9F7F4;
  --surface:        #FFFFFF;
  --border:         #E2E8F0;
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;

  --orange:         #EA580C;
  --orange-light:   #FFF7ED;
  --orange-dark:    #C2410C;

  --green:          #16A34A;
  --green-light:    #DCFCE7;

  --red:            #DC2626;
  --red-light:      #FEF2F2;

  --amber:          #D97706;
  --amber-light:    #FFFBEB;

  --slate:          #475569;
  --slate-light:    #F8FAFC;

  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";
}

/* ── Material variables — light scheme ──────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:          #EA580C;
  --md-primary-fg-color--light:   #FFF7ED;
  --md-primary-fg-color--dark:    #C2410C;
  --md-accent-fg-color:           #C2410C;
  --md-default-bg-color:          #F9F7F4;
  --md-default-fg-color:          #0F172A;
  --md-default-fg-color--light:   #475569;
  --md-default-fg-color--lighter: #94A3B8;
  --md-default-fg-color--lightest:#E2E8F0;
  --md-typeset-color:             #475569;
  --md-typeset-a-color:           #EA580C;
  --md-code-bg-color:             #FFFFFF;
  --md-code-fg-color:             #0F172A;
  --md-typeset-mark-color:        #FFF7ED;
  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;
}

/* ── Material variables — dark scheme (derived: same Tailwind
      slate family, one step per token; app is light-only) ────── */
[data-md-color-scheme="slate"] {
  /* Body follows Material's stock slate palette (user request — matches
     the pre-branch dark body). Map the app tokens onto it so cards, code
     blocks and tables blend in; header and footer pin their own values. */
  --bg:             var(--md-default-bg-color);
  --surface:        var(--md-code-bg-color);
  --border:         var(--md-default-fg-color--lightest);
  --text-primary:   var(--md-default-fg-color);
  --text-secondary: var(--md-default-fg-color--light);
  --text-muted:     var(--md-default-fg-color--lighter);

  --orange:         #EA580C;   /* brand anchor: identical in both modes */
  --orange-dark:    #F97316;   /* orange-500: hover lightens on dark */

  /* green/red/amber text bumped one Tailwind step to -500: the -600
     values fall below 4.5:1 on slate-800 cards at badge sizes (bump
     explicitly allowed by the issue spec) */
  --green:          #22C55E;
  --red:            #EF4444;
  --amber:          #F59E0B;
  --slate:          #94A3B8;   /* slate-400 */

  /* pastel -50/-100 tints don't work on dark: use low-opacity
     versions of the saturated colours instead */
  --orange-light:   rgba(234, 88, 12, 0.12);
  --green-light:    rgba(22, 163, 74, 0.15);
  --red-light:      rgba(220, 38, 38, 0.15);
  --amber-light:    rgba(217, 119, 6, 0.15);
  --slate-light:    rgba(148, 163, 184, 0.10);

  --md-primary-fg-color:          #EA580C;
  --md-primary-fg-color--light:   rgba(234, 88, 12, 0.12);
  --md-primary-fg-color--dark:    #F97316;   /* orange-500: hover lightens on dark */
  --md-accent-fg-color:           #F97316;
  --md-typeset-a-color:           #EA580C;
  --md-typeset-mark-color:        rgba(234, 88, 12, 0.25);
  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;
}

/* ═══ Typography ═════════════════════════════════════════════ */

.md-typeset {
  font-size: 0.7rem;          /* 14px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-weight: 600;           /* app never exceeds 600 */
  color: var(--text-primary);
}

.md-typeset h1 { font-size: 1.6rem;  margin-bottom: 0.8em; }   /* 32px */
.md-typeset h2 { font-size: 1.2rem; }                          /* 24px */
.md-typeset h3 { font-size: 0.9rem; }                          /* 18px */
.md-typeset h4 { font-size: 0.8rem; }                          /* 16px */
.md-typeset h5,
.md-typeset h6 {
  font-size: 0.7rem;
  color: var(--text-primary);
  text-transform: none;
}

.md-typeset a {
  color: var(--orange);
  transition: color 150ms;
}
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--orange-dark);   /* resolves to orange-500 on dark */
}

.md-typeset li { line-height: 1.7; }   /* app list items use 1.7 */

.md-typeset small,
.md-typeset .caption { font-size: 0.65rem; }

/* Prose measure: the app constrains content to 780px */
.md-content__inner { max-width: 40rem; }

/* ═══ Code ═══════════════════════════════════════════════════ */

.md-typeset code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;         /* 13px */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.1em 0.35em;
  color: var(--md-code-fg-color);
}

.md-typeset pre > code {
  border: none;
  border-radius: 0;
  padding: 12px 16px;
}

.md-typeset pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.md-typeset .highlight pre { margin: 0; }

.md-clipboard { color: var(--text-muted); }
.md-clipboard:hover { color: var(--orange); }

/* ═══ Header ═════════════════════════════════════════════════ */

.md-header {
  background: var(--surface);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.md-header--shadow { box-shadow: none; }

/* Dark mode: pre-branch header colours (slate-900 bg, white text) —
   explicit user request; keep even though the app spec maps the header
   to --surface */
[data-md-color-scheme="slate"] .md-header {
  background: #0F172A;
  color: #FFFFFF;
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  /* keep the search field on the old slate tokens too ("nav as is") */
  --surface: #1E293B;
  --border:  #334155;
  --text-primary: #F1F5F9;
  --text-muted:   #64748B;
}

.md-header__button {
  color: var(--text-secondary);
  transition: color 150ms;
}
.md-header__button:hover { color: var(--orange); }
[data-md-color-scheme="slate"] .md-header__button { color: #FFFFFF; }
[data-md-color-scheme="slate"] .md-header__button:hover { color: var(--orange); }
[data-md-color-scheme="slate"] .md-header .md-source { color: #FFFFFF; }

/* Logo sizing (pre-branch rule; only colours changed on this branch) */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 36px;
  width: auto;
}

/* "Siri" in the site name (wrapped in overrides/partials/header.html) */
.ss-siri { color: var(--amber); }

/* ═══ Search ═════════════════════════════════════════════════ */

@media screen and (min-width: 60em) {
  .md-search__form {
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color 150ms;
  }
  .md-search__form:hover { background: var(--surface); }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-color: var(--orange);     /* app focus style: orange border, no ring */
  }
  .md-search__input {
    color: var(--text-primary);
    font-size: 0.7rem;
  }
  .md-search__input::placeholder { color: var(--text-muted); }
  .md-search__icon,
  .md-search__options { color: var(--text-muted); }
}

.md-search__output {
  border: 1px solid var(--border);
  border-top: none;
}
.md-search-result__meta {
  background: var(--slate-light);
  color: var(--text-secondary);
}
.md-search-result__teaser mark { color: var(--orange); background: transparent; }

/* ═══ Sidebar navigation ═════════════════════════════════════ */

.md-nav { font-size: 0.7rem; }

.md-nav__link {
  color: var(--text-secondary);
  font-weight: 400;
  transition: color 150ms;
}
.md-nav__link:hover { color: var(--orange); }

/* TOC (right sidebar) keeps its original medium weight */
.md-nav--secondary .md-nav__link { font-weight: 500; }

/* Nested group labels ("Penalty heuristics", "Positive heuristics"):
   bold like the top-level section headings — explicit user request
   2026-07-07, supersedes the earlier match-the-sub-items treatment */
.md-nav--primary .md-nav__item--nested > .md-nav__link {
  font-weight: 700;
}

/* Top-level headings: bold, normal case.
   With navigation.indexes the section label sits in a .md-nav__container */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav__item--section > .md-nav__link,
.md-nav__item--section > .md-nav__container .md-nav__link {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Bold only: Home, Getting Started, Library Reference, Heuristics, REST API,
   Wallet Guides, Label System. Contributing (8th) is a pagination-style
   call-out: orange bold with a trailing », no border or rounded corners
   (explicit user request) — position-based, so update this index if the
   nav order in mkdocs.yml changes */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(8) > .md-nav__link {
  font-weight: 700;
  color: var(--orange);
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(8) > .md-nav__link::after {
  content: " »";
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(8) > .md-nav__link:hover {
  color: var(--orange-dark);
}
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(8) > .md-nav__link--active {
  border-radius: 0;
}
.md-nav__item--section { margin-top: 1.2em; }

/* Hover/active must outrank the heading rule above (same specificity) */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link--active,
.md-nav__item--section > .md-nav__link:hover,
.md-nav__item--section > .md-nav__link--active,
.md-nav__item--section > .md-nav__container .md-nav__link:hover,
.md-nav__item--section > .md-nav__container .md-nav__link--active {
  color: var(--orange);
}

/* Active item: accent-left pattern reused from the app's cards */
.md-nav__link--active,
.md-nav__item--active > .md-nav__link:not(.md-nav__container .md-nav__link) {
  color: var(--orange);
  font-weight: 500;
}
.md-nav--primary .md-nav__link--active {
  background: var(--orange-light);
  border-radius: 8px;
}

/* Table of contents (right sidebar) */
.md-nav--secondary .md-nav__link--active { color: var(--orange); }
.md-nav--secondary .md-nav__title { color: var(--text-muted); }

/* The desktop sidebar title repeats the site name already shown in the
   header; hide it there. Below the breakpoint the same element is the
   drawer header, so it must stay visible. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__title { display: none; }
}

/* ═══ Mobile drawer (≤ 76.1875em Material breakpoint) ════════ */

@media screen and (max-width: 76.1875em) {
  .md-nav--primary,
  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__list {
    background: var(--md-default-bg-color);
    color: var(--text-primary);
  }
  .md-nav--primary .md-nav__title {
    background: var(--surface);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
  }
  .md-nav--primary .md-nav__title .md-nav__icon { color: var(--text-secondary); }
  .md-nav--primary .md-nav__item { border-top: 1px solid var(--border); }
  .md-nav--primary .md-nav__link--active { border-radius: 0; }
  /* Repo link block at the top of the drawer */
  .md-nav__source {
    background: var(--surface);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
  }
  /* Tapping anywhere on a section row expands it instead of navigating
     to its index page: stretch the toggle label over the whole row
     (the index link stays reachable as usual once expanded via the
     subnav title). Desktop is unaffected. */
  .md-nav--primary .md-nav__item--nested > .md-nav__container {
    position: relative;
  }
  .md-nav--primary .md-nav__item--nested > .md-nav__container > .md-nav__link[for] {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0.6rem 0.8rem;
    justify-content: flex-end;
  }
}

/* Header repo source link (desktop) */
.md-source { color: var(--text-secondary); }
.md-source:hover { color: var(--orange); opacity: 1; }
.md-source__repository { font-size: 0.65rem; }

/* ═══ Admonitions → app finding-cards (flat, 3px left accent) ═ */

.md-typeset .admonition,
.md-typeset details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--slate);   /* info/note default: slate */
  border-radius: 8px;
  font-size: 0.65rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent !important;
  font-weight: 600;
  color: var(--text-primary);
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--slate) !important;
}

/* amber = warning */
.md-typeset :is(.admonition, details):is(.warning, .caution, .attention, .question, .help, .faq) {
  border-color: var(--border);
  border-left-color: var(--amber);
}
.md-typeset :is(.warning, .caution, .attention, .question, .help, .faq) > :is(.admonition-title, summary)::before {
  background-color: var(--amber) !important;
}

/* red = critical/danger */
.md-typeset :is(.admonition, details):is(.danger, .error, .failure, .fail, .missing, .bug) {
  border-color: var(--border);
  border-left-color: var(--red);
}
.md-typeset :is(.danger, .error, .failure, .fail, .missing, .bug) > :is(.admonition-title, summary)::before {
  background-color: var(--red) !important;
}

/* green = success/positive (positive cards get the green tint bg) */
.md-typeset :is(.admonition, details):is(.success, .check, .done) {
  border-color: var(--border);
  border-left-color: var(--green);
  background: var(--green-light);
}
.md-typeset :is(.success, .check, .done) > :is(.admonition-title, summary)::before {
  background-color: var(--green) !important;
}

/* orange = tips / "what to do next" (like the app's next-card) */
.md-typeset :is(.admonition, details):is(.tip, .hint, .important, .example) {
  border-color: var(--border);
  border-left-color: var(--orange);
  background: var(--orange-light);
}
.md-typeset :is(.tip, .hint, .important, .example) > :is(.admonition-title, summary)::before {
  background-color: var(--orange) !important;
}

/* slate = info/note/abstract/quote */
.md-typeset :is(.admonition, details):is(.note, .info, .abstract, .summary, .todo, .quote) {
  border-color: var(--border);
  border-left-color: var(--slate);
}

/* ═══ Buttons (app CTA styles) ═══════════════════════════════ */

/* Secondary: white, orange border/text */
.md-typeset .md-button {
  background: var(--surface);
  border: 1px solid var(--orange);
  color: var(--orange);
  border-radius: 8px;
  font-size: 0.7rem;          /* 14px */
  font-weight: 500;
  padding: 10px 20px;
  transition: background 150ms;
}
.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--orange-light);
  border-color: var(--orange);
  color: var(--orange);
}

/* Primary: solid orange, 48px tall */
.md-typeset .md-button--primary {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.75rem;         /* 15px */
  font-weight: 600;
  height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 24px;
  transition: background 150ms, transform 80ms;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background: var(--orange-dark);   /* darkens on light, lightens on dark */
  color: #fff;
}
.md-typeset .md-button--primary:active { transform: scale(0.98); }

/* ═══ Grid cards (homepage) ══════════════════════════════════ */

.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  transition: border-color 150ms;
}
.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border-color: var(--orange);
}

/* ═══ Tables ═════════════════════════════════════════════════ */

.md-typeset table:not([class]) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.65rem;
}
.md-typeset table:not([class]) th {
  background: var(--slate-light);
  color: var(--text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

/* ═══ Content tabs (pymdownx.tabbed) ═════════════════════════ */

.md-typeset .tabbed-labels > label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 150ms;
}
.md-typeset .tabbed-labels > label:hover { color: var(--orange); }
.md-typeset .tabbed-set > input:checked + .tabbed-labels-anchor + .tabbed-labels > label,
.md-typeset .tabbed-labels > label > [for] { color: var(--orange); }
.js .md-typeset .tabbed-labels::before { background: var(--orange); }

/* ═══ Misc chrome ════════════════════════════════════════════ */

/* "Copied to clipboard" toast: amber on the palette's light gray
   (--slate-light: slate-50, the closest light-gray token) */
.md-dialog {
  background: var(--slate-light);
  border: 1px solid var(--amber);
  border-radius: 8px;
}
.md-dialog__inner { color: var(--amber); }

/* Back-to-top button */
.md-top {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.md-top:hover {
  background: var(--orange-light);
  color: var(--orange);
}

/* Pagination footer links (prev/next) are replaced by custom footer;
   keep Material's internal nav hidden along with its default footer */
.md-footer { display: none; }

/* Focus visible: orange, no glow ring (app pattern) */
:focus-visible { outline-color: var(--orange); }

/* "Overview" links injected by extra.js exist for the mobile drawer only;
   on desktop the section label itself links to the index page */
@media screen and (min-width: 76.25em) {
  .ss-index-item { display: none; }
}

/* Scrollbar-adjacent borders */
.md-sidebar--primary { border-right: 1px solid var(--border); }

@media screen and (max-width: 76.1875em) {
  .md-sidebar--primary { border-right: none; }
}

/* ═══ Homepage hero ══════════════════════════════════════════ */

.ss-hero { padding: 24px 0 8px; }

.ss-hero h1 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4em;
}

.ss-hero__tagline {
  font-size: 0.8rem;          /* 16px */
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 560px;
}

.ss-hero__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 8px;
}

/* Score-card demo (mirrors the app's results card) */
.ss-hero__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  gap: 32px;
  align-items: center;
  margin-top: 32px;
}

.ss-score { width: 180px; flex-shrink: 0; }

.ss-score__number {
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
}

.ss-score__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 4px;
}

.ss-verdict {
  display: inline-block;
  margin-top: 8px;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 500;
}
.ss-verdict--good { background: var(--green-light); color: var(--green); }
.ss-verdict--fair { background: var(--amber-light); color: var(--amber); }
.ss-verdict--poor { background: var(--red-light);   color: var(--red); }

.ss-gauge { flex: 1; min-width: 0; position: relative; }

.ss-gauge__bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
}
.ss-gauge__red   { width: 39%; background: var(--red);   border-radius: 4px 0 0 4px; }
.ss-gauge__amber { width: 30%; background: var(--amber); }
.ss-gauge__green { width: 31%; background: var(--green); border-radius: 0 4px 4px 0; }

.ss-gauge__dot {
  position: absolute;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--green);
  transform: translate(-50%, -50%);
}

.ss-gauge__caption {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}

@media (max-width: 640px) {
  .ss-hero__card { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ss-score { width: auto; }
  .ss-gauge { width: 100%; }
}

/* ═══ Prev / next page links ═════════════════════════════════ */

.ss-prevnext {
  /* rendered inside .md-content__inner so it tracks the content
     column, not the full container (would sit under the sidebar) */
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* Pagination-style call-out like the Contributing sidebar item:
   orange 700 title with «/», explicitly NO border or box */
.ss-prevnext__link {
  display: block;
  max-width: 48%;
  text-decoration: none;
}
.ss-prevnext__link--next { margin-left: auto; text-align: right; }

.ss-prevnext__direction {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.ss-prevnext__title {
  display: block;
  color: var(--orange);
  font-weight: 500;
  transition: color 150ms;
}
.ss-prevnext__link:hover .ss-prevnext__title { color: var(--orange-dark); }

/* ═══ Custom footer ══════════════════════════════════════════ */

/* Footer mirrors the app header: white surface, 1px border, no dark block */
.ss-footer {
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.65rem;
  border-top: 1px solid var(--border);
}

/* Dark mode: footer matches the navbar (slate-900 bg, white hairline)
   while the body follows Material's stock slate palette */
[data-md-color-scheme="slate"] .ss-footer {
  --surface: #0F172A;
  --border:  rgba(255, 255, 255, 0.08);
  --text-primary:   #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
}

.ss-footer__inner {
  max-width: 61rem;
  margin: 0 auto;
  padding: 48px 24px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.ss-footer__wordmark {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.ss-footer__wordmark .ss-footer__logo-icon { height: 32px; width: auto; }
.ss-footer__wordmark .ss-footer__logo-name { height: 20px; width: auto; }

.ss-footer__tagline {
  display: block;
  color: var(--text-muted);
  font-size: 0.65rem;
  max-width: 220px;
  line-height: 1.6;
}

.ss-footer__col h4 {
  color: var(--text-muted);
  font-size: 0.6rem;          /* 12px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 14px 0;
}

.ss-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-footer__col ul li { margin-bottom: 10px; }

.ss-footer__col a {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 150ms;
}
.ss-footer__col a:hover { color: var(--orange); }
.ss-footer__col a svg { flex-shrink: 0; }

.ss-footer__bottom {
  max-width: 61rem;
  margin: 0 auto;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.6rem;
  color: var(--text-muted);
}

.ss-footer__bottom a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 150ms;
}
.ss-footer__bottom a:hover { color: var(--orange); }

@media (max-width: 960px) {
  .ss-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .ss-footer__inner { grid-template-columns: 1fr; }
}