/* ============================================================================
   Veyyon Harness Handbook — Linear-style premium theme
   Silver-and-ember on pitch black. No gradients, no glow, no blue/cyan/purple.
   Matches the canonical Veyyon identity (docs/internal/brand.md,
   website/site.css): pitch-black #000000 ground on every surface — hierarchy
   comes from silver hairlines and text weight, never raised/tinted panels —
   with silver (#c6cbd4) as the structural color and the ember sun (#f0862e) as
   the single accent, carried by links, the focus ring, and syntax keywords.
   Self-contained: system font stacks only, no remote fonts or CSS.
   Retunes mdBook's `navy` base (see book.toml default-theme = "navy").
   ============================================================================ */

/* ---- Palette tokens (single source of truth for this override) ---------- */
:root {
    /* Every surface is pitch black; distinction comes from hairlines. */
    --vy-surface:        #000000;   /* content background */
    --vy-deepest:        #000000;   /* deepest chrome / body edge */
    --vy-sidebar:        #000000;   /* sidebar background */
    --vy-code:           #000000;   /* code + quote background (hairline-framed) */
    --vy-popup:          #000000;   /* theme/search popups */

    --vy-fg:             #f6f7f9;   /* body text */
    --vy-heading:        #ffffff;   /* headings */
    --vy-heading-2:      #e6e9ee;   /* bright silver, sub-emphasis */
    --vy-muted:          #b4bac4;   /* secondary text */
    --vy-muted-2:        #7c828d;   /* faint / structural */

    /* Silver is structure (rules, borders, active markers, inline code). */
    --vy-silver:         #c6cbd4;
    --vy-silver-hi:      #e6e9ee;

    /* Ember is the single accent (links, focus ring, syntax keywords). */
    --vy-ember:          #f0862e;
    --vy-ember-hi:       #fb9e44;

    /* Semantic trio — exact canonical values (website/site.css). */
    --vy-green:          #7fb98a;
    --vy-amber:          #c9a24b;
    --vy-red:            #c96f6e;

    /* Silver-alpha hairlines and faint washes (no colored panels). */
    --vy-hairline:       rgba(198, 203, 212, 0.12);   /* 1px structural borders */
    --vy-hairline-2:     rgba(198, 203, 212, 0.21);   /* slightly stronger dividers */
    --vy-wash:           rgba(198, 203, 212, 0.05);    /* faint code/zebra wash */
    --vy-wash-2:         rgba(198, 203, 212, 0.08);    /* hover wash */

    --vy-radius:         2px;

    --sidebar-width: 18rem;
    --content-max-width: 46rem;
    --page-padding: 20px;
    --menu-bar-height: 50px;

    /* Refined system stacks (offline-safe, no @font-face) */
    --mono-font: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo",
                 "Cascadia Code", "Roboto Mono", "Consolas", monospace;
}

/* Body font: apply a refined system stack without fighting mdBook's var scheme. */
html, body,
.content, .menu-title, .chapter, .sidebar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Ubuntu, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- Retune mdBook custom properties -----------------------------------
   Apply to :root, html AND .navy so the palette holds regardless of the
   resolved theme class (navy is our base, but we also neutralize others). */
:root,
html,
html.navy,
.navy {
    --bg: var(--vy-surface);
    --fg: var(--vy-fg);

    --sidebar-bg: var(--vy-sidebar);
    --sidebar-fg: var(--vy-muted);
    --sidebar-non-existant: var(--vy-muted-2);
    --sidebar-active: var(--vy-silver-hi);
    --sidebar-spacer: var(--vy-hairline);
    --sidebar-header-border-color: var(--vy-silver);

    --scrollbar: var(--vy-muted-2);

    --links: var(--vy-ember);

    --inline-code-color: var(--vy-silver-hi);

    --overlay-bg: rgba(0, 0, 0, 0.82);

    --theme-popup-bg: var(--vy-popup);
    --theme-popup-border: var(--vy-hairline-2);
    --theme-hover: var(--vy-wash-2);

    --quote-bg: var(--vy-code);
    --quote-border: var(--vy-ember);

    --table-border-color: var(--vy-hairline);
    --table-header-bg: var(--vy-wash);
    --table-alternate-bg: var(--vy-wash);

    --searchbar-bg: var(--vy-code);
    --searchbar-fg: var(--vy-fg);
    --searchbar-border-color: var(--vy-hairline-2);
    --searchbar-shadow-color: transparent;
    --search-mark-bg: rgba(240, 134, 46, 0.24);
    --searchresults-header-fg: var(--vy-muted);
    --searchresults-border-color: var(--vy-hairline);
    --searchresults-li-bg: var(--vy-wash);

    --color-scheme: dark;

    /* Icons (menu-bar glyphs, fold chevrons) — muted silver, no blue tint */
    --icons: var(--vy-muted-2);
    --icons-hover: var(--vy-silver-hi);

    /* Kill every leftover blue / purple / orange mdBook accent -------------- */
    --footnote-highlight: var(--vy-ember);           /* was blue */
    --warning-border: var(--vy-amber);               /* was orange */

    /* GitHub-style alert callouts: note/important -> silver (blue & purple
       are BANNED); tip/warning/caution keep semantic meaning but calmed. */
    --blockquote-note-color:      var(--vy-silver);       /* was blue   */
    --blockquote-important-color: var(--vy-silver-hi);    /* was purple */
    --blockquote-tip-color:       var(--vy-green);
    --blockquote-warning-color:   var(--vy-amber);
    --blockquote-caution-color:   var(--vy-red);

    --code-font-size: 0.875em;

    /* Neutralize the built-in copy-button tint toward calm silver */
    --copy-button-filter: invert(0.72) sepia(0) saturate(0) brightness(1.05);
    --copy-button-filter-hover: invert(0.9) sepia(0) saturate(0) brightness(1.1);
}

/* ============================================================================
   Surfaces & body
   ============================================================================ */
html, body {
    background: var(--vy-deepest);
    color: var(--vy-fg);
}

.content {
    color: var(--vy-fg);
}

/* Calm contrast: body copy slightly softened, comfortable rhythm */
.content main {
    line-height: 1.65;
    color: rgba(246, 247, 249, 0.92);
    font-size: 1rem;
    letter-spacing: 0.002em;
}

#mdbook-page-wrapper,
.page {
    background: var(--vy-deepest);
}

.content a,
.content a:visited {
    color: var(--vy-ember);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.content a:hover {
    color: var(--vy-ember-hi);
    border-bottom-color: rgba(240, 134, 46, 0.4);
}

/* ============================================================================
   Typography — headings
   ============================================================================ */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    color: var(--vy-heading);
    font-weight: 650;
    letter-spacing: -0.012em;
    line-height: 1.25;
}
.content h1 { font-size: 2.05rem; margin-block: 1.6rem 1.1rem; }
.content h2 {
    font-size: 1.45rem;
    color: var(--vy-heading);
    margin-block: 2.4rem 0.9rem;
    padding-block-end: 0.4rem;
    border-block-end: 1px solid var(--vy-hairline);
}
.content h3 { font-size: 1.18rem; color: var(--vy-heading-2); margin-block: 1.8rem 0.7rem; }
.content h4 { font-size: 1.02rem; color: var(--vy-heading-2); margin-block: 1.5rem 0.6rem; }
.content h5,
.content h6 { font-size: 0.92rem; color: var(--vy-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.content p { margin-block: 0.85rem; }

/* Header anchor link glyph in muted silver, not blue */
.content .header:hover a.header::before,
a.header:hover::before {
    color: var(--vy-muted-2);
}

/* ============================================================================
   Rules & blockquotes
   ============================================================================ */
.content hr {
    border: none;
    border-block-start: 1px solid var(--vy-hairline);
    margin-block: 2.2rem;
}

.content blockquote {
    background: var(--vy-code);
    border: 1px solid var(--vy-hairline);
    border-inline-start: 2px solid var(--vy-ember);
    border-radius: var(--vy-radius);
    color: rgba(246, 247, 249, 0.9);
    padding: 0.6rem 1rem;
    margin-block: 1.2rem;
}

/* ============================================================================
   Code
   ============================================================================ */
code {
    font-family: var(--mono-font);
}

/* Inline code: silver-tinted glyphs on a faint silver wash chip */
.content :not(pre) > code {
    background: var(--vy-wash);
    border: 1px solid var(--vy-hairline);
    border-radius: var(--vy-radius);
    color: var(--vy-silver-hi);
    padding: 0.12em 0.38em;
    font-size: 0.88em;
}

/* Block code: pitch black, hairline border, zero glow */
pre {
    background: var(--vy-code) !important;
    border: 1px solid var(--vy-hairline);
    border-radius: var(--vy-radius);
    box-shadow: none;
}
pre > code {
    background: transparent !important;
    color: var(--vy-fg);
    font-size: 0.875rem;
    line-height: 1.6;
}
pre > .buttons button {
    color: var(--vy-muted);
    background: transparent;
    border: none;
}
pre > .buttons button:hover { color: var(--vy-silver-hi); }

/* ============================================================================
   Tables
   ============================================================================ */
.content table {
    border-collapse: collapse;
    border: 1px solid var(--vy-hairline);
    border-radius: var(--vy-radius);
    overflow: hidden;
    margin-block: 1.3rem;
}
.content table thead {
    background: var(--table-header-bg);
}
.content table th {
    color: var(--vy-heading-2);
    font-weight: 600;
    text-align: left;
    border: 1px solid var(--vy-hairline);
    padding: 0.5rem 0.8rem;
}
.content table td {
    border: 1px solid var(--vy-hairline);
    padding: 0.5rem 0.8rem;
    color: rgba(246, 247, 249, 0.9);
}
.content table tbody tr:nth-child(2n) {
    background: var(--table-alternate-bg);
}

/* ============================================================================
   Sidebar (table of contents)
   ============================================================================ */
.sidebar {
    background: var(--vy-sidebar);
    border-inline-end: 1px solid var(--vy-hairline);
    font-size: 0.9rem;
}
.sidebar .sidebar-scrollbox {
    padding: 14px 12px;
}

/* Section / part labels: smaller, uppercase, muted silver */
.part-title,
.sidebar .part-title {
    color: var(--vy-muted-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
    margin-block: 1.4rem 0.4rem;
    padding-inline: 10px;
}

.chapter li.chapter-item {
    line-height: 1.4;
    margin-block-start: 0.15em;
}

.chapter li a {
    color: var(--vy-muted);
    border-radius: var(--vy-radius);
    padding: 0.32rem 0.55rem;
    /* 2px silver marker channel, transparent until active */
    border-inline-start: 2px solid transparent;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.chapter li a:hover {
    color: var(--vy-heading-2);
    background: var(--vy-wash);
}

/* Active item: 2px ember left-border + bright silver text, NO filled pill.
   The ember marker is the one accent touch in the nav; text stays silver. */
.chapter li a.active {
    color: var(--vy-silver-hi);
    background: transparent;
    border-inline-start: 2px solid var(--vy-ember);
    font-weight: 550;
}
.chapter a.current-header {
    color: var(--vy-silver-hi);
}

.chapter-fold-toggle { opacity: 0.55; }
.chapter-fold-toggle:hover { opacity: 0.9; }

.chapter .spacer {
    border-block-start: 1px solid var(--vy-hairline);
    margin-block: 0.8rem;
}

/* On-this-page mini-toc marker in silver */
.on-this-page {
    border-inline-start: 2px solid var(--vy-hairline-2);
}

/* Sidebar resize handle hairline */
.sidebar-resize-handle .sidebar-resize-indicator {
    background: var(--vy-hairline-2);
}

/* ============================================================================
   Top menu bar / chrome
   ============================================================================ */
#mdbook-menu-bar,
.menu-bar {
    background: var(--vy-deepest);
    color: var(--vy-muted);
}
#mdbook-menu-bar.sticky,
html.sidebar-visible #mdbook-menu-bar {
    background: var(--vy-deepest);
    box-shadow: none;
}
#mdbook-menu-bar.bordered {
    border-block-end: 1px solid var(--vy-hairline);
    box-shadow: none;
}
.menu-bar .icon-button,
.menu-bar a {
    color: var(--vy-muted);
    border: none;
}
.menu-bar .icon-button:hover,
.menu-bar a:hover {
    color: var(--vy-silver-hi);
}
.menu-title {
    color: var(--vy-heading-2);
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Nav chevrons (prev/next) in muted silver */
.nav-chapters,
.nav-chapters:visited,
.mobile-nav-chapters {
    color: var(--vy-muted-2);
}
.nav-chapters:hover { color: var(--vy-silver-hi); background: transparent; }

/* ============================================================================
   Search
   ============================================================================ */
#mdbook-searchbar {
    background: var(--vy-code);
    border: 1px solid var(--vy-hairline-2);
    border-radius: var(--vy-radius);
    box-shadow: none;
    color: var(--vy-fg);
}
#mdbook-searchbar.active {
    border-color: var(--vy-ember);
}
#mdbook-searchresults {
    background: var(--vy-popup);
    border: 1px solid var(--vy-hairline);
    border-radius: var(--vy-radius);
    box-shadow: none;
}
.searchresults-header {
    color: var(--vy-muted);
    border-block-end: 1px solid var(--vy-hairline);
}
#mdbook-searchresults li {
    background: transparent;
    border-radius: var(--vy-radius);
}
#mdbook-searchresults li:hover,
#mdbook-searchresults li.selected {
    background: var(--vy-wash-2);
}
mark {
    background: rgba(240, 134, 46, 0.24);
    color: var(--vy-heading);
}

/* ============================================================================
   Theme popup (paint the picker to match the pitch-black chrome)
   ============================================================================ */
.theme-popup {
    background: var(--vy-popup);
    border: 1px solid var(--vy-hairline-2);
    border-radius: var(--vy-radius);
    box-shadow: none;
}
.theme-popup .theme:hover {
    background: var(--vy-wash-2);
    color: var(--vy-silver-hi);
}

/* ============================================================================
   Focus states — ember ring (the brand accent), never blue
   ============================================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--vy-ember);
    outline-offset: 2px;
}

::selection {
    background: rgba(240, 134, 46, 0.22);
    color: var(--vy-heading);
}

/* Scrollbars (WebKit) — thin, black track, silver-grey thumb */
* {
    scrollbar-color: var(--vy-muted-2) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--vy-muted-2);
    border-radius: var(--vy-radius);
    border: 2px solid var(--vy-deepest);
}

/* Thin dedicated silver scrollbar inside the sidebar scrollbox */
.sidebar-scrollbox::-webkit-scrollbar { width: 6px; }
.sidebar-scrollbox::-webkit-scrollbar-thumb {
    background: var(--vy-hairline-2);
    border: none;
    border-radius: var(--vy-radius);
}
.sidebar-scrollbox:hover::-webkit-scrollbar-thumb { background: var(--vy-muted-2); }

/* De-emphasise chapter numbers in the sidebar (silver identity, not counts) */
.chapter li a strong {
    color: var(--vy-muted-2);
    font-weight: 500;
    margin-inline-end: 0.4em;
    font-variant-numeric: tabular-nums;
    font-size: 0.85em;
}

/* ============================================================================
   Syntax highlighting — retune tomorrow-night's blue/orange/purple palette to
   the canonical Veyyon syntax palette (identical to the HTML transcript-export
   palette, web-palette.ts): silver-neutral base with ember/amber/green accents.
   No blue, no purple.
   (These .hljs rules win over the bundled tomorrow-night-*.css by load order
   and specificity within the additional-css include.)
   ============================================================================ */
.hljs {
    background: var(--vy-code);
    color: #d5d8de;                  /* base token: soft silver-grey */
}

/* Comments & structural noise — faint silver-grey */
.hljs-comment,
.hljs-cdata,
.hljs-doctype,
.hljs-pi,
.hljs-preprocessor,
.hljs-pragma {
    color: var(--vy-muted-2);        /* #7c828d */
    font-style: italic;
}

/* Keywords / control flow — ember (the accent) */
.hljs-keyword,
.hljs-literal,
.hljs-rule,
.hljs-decorator,
.hljs-pseudo,
.hljs-preprocessor {
    color: var(--vy-ember);          /* #f0862e */
    font-weight: 500;
}

/* Strings, regexp, added lines — green */
.hljs-string,
.hljs-regexp,
.hljs-value,
.hljs-addition,
.hljs-symbol {
    color: var(--vy-green);          /* #7fb98a */
}

/* Numbers, constants, hex — ember-hi */
.hljs-number,
.hljs-hexcolor,
.hljs-constant,
.hljs-formula {
    color: var(--vy-ember-hi);       /* #fb9e44 */
}

/* Function / type / class / section names — amber emphasis */
.hljs-title,
.hljs-function,
.hljs-class,
.hljs-section,
.hljs-header,
.hljs-name,
.hljs-tag {
    color: var(--vy-amber);          /* #c9a24b */
}

/* Attributes / params / variables / ids — silver */
.hljs-attr,
.hljs-attribute,
.hljs-params,
.hljs-variable,
.hljs-id,
.hljs-sub,
.hljs-built,
.hljs-builtin-name {
    color: var(--vy-silver);         /* #c6cbd4 */
}

/* Types / inheritance — silver-hi */
.hljs-type,
.hljs-inheritance {
    color: var(--vy-silver-hi);      /* #e6e9ee */
}

/* Diff deletions — red (semantic) */
.hljs-deletion {
    color: var(--vy-red);            /* #c96f6e */
}

.hljs-emphasis { font-style: italic; }
.hljs-strong   { font-weight: 700; color: var(--vy-heading-2); }
.hljs-link     { color: var(--vy-ember); }

/* ============================================================================
   Blockquote alert callouts (GitHub-style) — flat, hairline, no glow
   ============================================================================ */
.content blockquote.note,
.content blockquote.tip,
.content blockquote.important,
.content blockquote.warning,
.content blockquote.caution {
    box-shadow: none;
}

/* ============================================================================
   Print — keep it legible on paper (light bg, dark ink)
   ============================================================================ */
@media print {
    html, body, .content, pre, .hljs {
        background: #ffffff !important;
        color: #111 !important;
    }
    .content a { color: #333 !important; border: none !important; }
}