/* ================================================================
   BASE/labs — Docsify theme
   Built on top of colors_and_type.css (tokens + IBM Plex Mono).
   Overrides Docsify's default DOM to match the brand.
   ================================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

/* app boot message */
#app { padding: var(--space-11) var(--space-8); color: var(--fg-3); font-size: var(--fs-body-sm); letter-spacing: var(--ls-wide); }

::selection { background: rgba(54, 84, 174, 0.18); }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  z-index: 30;
  width: 312px;
  overflow-y: auto;
  background: var(--bg-page);
  border-right: 1px solid var(--border-1);
  padding: 0;
  transition: transform var(--motion-base) var(--easing-standard);
}

.sidebar > h1 {
  margin: 0;
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--border-2);
}

/* Wordmark — typeset fallback (official SVG not shipped with tokens) */
.sidebar > h1 .app-name-link {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  border: 0;
}
.sidebar > h1 .app-name-link::before {
  content: "BASE";
  font-weight: var(--fw-bold);
  color: var(--fg-brand);
  letter-spacing: 0.02em;
}
.sidebar > h1 .app-name-link::after {
  content: "/labs";
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--fg-1);
}
.sidebar > h1 .app-name-link span { display: none; }

/* small caption under wordmark via ::after on h1 not possible with link;
   use the search block spacing instead */

.sidebar .search {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-2);
}
.sidebar .search .input-wrap {
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-3);
  margin: 0;
}
.sidebar .search input {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  padding: 10px 12px;
  color: var(--fg-1);
}
.sidebar .search input::placeholder { color: var(--fg-4); }
.sidebar .search .clear-button { padding-right: 8px; }
.sidebar .search .clear-button svg circle { fill: var(--color-ink-300); }
.sidebar .search p.empty { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--fg-3); text-align: left; }
.sidebar .search .matching-post { border-bottom: 1px solid var(--border-2); }
.sidebar .search .matching-post h2 { font-size: var(--fs-body-sm); color: var(--fg-brand); }
.sidebar .search .matching-post p { font-size: var(--fs-caption); color: var(--fg-2); }
.sidebar .search a { border: 0; }

/* nav list */
.sidebar-nav { padding: var(--space-5) var(--space-4) var(--space-9); line-height: 1.4; }

.sidebar-nav > p {
  margin: var(--space-6) var(--space-3) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}
.sidebar-nav > p:first-child { margin-top: var(--space-2); }
.sidebar-nav > p strong { font-weight: var(--fw-semibold); }
.sidebar-nav > p::before { content: "// "; color: var(--fg-brand); }

.sidebar-nav ul { margin: 0; padding: 0; list-style: none; }
.sidebar-nav li { margin: 0; }

.sidebar-nav li > a {
  display: block;
  padding: 7px var(--space-3);
  margin: 1px 0;
  border: 0;
  border-radius: var(--radius-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--motion-fast) var(--easing-standard),
              color var(--motion-fast) var(--easing-standard);
}
.sidebar-nav li > a:hover { background: var(--bg-subtle); color: var(--fg-1); }

/* active page */
.sidebar-nav li.active > a,
.sidebar-nav li > a.active {
  color: var(--fg-brand);
  background: var(--bg-muted);
  font-weight: var(--fw-semibold);
}

/* nested (auto TOC of headings) */
.sidebar-nav ul ul { margin-left: var(--space-3); border-left: 1px solid var(--border-2); padding-left: var(--space-2); }
.sidebar-nav ul ul li > a { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--fg-3); padding: 5px var(--space-3); }
.sidebar-nav ul ul li.active > a,
.sidebar-nav ul ul li > a.active { color: var(--fg-brand); background: transparent; font-weight: var(--fw-medium); }

/* docsify hamburger — hidden on desktop (sidebar always visible) */
.sidebar-toggle { display: none; background: transparent; }
.sidebar-toggle .sidebar-toggle-button:hover { opacity: 1; }
.sidebar-toggle span { background-color: var(--fg-brand); }
@media screen and (max-width: 768px) {
  .sidebar-toggle {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 48px; height: 60px;
    z-index: 55;
    padding: 22px 14px;
  }
}

/* ================================================================
   TOP NAVBAR
   ================================================================ */
.app-nav {
  margin: 0;
  padding: var(--space-4) var(--space-7);
  text-align: right;
}
.app-nav.no-badge { margin-top: 0; }
.app-nav li ul { border: 1px solid var(--border-1); border-radius: var(--radius-4); box-shadow: var(--shadow-3); background: var(--bg-card); }
.app-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  border: 0;
  padding-bottom: 2px;
}
.app-nav a:hover { color: var(--fg-brand); }
.app-nav a.active { color: var(--fg-brand); border-bottom: 2px solid var(--fg-brand); }

/* ================================================================
   COVER PAGE — dark blue marketing hero
   ================================================================ */
section.cover {
  background: var(--bg-inverse) !important;
}
section.cover.show { display: flex; }
section.cover .mask { background: transparent; opacity: 1; }
section.cover::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1b2a5b 0%, #3654ae 100%);
  z-index: 0;
}
/* diagonal stripe flourish, bottom-right */
section.cover::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -60px;
  width: 340px; height: 340px;
  background: repeating-linear-gradient(-30deg,
      rgba(255,255,255,0.06) 0 2px,
      transparent 2px 16px);
  z-index: 0;
  pointer-events: none;
}
section.cover .cover-main {
  position: relative;
  z-index: 1;
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
  color: var(--fg-on-inverse);
}
section.cover .cover-main > p:first-child { margin: 0; }
section.cover .cover-wordmark {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-size: 22px; line-height: 1; margin: 0 0 var(--space-7);
}
section.cover .cover-wordmark b { font-weight: var(--fw-bold); color: #fff; letter-spacing: 0.02em; }
section.cover .cover-wordmark i { font-weight: var(--fw-light); font-style: italic; color: var(--color-blue-200); }

section.cover .cover-main h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 6vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-on-inverse);
  margin: var(--space-4) 0 var(--space-2);
}
section.cover .cover-main h1 a { color: var(--fg-on-inverse); border: 0; font-size: inherit; }
section.cover .cover-main h1 small { display: none; }
section.cover .cover-main blockquote { margin: 0 0 var(--space-7); }
section.cover .cover-main blockquote p {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--fg-on-inverse-2);
  line-height: var(--lh-relaxed);
}
section.cover .cover-main > p:last-child { margin-top: 0; }

section.cover .cover-main .cover-eyebrow {
  display: inline-block;
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent-success);
}

/* cover buttons */
section.cover .cover-main a.btn-primary,
section.cover .cover-main > p:last-child a {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-transform: lowercase;
  letter-spacing: 0.01em;
  padding: 12px 22px;
  margin: 6px 10px 6px 0;
  border-radius: var(--radius-3);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--fg-on-inverse);
  background: transparent;
  transition: background var(--motion-fast) var(--easing-standard),
              border-color var(--motion-fast) var(--easing-standard),
              transform var(--motion-fast) var(--easing-standard);
}
section.cover .cover-main > p:last-child a:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.5); }
/* primary (first) cover button */
section.cover .cover-main > p:last-child a:first-child {
  background: var(--color-white);
  color: var(--color-blue-900);
  border-color: var(--color-white);
}
section.cover .cover-main > p:last-child a:first-child:hover { background: var(--color-blue-100); }

/* ================================================================
   CONTENT
   ================================================================ */
.content { margin-left: 312px; transition: margin-left var(--motion-base) var(--easing-standard); }
main { padding-top: 60px; }
body.close .content { margin-left: 0; }

.markdown-section {
  max-width: 860px;
  padding: var(--space-9) var(--space-8) var(--space-12);
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4 { color: var(--fg-1); scroll-margin-top: 24px; }

.markdown-section h1 {
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-5);
}
.markdown-section h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: var(--space-9) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-2);
}
.markdown-section h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin: var(--space-7) 0 var(--space-3);
}
.markdown-section h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  margin: var(--space-6) 0 var(--space-2);
  color: var(--fg-2);
}

/* auto-anchor link on headings */
.markdown-section h1 .anchor,
.markdown-section h2 .anchor,
.markdown-section h3 .anchor,
.markdown-section h4 .anchor { border: 0; }
.markdown-section .anchor span { color: inherit; }

.markdown-section p,
.markdown-section li {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.markdown-section li { margin: 4px 0; }
.markdown-section ul, .markdown-section ol { padding-left: var(--space-6); }

.markdown-section a { color: var(--fg-brand); border-bottom: 1px solid transparent; text-decoration: none; }
.markdown-section a:hover { border-bottom-color: currentColor; }

.markdown-section strong { font-weight: var(--fw-bold); }
.markdown-section em { font-style: italic; }

.markdown-section hr { border: 0; border-top: 1px solid var(--border-2); margin: var(--space-8) 0; }

/* blockquote — the brand "voice" callout / speech beat */
.markdown-section blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--fg-brand);
  border-radius: var(--radius-3);
  color: var(--fg-1);
}
.markdown-section blockquote p { font-style: italic; color: var(--fg-2); margin: 0; }
.markdown-section blockquote p:not(:last-child) { margin-bottom: var(--space-2); }

/* inline code + code blocks */
.markdown-section code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-subtle);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-2);
  padding: 0.08em 0.36em;
  color: var(--color-blue-800);
}
.markdown-section pre {
  background: var(--color-ink-900);
  border-radius: var(--radius-4);
  padding: 0;
  margin: var(--space-5) 0;
  overflow: hidden;
  border: 1px solid var(--color-ink-800);
}
.markdown-section pre > code {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  background: transparent;
  border: 0;
  color: #e9ecf3;
  padding: var(--space-5);
  display: block;
  white-space: pre;
}
.markdown-section pre::after { display: none; }

/* Prism token colors on dark */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #8b92a6; }
.token.punctuation { color: #b6c1d8; }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol { color: #9edc37; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin { color: #8a9fda; }
.token.operator, .token.entity, .token.url, .token.keyword { color: #6b87d0; }
.token.function, .token.class-name { color: #ff6e5a; }
.token.important, .token.bold { font-weight: var(--fw-bold); }

/* copy-code button */
.docsify-copy-code-button {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-caption) !important;
  text-transform: lowercase !important;
  letter-spacing: 0.02em;
  background: var(--color-ink-800) !important;
  color: var(--color-ink-300) !important;
  border-radius: var(--radius-2) !important;
  border: 1px solid var(--color-ink-700) !important;
  padding: 5px 10px !important;
}
.docsify-copy-code-button:hover { color: var(--color-white) !important; background: var(--color-blue-800) !important; }
.docsify-copy-code-button.success { background: var(--color-blue-700) !important; color: #fff !important; }

/* ================================================================
   TABLES — crisp 1px, mono
   ================================================================ */
.markdown-section table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-size: var(--fs-body-sm);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-4);
  overflow: hidden;
}
.markdown-section th {
  background: var(--bg-subtle);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  border: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-strong);
  padding: 10px 14px;
}
.markdown-section td {
  border: 1px solid var(--border-2);
  padding: 10px 14px;
  color: var(--fg-1);
  vertical-align: top;
}
.markdown-section tr:nth-child(2n) td { background: #fafbfc; }
.markdown-section table code { font-size: 0.82em; }

/* ================================================================
   PAGINATION
   ================================================================ */
.docsify-pagination-container {
  margin-top: var(--space-9);
  border-top: 1px solid var(--border-2);
  padding-top: var(--space-5);
}
.pagination-item a { color: var(--fg-2); }
.pagination-item a:hover { color: var(--fg-brand); }
.pagination-item-label { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--ls-wide); text-transform: lowercase; }
.pagination-item-title { font-family: var(--font-mono); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--fg-1); }
.pagination-item:hover .pagination-item-title { color: var(--fg-brand); }

/* word count plugin */
.count-of-page { font-family: var(--font-mono); }

/* ================================================================
   HOME PAGE — custom landing components
   ================================================================ */
.home-eyebrow {
  display: inline-block;
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-3);
}
.home-eyebrow::before { content: "// "; color: var(--fg-brand); }

.markdown-section .home-lead {
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  max-width: 62ch;
}

.principle {
  margin: var(--space-7) 0;
  padding: var(--space-6);
  background: var(--bg-inverse);
  background-image: linear-gradient(135deg, #1b2a5b 0%, #3654ae 100%);
  border-radius: var(--radius-5);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.principle .principle-label {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent-success);
}
.principle .principle-label::before { content: "// "; }
.principle .principle-quote {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-snug);
  margin: var(--space-3) 0 0;
  color: #fff;
}
.principle .principle-quote strong { font-weight: var(--fw-bold); font-style: normal; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.doc-card {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-5);
  background: var(--bg-card);
  box-shadow: var(--shadow-1);
  text-decoration: none !important;
  border-bottom: 1px solid var(--border-1) !important;
  transition: transform var(--motion-fast) var(--easing-standard),
              box-shadow var(--motion-fast) var(--easing-standard),
              border-color var(--motion-fast) var(--easing-standard);
}
.doc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: var(--border-brand) !important; }
.doc-card .doc-card-glyph {
  font-size: 28px;
  color: var(--fg-brand);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-3);
}
.doc-card .doc-card-num {
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-wider);
  color: var(--fg-4);
}
.doc-card .doc-card-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 4px 0 var(--space-2);
}
.doc-card .doc-card-desc {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: var(--lh-normal);
  margin: 0;
}

/* guardrail chips */
.guardrails { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-6); }
.guardrails .chip {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  padding: 6px 12px;
  border-radius: var(--radius-2);
  border: 1px solid var(--border-1);
  background: var(--bg-subtle);
  color: var(--fg-2);
}
.guardrails .chip strong { color: var(--fg-brand); font-weight: var(--fw-semibold); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media screen and (max-width: 768px) {
  .sidebar { transform: translateX(-100%); z-index: 45; box-shadow: var(--shadow-3); }
  .content { margin-left: 0; }
  body.close .sidebar { transform: translateX(0); }
  .markdown-section { padding: var(--space-7) var(--space-5) var(--space-11); }
  .markdown-section h1 { font-size: var(--fs-h1); }
  section.cover .cover-main { padding: 0 var(--space-5); }
  #site-header .sh-brand { padding-left: 48px; }
  #site-header .sh-title { display: none; }
}

/* keep tables scrollable on small screens */
@media screen and (max-width: 640px) {
  .markdown-section table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ================================================================
   SITE HEADER (wiki title bar)
   ================================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 60px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-1);
}
.sh-brand { display: flex; align-items: baseline; gap: 12px; border: 0 !important; text-decoration: none; min-width: 0; }
.sh-mark { font-size: 20px; line-height: 1; display: inline-flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.sh-mark b { font-weight: var(--fw-bold); color: var(--fg-brand); letter-spacing: 0.02em; }
.sh-mark i { font-weight: var(--fw-light); font-style: italic; color: var(--fg-1); }
.sh-sep { color: var(--fg-4); }
.sh-title { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--fg-2); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================
   THEME TOGGLE BUTTON (lives in the header, right side)
   ================================================================ */
#theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-1);
  background: var(--bg-card);
  color: var(--fg-2);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: color var(--motion-fast) var(--easing-standard),
              border-color var(--motion-fast) var(--easing-standard),
              transform var(--motion-fast) var(--easing-standard);
}
#theme-toggle:hover { color: var(--fg-brand); border-color: var(--border-brand); }
#theme-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
#theme-toggle .tt-glyph { font-size: 15px; line-height: 1; color: var(--fg-brand); }

/* ================================================================
   DARK MODE — palette derived from the cool ink/blue tokens
   ================================================================ */
html.dark {
  --bg-page: #0e1220;
  --bg-subtle: #161c2c;
  --bg-muted: #1d2748;
  --bg-card: #141a28;
  --fg-1: #e9ecf3;
  --fg-2: #b3b9c8;
  --fg-3: #8b92a6;
  --fg-4: #6b7388;
  --fg-brand: #8a9fda;
  --border-1: #2a3146;
  --border-2: #20263a;
  --border-strong: #3a415a;
  --border-brand: #4a6dc4;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5);
}
html.dark, html.dark body { background: var(--bg-page); }

html.dark .sidebar,
html.dark .app-nav li ul { background: var(--bg-page); }
html.dark .sidebar > h1 .app-name-link::after { color: var(--fg-1); }

html.dark .markdown-section code {
  color: #b6c1d8;
  background: #182034;
  border-color: var(--border-1);
}
html.dark .markdown-section blockquote { background: var(--bg-subtle); }
html.dark .markdown-section tr:nth-child(2n) td { background: #121826; }
html.dark .markdown-section th { background: #182034; }

html.dark .doc-card { box-shadow: none; }
html.dark .doc-card:hover { box-shadow: var(--shadow-3); }

/* code blocks already ship a dark surface — nudge to match page depth */
html.dark .markdown-section pre { background: #0a0e18; border-color: var(--border-1); }
html.dark .docsify-copy-code-button { background: #182034 !important; border-color: var(--border-1) !important; }

/* search dropdown */
html.dark .sidebar .search .input-wrap { background: var(--bg-subtle); }