/* about.dai.studio header — matches the dai.studio app navbar
   (see https://dai.studio/auth/login for the reference markup/tokens).

   Architecture note: mdBook's own #mdbook-menu-bar lives inside #mdbook-page-wrapper, which
   chrome.css translates sideways whenever the sidebar opens
   (`#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { transform: translateX(...) }`).
   Nothing inside a translated ancestor can be a full-bleed fixed header, so the DAI Studio
   header is a body-level element (<header class="dai-header">) placed before that checkbox in
   index.hbs. mdBook's original bar is kept in the DOM (book.js reads it without null guards)
   but hidden below.

   Units note: mdBook's general.css sets `:root { font-size: 62.5% }` (1rem = 10px), unlike
   dai.studio's Tailwind build (1rem = 16px). Every size below is written in **px**, deliberately,
   so it matches dai.studio's true pixel intent (e.g. its `text-xl` = 20px, not 12.5px). Do not
   convert these back to rem. */

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/noto-sans-latin.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;
}

:root {
    --dai-header-h: 65px;
    /* Light values are the exact daisyUI "light" theme tokens used on dai.studio. */
    --dai-base-100: oklch(100% 0 0);
    --dai-base-200: oklch(98% 0 0);
    --dai-base-content: oklch(21% .006 285.885);

    /* Dark-mode palette, shared by html.coal and the no-JS prefers-dark fallback below. */
    --dai-dark-content: #e6eaee;
    --dai-dark-accent: #79c0ff;
    --dai-dark-icons: #9aa4ad;
}

/* mdBook's `coal` dark theme, remapped onto the same header variables so the header follows
   the site's own dark theme (dai.studio has no dark theme of its own to mirror here). Values
   taken from theme/css/variables.css `.coal`. */
html.coal {
    --dai-base-100: hsl(200, 7%, 8%);
    --dai-base-200: hsl(200, 7%, 13%);
    --dai-base-content: var(--dai-dark-content);

    /* mdBook `coal` overrides live here, not in theme/css/variables.css, so the vendored
       upstream theme stays byte-identical to mdBook 0.5.4's defaults. `html.coal` (0,1,1)
       beats variables.css's `.coal` (0,1,0) and this file is injected after the theme CSS,
       so these win on both specificity and order. Contrast figures are against --bg
       (hsl(200,7%,8%)), or --sidebar-bg (#292c2f) where noted. */
    --fg: var(--dai-dark-content);             /* was #98a3ad, 7.1:1  -> ~14.7:1 */
    --sidebar-fg: var(--dai-dark-content);     /* was #a1adb8, 6.1:1  -> ~11.2:1 on --sidebar-bg */
    --links: var(--dai-dark-accent);           /* was #2b79a2, 3.8:1  -> ~9.4:1  (failed AA) */
    --sidebar-active: var(--dai-dark-accent);  /* was #3473ad, 2.8:1  -> ~7.2:1  on --sidebar-bg (failed AA) */
    --icons: var(--dai-dark-icons);            /* was #43484d, ~1.9:1 -> ~7.2:1  (failed AA) */
    --icons-hover: var(--dai-dark-content);    /* was #b3c0cc */

    /* variables.css defines --scrollbar as var(--sidebar-fg); pinned to coal's original grey
       so the sidebar scrollbar thumb doesn't go near-white along with the text. */
    --scrollbar: #a1adb8;

    /* The copy button is a black SVG data-URI recoloured by a filter chain (chrome.css:278),
       so it can't read --icons. On a black source, invert(N%) alone yields neutral grey
       #(255*N/100) — the same trick the light theme uses (`invert(45.49%)`): invert(65%)
       ~= #a6a6a6, matching --icons. Hover goes to plain white instead of tracking
       --sidebar-active, because hitting a specific blue needs a hand-tuned multi-stage chain
       that can't be verified in this environment. */
    --copy-button-filter: invert(65%);
    --copy-button-filter-hover: invert(100%);
}

/* theme/css/variables.css:322 repeats the coal palette under `html:not(.js)` for visitors
   with JavaScript disabled. Mirror the overrides so no-JS dark mode isn't left grey. */
@media (prefers-color-scheme: dark) {
    html:not(.js) {
        --fg: var(--dai-dark-content);
        --sidebar-fg: var(--dai-dark-content);
        --links: var(--dai-dark-accent);
        --sidebar-active: var(--dai-dark-accent);
        --icons: var(--dai-dark-icons);
        --icons-hover: var(--dai-dark-content);
        --scrollbar: #a1adb8;
        --copy-button-filter: invert(65%);
        --copy-button-filter-hover: invert(100%);
    }
}

html, body {
    margin: 0;
}

/* ---- mdBook's own bar: hidden, retained only for book.js compatibility ---- */

#mdbook-menu-bar,
#mdbook-menu-bar-hover-placeholder {
    display: none !important;
}

/* general.css:84 pulls `.page` up by `-var(--menu-bar-height)` (-50px) purely to compensate
   for #mdbook-menu-bar-hover-placeholder, which is display:none above and so needs no
   compensation. Left as-is, that -50px pull ate almost all of the 65px of clearance added
   below, leaving content rendering under the header. Zero it out; #mdbook-page-wrapper's
   padding-top is the single source of clearance from here on. */
.page {
    margin-block-start: 0 !important;
}

/* general.css:78 scrolls heading/TOC anchors to `var(--menu-bar-height) + 0.5em` (50px-based),
   which still lands them partly behind the 65px fixed header. Re-point at the real header height. */
:target {
    scroll-margin-top: calc(var(--dai-header-h) + 0.5em);
}

/* ---- DAI Studio header ---- */

.dai-header {
    box-sizing: border-box;
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: var(--dai-header-h);
    display: flex;
    align-items: center;
    gap: 4px;
    padding-inline: 16px;
    background-color: var(--dai-base-100);
    border-bottom: 1px solid var(--dai-base-200);
    z-index: 200;
    font-family: 'Noto Sans', system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) {
    .dai-header {
        padding-inline: 32px;
    }
}

/* Offset mdBook's sidebar and page content below the fixed header. */
.sidebar {
    top: var(--dai-header-h) !important;
}

#mdbook-page-wrapper {
    padding-top: var(--dai-header-h);
    box-sizing: border-box;
}

.dai-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: var(--dai-base-content);
    text-decoration: none;
    white-space: nowrap;
}

.dai-brand img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: block;
}

.dai-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dai-nav a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--dai-base-content);
    text-decoration: none;
    white-space: nowrap;
}

.dai-nav a:hover {
    background-color: color-mix(in oklab, var(--dai-base-content) 10%, transparent);
}

@media (max-width: 767px) {
    .dai-nav {
        display: none;
    }
}

/* ---- Buttons shared by the TOC toggle and theme toggle ---- */

.dai-header .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--dai-base-content);
    cursor: pointer;
    flex: none;
}

.dai-header .icon-button:hover {
    background-color: color-mix(in oklab, var(--dai-base-content) 10%, transparent);
}

.dai-header .icon-button .fa-svg svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.dai-toc-toggle {
    margin-right: 4px;
}

/* ---- Light/dark toggle ---- */

.dai-theme-toggle {
    margin-left: 4px;
}

.dai-theme-icon {
    display: none;
}

/* Icon shown = the mode a click switches *to*. Light mode shows the moon (switch to dark);
   dark mode shows the sun (switch to light). */
.dai-theme-icon-moon {
    display: inline-flex;
}

html.coal .dai-theme-icon-moon {
    display: none;
}

html.coal .dai-theme-icon-sun {
    display: inline-flex;
}

/* ---- Mobile menu (<768px): hamburger + dropdown mirroring dai.studio's navbar-end dropdown ---- */

.dai-mobile-menu {
    display: none;
    position: relative;
    margin-left: 4px;
}

@media (max-width: 767px) {
    .dai-mobile-menu {
        display: block;
        margin-left: auto;
    }
}

.dai-mobile-menu > summary {
    list-style: none;
}

.dai-mobile-menu > summary::-webkit-details-marker {
    display: none;
}

.dai-mobile-menu-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    margin: 0;
    padding: 8px;
    min-width: 176px;
    list-style: none;
    background-color: var(--dai-base-100);
    border: 1px solid var(--dai-base-200);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    z-index: 210;
}

.dai-mobile-menu-list a {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dai-base-content);
    text-decoration: none;
    white-space: nowrap;
}

.dai-mobile-menu-list a:hover {
    background-color: color-mix(in oklab, var(--dai-base-content) 10%, transparent);
}

/* ---- Print: the fixed header has no place on a printed page ---- */

@media print {
    .dai-header {
        display: none;
    }

    #mdbook-page-wrapper {
        padding-top: 0;
    }
}