/*
 * Waratah brand overlay — supplemental UI stylesheet.
 *
 * Loads AFTER the bundle's css/site.css (see partials/head-styles.hbs),
 * so these rules win at equal specificity. Selector coverage was checked
 * against the vendored bundle css (scripts/docs/ui-bundle.zip), which is
 * plain compiled CSS with hardcoded colors and no custom properties —
 * hence the concrete selector overrides below rather than variable
 * re-pointing.
 *
 * Theming: every color goes through the --wt-* tokens. LIGHT values
 * mirror the waratah console flavor in the grevillea webapp
 * (grevillea/src/styles/base.css, [data-flavor='waratah']); DARK values
 * re-point the same tokens under [data-theme='dark'] using the
 * console's [data-flavor='waratah'][data-theme='dark'] block. The
 * toggle plumbing: partials/head-scripts.hbs sets the attribute before
 * first paint, js/custom.js wires the navbar button (see those files).
 * The code-highlight dark palette mirrors, class for class, the github
 * light palette baked into the bundle's site.css, using the standard
 * highlight.js github-dark theme values.
 *
 * IBM Plex Sans/Mono are the same self-hosted @fontsource woff2 files
 * the console serves (SIL Open Font License 1.1; latin subset only).
 */

:root {
  color-scheme: light;

  --wt-accent: #bc252c;          /* waratah bloom crimson */
  --wt-accent-strong: #96171e;
  --wt-accent-soft: #f9ecec;
  --wt-brand-ink: #183239;       /* teal-slate wordmark ink */
  --wt-bg: #f6f5f2;              /* cool paper */
  --wt-surface: #ffffff;
  --wt-surface-raised: #ffffff;
  --wt-ink: #23282e;
  --wt-muted: #667077;
  --wt-faint: #9aa1a6;
  --wt-border: #e4e2dc;
  --wt-border-strong: #c9c6be;
  --wt-font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --wt-mono: 'IBM Plex Mono', 'Consolas', 'SFMono-Regular', monospace;
}

/* Dark mode — grevillea's waratah console dark values, same token names. */
[data-theme='dark'] {
  color-scheme: dark;

  --wt-accent: #e14b52;
  --wt-accent-strong: #ea6d73;
  --wt-accent-soft: #3a2224;
  --wt-brand-ink: #a3c6cc;
  --wt-bg: #12181a;
  --wt-surface: #182023;
  --wt-surface-raised: #20292d;
  --wt-ink: #e4ebea;
  --wt-muted: #93a5a7;
  --wt-faint: #6a7b7d;
  --wt-border: #27343a;
  --wt-border-strong: #3a4a50;
}

/* -- Fonts: the console's self-hosted faces replace Roboto ------------ */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../font/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../font/ibm-plex-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../font/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../font/ibm-plex-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../font/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../font/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(../font/ibm-plex-mono-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: var(--wt-font);
  background: var(--wt-bg);
  color: var(--wt-ink);
  -webkit-font-smoothing: antialiased;
}
code, kbd, pre, samp { font-family: var(--wt-mono); }
/* The bundle hardcodes Roboto on the copy-button toolbox and the
   callout numbers; let them inherit instead. */
.doc .source-toolbox, .doc .conum[data-value] { font-family: inherit; }
/* The toolbox copies `color:grey` — passable on white, muddy on dark. */
.doc .source-toolbox { color: var(--wt-muted); }

/* -- Selection + focus ring, same as the console ----------------------- */

::selection { background: var(--wt-accent-soft); color: var(--wt-accent-strong); }
:focus-visible { outline: 2px solid var(--wt-accent); outline-offset: 2px; }

/* -- Chrome icons: restencil the bundle's grey SVGs ---------------------
   The bundle bakes grey fills into img/*.svg (home, chevron, menu,
   back), which vanish on dark surfaces. Used as CSS masks, the SVGs
   become alpha stencils and background-color — a theme token — does the
   painting, in both themes. (Not applied to octicons-16.svg: the
   nav-collapse toggle is hidden until hover even in the light theme.) */

.home-link {
  background: var(--wt-muted);
  -webkit-mask: url(../img/home-o.svg) no-repeat 50%;
  mask: url(../img/home-o.svg) no-repeat 50%;
}
.home-link:hover, .home-link.is-current {
  background: var(--wt-accent);
  -webkit-mask-image: url(../img/home.svg);
  mask-image: url(../img/home.svg);
}
.nav-panel-explore .context .version::after {
  background: var(--wt-muted);
  -webkit-mask: url(../img/chevron.svg) no-repeat 100% / auto 100%;
  mask: url(../img/chevron.svg) no-repeat 100% / auto 100%;
}
.page-versions .version-menu-toggle {
  background-color: var(--wt-muted);
  -webkit-mask: url(../img/chevron.svg) no-repeat right .5rem top 50% / auto .75em;
  mask: url(../img/chevron.svg) no-repeat right .5rem top 50% / auto .75em;
}
.nav-toggle {
  background: var(--wt-ink);
  -webkit-mask: url(../img/menu.svg) no-repeat 50% 47.5% / 49%;
  mask: url(../img/menu.svg) no-repeat 50% 47.5% / 49%;
}
.nav-toggle.is-active {
  -webkit-mask-image: url(../img/back.svg);
  mask-image: url(../img/back.svg);
  -webkit-mask-size: 41.5%;
  mask-size: 41.5%;
}

/* -- Scrollbars (bundle hardcodes light greys) ------------------------- */

html { scrollbar-color: var(--wt-border-strong) var(--wt-bg); }
body * { scrollbar-color: var(--wt-border-strong) transparent; }
html::-webkit-scrollbar { background-color: var(--wt-bg); }
::-webkit-scrollbar-thumb { background-color: var(--wt-border-strong); }

/* -- Top navbar: white surface, bloom mark + wordmark lockup ----------- */

.navbar {
  background: var(--wt-surface);
  color: var(--wt-ink);
  box-shadow: 0 1px 0 var(--wt-border);
}
.navbar-brand .navbar-item { color: var(--wt-brand-ink); }
.navbar-item, .navbar-link { color: var(--wt-ink); }
/* The bundle gives the right-side menu white ink at >=1024px via
   `.navbar-end>.navbar-item` / `.navbar-end .navbar-link`; match its
   specificity or the rule above loses to it. */
.navbar-end .navbar-link, .navbar-end>.navbar-item { color: var(--wt-ink); }
.navbar-burger span { background-color: var(--wt-ink); }

.brand-lockup { align-items: center; display: flex; gap: 0.6rem; }
.brand-mark { display: block; height: auto; width: 36px; }
/* The console swaps to the white silhouette mark on dark (see the
   AppSidebar note in grevillea); do the same here. */
.brand-mark-dark { display: none; }
[data-theme='dark'] .brand-mark-light { display: none; }
[data-theme='dark'] .brand-mark-dark { display: block; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name {
  color: var(--wt-brand-ink);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.brand-tagline {
  color: var(--wt-muted);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768.5px) {
  .brand-tagline { display: none; }
}

/* Theme toggle (markup in partials/header-content.hbs; icons are
   Feather moon/sun, MIT). */
.theme-toggle {
  align-items: center;
  background: none;
  border: none;
  color: var(--wt-muted);
  cursor: pointer;
  display: flex;
}
.theme-toggle:hover { background: var(--wt-accent-soft); color: var(--wt-accent); }
.theme-toggle svg { height: 1.1rem; width: 1.1rem; }
.theme-toggle .icon-sun { display: none; }
[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
[data-theme='dark'] .theme-toggle .icon-sun { display: block; }

.navbar-end .navbar-item.has-dropdown:hover .navbar-link,
.navbar-end .navbar-link:hover,
.navbar-end>a.navbar-item:hover {
  background: var(--wt-accent-soft);
  color: var(--wt-accent);
}
@media screen and (max-width: 1023.5px) {
  .navbar-menu { background: var(--wt-surface); }
  .navbar-menu .navbar-link:hover, .navbar-menu a.navbar-item:hover {
    background: var(--wt-accent-soft);
  }
}
.navbar-dropdown {
  background: var(--wt-surface);
  border-color: var(--wt-border);
}
.navbar-dropdown .navbar-item small { color: var(--wt-faint); }
#search-input { color: var(--wt-ink); border-color: var(--wt-border-strong); }
#search-input:disabled { background-color: var(--wt-border); }

/* -- Sidebar: white surface like the console panels -------------------- */

.nav {
  background: var(--wt-surface);
  color: var(--wt-ink);
  box-shadow: 1px 0 0 var(--wt-border);
}
.nav a { color: inherit; }
.nav a:hover { color: var(--wt-accent); text-decoration: none; }
.nav-menu h3.title { color: var(--wt-muted); }
/* Current page reads in crimson, like the active tab in the console. */
.is-current-page>.nav-link, .is-current-page>.nav-text { color: var(--wt-accent); }
/* The bundle's caret icon is light grey; recolor to the muted ink. Shape
   mirrors img/caret.svg in the bundle. */
.nav-item-toggle {
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M10.187 3l14 12-14 12z' fill='%23667077' stroke='%23667077' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/50%;
}
[data-theme='dark'] .nav-item-toggle {
  background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M10.187 3l14 12-14 12z' fill='%2393a5a7' stroke='%2393a5a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/50%;
}
.nav-panel-explore { background: var(--wt-surface); }
.nav-panel-explore .context {
  color: var(--wt-muted);
  box-shadow: 0 -1px 0 var(--wt-border);
}
.nav-panel-explore .components {
  background: var(--wt-bg);
  box-shadow: inset 0 1px 5px rgba(35, 40, 46, 0.08);
}
[data-theme='dark'] .nav-panel-explore .components {
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.35);
}
.nav-panel-explore .component .version a {
  background: var(--wt-border);
  color: var(--wt-ink);
}
.nav-panel-explore .component .is-current a {
  background: var(--wt-accent);
  color: #fff;
}
[data-theme='dark'] .nav-panel-explore .component .is-current a {
  color: var(--wt-accent-soft);
}

/* -- Toolbar (breadcrumbs / edit link / version menu) ------------------ */

.toolbar {
  background-color: var(--wt-surface);
  box-shadow: 0 1px 0 var(--wt-border);
  color: var(--wt-muted);
}
.toolbar .edit-this-page a { color: var(--wt-muted); }
.page-versions .version-menu { background: var(--wt-surface); }
.page-versions .version.is-missing { color: var(--wt-faint); }

/* -- Article body ------------------------------------------------------ */

.doc { color: var(--wt-ink); }
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 { color: var(--wt-ink); }
/* The console sets headings noticeably heavier than the bundle's 400. */
.doc h1, .doc h2 { font-weight: 600; }
.doc h2:not(.discrete) { border-bottom-color: var(--wt-border); }
.doc a { color: var(--wt-accent); }
.doc a:hover { color: var(--wt-accent-strong); }
.doc hr { border-color: var(--wt-border); }
nav.pagination { border-top-color: var(--wt-border); }
nav.pagination span::before,
nav.pagination a::after,
nav.pagination a::before { color: var(--wt-faint); }

/* Code, tables, and callouts sit on the paper background */
.doc p code, .doc .colist>table code, .doc thead code {
  color: var(--wt-ink);
  background: var(--wt-bg);
}
.doc .listingblock pre:not(.highlight), .doc .literalblock pre, .doc pre.highlight>code {
  background: var(--wt-bg);
  box-shadow: inset 0 0 1.75px var(--wt-border);
}
.doc table.tableblock, .doc table.tableblock>*>tr>* { border-color: var(--wt-border); }
.doc table.tableblock>tfoot { background: var(--wt-bg); }
.doc table.stripes-all>tbody>tr,
.doc table.stripes-even>tbody>tr:nth-of-type(2n),
.doc table.stripes-hover>tbody>tr:hover,
.doc table.stripes-odd>tbody>tr:nth-of-type(odd) { background: var(--wt-bg); }
.doc .admonitionblock td.content { background: var(--wt-bg); }
.doc .quoteblock, .doc .verseblock {
  background: var(--wt-bg);
  border-left-color: var(--wt-border-strong);
  color: var(--wt-muted);
}
.doc .quoteblock .attribution { color: var(--wt-faint); }
/* Block/caption titles and the result-details summary are grey #5d5d5d
   in the bundle — the same dark-mode trap as the icons above. */
.doc .admonitionblock .title, .doc .exampleblock .title, .doc .imageblock .title,
.doc .listingblock .title, .doc .literalblock .title, .doc .openblock .title,
.doc .videoblock .title, .doc table.tableblock caption,
.doc .olist .title, .doc .ulist .title, .doc details.result>summary {
  color: var(--wt-muted);
}
.doc .exampleblock>.content, .doc details.result>.content {
  background: var(--wt-surface);
  border-color: var(--wt-border-strong);
}
.doc .sidebarblock { background: var(--wt-surface-raised); }
.doc h1.sect0 { background: var(--wt-surface-raised); }
#preamble .abstract blockquote {
  background: var(--wt-surface-raised);
  border-left-color: var(--wt-border);
  color: var(--wt-muted);
}
.doc kbd {
  background: var(--wt-bg);
  border-color: var(--wt-border-strong);
  box-shadow: 0 1px 0 var(--wt-border-strong), 0 0 0 .1em var(--wt-bg) inset;
}

/* On-page table of contents */
.toc .toc-menu h3 { color: var(--wt-ink); }
.toc .toc-menu a { border-left-color: var(--wt-border); }
.toc .toc-menu a:hover { color: var(--wt-accent); }
.toc .toc-menu a.is-active { border-left-color: var(--wt-accent); color: var(--wt-ink); }
.toc .toc-menu a:focus { background: var(--wt-surface-raised); }

/* -- Footer ------------------------------------------------------------ */

footer.footer {
  background-color: var(--wt-surface);
  color: var(--wt-muted);
  border-top: 1px solid var(--wt-border);
}
.footer a { color: var(--wt-accent); }

/* -- Syntax highlighting ------------------------------------------------
   The bundle bakes a github-light palette into site.css; mirror its
   class set with the standard highlight.js github-dark values under the
   dark theme. */

[data-theme='dark'] .hljs-comment, [data-theme='dark'] .hljs-quote { color: #8b949e; }
/* The light palette groups subst with the keywords at #333; on dark it
   must fall back to body ink or it disappears. */
[data-theme='dark'] .hljs-subst { color: var(--wt-ink); }
[data-theme='dark'] .hljs-keyword, [data-theme='dark'] .hljs-selector-tag { color: #ff7b72; }
[data-theme='dark'] .hljs-literal, [data-theme='dark'] .hljs-number, [data-theme='dark'] .hljs-tag .hljs-attr, [data-theme='dark'] .hljs-template-variable, [data-theme='dark'] .hljs-variable { color: #79c0ff; }
[data-theme='dark'] .hljs-doctag, [data-theme='dark'] .hljs-string { color: #a5d6ff; }
[data-theme='dark'] .hljs-section, [data-theme='dark'] .hljs-selector-id, [data-theme='dark'] .hljs-title { color: #d2a8ff; }
[data-theme='dark'] .hljs-class .hljs-title, [data-theme='dark'] .hljs-type { color: #ffa657; }
[data-theme='dark'] .hljs-attribute, [data-theme='dark'] .hljs-name, [data-theme='dark'] .hljs-tag { color: #7ee787; }
[data-theme='dark'] .hljs-link, [data-theme='dark'] .hljs-regexp { color: #7ee787; }
[data-theme='dark'] .hljs-bullet, [data-theme='dark'] .hljs-symbol { color: #ffa657; }
[data-theme='dark'] .hljs-built_in, [data-theme='dark'] .hljs-builtin-name { color: #ffa657; }
[data-theme='dark'] .hljs-meta { color: #8b949e; }
[data-theme='dark'] .hljs-deletion { background: rgba(248, 81, 73, 0.15); }
[data-theme='dark'] .hljs-addition { background: rgba(46, 160, 67, 0.15); }