/* Changelog badge styling. Loaded on every page via _includes/head.html.
   Research: openspec/changes/archive/2026-07-14-series-changelog-system/versions/v10/retype-styling-research.md
   Badge classes read from --badge-{variant} custom properties, defined per theme
   (:root = light, .dark = dark) — override the variables, not the classes. */

/* DO NOT hide a.docs-powered-by ("Powered by Retype", sidebar bottom + mobile
   menu) from here — not with display:none, visibility, opacity, or zero size.
   Retype's retype.js runs a tamper check ~10ms after load: it collects every
   a.docs-powered-by, verifies href/label/svg dimensions/svg-path checksum, and
   requires at least one to be RENDERED (offsetWidth || offsetHeight ||
   getClientRects().length). On an unlicensed build a hidden badge fails that
   check and Retype unmounts the app, replacing the whole page with "Website
   Configuration Error". A display:none rule here took the dev site down on
   2026-08-10. The badge is removed the supported way instead: the Pro key in
   deployment/Dockerfile's RETYPE_SECRET_KEY makes `poweredByRetype: false`
   effective, and a licensed build never emits the element at all. */

/* Badge text must be clearly distinct from the badge background (Rule 11). */
[class*="bg-badge-"] {
  font-weight: 700 !important;
}

/* Site accent: EXACT help-center orange system. The help center sets Pro-only
   branding.baseColor: #fd7e14, which Retype compiles into a derived scale; our
   free-tier build instead hardcodes blue (#5494F2 family) at the leaf variables.
   The values below replicate the help center's compiled mapping verbatim
   (extracted from https://help.intratec.us resources/css/retype.css):
   - light: link #fd7e14, hover = mix 60% black; nav hover bg = mix 10% white,
     nav selected bg = mix 15% white; active vertical line #fd7e14.
   - dark: link and vertical line stay EXACTLY #fd7e14 (never lightened);
     hover = mix 50% white; nav hover/selected boxes are GRAY (#2d2d2d/#323232),
     not orange — only the text and line carry the accent.
   Static hex first, color-mix override after (same fallback pattern the help
   center ships). */
:root {
  --base-link: #fd7e14;
  --base-link-hover: #984C0C;
  --base-link-hover: color-mix(in srgb, #fd7e14 60%, #000);
  --body-link-decoration-color: #fd7e14;
  --body-link-decoration-color-hover: #fd7e14;
  --base-item-bg-hover: #FEF2E8;
  --base-item-bg-hover: color-mix(in srgb, #fd7e14 10%, #fff);
  --base-item-bg-active: #FEECDC;
  --base-item-bg-active: color-mix(in srgb, #fd7e14 15%, #fff);
  --nav-item-bg-hover: var(--base-item-bg-hover);
  --nav-item-bg-active: var(--base-item-bg-active);
  --nav-item-bg-active-hover: var(--base-item-bg-active);
  --nav-item-text-hover: var(--base-link);
  --nav-item-text-active: var(--base-link);
  --nav-item-text-active-hover: var(--base-link);
  --nav-item-border-active: var(--base-link);
  --toc-text-hover: var(--base-link);
  --toc-text-active: var(--base-link);
  --toc-border-active: var(--base-link);
}
.dark {
  --base-link: #fd7e14;
  --base-link-hover: #FEBE89;
  --base-link-hover: color-mix(in srgb, #fd7e14 50%, #fff);
  --body-link-decoration-color: #fd7e14;
  --body-link-decoration-color-hover: #fd7e14;
  --base-item-bg-hover: #2d2d2d;
  --base-item-bg-active: #323232;
  --nav-item-bg-hover: #2d2d2d;
  --nav-item-bg-active: #323232;
  --nav-item-bg-active-hover: #323232;
  --nav-item-border-active: #fd7e14;
  --toc-text-hover: #fd7e14;
  --toc-text-active: #fd7e14;
  --toc-border-active: #fd7e14;
}

/* Remaining blue-hardcoded chrome our build ships that the help center derives
   from the orange scale: bottom prev/next pager, search-result highlight, tabs,
   step numbers, checked-list markers, footnote popovers. (Badge variables are
   deliberately NOT touched — the label palette above is operator-approved.) */
:root {
  --search-highlight-bg: #FEECDC;
  --search-highlight-bg: color-mix(in srgb, #fd7e14 15%, #fff);
  --pager-text: #fd7e14;
  --pager-text-hover: var(--base-link-hover);
  --pager-bg-active: #fd7e14;
  --pager-bg-active-hover: var(--base-link-hover);
  --pager-border-active-hover: #fd7e14;
  --tab-text-active: #fd7e14;
  --tab-text-hover: #fd7e14;
  --tab-border-active: #fd7e14;
  --steps-step-number-bg: #fd7e14;
  --steps-step-number-border: #fd7e14;
  --list-checked: #fd7e14;
  --footnote-popper-link: #fd7e14;
}
.dark {
  --search-highlight-bg: #323232;
}

/* FEATURE — variant "success": Retype's stock pastel (#E6F4F2) is too neutral.
   A confident green in both themes. */
:root {
  --badge-success: #DFF5E4;
  --badge-success-text: #1F7A3D;
  --badge-success-border: #B7E3C4;
}
.dark {
  --badge-success: #14532D;
  --badge-success-text: #86EFAC;
  --badge-success-border: #1F6B3D;
}

/* IMPROVEMENT — variant "info": stock info is a transparent outline chip.
   A solid blue "informational change" chip in both themes. IMPROVEMENT moved
   from "secondary" to "info" so the MINOR scale badge keeps its muted secondary. */
:root {
  --badge-info: #E3EDFD;
  --badge-info-text: #2563EB;
  --badge-info-border: #C5D9FA;
}
.dark {
  --badge-info: #1E3A5F;
  --badge-info-text: #7EB3F7;
  --badge-info-border: #2B4C7A;
}

/* FIX — variant "warning": outline style (v11 D6 — a filled box draws too much
   attention for corrections). Transparent chip, amber text/border per theme. */
:root {
  --badge-warning: transparent;
  --badge-warning-text: #B4842E;
  --badge-warning-border: #D9B36A;
}
.dark {
  --badge-warning: transparent;
  --badge-warning-text: #F5C36B;
  --badge-warning-border: #8A6A2E;
}

/* MINOR FEATURE — variant "base": outline twin of FEATURE's green (v11 D5 —
   MAJOR filled, MINOR transparent). */
:root {
  --badge-base: transparent;
  --badge-base-text: #1F7A3D;
  --badge-base-border: #7FC898;
}
.dark {
  --badge-base: transparent;
  --badge-base-text: #86EFAC;
  --badge-base-border: #2E7D4C;
}

/* MINOR IMPROVEMENT — variant "primary": outline twin of IMPROVEMENT's blue. */
:root {
  --badge-primary: transparent;
  --badge-primary-text: #2563EB;
  --badge-primary-border: #93B8F5;
}
.dark {
  --badge-primary: transparent;
  --badge-primary-text: #7EB3F7;
  --badge-primary-border: #3B5F8F;
}

/* RETIRED — variant "dark": stock renders a solid navy chip with white text in
   light mode — overwhelming. A muted gray chip in light; subdued gray in dark. */
:root {
  --badge-dark: #EEF0F3;
  --badge-dark-text: #5B6472;
  --badge-dark-border: #D8DDE4;
}
.dark {
  --badge-dark: #3A3D42;
  --badge-dark-text: #C3C9D1;
  --badge-dark-border: #4B4F56;
}