/* The site bar and footer of /learn, /learn/ranges and /gto-solutions in the Notation identity (board: marketing/identity/unified-a, §6f).
   Markup: tools/site_chrome.py, with the mark and wordmark swapped by tools/brand_chrome.py. Loaded after /static-chrome.css and
   /brand/brand.css, so it restyles the shared .sc-* classes for these pages only. Klein bar (as on the marketing pages), ART/GTO lock-up
   (site_chrome.BAR_LOGO, the kit's on-klein file), Martian Mono links, Pricing acid-underlined, vermilion CTA. Squared, no shadows. */

.sc-top, .sc-foot { --sc-sans: var(--b-mono); --sc-mono: var(--b-mono); }

/* ── bar ── */
/* Same bar as the marketing pages (site-brand.css §3): Klein bar, acid hover, Pricing acid-underlined, vermilion CTA. */
.sc-top { background: var(--b-klein); color: var(--b-white); border-bottom: 0; font: 600 11px/1 var(--b-mono); }
.sc-brand { color: var(--b-white) !important; gap: 11px; }
.sc-nav { gap: 2px; }
.sc-nav > a, .sc-more > summary, .sc-cta, .sc-menu > summary {
  height: 34px; padding: 0 10px; background: transparent; color: var(--b-white) !important;
  font: 600 11px/1 var(--b-mono); letter-spacing: .07em; text-transform: uppercase; }
.sc-nav > a:hover, .sc-more > summary:hover, .sc-more[open] > summary, .sc-menu > summary:hover, .sc-menu[open] > summary {
  background: var(--b-acid); color: var(--b-ink) !important; }
.sc-nav > a.sc-on { background: var(--b-white); color: var(--b-klein) !important; box-shadow: none; }
.sc-nav > a.sc-hl { background: transparent; color: var(--b-acid) !important; box-shadow: inset 0 -3px 0 var(--b-acid); }
.sc-nav > a.sc-hl:hover { background: var(--b-acid); color: var(--b-ink) !important; }
.sc-nav > a.sc-hl.sc-on { background: var(--b-white); color: var(--b-klein) !important; box-shadow: none; }
.sc-cta { margin-left: 10px; background: var(--b-verm); color: var(--b-ink) !important; box-shadow: none; font-weight: 700; }
.sc-cta:hover { background: var(--b-white); color: var(--b-klein) !important; }
.sc-top :focus-visible { outline: 3px solid var(--b-acid); outline-offset: 2px; }

/* More ▾ : a squared window with a Klein title bar */
.sc-win { top: calc(100% + 10px); background: var(--b-white); border: var(--b-frame) solid var(--b-ink); box-shadow: none; }
.sc-bar, .sc-sub { background: var(--b-klein); color: var(--b-white); font: 600 11px/26px var(--b-mono); letter-spacing: .1em; }
.sc-win a, .sc-sheet a { color: var(--b-ink) !important; font: 500 12px/1.25 var(--b-mono); letter-spacing: .02em; }
.sc-win a:hover, .sc-sheet a:hover { background: var(--b-acid); color: var(--b-ink) !important; }
.sc-badge { background: var(--b-acid); color: var(--b-ink); font: 600 9px/1.2 var(--b-mono); }
.sc-sheet { background: var(--b-white); border-top: var(--b-frame) solid var(--b-ink); border-bottom: var(--b-frame) solid var(--b-ink); box-shadow: none; }
.sc-sheet a { border-bottom-color: var(--b-rule); font-size: 14px; }
.sc-sheet a.sc-on { background: var(--b-ink); color: var(--b-acid) !important; }
.sc-sheet a.sc-hl { background: var(--b-verm); color: var(--b-ink) !important; }
@media (max-width: 420px) {
  .sc-cta, .sc-menu > summary { padding: 0 8px; letter-spacing: .04em; }
  .sc-cta { margin-left: auto; }
}

/* ── footer: ink field ── */
.sc-foot { background: var(--b-ink); color: var(--b-peri); font: 400 12px/1.7 var(--b-mono); border-top: var(--b-frame) solid var(--b-klein); }
.sc-foot .sc-brand { color: var(--b-white) !important; }
.sc-fmain p { font: 400 15px/1.55 var(--b-serif); color: #C9CEEA; }
.sc-foot code { background: transparent; color: var(--b-acid); font: 500 12px/1 var(--b-mono); padding: 0; }
.sc-col h2 { color: var(--b-acid); font: 600 11px/1 var(--b-mono); letter-spacing: .1em; }
.sc-col a { color: var(--b-white) !important; font: 400 12px/1.7 var(--b-mono); }
.sc-col a:hover { color: var(--b-acid) !important; }
.sc-meta { border-top: 2px solid rgba(255, 255, 255, .22); color: var(--b-peri); font-size: 11px; letter-spacing: .04em; }
.sc-foot :focus-visible { outline: 3px solid var(--b-acid); outline-offset: 2px; }

/* 11/06: the bar on offset white (Mist) with an ink rule, as on the marketing pages (site-brand.css) */
.sc-top { background: var(--b-paper); color: var(--b-ink); border-bottom: 2px solid var(--b-ink); }
.sc-brand { color: var(--b-ink) !important; }
.sc-nav > a, .sc-more > summary, .sc-cta, .sc-menu > summary { color: var(--b-ink) !important; }
.sc-nav > a.sc-on, .sc-nav > a.sc-hl.sc-on { background: var(--b-klein); color: var(--b-white) !important; box-shadow: none; }
.sc-nav > a.sc-hl { color: var(--b-klein) !important; box-shadow: inset 0 -3px 0 var(--b-klein); }
.sc-cta:hover { background: var(--b-ink); color: var(--b-white) !important; }
.sc-top :focus-visible { outline-color: var(--b-klein); }