/* ==========================================================================
   Kizzy — docs + blog
   Dark-first, because the product ships dark only. :root carries the full
   dark palette; light is the deliberate swap, declared once as a custom
   property set and reused by both the media query and the explicit stamp so
   all three viewer states (system-dark, system-light, chosen) resolve.
   ========================================================================== */

:root {
  --ground:      #0A0B1C;
  --rail:        #0D0F1D;
  --surface:     #12141F;
  --surface-2:   #191C2A;
  --line:        rgba(206, 192, 255, 0.12);
  --line-strong: rgba(206, 192, 255, 0.24);
  --ink:         #FFFFFF;
  --ink-muted:   #B7B7CB;
  --ink-subtle:  #8A8AA3;
  --brand:       #8562FE;
  --brand-soft:  #CEC0FF;
  --brand-wash:  rgba(133, 98, 254, 0.14);
  --signal:      #FDD835;
  --ok:          #6EE7A8;
  --warn:        #FDD835;
  --danger:      #FF8A8A;
  --switch-off:  #453F77;   /* PVP card in the app nav */
  --switch-off-ink: #D7D2FF;
  --switch-track:#05060F;
  --radius:      12px;
  --rail-w:      284px;
  /* --gh-font-* are set by Ghost's admin font picker when one is chosen; the
     Kizzy faces are the fallback, so the brand holds unless someone overrides. */
  --font-body:   var(--gh-font-body, Lexend), ui-sans-serif, system-ui,
                 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--gh-font-heading, "Archivo Black"), Lexend,
                 ui-sans-serif, system-ui, sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:      #FFFFFF;
    --rail:        #FAF9FE;
    --surface:     #F7F6FC;
    --surface-2:   #EFEDF8;
    --line:        rgba(10, 11, 28, 0.11);
    --line-strong: rgba(10, 11, 28, 0.2);
    --ink:         #0A0B1C;
    --ink-muted:   #3E4054;
    --ink-subtle:  #6B6D83;
    --brand:       #6B46E5;
    --brand-soft:  #4B31B0;
    --brand-wash:  rgba(107, 70, 229, 0.09);
    --signal:      #FDD835;
    --ok:          #17714D;
    --warn:        #8A6A00;
    --danger:      #B4322F;
    --switch-track:#DCD8F0;
    --switch-off:  #C9C3EC;   /* PVP purple, lightened to hold contrast on white */
    --switch-off-ink: #2E2A55;
  }
}

:root[data-theme="light"] {
  --ground:      #FFFFFF;
  --rail:        #FAF9FE;
  --surface:     #F7F6FC;
  --surface-2:   #EFEDF8;
  --line:        rgba(10, 11, 28, 0.11);
  --line-strong: rgba(10, 11, 28, 0.2);
  --ink:         #0A0B1C;
  --ink-muted:   #3E4054;
  --ink-subtle:  #6B6D83;
  --brand:       #6B46E5;
  --brand-soft:  #4B31B0;
  --brand-wash:  rgba(107, 70, 229, 0.09);
  --signal:      #FDD835;
  --ok:          #17714D;
  --warn:        #8A6A00;
  --danger:      #B4322F;
  --switch-track:#DCD8F0;
  --switch-off:  #C9C3EC;
  --switch-off-ink: #2E2A55;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-soft); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 5px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dotsep::before { content: "·"; margin: 0 7px; color: var(--ink-subtle); }

/* ---------- left rail ---------- */
.rail {
  position: fixed; top: 58px; bottom: 0; left: 0; width: var(--rail-w); z-index: 40;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 14px 0;
  background: var(--rail);
  border-right: 1px solid var(--line);
  overflow: hidden;               /* the nav scrolls, not the whole rail */
}
.rail__search { position: relative; }
.rail__nav {
  flex: 1; min-height: 0; overflow-y: auto;
  padding-bottom: 28px;
  /* Scroll, but without a visible track -- the tree is long and the bar was
     cutting across the nav. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail__nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rail__brand { display: flex; align-items: center; gap: 10px; padding: 0 8px;
               color: var(--ink); font-weight: 800; font-size: 17px;
               letter-spacing: -0.02em; }
.rail__brand:hover { text-decoration: none; }
.rail__favicon { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.logo { width: 62px; height: auto; color: var(--ink); display: block; }

/* The switch: a segmented control of two real links. */
.switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px; background: var(--switch-track);
  border: 1px solid var(--line); border-radius: 11px;
}
.switch__opt {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 6px; border-radius: 8px;
  background: var(--switch-off);
  font-size: 13.5px; font-weight: 600; color: var(--switch-off-ink);
  transition: background .15s ease, color .15s ease, filter .15s ease;
}
.switch__opt:hover { filter: brightness(1.12); text-decoration: none; }
.switch__opt.is-on {
  background: var(--brand); color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.switch__opt.is-on:hover { color: #fff; }
.switch__opt.is-on svg { color: #fff; }

.rail__filter {
  width: 100%; padding: 8px 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink);
  font-family: inherit; font-size: 13.5px;
}
.rail__filter::placeholder { color: var(--ink-subtle); }

.navgroup { margin-bottom: 20px; }
.navgroup__title {
  margin: 0 0 6px; padding: 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-subtle);
}
.navlist { list-style: none; margin: 0; padding: 0;
           display: flex; flex-direction: column; gap: 1px; }
.navlink {
  display: block; padding: 6px 10px; border-radius: 7px;
  border-left: 2px solid transparent;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-muted);
}
.navlink:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.navlink[aria-current="page"] {
  background: var(--brand-wash); color: var(--ink);
  border-left-color: var(--brand); font-weight: 600;
}
.navempty { padding: 6px 10px; font-size: 13px; color: var(--ink-subtle); }
.navlist--chips { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-muted);
}
.chip:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; }
.chip span { color: var(--ink-subtle); font-variant-numeric: tabular-nums; }


/* ---------- stage ----------
   The column is centred in the viewport on wide screens, but never allowed to
   slide under the fixed rail: max() takes whichever offset is larger, so it
   centres when there is room and simply sits beside the rail when there isn't.
   --stage-max is per-variant, read by the shared margin calculation below. */
.stage {
  --aside-w: 210px;
  /* One width governs the whole content column -- article, breadcrumb, footer
     pager and blog feed alike. Previously .doc capped itself at 72ch while the
     pager sat outside it and filled the column, so the prose stopped short of
     the footer buttons. 884px column - 104px padding = 780px of text, which is
     still about 72 characters of Lexend. */
  --content-w: 884px;
  --stage-max: calc(var(--content-w) + var(--aside-w));
  max-width: var(--stage-max);
  /* Centre the content column itself; the on-this-page rail hangs in the right
     margin. max() stops it sliding under the fixed sidebar on narrow screens. */
  margin-left: max(var(--rail-w), calc((100% - var(--content-w)) / 2));
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
}
.doccol { padding: 44px 52px 120px; min-width: 0; max-width: var(--content-w); }

.crumbs { display: flex; align-items: center; gap: 8px;
          font-size: 12.5px; color: var(--ink-subtle); margin-bottom: 14px; }
.crumbs__sep { opacity: .5; }
/* The section marker: same icon the rail switch uses, so a reader can tell
   which half of the site they are in without reading the label. */
.crumbs a, .crumbs__here { display: inline-flex; align-items: center; gap: 6px; }
.crumbs svg { width: 13px; height: 13px; flex: none; color: var(--brand); }
.crumbs__here { color: var(--ink-subtle); }
.crumbs a:hover { color: var(--brand-soft); text-decoration: none; }

/* ---------- article ---------- */
/* Width comes from .doccol so the article, pager and feed all align. */
.doc { max-width: none; }
.doc__title {
  font-family: var(--font-display);
  font-size: clamp(29px, 3.6vw, 40px); line-height: 1.12;
  letter-spacing: -0.02em; font-weight: 800; margin: 0 0 10px;
  text-wrap: balance;
}
.doc__lede { font-size: 17.5px; color: var(--ink-muted); margin: 0 0 32px; text-wrap: pretty; }
.doc__byline { font-size: 13px; color: var(--ink-subtle); margin: -20px 0 30px; }
.doc__hero { border-radius: var(--radius); margin-bottom: 30px; }

.doc h2 {
  font-size: 23px; font-weight: 700; letter-spacing: -0.014em;
  margin: 44px 0 12px; padding-top: 16px;
  border-top: 1px solid var(--line); text-wrap: balance;
}
.doc h3 { font-size: 17.5px; font-weight: 700; margin: 30px 0 8px; text-wrap: balance; }
.doc h4 { font-size: 15px; font-weight: 700; margin: 24px 0 6px; color: var(--ink-muted); }
.doc p { margin: 0 0 16px; color: var(--ink-muted); }
.doc strong { color: var(--ink); font-weight: 650; }
.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; color: var(--ink-muted);
                   display: flex; flex-direction: column; gap: 6px; }
.doc li::marker { color: var(--brand); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.doc blockquote { margin: 0 0 18px; padding: 2px 0 2px 18px;
                  border-left: 3px solid var(--brand); color: var(--ink-muted); }
.doc code { font-family: var(--font-mono); font-size: .9em;
            background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
.doc pre { background: var(--surface-2); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 16px; overflow-x: auto; }
.doc pre code { background: none; padding: 0; }

/* Tables scroll in their own container so the page never does. */
.tablewrap { overflow-x: auto; margin: 0 0 22px;
             border: 1px solid var(--line); border-radius: var(--radius); }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px;
             font-variant-numeric: tabular-nums; }
.doc thead th {
  text-align: left; padding: 11px 15px; background: var(--surface-2);
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-subtle); font-weight: 700; white-space: nowrap;
}
.doc tbody td { padding: 10px 15px; border-top: 1px solid var(--line); color: var(--ink-muted); }
.doc tbody tr:hover td { background: var(--surface); }

/* GitBook hints, recoloured. */
.kz-callout {
  margin: 0 0 20px; padding: 14px 16px 14px 44px; position: relative;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--surface);
}
.kz-callout > p { margin: 0; color: var(--ink-muted); }
.kz-callout > p + p { margin-top: 10px; }
.kz-callout::before {
  content: "i"; position: absolute; left: 15px; top: 15px;
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: var(--ground); background: var(--brand);
}
.kz-callout--success { border-left-color: var(--ok); }
.kz-callout--success::before { content: "✓"; background: var(--ok); }
.kz-callout--warning { border-left-color: var(--warn); }
.kz-callout--warning::before { content: "!"; background: var(--warn); }
.kz-callout--danger { border-left-color: var(--danger); }
.kz-callout--danger::before { content: "!"; background: var(--danger); }

/* GitBook content-refs. */
.kz-pagecard {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; margin: 0 0 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.kz-pagecard:hover { border-color: var(--brand); transform: translateX(2px); text-decoration: none; }
.kz-pagecard__title { font-weight: 650; }
.kz-pagecard__arrow { color: var(--brand); }

/* ---------- Koenig editor cards ----------
   Ghost's editor lets a card break out of the text measure. The article is
   capped at 72ch, so wide/full cards escape it with negative margins on wide
   viewports and simply fill the column on narrow ones. */
/* Wide and full images break out to the column's edges -- exactly the 52px
   padding on each side. The previous values (900 / 1180) were sized against the
   old 72ch measure and would now overflow the 884px column. Both stop at the
   column edge so nothing can spill under the on-this-page rail; full-width
   loses its corner radius to stay visually distinct from wide. */
.doc :is(.kg-width-wide, .kg-width-full) {
  width: calc(100% + 104px);
  margin-inline: -52px;
}
.doc :is(.kg-width-wide, .kg-width-full) img { width: 100%; border-radius: var(--radius); }
.doc .kg-width-full img { border-radius: 0; }

.kg-card { margin: 0 0 24px; }
.kg-image-card figcaption,
.kg-embed-card figcaption {
  margin-top: 9px; font-size: 13px; color: var(--ink-subtle); text-align: center;
}
.kg-bookmark-card a.kg-bookmark-container {
  display: flex; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); overflow: hidden;
}
.kg-bookmark-card a.kg-bookmark-container:hover { border-color: var(--brand); text-decoration: none; }
.kg-bookmark-content { padding: 16px 18px; }
.kg-bookmark-title { font-weight: 650; }
.kg-bookmark-description { color: var(--ink-muted); font-size: 14px; margin-top: 5px; }
.kg-bookmark-thumbnail img { object-fit: cover; height: 100%; }
.kg-button-card a.kg-btn {
  display: inline-flex; padding: 10px 20px; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 650;
}
.kg-button-card a.kg-btn:hover { text-decoration: none; filter: brightness(1.08); }
.kg-callout-card { border-radius: var(--radius); padding: 15px 17px; }
.kg-toggle-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }

/* ---------- cards, feed, pager ---------- */
.cardgrid { display: grid; gap: 10px;
            grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.cardgrid--children { margin-top: 26px; }
.card { display: block; padding: 15px 16px; background: var(--surface);
        border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.card:hover { border-color: var(--brand); text-decoration: none; }
.card b { display: block; font-weight: 650; margin-bottom: 4px; }
.card span { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-subtle); }

.secblock { margin-top: 44px; }
.secblock__title { font-size: 14px; font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--ink-subtle);
                   margin: 0 0 14px; }

.feedhead { margin-bottom: 30px; }
.feed { display: flex; flex-direction: column; }
.feeditem { display: block; padding: 20px 14px; border-bottom: 1px solid var(--line);
            border-radius: 9px; color: var(--ink); }
.feeditem:hover { background: var(--surface); text-decoration: none; }
.feeditem__title { display: block; font-size: 18px; font-weight: 650;
                   margin-bottom: 5px; text-wrap: pretty; }
.feeditem__excerpt { display: block; color: var(--ink-muted); font-size: 14.5px;
                     margin-bottom: 7px; }
.feeditem__meta { display: block; font-size: 12.5px; color: var(--ink-subtle); }

.pager { display: flex; gap: 12px; margin-top: 56px; padding-top: 22px;
         border-top: 1px solid var(--line); }
.pager__link { flex: 1; padding: 13px 15px; border: 1px solid var(--line);
               border-radius: var(--radius); color: var(--ink); }
.pager__link:hover { border-color: var(--brand); text-decoration: none; }
.pager__link small { display: block; color: var(--ink-subtle); font-size: 11.5px;
                     text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.pager__link--next { text-align: right; }
.pager__spacer { flex: 1; }

/* ---------- on-page contents ---------- */
.onpage { padding: 44px 20px; position: sticky; top: 0; align-self: start;
          max-height: 100vh; overflow-y: auto; }
.onpage h5 { margin: 0 0 10px; font-size: 11px; letter-spacing: .09em;
             text-transform: uppercase; color: var(--ink-subtle); font-weight: 700; }
.onpage ul { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: 7px; }
.onpage a { font-size: 13px; color: var(--ink-subtle); line-height: 1.4; display: block; }
.onpage a:hover, .onpage a.is-active { color: var(--ink); text-decoration: none; }
.onpage a.is-active { color: var(--brand-soft); }
.onpage .lvl3 { padding-left: 12px; font-size: 12.5px; }

/* ---------- mobile ---------- */
.railtoggle {
  display: none; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink);
}
.railscrim { display: none; position: fixed; inset: 58px 0 0 0; z-index: 38;
             background: rgba(0,0,0,.55); }

@media (max-width: 1080px) {
  /* No aside below this width, so the text column is the whole stage and the
     centring maths must stop reserving space for it. */
  .stage { --aside-w: 0px; grid-template-columns: minmax(0, 1fr); }
  .onpage { display: none; }
}
@media (max-width: 860px) {
  /* Rail becomes a drawer. It keeps the switch at its top, so crossing between
     docs and blog is always one tap away once it's open. */
  .rail {
    top: 58px; width: min(88vw, 320px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .38);
  }
  body.rail-open .rail { transform: none; }
  body.rail-open .railscrim { display: block; }
  .railtoggle { display: inline-flex; }
  .stage { margin-inline: 0; max-width: none; }
  .doccol { padding: 84px 18px 90px; }
}


@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ---------- top bar ----------
   Full width, above the rail. The brand sits here rather than in the rail so
   it survives the rail sliding off-screen on mobile, and it links to the home
   of whichever side you're reading. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 18px 0 14px;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink); min-width: 0;
}
.topbar__brand:hover { text-decoration: none; }
.topbar__brand:hover .topbar__where { color: var(--brand-soft); }
.logo { width: 58px; height: auto; color: var(--ink); display: block; flex: none; }
.topbar__where {
  padding: 3px 9px; border-radius: 999px;
  background: var(--brand-wash); color: var(--brand-soft);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.topbar__spacer { flex: 1; }
.topbar__theme {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line-strong);
  color: var(--ink-muted); font-family: inherit; font-size: 13px;
}
.topbar__theme:hover { color: var(--ink); border-color: var(--brand); }
.topbar__cross {
  /* Desktop hides this: the rail's Docs/Blog switch is always on screen there. */
  display: none;
  align-items: center; gap: 6px; flex: none;
  padding: 9px 15px; border-radius: 999px;
  background: var(--switch-off); color: var(--switch-off-ink);
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
}
.topbar__cross:hover { text-decoration: none; filter: brightness(1.12); }
.topbar__cross svg { color: var(--switch-off-ink); flex: none; }

.topbar__cta {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 17px; border-radius: 999px;
  background: var(--signal); color: #14130A;
  font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
}
.topbar__cta:hover { text-decoration: none; filter: brightness(1.06); }
.topbar__cta svg { color: #14130A; }

/* Everything below the bar clears it. */
.doccol, .onpage { padding-top: 84px; }
/* Anchor targets and scrollIntoView would otherwise land under the header. */
.doc h2, .doc h3, .doc__title, [id] { scroll-margin-top: 76px; }

/* ---------- section heading as a link ---------- */
.navgroup__title--link {
  display: block; border-radius: 6px;
  color: var(--ink-subtle); text-decoration: none;
  transition: color .12s ease, background .12s ease;
}
.navgroup__title--link:hover {
  color: var(--brand-soft); background: var(--surface); text-decoration: none;
}
.navgroup__title--link[aria-current="page"] { color: var(--brand-soft); }

/* ---------- search results ---------- */
.results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  max-height: 58vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.4);
  padding: 6px;
}
.results__item { display: block; padding: 9px 11px; border-radius: 8px; color: var(--ink); }
.results__item:hover, .results__item.is-active { background: var(--brand-wash); text-decoration: none; }
.results__title { display: block; font-size: 13.5px; font-weight: 600; }
.results__where { display: block; font-size: 11px; letter-spacing: .05em;
                  text-transform: uppercase; color: var(--ink-subtle); margin-top: 2px; }
.results__snip { display: block; font-size: 12.5px; color: var(--ink-muted);
                 margin-top: 4px; line-height: 1.45; }
.results__snip mark { background: var(--brand-wash); color: var(--ink);
                      padding: 0 2px; border-radius: 3px; }
.results__empty { padding: 12px; font-size: 13px; color: var(--ink-subtle); }

/* ---------- show more ---------- */
.showmore { display: flex; justify-content: center; margin-top: 28px; }
.showmore button, .showmore a {
  padding: 11px 26px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line-strong);
  color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600;
}
.showmore button:hover, .showmore a:hover {
  border-color: var(--brand); background: var(--brand-wash); text-decoration: none;
}

@media (max-width: 860px) {
  .topbar { left: 0; padding: 0 12px; gap: 7px; }
  .railtoggle { display: inline-flex; }

  /* Where you are is shown by the drawer, so the label can go. */
  .topbar__where { display: none; }

  /* Theme toggle moves to the far left, beside the menu button, leaving the
     two coloured pills adjacent on the right. */
  .topbar__theme { order: -1; padding: 8px 10px; }
  .topbar__theme span { display: none; }

  /* The pair: identical height, padding and radius so they read as a set. */
  .topbar__cross,
  .topbar__cta { padding: 9px 14px; font-size: 13px; border-radius: 999px; }
  .topbar__cross { display: inline-flex; }
  .topbar__cta-full { display: none; }
  .topbar__cta::before { content: "App"; }
}