/**
 * @name Alt-Brand-Dark
 * @background #0E1013
 * @text #F3F4F5
 * @layout toc
 *
 * Generic dark documentation theme: the Altuit-TOC sidebar/card layout
 * reskinned with the locked CHIPPWALTERS brand system (charcoal "toolmaker
 * noir", orange-red accent, restrained teal, Space Grotesk / Jost / Hanken
 * Grotesk / IBM Plex Mono). No logos, names, or product branding — drop in
 * any Markdown and it renders as a clean branded webpage.
 *
 * Optional in-document tags (stripped from the exported output):
 *   [theme:light]   — export defaults to the light palette instead of dark.
 *   [brand-header]  — show a CHIPPWALTERS logo (linked to chippwalters.com)
 *                     plus a Back button in the page header. Off by default.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Jost:wght@300;400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================
   CSS Variables - Dark/Light Theme Support
   ============================================ */
:root {
  --accent: #FE4023;          /* primary orange-red */
  --accent-hover: #FF6A52;    /* derived lighter accent (link hover) */
  --secondary: #3FBBA9;       /* restrained teal */
  --radius: 6px;              /* brand cards/buttons */
  --radius-lg: 8px;           /* large wells/images */
  --shadow: 0 6px 24px rgba(0,0,0,.45);
  --content-w: 920px;
  --sidebar-w: 280px;

  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
}

/* Dark theme - for browser export and in-app preview */
[data-theme="dark"],
.theme-alt-brand-dark {
  --bg: #0E1013;        /* page background */
  --elev-1: #1B1F25;    /* card / sidebar surface */
  --elev-2: #0C0E11;    /* recessed: header, table header */
  --text: #F3F4F5;      /* primary text */
  --body: #A7ADB6;      /* body copy */
  --muted: #737B86;     /* metadata / mono captions */
  --border: #2B3037;    /* card / panel outline */
  --link: #FE4023;
  --chip: #1B1F25;
  --code-bg: #171B20;
  /* Secondary (teal) button — toggle */
  --btn-fg: #3FBBA9;
  --btn-border: rgba(63,187,169,.55);
  --btn-hover-bg: rgba(63,187,169,.12);
}

/* Light theme (toggle) - derived from the brand palette */
[data-theme="light"] {
  --bg: #F6F7F8;
  --elev-1: #FFFFFF;
  --elev-2: #EEF0F2;
  --text: #16191F;
  --body: #3A4049;
  --muted: #6B727C;
  --border: #DADEE3;
  --link: #D8341B;      /* darker orange for AA contrast on light */
  --chip: #EEF0F2;
  --code-bg: #EEF0F2;
  /* Secondary (teal) button — darker teal text for AA contrast on light */
  --btn-fg: #2A7D70;
  --btn-border: rgba(63,187,169,.7);
  --btn-hover-bg: rgba(63,187,169,.14);
}

/* ============================================
   Base Typography
   ============================================ */
html {
  height: 100%;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box }
a { color: var(--link); text-decoration: none }
a:hover { color: var(--accent-hover); text-decoration: underline }
strong, b { font-weight: 700; color: var(--text); }
em, i { font-style: italic; }

::selection { background: var(--accent); color: #0E1013; }

/* ============================================
   Custom Scrollbar
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--elev-1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--elev-1);
}

/* ============================================
   Headings - Brand display type (Space Grotesk)
   Primary text color; orange reserved as a scalpel (H1 rule, accents).
   Scoped for in-app preview + global for export.
   ============================================ */
.theme-alt-brand-dark h1, .theme-alt-brand-dark h2, .theme-alt-brand-dark h3,
.theme-alt-brand-dark h4, .theme-alt-brand-dark h5, .theme-alt-brand-dark h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.theme-alt-brand-dark h1, h1 { font-size: 2.5em; border-bottom: 2px solid var(--accent); padding-bottom: 0.3em; }
.theme-alt-brand-dark h2, h2 { font-size: 2em; font-weight: 500; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.theme-alt-brand-dark h3, h3 { font-size: 1.5em; font-weight: 500; }
.theme-alt-brand-dark h4, h4 { font-size: 1.25em; font-weight: 500; }
.theme-alt-brand-dark h5, h5 { font-size: 1.1em; font-weight: 500; }
/* H6 reads as a mono structural label */
.theme-alt-brand-dark h6, h6 {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================
   Header
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--elev-2);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: calc(var(--content-w) + var(--sidebar-w) + 64px);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.brand {
  font-family: var(--font-editorial);
  font-size: 18px;
  display: flex;
  align-items: center;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.spacer { flex: 1 }

/* Brand logo (opt-in via the [brand-header] markdown tag). The inlined SVG's
   wordmark uses currentColor, so it follows --text across the theme toggle;
   the cube + .com stay brand orange. Override the global link hover so the
   wordmark doesn't recolor/underline. */
.brand-logo,
.brand-logo:hover {
  color: var(--text);
  text-decoration: none;
  gap: 0;
}
.brand-logo svg {
  height: 30px;
  width: auto;
  display: block;
}
.brand-logo:hover { opacity: 0.85; }

/* ============================================
   Buttons - brand "secondary" (teal outline)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--btn-border);
  background: transparent;
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--secondary);
  color: var(--btn-fg);
  text-decoration: none;
}

/* ============================================
   Layout - Sidebar + Content
   ============================================ */
.layout {
  max-width: calc(var(--content-w) + var(--sidebar-w) + 64px);
  margin: 24px auto;
  padding: 0 16px;
  display: grid;
  gap: 24px;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

/* ============================================
   TOC Sidebar
   ============================================ */
nav.toc {
  position: sticky;
  top: 84px;
  align-self: start;
  padding: 16px;
  background: var(--elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.toc h3 {
  margin: 0 0 8px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border: none;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc > ul > li {
  margin: 4px 0;
}
.toc a {
  color: var(--body);
  text-decoration: none;
  font-size: 14px;
}
.toc a:hover {
  text-decoration: underline;
  color: var(--accent);
}

/* TOC Header with Controls */
.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.toc-header h3 { margin: 0; }
.toc-controls {
  display: flex;
  gap: 4px;
}
.toc-controls button {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1;
  font-family: var(--font-body);
}
.toc-controls button:hover {
  background: var(--border);
  color: var(--text);
}

/* Collapsible TOC Sections */
.toc-section {
  margin: 4px 0;
}
.toc-section-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 0;
}
.toc-section-header:hover {
  color: var(--accent);
}
.toc-toggle {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s;
}
.toc-section.collapsed .toc-toggle {
  transform: rotate(-90deg);
}
.toc-section-header a {
  flex: 1;
}
.toc-children {
  margin-left: 20px;
  padding: 4px 0 4px 12px;
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.toc-section.collapsed .toc-children {
  display: none;
}
.toc-children li {
  margin: 4px 0;
}
.toc-children a {
  font-size: 13px;
  color: var(--muted);
}
.toc-children a:hover {
  color: var(--accent);
}

/* H1 level styling - slightly bolder */
.toc-h1 > .toc-section-header a {
  font-weight: 600;
  font-size: 14px;
}
/* H2 level styling */
.toc-h2 > .toc-section-header a {
  font-weight: 400;
  font-size: 13px;
}

/* ============================================
   Content Card
   ============================================ */
.card {
  background: var(--elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

/* Document Content Styling - for browser export (.doc) and in-app preview (.theme-alt-brand-dark) */
.doc p, .theme-alt-brand-dark p { margin: 1em 0; color: var(--body); }
.doc ul, .theme-alt-brand-dark ul {
  margin: 1em 0;
  padding-left: 2em;
  list-style: disc outside;
  color: var(--body);
}
.doc ol, .theme-alt-brand-dark ol {
  margin: 1em 0;
  padding-left: 2em;
  list-style: decimal outside;
  color: var(--body);
}
.doc li, .theme-alt-brand-dark li {
  margin: 0.5em 0;
  display: list-item;
}
.doc img, .theme-alt-brand-dark img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.doc blockquote, .theme-alt-brand-dark blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1em;
  color: var(--text);
  margin: 1em 0;
  font-family: var(--font-editorial);
  font-weight: 300;
  font-size: 1.15em;
  line-height: 1.4;
  font-style: normal;
}
.doc code, .theme-alt-brand-dark code {
  background: var(--code-bg);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: var(--font-mono);
  color: var(--text);
}
.doc pre, .theme-alt-brand-dark pre {
  background: var(--code-bg);
  padding: 1em;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  border: 1px solid var(--border);
}
.doc pre code, .theme-alt-brand-dark pre code {
  background: none;
  padding: 0;
  color: var(--body);
}
.doc hr, .theme-alt-brand-dark hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}
/* Highlight (==mark==) - subtle orange wash, on-brand */
.doc mark, .theme-alt-brand-dark mark {
  background: rgba(254,64,35,.18);
  color: var(--text);
  padding: 0.05em 0.2em;
  border-radius: 3px;
}
[data-theme="light"] .doc mark {
  background: rgba(254,64,35,.14);
}

/* Tables */
.doc table, .theme-alt-brand-dark table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 0.9em;
}
.doc th, .doc td, .theme-alt-brand-dark th, .theme-alt-brand-dark td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--body);
}
.doc th, .theme-alt-brand-dark th {
  background: var(--elev-2);
  color: var(--text);
  font-weight: 600;
}
.doc th img, .doc td img,
.theme-alt-brand-dark th img, .theme-alt-brand-dark td img {
  max-width: none;
  width: auto;
  height: auto;
  display: block;
  margin: 12px auto 0 auto;
}

/* YouTube embeds - responsive 16:9 */
.youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin: 1em 0;
  overflow: hidden;
}
.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
  nav.toc {
    position: relative;
    top: 0;
    margin-bottom: 16px;
  }
}
@media (max-width: 768px) {
  .brand {
    font-size: 16px;
  }
}