/* Starlight in the Outis foundation. Starlight's rules sit in cascade layers,
   so an unlayered rule here wins on the same selector. */

:root {
  --sl-font: var(--face-mono);
  --sl-font-mono: var(--face-mono);

  --sl-color-white: var(--ph-bright);
  --sl-color-gray-1: var(--ph-text);
  --sl-color-gray-2: var(--ph-text2);
  --sl-color-gray-3: var(--ph-mute);
  --sl-color-gray-4: var(--ph-dim3);
  --sl-color-gray-5: var(--ph-l3);
  --sl-color-gray-6: var(--surface);
  --sl-color-gray-7: var(--surface);
  --sl-color-black: var(--ink);
  --sl-color-accent-low: var(--ph-wash);
  --sl-color-accent: var(--ph);
  --sl-color-accent-high: var(--ph-hot);
  --sl-color-text: var(--ph-text2);
  --sl-color-text-accent: var(--ph);
  --sl-color-text-invert: var(--ink);
  --sl-color-bg: var(--ink);
  --sl-color-bg-nav: var(--ink);
  --sl-color-bg-sidebar: var(--ink);
  --sl-color-bg-inline-code: rgba(var(--ph-rgb), .07);
  --sl-color-bg-accent: var(--ph);
  --sl-color-hairline-light: var(--ph-l2);
  --sl-color-hairline: var(--ph-l1);
  --sl-color-hairline-shade: var(--ph-l3);
  --sl-color-backdrop-overlay: var(--ink-soft);
  --sl-shadow-sm: none;
  --sl-shadow-md: none;
  --sl-shadow-lg: none;

  /* asides: note is the phosphor, tip is go, caution and danger are alert */
  --sl-color-blue: var(--ph);
  --sl-color-blue-high: var(--ph-bright);
  --sl-color-blue-low: var(--surface);
  --sl-color-purple: var(--go-l);
  --sl-color-purple-high: var(--go);
  --sl-color-purple-low: var(--surface);
  --sl-color-orange: var(--alert-l);
  --sl-color-orange-high: var(--alert);
  --sl-color-orange-low: var(--surface);
  --sl-color-red: var(--alert-l);
  --sl-color-red-high: var(--alert);
  --sl-color-red-low: var(--surface);
  --sl-color-green: var(--go-l);
  --sl-color-green-high: var(--go);
  --sl-color-green-low: var(--surface);

  --sl-text-2xs: 11px;
  --sl-text-xs: 12px;
  --sl-text-sm: 13px;
  --sl-text-base: 14px;
  --sl-text-lg: 15px;
  --sl-text-xl: 15px;
  --sl-text-2xl: 22px;
  --sl-text-3xl: 22px;
  --sl-text-4xl: 33px;
  --sl-text-5xl: 33px;
  --sl-text-6xl: 44px;
  --sl-text-body: 14px;
  --sl-text-body-sm: 13px;
  --sl-text-code: 12px;
  --sl-text-code-sm: 12px;
  --sl-line-height: 1.7;
  --sl-line-height-headings: 1.25;

  --sl-nav-height: var(--chrome-h);
  --sl-nav-pad-x: var(--page-pad);
  --sl-nav-pad-y: 0;
  --sl-sidebar-width: 260px;
  --sl-sidebar-pad-x: var(--s4);
  --sl-content-width: 48rem;
  --sl-content-pad-x: var(--s6);
  --sl-content-gap-y: var(--s4);
  --sl-mobile-toc-height: var(--hit);
}

/* Starlight sets this per breakpoint in a layer, so the override follows the breakpoint. */
@media (min-width: 72rem) {
  :root { --sl-mobile-toc-height: 0rem; }
}

/* the header */

.dh {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 100%;
}
.dh__mark {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  color: var(--ph-brand);
}
.dh__mark img { display: block; width: 76px; height: 20px; image-rendering: pixelated; }
.dh__docs {
  padding: 3px 6px;
  border: var(--line) solid var(--ph-l5);
  font: var(--dm11);
  letter-spacing: var(--track-button);
  color: var(--ph);
  -webkit-font-smoothing: none;
}
.dh__search { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.dh__right { display: flex; align-items: center; gap: var(--s3); flex: none; }
.dh__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--s2);
  font: var(--dm11);
  letter-spacing: var(--track-button);
  color: var(--ph-dim);
  white-space: nowrap;
  -webkit-font-smoothing: none;
}
.dh__link:hover { background: var(--ph-wash); color: var(--ph); }
@media (max-width: 50rem) {
  .dh__right { display: none; }
  .dh__search { justify-content: flex-end; }
}

site-search button[data-open-modal] {
  height: 40px;
  width: 100%;
  max-width: 26rem;
  padding: 0 var(--s2);
  gap: var(--s2);
  border: var(--line) solid var(--ph-l4);
  border-radius: 0;
  background: var(--surface);
  color: var(--ph-dim);
  font: var(--dm11);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  -webkit-font-smoothing: none;
}
site-search button[data-open-modal]:hover { background: var(--ph-wash); color: var(--ph); border-color: var(--ph-l5); }
site-search button > kbd {
  padding: 2px 5px;
  gap: 2px;
  border: var(--line) solid var(--ph-l3);
  border-radius: 0;
  background: none;
  font: var(--dm11);
  color: var(--ph-dim);
}
site-search dialog {
  background: var(--surface);
  border: var(--line) solid var(--ph-l5);
  border-radius: 0;
}
site-search button[data-close-modal] { font: var(--dm11); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--ph); }
#starlight__search {
  --pagefind-ui-scale: .85;
  --pagefind-ui-font: var(--face-mono);
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-border-width: var(--line);
  --pagefind-ui-primary: var(--ph);
  --pagefind-ui-text: var(--ph-text2);
  --pagefind-ui-background: var(--ink);
  --pagefind-ui-border: var(--ph-l3);
  --pagefind-ui-tag: var(--ph-l1);
}
#starlight__search .pagefind-ui__search-input { color: var(--ph-bright); }
#starlight__search .pagefind-ui__result-link { color: var(--ph-bright); font-weight: 400; }
#starlight__search .pagefind-ui__result-excerpt { font: var(--t-caption); color: var(--ph-mute); }
#starlight__search mark { color: var(--ph); }
#starlight__search .pagefind-ui__message { font: var(--t-caption); color: var(--ph-dim); }
#starlight__search .pagefind-ui__button {
  border: var(--line) solid var(--ph-l5);
  border-radius: 0;
  background: none;
  color: var(--ph);
  font: var(--dm11);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
}

.sl-menu-button {
  border-radius: 0;
  background: var(--ph);
  color: var(--ink);
  box-shadow: none;
}

/* the rail: one wash over the surface, so it re-tubes with the page */

.sidebar-pane { background: linear-gradient(var(--ph-wash2), var(--ph-wash2)) var(--surface); }

.sidebar-content { padding: var(--s5) var(--sl-sidebar-pad-x) var(--s8); gap: var(--s5); }
.sidebar-content .top-level > li + li { margin-top: var(--s5); }
.sidebar-content summary { padding: 4px 8px; }
.sidebar-content summary:hover .large { color: var(--ph); }
.sidebar-content .caret { color: var(--ph-dim3); }
.sidebar-content .large {
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ph-dim);
  -webkit-font-smoothing: none;
}
.sidebar-content ul ul { margin-top: 4px; display: flex; flex-direction: column; gap: 1px; }
.sidebar-content ul ul li { margin-inline-start: 0; border: 0; padding-inline-start: 0; }
.sidebar-content a {
  padding: 6px 8px;
  border-radius: 0;
  font: var(--t-secondary);
  color: var(--ph-mute);
}
.sidebar-content a:hover, .sidebar-content a:focus { background: var(--ph-wash); color: var(--ph); }
.sidebar-content a[aria-current="page"],
.sidebar-content a[aria-current="page"]:hover,
.sidebar-content a[aria-current="page"]:focus {
  background: var(--ph);
  color: var(--ink);
  font-weight: 700;
}
.sidebar-content a:focus-visible { outline: var(--focus-ring) solid var(--ph); outline-offset: -3px; box-shadow: none; }

/* the page */

.content-panel { padding: var(--s6) var(--sl-content-pad-x); }
.content-panel h1 {
  margin: 0;
  font: var(--dm33-title);
  letter-spacing: var(--track-title);
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}

.sl-markdown-content { font: var(--t-body); color: var(--ph-text2); }
.sl-markdown-content > p:first-child { font: 400 16px/1.7 var(--face-mono); color: var(--ph-mute); }

.sl-markdown-content h2 {
  margin-top: var(--s8);
  font: var(--dm22-title);
  letter-spacing: var(--track-title);
  color: var(--ph-bright);
  -webkit-font-smoothing: none;
}
.sl-markdown-content h3 {
  margin-top: var(--s6);
  font: 700 15px/1.4 var(--face-mono);
  color: var(--ph-bright);
}
.sl-markdown-content h4 {
  margin-top: var(--s5);
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ph-dim);
  -webkit-font-smoothing: none;
}
.sl-markdown-content h2 + *, .sl-markdown-content h3 + *, .sl-markdown-content h4 + * { margin-top: var(--s3); }

.sl-markdown-content a { color: var(--ph); border-bottom: var(--line) solid var(--ph-l4); }
.sl-markdown-content a:hover { color: var(--ph-hot); border-color: var(--ph); }
.sl-markdown-content .sl-anchor-link { border: 0; margin-inline-start: .4em; font-size: 14px; color: var(--ph-dim); vertical-align: middle; }
.sl-markdown-content .sl-anchor-link:hover { color: var(--ph); }
.sl-markdown-content strong { color: var(--ph-text); }
.sl-markdown-content ul, .sl-markdown-content ol { padding-inline-start: 1.4em; }
.sl-markdown-content li::marker { color: var(--ph-dim); }
.sl-markdown-content li + li { margin-top: var(--s1); }
.sl-markdown-content hr { border-bottom-color: var(--ph-l2); }

.sl-markdown-content code {
  margin: 0;
  padding: 1px 5px;
  font: 400 12px/1.5 var(--face-mono);
  color: var(--ph);
  background: rgba(var(--ph-rgb), .07);
}
.sl-markdown-content pre {
  padding: 16px 18px;
  border: var(--line) solid var(--ph-l2);
  background: var(--surface);
  font: 400 12px/1.7 var(--face-mono);
  color: var(--ph-text);
}
.sl-markdown-content pre code { padding: 0; font: inherit; color: inherit; background: none; white-space: pre; }

/* Vesper's amber sits beside the brand's; the block keeps the site's surface */
.sl-markdown-content pre.astro-code { background: var(--surface) !important; }

.sl-markdown-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.sl-markdown-content th {
  padding: 0 14px 10px 0;
  border-bottom: var(--line) solid var(--ph-l2);
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  color: var(--ph-dim);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  -webkit-font-smoothing: none;
}
.sl-markdown-content td {
  padding: 9px 14px 9px 0;
  border-bottom: var(--line) solid var(--ph-wash);
  font: var(--t-data);
  color: var(--ph-text2);
  vertical-align: top;
}
.sl-markdown-content td:first-child { color: var(--ph); white-space: nowrap; }
.sl-markdown-content td code { white-space: nowrap; }

.starlight-aside {
  padding: var(--s5);
  border: var(--line) solid var(--ph-l3);
  border-inline-start: var(--line-payload) solid var(--sl-color-asides-border);
  background: var(--surface);
  color: var(--ph-text2);
}
.starlight-aside__title {
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-shadow: var(--px-bold);
  -webkit-font-smoothing: none;
}
.starlight-aside__icon { display: none; }
.starlight-aside__content { font: var(--t-body-sm); }
.starlight-aside--note { --sl-color-asides-border: var(--ph); }
.starlight-aside--tip { border-color: var(--go-l); }
.starlight-aside--caution, .starlight-aside--danger { border-color: var(--alert-l); }

/* tabs, for the language samples */

starlight-tabs .tablist-wrapper { border-bottom: var(--line) solid var(--ph-l2); }
starlight-tabs [role="tablist"] { border: 0; gap: 2px; }
starlight-tabs .tab > [role="tab"] {
  padding: 8px 12px;
  border: 0;
  border-bottom: var(--line-payload) solid transparent;
  margin-bottom: -1px;
  font: var(--dm11);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--ph-dim);
  -webkit-font-smoothing: none;
}
starlight-tabs .tab > [role="tab"]:hover { color: var(--ph); background: var(--ph-wash); }
starlight-tabs .tab [role="tab"][aria-selected="true"] { color: var(--ph-bright); border-color: var(--ph); text-shadow: var(--px-bold); background: none; }
starlight-tabs [role="tabpanel"] { margin-top: var(--s3); }
starlight-tabs [role="tabpanel"] > pre:first-child { margin-top: 0; }

/* cards and link cards */

.card {
  padding: var(--s5);
  border: var(--line) solid var(--ph-l3);
  border-radius: 0;
  background: var(--surface);
  gap: var(--s3);
}
.card .title { font: 700 15px/1.4 var(--face-mono); color: var(--ph-bright); gap: var(--s3); align-items: center; }
.card .icon, .card .dg__icon { display: inline-block; vertical-align: middle; margin-right: var(--s2); width: 32px; height: 32px; padding: 0; border: 0; background: none; border-radius: 0; image-rendering: pixelated; }
.card .body { font: var(--t-body-sm); color: var(--ph-text2); }
.sl-link-card {
  padding: var(--s4) var(--s5);
  border: var(--line) solid var(--ph-l3);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
.sl-link-card:hover { background: var(--ph-wash); border-color: var(--ph-l5); }
.sl-link-card a { border: 0; }
.sl-link-card .title { display: flex; align-items: center; gap: var(--s3); font: 700 14px/1.4 var(--face-mono); color: var(--ph-bright); }
.sl-link-card .cy { flex: none; }
.sl-link-card .description { font: var(--t-caption); color: var(--ph-mute); }
.sl-link-card .icon { color: var(--ph-dim); }

/* steps */

.sl-steps > li::before {
  border-radius: 0 !important;
  border: var(--line) solid var(--ph-l5) !important;
  background: var(--ink) !important;
  box-shadow: none !important;
  font: var(--dm11) !important;
  color: var(--ph) !important;
  line-height: calc(var(--bullet-size) - 2px) !important;
  -webkit-font-smoothing: none;
}
.sl-steps > li::after { background: var(--ph-l2) !important; }

/* on this page */

.right-sidebar-panel h2 {
  margin-bottom: var(--s2);
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ph-dim);
  -webkit-font-smoothing: none;
}
.right-sidebar-panel a { padding-block: 4px; border-radius: 0; font: var(--t-caption); color: var(--ph-mute); }
.right-sidebar-panel a:hover { color: var(--ph); }
.right-sidebar-panel a[aria-current="true"] { color: var(--ph); background: var(--ph-wash); }

mobile-starlight-toc summary { font: var(--t-caption); }
mobile-starlight-toc .toggle {
  border-radius: 0;
  font: var(--dm11);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ph-dim);
  -webkit-font-smoothing: none;
}
mobile-starlight-toc .dropdown { border-radius: 0; }

/* previous and next */

.pagination-links a {
  padding: var(--s4);
  border: var(--line) solid var(--ph-l3);
  border-radius: 0;
  background: var(--surface);
  color: var(--ph-mute);
  font: var(--t-caption);
  box-shadow: none;
}
.pagination-links a:hover { border-color: var(--ph-l5); background: var(--ph-wash); }
.pagination-links .link-title { font: 700 14px/1.5 var(--face-mono); color: var(--ph-bright); }
.pagination-links svg { color: var(--ph-dim); }

/* the 404 page */

.hero h1 { font: var(--dm44); color: var(--ph-bright); -webkit-font-smoothing: none; }
.hero .tagline { font: var(--t-lede); color: var(--ph-mute); }

/* the region-split diagram on the panel page */

.dg__screen {
  width: 320px;
  max-width: 100%;
  background: var(--panel-glass);
  border: var(--line) solid var(--ph-l4);
  display: flex;
  flex-direction: column;
  font-family: var(--face-pixel);
}
.dg__screen-band,
.dg__screen-keys {
  background: var(--ph);
  color: var(--ink);
  font: 400 8px/1.4 var(--face-pixel);
  letter-spacing: .06em;
  text-shadow: var(--px-bold);
  padding: 5px 7px;
}
.dg__screen-keys { border-top: var(--line) solid var(--ph); }
.dg__screen-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.dg__screen-box {
  border: var(--line-payload) solid var(--ph-dim);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.dg__screen-tab {
  position: absolute;
  top: -7px;
  left: 6px;
  background: var(--panel-glass);
  padding: 0 4px;
  font: 400 8px/1 var(--face-pixel);
  color: var(--ph-dim3);
}
.dg__screen-title { font: 400 11px/1 var(--face-pixel); text-shadow: var(--px-bold); color: var(--ph-dim2); }
.dg__screen-subject { font: 400 26px/1 var(--face-pixel); color: var(--ph); }
.dg__screen-field {
  display: flex;
  gap: 9px;
  font: 400 12px/1 var(--face-pixel);
  text-shadow: var(--px-bold);
  color: var(--ph-dim2);
}
.dg__screen-field > span:first-child { color: var(--ph-dim3); min-width: 2.4em; }
.dg__screen-peers {
  border-top: var(--line) solid var(--ph-l3);
  padding-top: 6px;
  font: 400 8px/1 var(--face-pixel);
  color: var(--ph-mute2);
}