/**
 * TabulaKit Framework Styles
 *
 * This file is managed by TabulaKit and updated via /tabula-update.
 * Do NOT edit this file — your changes will be overwritten on update.
 *
 * To customize styles, use site/css/custom.css instead.
 * Custom.css loads after this file, so your rules automatically win.
 */

/* ===== Theme Variables ===== */
:root {
  --theme-color: #e84118;
  --theme-color-teal: #3bc0cb;
  --sidebar-width: 280px;
  --base-font-size: 16px;
  --base-background-color: #222222;
  --base-color: #dddddd;
  --sidebar-background: #2a2a2a;
  --sidebar-nav-link-color--active: var(--theme-color);
  --sidebar-name-color: var(--theme-color);
  --sidebar-nav-link-border-color--active: var(--theme-color);
  --heading-color: var(--theme-color);
  --heading-h2-color: var(--theme-color);
  --blockquote-border-color: var(--theme-color);
  --table-head-background: #2E4057;
  --code-inline-background: #1e293b;
  --code-inline-color: var(--theme-color-teal);
  --sidebar-nav-link-padding: 0.3em 0;
  --sidebar-nav-strong-margin: 1.2em -25px 0.4em 0;
  --sidebar-nav-strong-padding: 0.15em 0 0.4em 0;
  --sidebar-nav-strong-color: var(--theme-color-teal);
  --sidebar-nav-strong-font-size: 0.75em;
  --sidebar-nav-strong-text-transform: uppercase;
  --sidebar-nav-strong-border-color: transparent;
  --sidebar-nav-strong-border-width: 0;
  --sidebar-nav-pagelink-background: none;
  --sidebar-nav-pagelink-background--active: none;
  --sidebar-nav-pagelink-background--collapse: none;
  --sidebar-nav-pagelink-background--loaded: none;
  --sidebar-nav-pagelink-padding: 0.25em 0;
  --link-color: var(--theme-color-teal);
  --link-color--hover: #5eead4;
  --sidebar-border-color: #3a3a3a;
  --sidebar-border-width: 0;
  --notice-tip-border-color: var(--theme-color-teal);
  --sidebar-name-margin: 20px 0 0 0;
  --sidebar-name-padding: 0;
}

/* ===== Base ===== */
body { background: #222222; font-size: 16px; }
.markdown-section { font-size: 16px; line-height: 1.7; padding-top: 5px !important; }

/* ===== Sidebar ===== */
.sidebar-nav { padding-bottom: 8rem !important; margin-top: 0.5rem !important; }
.sidebar-toggle { top: 30px !important; }
.sidebar > h1, .sidebar > h1 > a { text-align: left !important; }
.sidebar > h1 { padding-left: 0; margin-left: 0; }
.sidebar > h1 > a { padding: 0 !important; margin: 0 !important; color: var(--theme-color) !important; font-weight: 700 !important; }
.sidebar-nav > ul > li > p { margin: 0 !important; }

/* Section headings: non-clickable, uppercase, muted, with spacing */
.sidebar-nav > ul > li:has(> p > strong) { margin-top: 1.2em !important; }
.sidebar-nav > ul > li:has(> p > strong):first-child { margin-top: 0 !important; }
.sidebar-nav > ul > li > p > strong {
  color: var(--theme-color-teal);
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* Collapsible sections */
.sidebar-nav > ul > li:has(> p > strong) ~ li > a,
.sidebar-nav > ul > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Active nav item */
.sidebar-nav li.active > a {
  color: var(--theme-color) !important;
  font-weight: 500;
}

/* ===== Tables ===== */
table { width: 100%; }
td, th { vertical-align: top; }
th { background: #2E4057 !important; color: white !important; }
.markdown-section table td:first-child,
.markdown-section table th:first-child { white-space: nowrap; }

/* Mobile stacked card tables */
@media screen and (max-width: 768px) {
  .markdown-section table,
  .markdown-section thead,
  .markdown-section tbody,
  .markdown-section th,
  .markdown-section td,
  .markdown-section tr { display: block; }

  .markdown-section thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .markdown-section tr {
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    margin-bottom: 0.75em;
    padding: 0.5em;
    background: #2a2a2a;
  }

  .markdown-section td {
    border: none !important;
    position: relative;
    padding: 0.35em 0.5em 0.35em 40%;
    text-align: left;
    white-space: normal !important;
    word-wrap: break-word;
    min-height: 1.4em;
  }

  .markdown-section td:before {
    content: attr(data-label);
    position: absolute;
    left: 0.5em;
    width: 35%;
    padding-right: 0.5em;
    font-weight: 700;
    color: var(--theme-color-teal);
    font-size: 0.85em;
    white-space: normal;
    word-wrap: break-word;
  }

  .markdown-section td:first-child {
    white-space: normal !important;
    font-weight: 600;
    color: var(--theme-color);
  }
}

/* ===== Headings ===== */
.markdown-section h1,
.markdown-section h2,
.markdown-section h3 { border-bottom: none !important; padding-bottom: 0; }
.markdown-section h1 { color: var(--theme-color); margin: 1rem 0 0 0 !important; padding: 0 !important; }
.markdown-section h1:first-child { margin-top: 0 !important; }
.markdown-section h2 { color: var(--theme-color); margin: 1rem 0 0 0 !important; padding: 0 !important; }
.markdown-section h3 { color: #dddddd; margin: 1rem 0 0 0 !important; }
.markdown-section h1 a,
.markdown-section h2 a,
.markdown-section h3 a { text-decoration: none !important; }
.markdown-section h1 a:hover,
.markdown-section h2 a:hover,
.markdown-section h3 a:hover { text-decoration: none !important; }
.markdown-section p { margin-top: 0 !important; }

/* ===== Scrollbars ===== */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(156, 163, 175, 0.5); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(156, 163, 175, 0.7); }

html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: var(--base-background-color, #222222); }
html::-webkit-scrollbar-thumb { background: var(--theme-color); border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover { background: var(--theme-color); filter: brightness(1.2); }
html { scrollbar-width: thin; scrollbar-color: var(--theme-color) var(--base-background-color, #222222); }

/* ===== Auth Gate ===== */
#auth-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #1a1a2e;
  color: #ccc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: center;
  padding: 1em;
  box-sizing: border-box;
  z-index: 9999;
}
#auth-gate h1 { color: var(--theme-color); margin-bottom: 0.5em; }
#auth-gate p { margin: 0.3em 0; max-width: 90vw; }
#auth-gate .subtitle { color: #888; font-size: 0.9em; }
#auth-gate .error { color: #cc0000; margin-top: 1em; }
#sign-in-btn {
  margin-top: 2em;
  padding: 12px 32px;
  font-size: 1em;
  background: var(--theme-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#sign-in-btn:hover { opacity: 0.85; }
#sign-in-btn:disabled { background: #666; cursor: wait; }

/* ===== Mermaid Diagrams ===== */
.mermaid-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 1em;
  box-sizing: border-box;
}
.mermaid-overlay svg {
  max-width: 95vw;
  max-height: 95vh;
}
.mermaid { cursor: zoom-in; }