/* Coastal brand layer over JSDoc's default template (jsdoc-default.css +
   prettify-tomorrow.css load first). Colors are the site tokens from
   src/input.css; fonts are the site's own files in /assets/fonts. Light and
   dark follow the device setting (these pages don't load theme.js). */

@font-face { font-family: 'Ysabeau'; font-weight: 400 600; font-display: swap; src: url('../../../assets/fonts/ysabeau-400.woff2') format('woff2'); }
@font-face { font-family: 'Questrial'; font-weight: 400; font-display: swap; src: url('../../../assets/fonts/questrial-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('../../../assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); }

:root {
  --bg: #FEFEFE;
  --surface: #FDFEFF;
  --ink: #0F1E4A;
  --ink-soft: #3C4A73;
  --line: #DDE4F2;
  --line-soft: #EAEFF9;
  --tag-bg: #EAF3FF;
  --link: #0B5FA5;
  --bar-bg: #0F1E4A;
  --bar-ink: #F5FBFF;
  --ring: #0F1E4A;
  --selected: #FFF4D6;
  /* Syntax: the site's accent-as-ink steps, all ≥4.5:1 on --bg. */
  --c-kwd: #C4140F;
  --c-str: #087A58;
  --c-com: #3C4A73;
  --c-typ: #1F74C4;
  --c-lit: #A85A00;
  --body: 'Ysabeau', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --label: 'Questrial', ui-sans-serif, 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0F24;
    --surface: #101A3A;
    --ink: #EAF0FF;
    --ink-soft: #AEC0EA;
    --line: #25315C;
    --line-soft: #1B274A;
    --tag-bg: #16234A;
    --link: #4FACFE;
    --bar-bg: #0F1E4A; /* Navy in both themes, as on the style guide's bar */
    --ring: #4FACFE;
    --selected: #2A2410;
    --c-kwd: #FF6A66;
    --c-str: #3FD3A4;
    --c-com: #AEC0EA;
    --c-typ: #4FACFE;
    --c-lit: #FFC93C;
  }
}

html { background: var(--bg); font-size: 17px; }
body {
  margin: 0;
  padding-inline: 1.5rem;
  font-family: var(--body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}

a, a:visited, a:active { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 2px; }

tt, code, kbd, samp, .name, .signature,
.params .name, .props .name, .name code,
nav ul a, nav ul a:visited, nav ul a:active { font-family: var(--mono); }
code { font-size: 0.9em; }

h1, h2, h3, h4, h5, h6 { font-family: var(--label); font-weight: 400; letter-spacing: 0; color: var(--ink); }
h1, h1.page-title { font-family: var(--label); font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); letter-spacing: 0; margin: 1.5rem 0 1.25rem; }
h2, h3.subsection-title { font-size: 1.6rem; font-weight: 400; letter-spacing: 0; }
h3 { font-size: 1.35rem; letter-spacing: 0; }
h4 { font-size: 1.1rem; letter-spacing: 0; color: var(--ink); }

/* ---- Brand bar ---- */
.cha-skip { position: absolute; left: -999px; }
.cha-skip:focus { left: 1rem; top: 1rem; z-index: 10; padding: 0.5rem 1rem; background: var(--bg); }
header.cha-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-inline: -1.5rem;
  padding: 0.85rem 1.5rem;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--line);
}
.cha-bar a, .cha-bar a:visited { color: var(--bar-ink); }
.cha-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--label);
  font-size: 1.05rem;
  text-decoration: none !important;
}
.cha-bar nav.cha-links {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
/* Same voice as the style guide's bar (.sg-bar-nav in src/input.css): sentence-case
   Questrial, and the current page holds a 2px Sky underline. */
.cha-links a { font-family: var(--label); font-size: 0.9375rem; text-decoration: none; opacity: 0.86; }
.cha-links a:hover, .cha-links a[aria-current] { opacity: 1; }
.cha-links a[aria-current] { text-decoration: underline; text-decoration-color: #4FACFE; text-underline-offset: 0.45em; text-decoration-thickness: 2px; }
.cha-bar :focus-visible { outline-color: #4FACFE; }

/* ---- Layout: stock floats on wide screens, one column on narrow ---- */
#main { width: 72%; min-width: 0; overflow-wrap: break-word; }
section { background: transparent; border-bottom: 1px solid var(--line); padding: 0.75rem 0 1.5rem; margin-right: 1.5rem; }
article { max-width: 72ch; }
pre, table, .source, .prettyprint.source { max-width: 100%; box-sizing: border-box; }
body > nav { width: 28%; margin-top: 1.5rem; border-left: 1px solid var(--line); padding-left: 1.25rem; }
nav ul { font-family: var(--body); line-height: 1.4; }
nav ul a, nav ul a:visited, nav ul a:active { color: var(--ink); text-decoration: none; line-height: 1.5; }
nav ul a:hover { color: var(--link); text-decoration: underline; }
nav h2, nav h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1.25rem; }
nav h2 a, nav h3 a { color: var(--ink) !important; text-decoration: none; }
nav li { margin-top: 0.3rem; }
@media (max-width: 800px) {
  #main, body > nav { float: none; width: auto; }
  body > nav { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }
  section { margin-right: 0; }
}

/* ---- Tables, detail lists, signatures ---- */
table { width: 100%; }
td, th { border: 1px solid var(--line); padding: 0.4rem 0.6rem; }
thead tr { background: var(--tag-bg); }
th, tr > th:last-child { border-right: 1px solid var(--line); }
article table { display: block; overflow-x: auto; }
.type-signature, .signature-attributes, .ancestors, .attribs, .ancestors a, .attribs a { color: var(--ink-soft) !important; }
.details { border-left: 2px solid var(--line); }
.details dt { font-family: var(--label); }
.important { color: var(--c-kwd); }
.disabled { color: var(--ink-soft); }

/* ---- Code ---- */
pre, .source { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
pre.prettyprint { padding: 0.75rem 1rem; overflow-x: auto; }
.source code { background: transparent; color: var(--ink); line-height: 1.55; }
.prettyprint.linenums li { border-left: 1px solid var(--line); color: var(--ink-soft); }
.prettyprint.linenums li.selected, .prettyprint.linenums li.selected * { background: var(--selected); }
.pln, .pun, .opn, .clo { color: var(--ink); }
@media screen {
  .kwd, .tag, .var { color: var(--c-kwd); }
  .str, .atv { color: var(--c-str); }
  .com { color: var(--c-com); font-style: italic; }
  .typ, .fun { color: var(--c-typ); }
  .lit, .atn, .dec { color: var(--c-lit); }
  .pln, .pun, .opn, .clo { color: var(--ink); }
}

footer.cha-foot {
  clear: both;
  margin: 2.5rem 0 0;
  padding: 1rem 0 2rem;
  border-top: 1px solid var(--line);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}