/* =============================================================================
   UrraHosting Docs - design tokens
   Palette sourced from UrraHosting-Payment (the current, systematic brand
   token set - see the docs/analysis notes in CHANGELOG.md history for why
   Dashboard-dockerhost's older palette was not used instead).
   ============================================================================= */
:root {
  --primary: #f97316;
  --primary-dark: #ea580c;
  --primary-light: #fb923c;
  --primary-lighter: #fdba74;
  --accent: #ff6b35;

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --bg: #ffffff;
  --bg-soft: #f9fafb;
  --bg-card: #ffffff;
  --fg: #111827;
  --fg-muted: #6b7280;
  --border: #e5e7eb;
  --code-bg: #1f2937;
  --code-fg: #f3f4f6;

  --success: #22c55e;
  --warning: #f59e0b;
  --error: #dc2626;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 16px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 8px 30px rgba(17, 24, 39, 0.14);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fira Code", Consolas, "Courier New", monospace;

  --navbar-h: 60px;
  --sidebar-w: 264px;
  --toc-w: 220px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111827;
    --bg-soft: #1a2233;
    --bg-card: #1a2233;
    --fg: #f3f4f6;
    --fg-muted: #9ca3af;
    --border: #2d3748;
    --code-bg: #0d1420;
    --code-fg: #e5e7eb;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
  }
}
html[data-theme="dark"] {
  --bg: #111827;
  --bg-soft: #1a2233;
  --bg-card: #1a2233;
  --fg: #f3f4f6;
  --fg-muted: #9ca3af;
  --border: #2d3748;
  --code-bg: #0d1420;
  --code-fg: #e5e7eb;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}
/* ===== Scrollbars (brand-colored, both engines) ===== */
* { scrollbar-width: thin; scrollbar-color: var(--primary-lighter) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-lighter);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--primary); }

a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
html[data-theme="dark"] a, :root:not([data-theme="light"]) a { color: var(--primary-light); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) a { color: var(--primary-dark); } }
img { max-width: 100%; }
kbd {
  font-family: var(--font-mono);
  font-size: 0.75em;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--fg-muted);
}
.icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; }
.icon-sm { width: 0.85em; height: 0.85em; }

/* ===== Navbar ===== */
.navbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--navbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.navbar-inner {
  max-width: 1728px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
}
.navbar-brand { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.navbar-brand:hover { text-decoration: none; }
.navbar-logo { width: 28px; height: 28px; border-radius: 7px; }
.navbar-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.navbar-brand strong { font-size: 0.95rem; }
.navbar-brand small { color: var(--fg-muted); font-size: 0.72rem; }
.navbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 14px; color: var(--fg-muted); font-size: 0.85rem;
  cursor: pointer; flex: 1 1 auto; margin: 0 20px;
}
.navbar-search span { flex: 1; text-align: left; }
.navbar-search:hover { border-color: var(--primary-light); }
.navbar-links { display: flex; gap: 18px; flex: none; }
.navbar-links a { color: var(--fg); font-size: 0.9rem; font-weight: 500; }
.navbar-icon-btn {
  background: none; border: none; color: var(--fg-muted); cursor: pointer;
  padding: 6px; border-radius: var(--radius-sm); display: flex;
}
.navbar-icon-btn:hover { background: var(--bg-soft); color: var(--fg); }
.only-mobile { display: none; }
.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun, :root:not([data-theme="light"]) .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon, :root:not([data-theme="light"]) .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-sun { display: block; }
  :root:not([data-theme="dark"]) .icon-moon { display: none; }
}

/* ===== Shell layout ===== */
.site-shell {
  /* 20% wider than the original 1440px reading layout, so <main> has real
     room to grow rather than just raising content-inner's cap with nowhere
     to expand into. */
  max-width: 1728px; margin: 0 auto;
  display: flex; align-items: flex-start;
}
.sidebar {
  width: var(--sidebar-w); flex: none;
  position: sticky; top: var(--navbar-h);
  height: calc(100vh - var(--navbar-h));
  overflow-y: auto; padding: 24px 12px 40px;
  border-right: 1px solid var(--border);
}
.sidebar-group { margin-bottom: 20px; }
.sidebar-group-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-muted); font-weight: 600; margin: 0 0 8px 8px;
}
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar-nav li a {
  display: block; padding: 6px 10px; margin: 1px 0;
  border-radius: var(--radius-sm); color: var(--fg); font-size: 0.9rem;
}
.sidebar-nav li a:hover { background: var(--bg-soft); text-decoration: none; }
.sidebar-nav li a.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary-dark); font-weight: 600;
}
html[data-theme="dark"] .sidebar-nav li a.active,
:root:not([data-theme="light"]) .sidebar-nav li a.active { color: var(--primary-light); }

.content { flex: 1; min-width: 0; display: flex; gap: 32px; padding: 32px 24px 80px; }
.content-inner { flex: 1; min-width: 0;}
.toc { width: var(--toc-w); flex: none; position: sticky; top: calc(var(--navbar-h) + 24px); font-size: 0.85rem; }
.toc-title { color: var(--fg-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.toc li a { display: block; padding: 4px 0 4px 12px; color: var(--fg-muted); }
.toc li a:hover { color: var(--fg); text-decoration: none; }
.toc-level-3 { padding-left: 12px; }

.page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.breadcrumb { display: flex; align-items: center; gap: 4px; color: var(--fg-muted); font-size: 0.85rem; margin-bottom: 0; }
.breadcrumb a { color: var(--fg-muted); }
.back-link {
  display: flex; align-items: center; gap: 4px; flex: none;
  font-size: 0.82rem; font-weight: 600; color: var(--fg-muted);
  padding: 5px 10px 5px 6px; border-radius: 999px; border: 1px solid var(--border);
}
.back-link .icon { transform: rotate(180deg); }
.back-link:hover { color: var(--fg); border-color: var(--primary-light); text-decoration: none; }
.eyebrow { color: var(--primary-dark); font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; }
.lead { color: var(--fg-muted); font-size: 1.08rem; }

/* ===== Prev/next pager ===== */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0 8px; }
.pager-link {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  color: var(--fg); box-shadow: var(--shadow); min-width: 0;
}
.pager-link:hover { border-color: var(--primary-light); text-decoration: none; }
.pager-link .icon { flex: none; color: var(--primary); }
.pager-link span { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager-link small { color: var(--fg-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.pager-next { grid-column: 2; flex-direction: row-reverse; text-align: right; }
.pager-next span { align-items: flex-end; }
.pager-prev .icon { transform: rotate(180deg); }

/* ===== Prose (rendered markdown) ===== */
.prose h1 { font-size: 2rem; margin: 0 0 8px; }
.prose h2 { font-size: 1.4rem; margin: 40px 0 14px; padding-top: 6px; border-top: 1px solid var(--border); }
.prose h2:first-child { border-top: none; margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: 28px 0 10px; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 4px; }
.prose a { font-weight: 500; }
.prose code {
  font-family: var(--font-mono); font-size: 0.87em;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.prose pre {
  background: var(--code-bg); color: var(--code-fg);
  border-radius: var(--radius); padding: 16px 18px; overflow-x: auto;
  margin: 0 0 18px; position: relative;
}
.prose pre code { background: none; border: none; padding: 0; color: inherit; font-size: 0.87em; }
.prose pre.mermaid { background: var(--bg-card); border: 1px solid var(--border); padding: 20px; text-align: center; }

/* ===== Syntax highlighting =====
   Pygments ("one-dark" style, spans only via HtmlFormatter(nowrap=True))
   injected server-side in app/content.py - grouped/deduped by hand from its
   generated stylesheet, tuned for the fixed dark --code-bg every pre uses
   regardless of site theme (see --code-bg above). */
.prose pre[data-lang]:not(.code-tab-panel) { padding-top: 34px; }
.prose pre[data-lang]:not(.code-tab-panel)::before {
  content: attr(data-lang);
  position: absolute; top: 8px; left: 18px;
  font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted);
  opacity: 0.75; pointer-events: none;
}

/* ===== Tabbed code blocks =====
   app/content.py groups 2+ back-to-back highlighted fenced blocks (e.g. the
   same snippet in Python/C#/Java/JavaScript) into one .code-tabs component
   instead of stacking full blocks down the page; app.js wires the click
   handling. */
.code-tabs { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; background: var(--code-bg); }
.code-tabs-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; }
.code-tab {
  background: transparent; border: none; color: var(--fg-muted);
  font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
  padding: 8px 14px; border-radius: 6px 6px 0 0; transition: color 0.12s, background-color 0.12s;
}
.code-tab:hover { color: var(--code-fg); }
.code-tab.is-active { color: var(--primary-light); background: rgba(255, 255, 255, 0.07); }
.code-tabs-panels { position: relative; }
.code-tabs .code-tab-panel { display: none; margin: 0; border-radius: 0; }
.code-tabs .code-tab-panel.is-active { display: block; }
.prose pre code .c, .prose pre code .ch, .prose pre code .cm,
.prose pre code .cp, .prose pre code .cpf, .prose pre code .c1,
.prose pre code .cs { color: #7f848e; font-style: italic; }
.prose pre code .k, .prose pre code .kd, .prose pre code .kn,
.prose pre code .kp, .prose pre code .kr, .prose pre code .ow {
  color: #c678dd; font-weight: 600;
}
.prose pre code .kc, .prose pre code .kt, .prose pre code .nb,
.prose pre code .nc, .prose pre code .bp { color: #e5c07b; }
.prose pre code .s, .prose pre code .sa, .prose pre code .sb,
.prose pre code .sc, .prose pre code .dl, .prose pre code .sd,
.prose pre code .s2, .prose pre code .se, .prose pre code .sh,
.prose pre code .si, .prose pre code .sx, .prose pre code .sr,
.prose pre code .s1, .prose pre code .ss { color: #98c379; }
.prose pre code .m, .prose pre code .mb, .prose pre code .mf,
.prose pre code .mh, .prose pre code .mi, .prose pre code .mo,
.prose pre code .il { color: #d19a66; }
.prose pre code .nf, .prose pre code .fm { color: #61afef; font-weight: 600; }
.prose pre code .nd { color: #61afef; }
.prose pre code .o { color: #56b6c2; }
.prose pre code .n, .prose pre code .na, .prose pre code .no,
.prose pre code .ni, .prose pre code .ne, .prose pre code .nl,
.prose pre code .nn, .prose pre code .nx, .prose pre code .py,
.prose pre code .nt, .prose pre code .nv, .prose pre code .vc,
.prose pre code .vg, .prose pre code .vi, .prose pre code .vm {
  color: #e06c75;
}
.prose pre code .gi { color: #98c379; }
.prose pre code .gd, .prose pre code .gr, .prose pre code .gt { color: #e06c75; }
.prose pre code .err { color: inherit; }
.prose blockquote {
  margin: 0 0 16px; padding: 10px 16px; border-left: 3px solid var(--primary);
  background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--fg-muted);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.prose th { background: var(--bg-soft); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

.copy-btn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: var(--code-fg); border-radius: 6px; padding: 4px 6px; cursor: pointer;
  display: flex; opacity: 0; transition: opacity 0.15s;
}
.prose pre:hover .copy-btn { opacity: 1; }
.copy-btn.copied { color: var(--success); }

/* ===== Home ===== */
.home-hero { max-width: 1080px; padding-top: 12px; }
.home-hero h1 { font-size: 2.3rem; margin: 6px 0 12px; }
.home-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; margin-top: 32px;
}
.home-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; color: var(--fg); box-shadow: var(--shadow);
  transition: transform 0.12s, border-color 0.12s;
}
.home-card:hover { text-decoration: none; border-color: var(--primary-light); transform: translateY(-2px); }
.home-card-icon { width: 26px; height: 26px; color: var(--primary); margin-bottom: 10px; }
.home-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.home-card p { margin: 0 0 12px; color: var(--fg-muted); font-size: 0.88rem; }
.home-card-link { font-size: 0.83rem; font-weight: 600; color: var(--primary-dark); display: inline-flex; align-items: center; gap: 4px; }
html[data-theme="dark"] .home-card-link, :root:not([data-theme="light"]) .home-card-link { color: var(--primary-light); }

.home-ai-callout {
  margin-top: 36px; display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border: 1px solid var(--primary-lighter); border-radius: var(--radius); padding: 16px 18px;
}
.home-ai-callout .icon { color: var(--primary); width: 24px; height: 24px; flex: none; margin-top: 2px; }
.home-ai-callout p { margin: 4px 0 0; color: var(--fg-muted); font-size: 0.9rem; }

/* ===== Search overlay ===== */
.search-overlay {
  position: fixed; inset: 0; background: rgba(17,24,39,0.5); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px;
}
.search-overlay[hidden] { display: none; }
.search-box {
  width: 100%; max-width: 600px; background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--border);
}
.search-box input {
  width: 100%; border: none; border-bottom: 1px solid var(--border); padding: 16px 18px;
  font-size: 1rem; background: transparent; color: var(--fg); outline: none;
}
.search-results { max-height: 50vh; overflow-y: auto; }
.search-result { display: block; padding: 12px 18px; color: var(--fg); border-bottom: 1px solid var(--border); }
.search-result:hover, .search-result.is-active { background: var(--bg-soft); text-decoration: none; }
.search-result strong { display: block; font-size: 0.92rem; }
.search-result span { color: var(--fg-muted); font-size: 0.82rem; }
.search-result .search-cat { color: var(--primary-dark); font-size: 0.72rem; text-transform: uppercase; font-weight: 600; }
.search-hint { margin: 0; padding: 8px 18px; font-size: 0.78rem; color: var(--fg-muted); border-top: 1px solid var(--border); }
.search-empty { padding: 24px 18px; color: var(--fg-muted); font-size: 0.9rem; text-align: center; }

/* ===== AI widget ===== */
.ai-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border: none; border-radius: 999px; padding: 12px 18px;
  font-weight: 600; font-size: 0.88rem; cursor: pointer; box-shadow: var(--shadow-lg);
}
.ai-panel {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  width: 380px; max-width: calc(100vw - 32px); max-height: 70vh;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
}
.ai-panel[hidden] { display: none; }
.ai-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.9rem;
}
.ai-panel-header span { display: flex; align-items: center; gap: 6px; }
.ai-panel-header .icon { color: var(--primary); }
.ai-panel-hint { font-size: 0.78rem; color: var(--fg-muted); padding: 0 14px; margin: 8px 0; }
.ai-messages { flex: 1; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 0.87rem; line-height: 1.45; }
.ai-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 3px; }
.ai-msg.bot { align-self: flex-start; background: var(--bg-soft); border: 1px solid var(--border); border-bottom-left-radius: 3px; white-space: pre-wrap; }
.ai-msg.bot code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.ai-msg.error { align-self: flex-start; background: color-mix(in srgb, var(--error) 12%, transparent); border: 1px solid var(--error); }

.ai-thinking { display: flex; align-items: center; gap: 6px; color: var(--fg-muted); font-style: italic; }
.ai-dots { display: inline-flex; align-items: center; gap: 3px; }
.ai-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  opacity: 0.35; animation: ai-dot-bounce 1.1s infinite ease-in-out;
}
.ai-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-dots span { animation: none; opacity: 0.7; }
}
.ai-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.ai-form input {
  flex: 1; border: 1px solid var(--border); border-radius: 999px; padding: 9px 14px;
  background: var(--bg-soft); color: var(--fg); font-size: 0.87rem; outline: none;
}
.ai-form input:focus { border-color: var(--primary); }
.ai-send {
  background: var(--primary); color: #fff; border: none; border-radius: 999px;
  width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ai-send:hover { background: var(--primary-dark); }

/* ===== Footer callouts used in content ===== */
.callout {
  border-radius: var(--radius); border: 1px solid var(--border); padding: 12px 16px; margin: 0 0 16px;
  background: var(--bg-soft);
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .toc { display: none; }
}
@media (max-width: 860px) {
  .only-mobile { display: flex; }
  .navbar-links { display: none; }
  .navbar-search span, .navbar-search kbd { display: none; }
  .sidebar {
    position: fixed; left: 0; top: var(--navbar-h); z-index: 50;
    width: 78vw; max-width: 300px; background: var(--bg);
    transform: translateX(-100%); transition: transform 0.18s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: translateX(0); }
  .content { padding: 20px 16px 60px; }
  .ai-panel { width: calc(100vw - 32px); }
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; }
}