/* =========================================================
   Docs theme — maroon + gold, dark. arches are the signature
   motif. layered on top of mdBook's default theme via
   sanctioned override points (theme/head.hbs, theme/header.hbs,
   theme/theme.js) — see theme/README.md.

   Nothing in this file names a specific book, club, or org:
   the wordmark and links are driven by book.toml (book_title,
   git_repository_url) so the same theme submodule can be
   pinned by any book that wants this look.
   ========================================================= */

:root{
  --maroon:#7A0019;
  --maroon-2:#5C0014;
  --maroon-lit:#B32741;
  --gold:#FFCC33;
  --gold-2:#D8A93F;
  --bg:#100A0C;
  --bg-alt:#180F12;
  --panel:#1C1216;
  --soft:#2A1218;
  --line:#2E2025;
  --trace:#4A3138;
  --ink:#F7EFE9;
  --text:#D6C8CB;
  --muted:#9B858A;
  --display:'Zilla Slab',Georgia,serif;
  --font:'Karla',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* twin-arch motif, used as a rule under h1 */
  --arches:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cg fill='none' stroke='%23C9962E' stroke-width='1.2'%3E%3Cpath d='M0 12V9a7 7 0 0 1 14 0v3M14 12V9a7 7 0 0 1 14 0v3'/%3E%3Cpath d='M0 11.4h28' stroke='%23FFCC33'/%3E%3C/g%3E%3C/svg%3E");

  /* remap mdBook's own theme variables onto the palette above so
     every stock element (tables, links, sidebar, code, search,
     alert blockquotes) inherits it without a per-selector override */
  --sidebar-target-width: 252px;
  --page-padding: 20px;
  --content-max-width: 760px;
  --menu-bar-height: 66px;
  --mono-font: var(--mono);

  --fg: var(--text);
  --sidebar-bg: var(--bg-alt);
  --sidebar-fg: var(--text);
  --sidebar-non-existant: var(--muted);
  --sidebar-active: var(--gold);
  --sidebar-spacer: var(--line);
  --sidebar-header-border-color: var(--trace);
  --scrollbar: var(--trace);
  --icons: var(--muted);
  --icons-hover: var(--gold);
  --links: var(--gold);
  --inline-code-color: var(--gold);
  --theme-popup-bg: var(--panel);
  --theme-popup-border: var(--trace);
  --theme-hover: var(--soft);
  --quote-bg: var(--soft);
  --quote-border: var(--gold);
  --warning-border: var(--gold);
  --table-border-color: var(--line);
  --table-header-bg: var(--soft);
  --table-alternate-bg: var(--bg-alt);
  --searchbar-border-color: var(--trace);
  --searchbar-bg: var(--soft);
  --searchbar-fg: var(--ink);
  --searchbar-shadow-color: var(--maroon);
  --searchresults-header-fg: var(--muted);
  --searchresults-border-color: var(--line);
  --searchresults-li-bg: var(--panel);
  --search-mark-bg: var(--maroon-lit);
  --footnote-highlight: var(--soft);
  --overlay-bg: rgba(6,3,4,.6);
  --blockquote-note-color: #6FA8DC;
  --blockquote-tip-color: #8FD14F;
  --blockquote-important-color: #C792EA;
  --blockquote-warning-color: var(--gold);
  --blockquote-caution-color: var(--maroon-lit);
  --color-scheme: dark;
}

html, body{
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
#mdbook-content code, pre, .sidebar, .menu-title{
  font-family: var(--mono);
}
input[type="checkbox"]{ accent-color: var(--gold); }
::selection{ background: var(--maroon); color: var(--ink); }

/* this design is single (dark) themed only; the built-in theme
   picker would only partially apply since this stylesheet hardcodes
   colors on top of it */
#mdbook-theme-toggle{ display:none; }

/* ---------- injected brand header (theme/header.hbs) ---------- */
.dt-nav{position:sticky;top:0;z-index:120;background:rgba(16,10,12,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.dt-row{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,32px);display:flex;align-items:center;gap:18px;height:66px}
.dt-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.dt-logo{flex:none;width:38px;height:38px;object-fit:contain;transition:transform .3s ease}
.dt-brand:hover .dt-logo{transform:scale(1.06)}
.dt-wm{font-family:var(--display);font-weight:700;font-size:1.8rem;letter-spacing:.01em;color:var(--ink);line-height:1.15;display:block}
.dt-sub{font-family:var(--mono);font-size:1.05rem;letter-spacing:.22em;color:var(--gold-2);text-transform:uppercase;display:block;margin-top:2px}
.dt-links{display:flex;align-items:center;gap:4px}
.dt-links a{position:relative;font-family:var(--mono);font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-decoration:none !important;padding:8px 11px;border-radius:7px;transition:color .15s}
.dt-links a:hover{color:var(--gold)}
.dt-scrollbar{position:absolute;left:0;bottom:-1px;width:100%;height:2px;pointer-events:none}
.dt-scrollbar span{display:block;height:100%;background:linear-gradient(90deg,var(--maroon-lit),var(--gold));transform:scaleX(0);transform-origin:left}

/* mdBook's own menu-bar sits directly under our header; restyle it
   to match rather than replace it, so its buttons keep working */
#mdbook-menu-bar{background:rgba(16,10,12,.94);border-bottom:1px solid var(--line)}
#mdbook-menu-bar.sticky{top:66px}
.menu-title{font-family:var(--display);font-weight:600;color:var(--ink)}
.icon-button{color:var(--muted)}
.icon-button:hover{color:var(--gold)}

/* ---------- sidebar (chapter list, from SUMMARY.md) ---------- */
#mdbook-sidebar{border-right:1px solid var(--line)}
.sidebar-scrollbox{padding:22px 14px}
.chapter{font-size:1.3rem}
.chapter-item{margin:1px 0}
.chapter li > a.active{background:var(--soft);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 var(--gold);border-radius:8px}
.chapter li a{border-radius:8px;padding:5px 10px;line-height:1.35}
.chapter li a:hover{background:var(--bg-alt)}
.chapter-item strong{color:var(--gold);font-weight:600;margin-right:6px}
.chapter-fold-toggle{color:var(--muted);transition:color .14s}
.chapter-link-wrapper:hover .chapter-fold-toggle{color:var(--gold)}
.section{line-height:1.3}

/* the per-page heading outline mdBook nests under the active sidebar
   chapter duplicates the right-hand "On this page" TOC built by
   theme.js -- keep just the one */
.on-this-page{display:none}

/* ---------- headings: mdBook wraps the whole heading text in
   <a class="header">; make it read as plain text, with a "#"
   affordance on hover instead of an underlined heading ---------- */
#mdbook-content h1, #mdbook-content h2, #mdbook-content h3,
#mdbook-content h4, #mdbook-content h5, #mdbook-content h6{
  font-family: var(--display);
  scroll-margin-top: 96px;
}
#mdbook-content h1 a.header, #mdbook-content h2 a.header, #mdbook-content h3 a.header,
#mdbook-content h4 a.header, #mdbook-content h5 a.header, #mdbook-content h6 a.header{
  color: inherit; text-decoration: none;
}
#mdbook-content h1 a.header::after, #mdbook-content h2 a.header::after, #mdbook-content h3 a.header::after,
#mdbook-content h4 a.header::after, #mdbook-content h5 a.header::after, #mdbook-content h6 a.header::after{
  content:"#"; margin-left:9px; opacity:0; color:var(--trace); font-weight:600; transition:opacity .15s,color .15s;
}
#mdbook-content h1:hover a.header::after, #mdbook-content h2:hover a.header::after, #mdbook-content h3:hover a.header::after,
#mdbook-content h4:hover a.header::after, #mdbook-content h5:hover a.header::after, #mdbook-content h6:hover a.header::after{
  opacity:1;
}
#mdbook-content h1{font-weight:700;font-size:clamp(3.4rem,4vw,4.6rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink);padding-bottom:.5em;
  background-image:var(--arches);background-repeat:repeat-x;background-position:0 100%;background-size:auto 11px}
#mdbook-content h2{font-weight:600;font-size:2.4rem;letter-spacing:-.01em;color:var(--ink)}
#mdbook-content h3{font-weight:600;font-size:1.9rem;color:var(--ink)}
#mdbook-content h4{font-family:var(--mono);font-size:1.2rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
#mdbook-content h5, #mdbook-content h6{font-weight:600;font-size:1.6rem;color:var(--ink)}
#mdbook-content p{line-height:1.78;font-size:1.6rem}
#mdbook-content li{line-height:1.72;font-size:1.6rem}
#mdbook-content li::marker{color:var(--gold-2);font-weight:600}
#mdbook-content strong{color:var(--ink)}
#mdbook-content a:not(.header){border-bottom:1px solid var(--trace);transition:border-color .14s,color .14s}
#mdbook-content a:not(.header):hover{border-bottom-color:var(--gold)}
#mdbook-content blockquote{border-radius:0 12px 12px 0}

/* ---------- code blocks: caption bar injected by theme.js ---------- */
.dt-codeblock{position:relative;margin:1.5em 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.dt-codeblock figcaption{display:flex;align-items:center;gap:9px;padding:9px 52px 9px 14px;background:var(--soft);border-bottom:1px solid var(--line)}
.dt-codeblock .dt-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;animation:dt-dotpulse 2.4s ease-in-out infinite}
.dt-codeblock .dt-lang{font-family:var(--mono);font-size:1.05rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.dt-codeblock pre{margin:0;border:0;border-radius:0;background:#150D10}
.dt-codeblock pre code{font-size:.86em;line-height:1.7}
/* mdBook's copy button is normally hover-to-reveal, absolutely positioned
   relative to <pre> itself; make it always visible and, since <pre> no
   longer establishes its own positioning context here, let it place
   relative to the whole .dt-codeblock figure so it sits in the caption
   bar instead of floating over the code -- same icon/button, just moved */
.dt-codeblock pre > .buttons{visibility:visible;opacity:1;top:6px;right:10px}
.dt-codeblock pre > .buttons button{font-size:15px;padding:4px 7px 3px}
@keyframes dt-dotpulse{0%,100%{box-shadow:0 0 0 3px rgba(255,204,51,.14)}50%{box-shadow:0 0 0 7px rgba(255,204,51,.03)}}

/* ---------- syntax highlighting ----------
   overrides highlight.css/tomorrow-night.css/ayu-highlight.css (loaded
   earlier in <head>, so this wins by source order) with one palette
   tuned to the maroon/gold theme, used for every fenced code block
   regardless of which mdBook color theme happens to be active. */
.hljs{background:transparent !important;color:var(--text)}
.hljs-comment,.hljs-quote{color:var(--muted);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-doctag,.hljs-subst,.hljs-operator{color:#D98A96}
.hljs-string,.hljs-attr,.hljs-regexp,.hljs-addition,.hljs-meta-string{color:var(--gold-2)}
.hljs-number,.hljs-literal{color:var(--ink)}
.hljs-built_in,.hljs-symbol,.hljs-bullet,.hljs-link{color:var(--gold)}
.hljs-title,.hljs-section,.hljs-name,.hljs-selector-id,.hljs-selector-class{color:var(--ink);font-weight:600}
.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-params{color:var(--text)}
.hljs-meta{color:var(--muted)}
.hljs-deletion{color:var(--maroon-lit)}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:700}

/* ---------- tables ---------- */
.table-wrapper{border:1px solid var(--line);border-radius:12px;overflow:hidden}
#mdbook-content table{font-size:1.44rem}
#mdbook-content th{font-family:var(--mono);font-size:.99rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* ---------- right-hand "On this page" TOC (built by theme.js) ---------- */
.dt-layout{display:flex;align-items:flex-start;gap:clamp(24px,3.5vw,44px)}
.dt-layout > #mdbook-content{flex:1 1 auto;min-width:0}
.dt-toc{flex:0 0 196px;position:sticky;top:calc(var(--menu-bar-height) + 88px);align-self:start;max-height:calc(100vh - 140px);overflow:auto}
.dt-toc h3{font-family:var(--mono);font-size:1.02rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin:0 0 14px}
#dt-toc-nav{display:flex;flex-direction:column;gap:2px;border-left:1.5px solid var(--line)}
#dt-toc-nav a{display:block;font-size:1.25rem;color:var(--muted);text-decoration:none;padding:4px 0 4px 14px;margin-left:-1.5px;border-left:1.5px solid transparent;line-height:1.4;transition:color .14s,border-color .14s}
#dt-toc-nav a.dt-t-h3{padding-left:26px;font-size:1.17rem}
#dt-toc-nav a:hover{color:var(--ink)}
#dt-toc-nav a.active{color:var(--gold);font-weight:600;border-left-color:var(--gold)}

@media (max-width: 1120px){
  .dt-toc{display:none}
}

/* ---------- prev/next chapter pager, restyled as cards ---------- */
.nav-wide-wrapper{display:flex;justify-content:space-between;gap:16px;max-width:1200px;margin:36px auto 0;padding:0 clamp(18px,4vw,32px)}
.nav-chapters{position:static;font-size:1.6rem;display:inline-flex;align-items:center;gap:8px;width:auto;max-width:none;min-width:0;height:auto;border:1px solid var(--line);border-radius:10px;padding:8px 13px;background:var(--panel);color:var(--text);transition:transform .16s,border-color .16s,box-shadow .16s}
.nav-chapters:hover{transform:translateY(-2px);border-color:var(--trace);box-shadow:0 14px 30px -20px rgba(255,204,51,.35);background:var(--panel)}
.nav-chapters.next{margin-inline-start:auto;flex-direction:row-reverse}
.nav-chapters .fa-svg{color:var(--gold-2);flex:none;width:13px;height:13px}
.nav-chapters .fa-svg svg{width:13px;height:13px}
.dt-pg{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start;text-align:left}
.nav-chapters.next .dt-pg{align-items:flex-end;text-align:right}
.dt-pg-label{font-family:var(--mono);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.dt-pg b{font-family:var(--display);color:var(--ink);font-weight:600;font-size:1.32rem;max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:880px){
  .nav-wide-wrapper{flex-wrap:wrap}
  .nav-chapters{flex:1 1 auto}
  .dt-pg b{max-width:16ch}
}

/* ---------- injected footer (theme/theme.js) ---------- */
.dt-footer{border-top:1px solid var(--line);padding:26px 0;background:var(--bg-alt);margin-top:60px}
.dt-footer .dt-row{height:auto;flex-wrap:wrap}
.dt-footer .dt-wm{font-size:1.6rem}
.dt-footer .dt-tag{font-family:var(--mono);font-size:1.08rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dt-footer a{margin-left:auto;color:var(--text);text-decoration:none;font-family:var(--mono);font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;transition:color .14s}
.dt-footer a:hover{color:var(--gold)}

@media (prefers-reduced-motion: reduce){
  .dt-logo{transition:none}
  .dt-dot{animation:none}
}