/* Sysand Index - Light/Dark Design System */
/* Bootstrap 5.3 overrides via CSS custom properties */

/* Self-hosted fonts (see scripts/fetch-vendor-assets.sh) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/inter/inter-latin-variable.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/jetbrains-mono/jetbrains-mono-latin-variable.b636a65da4f0.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Light theme (baseline) === */

:root {
  --si-bg: #ffffff;
  --si-surface: #f6f8fa;
  --si-surface-hover: #eef1f5;
  --si-border: #d1d9e0;
  --si-border-subtle: #e8ecf0;
  --si-text: #1f2328;
  --si-text-secondary: #57606a;
  --si-text-muted: #6e7781;
  --si-accent: #c2410c;
  --si-accent-subtle: rgba(237, 137, 54, 0.12);
  --si-danger: #cf222e;
  --si-danger-subtle: rgba(207, 34, 46, 0.1);
  --si-warning: #9a6700;
  --si-warning-subtle: rgba(154, 103, 0, 0.1);
  --si-success: #1a7f37;
  --si-success-subtle: rgba(26, 127, 55, 0.1);
  --si-info: #0969da;
  --si-info-subtle: rgba(9, 105, 218, 0.1);
  --si-btn-primary-bg: #c2410c;
  --si-btn-primary-hover: #9a3412;
  --si-btn-danger-bg: #cf222e;
  --si-btn-warning-bg: #9a6700;
  --si-focus-ring: rgba(237, 137, 54, 0.4);
}

/* === Dark theme === */

[data-bs-theme="dark"] {
  --si-bg: #0d1117;
  --si-surface: #161b22;
  --si-surface-hover: #1c2128;
  --si-border: #30363d;
  --si-border-subtle: #21262d;
  --si-text: #e6edf3;
  --si-text-secondary: #8b949e;
  --si-text-muted: #484f58;
  --si-accent: #ed8936;
  --si-accent-subtle: rgba(237, 137, 54, 0.15);
  --si-danger: #f85149;
  --si-danger-subtle: rgba(248, 81, 73, 0.15);
  --si-warning: #d29922;
  --si-warning-subtle: rgba(210, 153, 34, 0.15);
  --si-success: #3fb950;
  --si-success-subtle: rgba(63, 185, 80, 0.15);
  --si-info: #58a6ff;
  --si-info-subtle: rgba(88, 166, 255, 0.15);
  --si-btn-primary-bg: #c2410c;
  --si-btn-primary-hover: #dd6b20;
  --si-btn-danger-bg: #da3633;
  --si-btn-warning-bg: #d29922;
  --si-focus-ring: rgba(237, 137, 54, 0.35);
}

/* === Base === */

body {
  background-color: var(--si-bg);
  color: var(--si-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s, color 0.2s;
}

/* Prevent theme flash-of-unstyled-content on initial load */
body.si-no-transitions,
body.si-no-transitions * {
  transition: none !important;
}

a {
  color: var(--si-accent);
  text-decoration: none;
}

a:hover {
  color: var(--si-accent);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--si-text);
  letter-spacing: 0;
  text-transform: capitalize;
}

/* Opt-out for dynamic content headings and user-authored markdown */
.si-preserve-case,
.si-markdown h1,
.si-markdown h2,
.si-markdown h3,
.si-markdown h4,
.si-markdown h5,
.si-markdown h6 {
  text-transform: none;
}

code, pre {
  font-family: 'JetBrains Mono', monospace;
  font-variant-ligatures: none;
}

code {
  color: var(--si-accent);
}

/* Required-field asterisk (auto-applied via :has; skip crispy-forms labels) */
label.form-label:not(:has(.asteriskField)):has(~ input:required, ~ select:required, ~ textarea:required)::after,
label.form-label:not(:has(.asteriskField)):has(~ .form-control:required, ~ .form-select:required)::after {
  content: " *";
  color: var(--si-danger);
}

.asteriskField {
  color: var(--si-danger);
  margin-left: 0.15em;
}

/* === Bootstrap overrides === */

.text-muted {
  color: var(--si-text-secondary) !important;
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.nav-link {
  color: var(--si-text-secondary);
}

.nav-link:hover {
  color: var(--si-accent);
}

.nav-link.active {
  color: var(--si-accent);
}

/* === Navbar === */

.si-navbar {
  background-color: var(--si-surface);
  border-bottom: 1px solid var(--si-border);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.2s, border-color 0.2s;
}

.si-navbar .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.si-brand {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--si-text) !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.45rem 0;
}

.si-brand-logo {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  object-fit: contain;
}

.si-nav-search {
  order: 2;
  flex: 1 0 200px;
}

.si-nav-search input {
  width: 100%;
  background: var(--si-bg);
  border: 1px solid var(--si-border);
  border-radius: 6px;
  color: var(--si-text);
  padding: 0.45rem 0.75rem 0.45rem 2.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.si-nav-search input::placeholder {
  color: var(--si-text-secondary);
}

.si-nav-search input:focus {
  outline: none;
  border-color: var(--si-accent);
  box-shadow: 0 0 0 3px var(--si-focus-ring);
}

.si-nav-search-wrap {
  position: relative;
}

.si-nav-search-wrap::before {
  content: "\F52A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--si-text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}

.si-nav-links {
  order: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

.si-theme-toggle {
  background: transparent;
  border: none;
  color: var(--si-text-secondary);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.15s, background-color 0.15s;
}

.si-theme-toggle:hover {
  color: var(--si-text);
  background-color: var(--si-accent-subtle);
}

.si-nav-user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--si-text) !important;
  text-decoration: none !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: background-color 0.15s;
}

.si-nav-user:hover {
  background-color: var(--si-accent-subtle);
}

.si-nav-avatar {
  border-radius: 50%;
}

.si-nav-username {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.si-nav-links > a:not(.si-btn) {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--si-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
  text-transform: capitalize;
}

.si-nav-links > a:not(.si-btn):hover,
.si-nav-links > a:not(.si-btn).active {
  color: var(--si-text);
  text-decoration: none;
}

.si-nav-links > a:not(.si-btn).active {
  color: var(--si-accent);
}


/* === Buttons === */

.si-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none !important;
  white-space: nowrap;
}

.si-btn-primary {
  background-color: var(--si-btn-primary-bg);
  color: #fff;
  border-color: var(--si-btn-primary-bg);
}

.si-btn-primary:hover {
  background-color: var(--si-btn-primary-hover);
  border-color: var(--si-btn-primary-hover);
  color: #fff;
}

.si-btn-outline {
  background: transparent;
  color: var(--si-text-secondary);
  border-color: var(--si-border);
}

.si-btn-outline:hover {
  color: var(--si-text);
  border-color: var(--si-text-secondary);
  background: var(--si-surface-hover);
}

.si-btn-ghost {
  background: transparent;
  color: var(--si-text-secondary);
  border: none;
  padding: 0.4rem 0.6rem;
}

.si-btn-ghost:hover {
  color: var(--si-text);
  background: var(--si-accent-subtle);
}

.si-btn-danger {
  background-color: var(--si-btn-danger-bg);
  color: #fff;
  border-color: var(--si-btn-danger-bg);
}

.si-btn-danger:hover {
  filter: brightness(1.15);
  color: #fff;
}

.si-btn-warning {
  background-color: var(--si-btn-warning-bg);
  color: #fff;
  border-color: var(--si-btn-warning-bg);
}

.si-btn-warning:hover {
  filter: brightness(1.15);
  color: #fff;
}

.si-btn-sm {
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
}

/* Loading state for buttons */
.si-btn-loading {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
}

.si-btn-loading::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.4em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: si-spin 0.6s linear infinite;
}

@keyframes si-spin {
  to { transform: rotate(360deg); }
}

/* === Cards === */

.si-card {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 8px;
  transition: background-color 0.2s, border-color 0.2s;
}

.si-card-warning {
  border-color: rgba(210, 153, 34, 0.3);
}

.si-card-danger {
  border-color: var(--si-danger);
}

.si-card-padded {
  padding: 1.25rem;
}

.si-card-padded-lg {
  padding: 1.75rem;
}

/* Whole-row links used in browsing contexts. */
.si-clickable-row {
  cursor: pointer;
  box-shadow: inset 3px 0 0 transparent;
  transition:
    background-color 0.2s,
    box-shadow 0.2s;
}

.si-clickable-row:hover,
.si-clickable-row:focus-visible {
  background-color: var(--si-surface-hover);
  box-shadow: inset 3px 0 0 var(--si-accent);
  text-decoration: none;
}

/* Links nested inside a clickable row (canonical name links, handles, etc.)
   should not pick up the global hover underline — the row's hover highlight is
   already the click affordance. Scoped to rows so prose handle/links elsewhere
   keep their underline. Buttons (.si-btn) are unaffected; they never underline.
   Exception: links that open externally (target="_blank", e.g. an org's
   website) navigate away from the row target, so they keep the hover underline
   as a distinct affordance. */
.si-clickable-row a:not([target="_blank"]):hover {
  text-decoration: none;
}

.si-clickable-row:focus-visible {
  outline: 2px solid var(--si-focus-ring);
  outline-offset: -2px;
}

.si-card > .si-clickable-row:first-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.si-card > .si-clickable-row:last-child {
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

.si-list > .si-clickable-row:first-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.si-list > .si-clickable-row:last-child {
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
}

/* border-collapse keeps tr box-shadow from painting; draw the accent inset
   on the first cell instead. */
.si-table tr.si-clickable-row {
  box-shadow: none;
}

.si-table tr.si-clickable-row td:first-child {
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow 0.2s;
}

.si-table tr.si-clickable-row:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--si-accent);
}

/* === Normalized handles (@username, @org-name) === */

.si-handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
}

/* Inline si-handle elements get @ via CSS; block-level ones keep @ in template text */
a.si-handle::before,
span.si-handle::before {
  content: "@";
}

.si-handle a {
  color: var(--si-accent);
}

/* === Badges === */

.si-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(139, 148, 158, 0.14);
  color: var(--si-text-secondary);
  white-space: nowrap;
}

.si-badge + .si-badge {
  margin-left: 0.25rem;
}

.si-badge-muted {
  background: none;
  color: var(--si-text-muted);
  font-size: 0.85em;
}

.si-badge-outline {
  background: transparent;
  border: 1px solid var(--si-border);
  color: var(--si-text-secondary);
}

.si-badge-success {
  background: var(--si-success-subtle);
  color: var(--si-success);
}

.si-badge-warning {
  background: var(--si-warning-subtle);
  color: var(--si-warning);
}

.si-badge-danger {
  background: var(--si-danger-subtle);
  color: var(--si-danger);
}

.si-badge-notification {
  background: var(--si-accent-subtle);
  color: var(--si-accent);
  font-size: 0.7rem;
  font-weight: 700;
}

.si-nav-user .si-badge-notification {
  font-size: 0.6rem;
}

a.si-badge,
.si-badge-link {
  text-decoration: none;
  transition:
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

a.si-badge:hover,
a.si-badge:focus-visible,
.si-badge-link:hover,
.si-badge-link:focus-visible {
  box-shadow: inset 0 0 0 1px currentColor;
  filter: brightness(1.15);
  text-decoration: none;
}

a.si-badge:not(.si-badge-muted):not(.si-badge-outline):not(.si-badge-success):not(.si-badge-warning):not(.si-badge-danger),
.si-badge-link:not(.si-badge-muted):not(.si-badge-outline):not(.si-badge-success):not(.si-badge-warning):not(.si-badge-danger) {
  background: var(--si-accent-subtle);
  color: var(--si-accent);
}

/* === Section titles === */

.si-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 500;
  color: var(--si-text-secondary);
  letter-spacing: 0;
  margin-top: 1.5rem;
}

/* Auto-separator for non-first section titles */
.si-section-title ~ .si-section-title {
  border-top: 1px solid var(--si-border);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

/* === Layout === */

.si-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

.si-section {
  padding: 3rem 0;
}

.si-entrance-shell {
  display: flex;
  justify-content: center;
}

.si-entrance-panel {
  width: min(100%, 42rem);
}

.si-recaptcha-widget {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 6px;
  margin-bottom: 1rem;
  min-height: 80px;
  overflow: hidden;
  padding: 0.5rem;
  width: fit-content;
}

.si-recaptcha-widget iframe {
  display: block;
}

/* === Hero === */

.si-hero {
  text-align: center;
  padding: 3.5rem 0 2rem;
}

.si-hero h1 {
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0;
}

.si-hero-language-rotator {
  color: var(--si-accent);
}

.si-hero-title-visual {
  align-items: baseline;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35em;
  justify-content: center;
}

.si-hero-title-suffix {
  color: var(--si-text);
}

.si-hero-language-rotator {
  /* Add future languages as rows before the duplicated first row below. */
  --si-language-count: 2;
  --si-language-row-height: 1.2em;
  display: inline-block;
  height: var(--si-language-row-height);
  line-height: var(--si-language-row-height);
  min-width: 5.4em;
  overflow: hidden;
  text-align: right;
  vertical-align: bottom;
}

.si-hero-language-list {
  display: block;
  animation: si-language-scroll 6s infinite;
}

.si-hero-language-item {
  display: block;
  height: var(--si-language-row-height);
  line-height: var(--si-language-row-height);
}

.si-hero-title-reduced {
  display: none;
}

@keyframes si-language-scroll {
  0%,
  38% {
    transform: translateY(0);
  }

  50%,
  88% {
    transform: translateY(calc(-1 * var(--si-language-row-height)));
  }

  100% {
    transform: translateY(calc(-1 * var(--si-language-row-height) * var(--si-language-count)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .si-hero-title-visual {
    display: none;
  }

  .si-hero-title-reduced {
    display: inline;
  }
}

.si-hero p {
  color: var(--si-text-secondary);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

.si-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.si-hero-actions .si-btn {
  font-size: 0.9rem;
  padding: 0.65rem 1.25rem;
}

/* === Stats bar === */

.si-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--si-border-subtle);
  border-bottom: 1px solid var(--si-border-subtle);
}

.si-stat {
  text-align: center;
}

.si-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--si-accent);
}

.si-stat-label {
  font-size: 0.8rem;
  color: var(--si-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}

/* === Featured projects === */

.si-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: nowrap;
}

.si-section-header .si-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.si-section-header h2 {
  font-size: 1.15rem;
  margin: 0;
}

/* === Search Results === */

/* Search facet sidebar */
.si-search-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.si-search-results {
  min-width: 0;
}

.si-facets {
  position: sticky;
  top: 1.5rem;
}

.si-facet-group {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--si-border-subtle);
}

.si-facet-group:last-child {
  border-bottom: none;
}

.si-facet-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--si-text-muted);
  margin-bottom: 0.75rem;
}

.si-facet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.si-facet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.si-facet-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  cursor: pointer;
  min-width: 0;
}

.si-facet-option input {
  accent-color: var(--si-accent);
  cursor: pointer;
}

.si-facet-label {
  color: var(--si-text-secondary);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.si-facet-option:hover .si-facet-label {
  color: var(--si-text);
}

.si-facet-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--si-text-muted);
}

.si-facet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.si-facet-tag {
  cursor: pointer;
  text-decoration: none;
  /* Long free-form tags must wrap rather than overflow the sidebar.
     Mirrors .si-info-tags .si-badge and .si-result-tags .si-badge. */
  display: inline-block;
  max-width: 100%;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Flex gap handles spacing; cancel the default adjacent-badge margin so a
   wrapped tag stays flush-left (also in: .si-info-tags .si-badge,
   .si-result-tags .si-badge — keep consistent). */
.si-facet-tags .si-badge + .si-badge {
  margin-left: 0;
}

.si-facet-tag .si-facet-count {
  color: inherit;
  opacity: 0.7;
}

.si-facet-tag.si-is-active {
  background: var(--si-accent);
  color: #fff;
}

.si-tag-typeahead {
  width: 100%;
  padding: 0.35rem 0.5rem;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 4px;
  color: var(--si-text);
  font-size: 0.85rem;
}

.si-tag-typeahead:focus {
  outline: none;
  border-color: var(--si-accent);
}

/* Mobile: collapse the sidebar behind a Filters toggle. */
.si-facets-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 4px;
  color: var(--si-text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
}

@media (min-width: 768px) {
  /* Sidebar is always visible on wider screens regardless of collapse state. */
  .si-facets.collapse {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .si-search-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .si-facets-toggle {
    display: inline-flex;
  }

  .si-facets {
    position: static;
    margin-bottom: 1.5rem;
  }
}

.si-search-header {
  padding: 0.5rem 0 1.5rem;
  border-bottom: 1px solid var(--si-border-subtle);
}

.si-search-header h1 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.si-search-meta {
  color: var(--si-text-secondary);
  font-size: 0.9rem;
}

.si-search-meta strong {
  color: var(--si-text);
}

.si-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.si-result-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--si-border-subtle);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.si-result-item:last-child {
  border-bottom: none;
}

.si-result-content {
  flex: 1;
  /* Flex items default to min-width auto; without this a wide child (e.g. a
     long tag badge) pushes the result card past a narrow viewport. */
  min-width: 0;
}

.si-result-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 600;
  color: var(--si-accent);
  margin-bottom: 0.15rem;
}

.si-result-title a {
  color: var(--si-accent);
}

.si-result-publisher {
  font-size: 0.8rem;
  color: var(--si-text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 0.4rem;
}

.si-result-desc {
  font-size: 0.875rem;
  color: var(--si-text-secondary);
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.si-result-meta {
  font-size: 0.8rem;
  color: var(--si-text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 0.4rem;
}

.si-result-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.si-result-tags .si-badge {
  /* Long free-form tags must wrap rather than overflow the result card.
     Mirrors .si-facet-tag and .si-info-tags .si-badge — keep consistent. */
  display: inline-block;
  max-width: 100%;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Flex gap handles spacing; cancel the default adjacent-badge margin so a
   wrapped tag stays flush-left (also in: .si-facet-tags .si-badge,
   .si-info-tags .si-badge — keep consistent). */
.si-result-tags .si-badge + .si-badge {
  margin-left: 0;
}

/* === Home columns === */

.si-home-column {
  min-width: 0;
}

.si-home-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* === Pagination === */

.si-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 2rem 0 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.si-pagination a,
.si-pagination-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.si-pagination a {
  color: var(--si-text-secondary);
}

.si-pagination a:hover {
  background: var(--si-accent-subtle);
  color: var(--si-accent);
  text-decoration: none;
}

.si-pagination-current {
  background: var(--si-accent);
  color: #fff;
  font-weight: 600;
}

.si-pagination-ellipsis {
  color: var(--si-text-muted);
  padding: 0 0.25rem;
}

.si-pagination-info {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--si-text-muted);
  padding-bottom: 1rem;
}

/* Sort controls */
.si-sort-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--si-text-muted);
}

.si-sort-controls a {
  color: var(--si-text-secondary);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--si-border);
  border-radius: 4px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.si-sort-controls a:hover {
  color: var(--si-text);
  background: var(--si-surface-hover);
  text-decoration: none;
}

.si-sort-controls a.active {
  color: var(--si-accent);
  background: var(--si-accent-subtle);
  border-color: transparent;
}

/* Sortable table column headers (staff directory tables) */
.si-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.si-sort-link:hover,
.si-sort-link.active {
  color: var(--si-accent);
  text-decoration: none;
}

/* Reserve the arrow's space on every header so toggling the active column's
   direction (or moving the sort to another column) never shifts column width.
   The glyph lives in ::before (descending by default, ascending when
   .si-sort-asc) and
   is hidden — but still occupies its box — on inactive columns. */
.si-sort-arrow::before {
  content: "▼";
}

.si-sort-arrow.si-sort-asc::before {
  content: "▲";
}

.si-sort-arrow {
  visibility: hidden;
}

.si-sort-arrow.active {
  visibility: visible;
}

.si-result-version {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--si-text-muted);
  white-space: nowrap;
}

/* Active filters */
.si-active-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--si-text-muted);
}

.si-filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: var(--si-accent-subtle);
  color: var(--si-accent);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.15s;
}

.si-filter-badge:hover {
  background: var(--si-accent);
  color: #fff;
  text-decoration: none;
}

.si-filter-badge .bi-x {
  font-size: 0.9rem;
  margin-left: 0.1rem;
}

.si-result-publisher a {
  color: var(--si-text-muted);
  text-decoration: none;
}

.si-result-publisher a:hover {
  color: var(--si-accent);
  text-decoration: none;
}

/* === Project Detail === */

.si-project-header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--si-border-subtle);
}

/* Page header: shared layout for view + manage pages */
.si-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.si-page-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.si-manage-header {
  font-family: 'Inter', sans-serif;
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}

.si-publisher {
  font-size: 0.85rem;
  color: var(--si-text-secondary);
}

.si-version-select {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 6px;
  color: var(--si-text);
  padding: 0.35rem 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  cursor: pointer;
}

.si-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--si-border);
  margin-bottom: 1.5rem;
}

.si-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  padding: 0.75rem 1rem;
  color: var(--si-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none !important;
  text-transform: capitalize;
  white-space: nowrap;
}

.si-tab:hover {
  color: var(--si-text);
}

.si-tab.active {
  color: var(--si-accent);
  border-bottom-color: var(--si-accent);
}

/* Dropdown menus (navbar user menu + theme toggle) */
.dropdown-menu {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 6px;
  padding: 0.35rem;
}

.dropdown-item {
  text-transform: capitalize;
  color: var(--si-text-secondary);
  border-radius: 4px;
  transition: background-color 0.15s, color 0.15s;
}

/* Hover/focus: neutral surface fill, no underline (overrides global a:hover).
   Kept distinct from the accent-subtle current-page state below. */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:focus-visible {
  background-color: var(--si-surface-hover);
  color: var(--si-text);
  text-decoration: none;
}

/* Override Bootstrap's blue active background (applies to :active and .active). */
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
  background-color: var(--si-accent-subtle);
  color: var(--si-text);
}

/* Current page: accent text + accent-subtle fill, mirroring the sidebar/sort-pill
   active state so it reads differently from a plain hover. */
.dropdown-item.si-active-nav {
  color: var(--si-accent);
  font-weight: 600;
  background-color: var(--si-accent-subtle);
}

.dropdown-divider {
  border-top-color: var(--si-border);
}

/* Tables */
.table-responsive {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 8px;
  overflow: hidden;
}

.table-responsive > .table > :last-child > tr:last-child > *,
.table-responsive > .si-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.card .table-responsive {
  background: none;
  border: none;
  border-radius: 0;
}

.table-responsive > .table,
.table-responsive > .si-table {
  margin-bottom: 0;
}

/* Info table */
.si-info-table {
  width: 100%;
  table-layout: fixed;
}

.si-info-table tr {
  border-bottom: 1px solid var(--si-border-subtle);
}

.si-info-table tr:last-child {
  border-bottom: none;
}

.si-info-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--si-text-muted);
  padding: 0.6rem 1rem 0.6rem 0;
  width: 110px;
  vertical-align: top;
}

.si-info-table td {
  padding: 0.6rem 0;
  font-size: 0.9rem;
  color: var(--si-text-secondary);
  overflow-wrap: break-word;
}

/* Icon-only header cells in sidebar info table */
.si-info-table-icons th {
  width: 2rem;
  padding: 0.6rem 0.5rem 0.6rem 0;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
}

.si-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.si-info-tags .si-badge {
  /* Long free-form tags must wrap rather than overflow the sidebar.
     Mirrors .si-facet-tag and .si-result-tags .si-badge. */
  display: inline-block;
  max-width: 100%;
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Flex gap handles spacing; cancel the default adjacent-badge margin so a
   wrapped tag stays flush-left (also in: .si-facet-tags .si-badge,
   .si-result-tags .si-badge — keep consistent). */
.si-info-tags .si-badge + .si-badge {
  margin-left: 0;
}

/* Release history */
.si-release-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--si-border-subtle);
}

.si-release-item:last-child {
  border-bottom: none;
}

.si-release-version {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--si-text);
  min-width: 80px;
  text-decoration: none;
}

.si-release-spacer {
  flex: 1;
}

.si-release-date {
  font-size: 0.8rem;
  color: var(--si-text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.si-validation-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.si-validation-heading {
  min-width: 0;
}

.si-validation-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  gap: 0.85rem 1.5rem;
  margin: 0;
  color: var(--si-text-secondary);
}

.si-validation-meta div {
  min-width: 0;
}

.si-validation-meta dt {
  margin-bottom: 0.15rem;
  color: var(--si-text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.si-validation-meta dd {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.si-validation-diagnostics {
  table-layout: fixed;
}

.si-validation-diagnostics th:nth-child(1),
.si-validation-diagnostics td:nth-child(1) {
  width: 7rem;
}

.si-validation-diagnostics th:nth-child(2),
.si-validation-diagnostics td:nth-child(2) {
  width: 7.5rem;
}

.si-validation-diagnostics th:nth-child(3),
.si-validation-diagnostics td:nth-child(3) {
  width: 13rem;
}

.si-validation-diagnostics th:nth-child(4),
.si-validation-diagnostics td:nth-child(4) {
  width: 55%;
}

.si-validation-diagnostics td {
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* Card section heading (e.g. "USAGES", "STANDARD LIBRARY") and sub-headings
   per publisher (and "External") inside the Usages card. */
.si-card-section-heading,
.si-usage-group-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--si-text-muted);
}

.si-card-section-heading {
  margin: 0 0 1rem;
}

.si-usage-group-heading {
  margin: 1rem 0 0.5rem;
}

.si-usage-group-heading:first-of-type {
  margin-top: 0;
}

/* File listing */
.si-file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--si-border-subtle);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  min-width: 0;
}

.si-file-item:last-child {
  border-bottom: none;
}

.si-file-item-plain {
  text-decoration: none;
  padding-left: 0;
  padding-right: 0;
}

.si-file-icon {
  color: var(--si-text-muted);
}

.si-file-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.si-file-name {
  color: var(--si-accent);
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.si-file-name-base {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.si-file-name-ext {
  flex: 0 0 auto;
}

.si-file-meta {
  font-size: 0.75rem;
  color: var(--si-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.si-file-checksum {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  padding-left: 1.75rem;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--si-text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.si-file-checksum-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.si-file-checksum-copy {
  flex: 0 0 auto;
  padding: 0.15rem 0.3rem;
  font-size: 0.7rem;
  line-height: 1;
}

/* Install snippet */
.si-install {
  background: var(--si-bg);
  border: 1px solid var(--si-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--si-text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.75rem;
}

.si-install code {
  color: var(--si-text);
}

.si-install code::before {
  content: "$ ";
  color: var(--si-accent);
}

.si-install-help {
  font-size: 0.75rem;
  color: var(--si-text-secondary);
  margin-top: 0.35rem;
  text-align: right;
}

/* One-line explainer above the usages sections */
.si-usages-note {
  font-size: 0.85rem;
  color: var(--si-text-secondary);
  margin-bottom: 1rem;
}

/* Copy button feedback */
.si-btn-copied {
  color: var(--si-success) !important;
}

/* === Markdown content === */

.si-markdown {
  color: var(--si-text-secondary);
  line-height: 1.7;
}

.si-markdown h1,
.si-markdown h2,
.si-markdown h3,
.si-markdown h4,
.si-markdown h5,
.si-markdown h6 {
  color: var(--si-text);
}

.si-markdown h2 {
  font-size: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--si-border-subtle);
  margin: 1.5rem 0 0.75rem;
}

.si-markdown h3 {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
}

.si-markdown p {
  margin-bottom: 0.75rem;
}

.si-markdown a {
  color: var(--si-accent);
}

.si-markdown code {
  background: var(--si-accent-subtle);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--si-accent);
}

.si-markdown pre {
  background: var(--si-bg);
  border: 1px solid var(--si-border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.si-markdown pre code {
  background: none;
  padding: 0;
  color: var(--si-text);
  font-size: 0.85rem;
}

.si-markdown ul,
.si-markdown ol {
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}

.si-markdown li {
  margin-bottom: 0.25rem;
}

.si-markdown blockquote {
  padding: 0 1em;
  color: var(--si-text-muted);
  border-left: 0.25em solid var(--si-border);
  margin-bottom: 1rem;
}

.si-markdown table {
  border-collapse: collapse;
  margin-bottom: 1em;
}

.si-markdown table th,
.si-markdown table td {
  padding: 6px 13px;
  border: 1px solid var(--si-border);
}

.si-markdown table th {
  background-color: var(--si-surface);
  font-weight: 600;
}

.si-markdown table tr:nth-child(2n) {
  background-color: var(--si-surface);
}

.si-markdown img {
  max-width: 100%;
  height: auto;
}

.si-markdown hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: var(--si-border);
  border: 0;
}

/* Project detail layout */
.si-project-layout {
  display: flex;
  gap: 2rem;
}

.si-project-main {
  flex: 1;
  min-width: 0;
}

.si-project-sidebar {
  width: 280px;
  flex-shrink: 0;
}

/* Source viewer */
/* Files-panel width is user-resizable within 220-480px; source-viewer.js
   sets --si-source-files-width inline on .si-source-page-shell. The 280px
   default also appears in the ≤1080px .si-source-sidebar overlay width and
   in source-viewer.js — keep consistent. The workspace width is derived
   from the default panel width (not the live one) so resizing the panel
   reallocates width between the two panels instead of growing the page. */
.si-source-page-shell {
  --si-source-files-width-default: 280px;
  --si-source-files-width: var(--si-source-files-width-default);
  --si-source-column-gap: 1rem;
  --si-source-workspace-width: min(
    100%,
    calc(
      1140px +
        (var(--si-source-files-width-default) + var(--si-source-column-gap)) *
        2 + 3rem
    )
  );
}

.si-source-workspace {
  width: var(--si-source-workspace-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.si-source-context {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

@media (min-width: 1081px) {
  .si-source-context {
    width: var(--si-source-workspace-width);
    max-width: none;
  }
}

.si-source-viewer {
  --si-source-anchor-scroll-offset: 5.25rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--si-source-files-width) minmax(0, 1fr);
  gap: var(--si-source-column-gap);
  min-height: 520px;
}

.si-source-viewer.si-source-files-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.si-source-sidebar,
.si-source-code-panel {
  min-width: 0;
  overflow: hidden;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 8px;
}

.si-source-sidebar {
  display: flex;
  flex-direction: column;
}

.si-source-files-collapsed .si-source-sidebar {
  display: none;
}

.si-source-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--si-source-files-width);
  width: var(--si-source-column-gap);
  cursor: col-resize;
  touch-action: none;
}

/* Widen the interactive zone beyond the visual gap for touch. */
.si-source-resizer::before {
  content: "";
  position: absolute;
  inset: 0 -4px;
}

.si-source-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: var(--si-accent);
  opacity: 0;
  transition: opacity 120ms ease;
}

.si-source-resizer:hover::after {
  opacity: 0.5;
  transition-delay: 120ms;
}

.si-source-resizer:focus-visible {
  outline: none;
  background: var(--si-accent-subtle);
}

.si-source-resizer:focus-visible::after,
.si-source-resizing .si-source-resizer::after {
  opacity: 1;
  transition-delay: 0ms;
}

.si-source-files-collapsed .si-source-resizer {
  display: none;
}

.si-source-resizing {
  cursor: col-resize;
  user-select: none;
}

.si-source-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--si-border);
}

.si-source-code-toolbar {
  display: grid;
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-content: flex-start;
}

.si-source-title {
  display: flex;
  align-items: center;
  align-content: start;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 2rem;
  column-gap: 1rem;
  row-gap: 0.35rem;
}

.si-source-path {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  line-height: 2rem;
  color: var(--si-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.si-source-meta {
  flex: 0 1 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--si-text-secondary);
}

.si-source-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.si-source-files-toggle,
.si-source-wrap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--si-border);
  border-radius: 4px;
  background: transparent;
  color: var(--si-text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1;
}

.si-source-files-toggle:hover,
.si-source-files-toggle:focus-visible,
.si-source-wrap-toggle:hover,
.si-source-wrap-toggle:focus-visible {
  background: var(--si-surface-hover);
  color: var(--si-text);
}

.si-source-files-toggle:focus-visible,
.si-source-wrap-toggle:focus-visible {
  outline: 2px solid var(--si-focus-ring);
  outline-offset: 2px;
}

.si-source-wrap-toggle[aria-pressed='true'] {
  border-color: transparent;
  background: var(--si-accent-subtle);
  color: var(--si-accent);
}

.si-source-files-backdrop {
  display: none;
}

.si-source-file-list {
  --si-source-scrollbar-track: var(--si-surface);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.35rem;
}

.si-source-file-list,
.si-source-code {
  scrollbar-color: var(--si-text-muted) var(--si-source-scrollbar-track);
}

.si-source-file-list::-webkit-scrollbar,
.si-source-code::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}

.si-source-file-list::-webkit-scrollbar-track,
.si-source-code::-webkit-scrollbar-track {
  background: var(--si-source-scrollbar-track);
}

.si-source-file-list::-webkit-scrollbar-thumb,
.si-source-code::-webkit-scrollbar-thumb {
  background: var(--si-text-muted);
  border: 3px solid var(--si-source-scrollbar-track);
  border-radius: 999px;
}

.si-source-file-list::-webkit-scrollbar-thumb:hover,
.si-source-code::-webkit-scrollbar-thumb:hover {
  background: var(--si-text-secondary);
}

.si-source-search {
  padding: 0.75rem;
  border-bottom: 1px solid var(--si-border);
}

.si-source-tree-item {
  --si-source-depth: 0;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2rem;
  overflow: hidden;
  padding: 0.35rem 0.6rem 0.35rem
    calc(0.6rem + (var(--si-source-depth) * 1.1rem));
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--si-text-secondary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  text-decoration: none !important;
  white-space: nowrap;
}

.si-source-dir {
  cursor: pointer;
}

.si-source-icon {
  flex: 0 0 auto;
  width: 1.1rem;
  margin-right: 0.4rem;
  font-size: 0.82rem;
  text-align: center;
}

.si-source-chevron {
  width: 0.85rem;
  margin-right: 0.25rem;
  color: var(--si-text-muted);
  transition: transform 120ms ease;
}

.si-source-dir[aria-expanded='true'] .si-source-chevron {
  transform: rotate(90deg);
}

.si-source-icon-folder {
  color: var(--si-text-muted);
}

.si-source-icon-file {
  color: var(--si-accent);
}

.si-source-tree-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.si-source-tree-item:hover,
.si-source-tree-item:focus-visible,
.si-source-file:hover,
.si-source-file:focus-visible,
.si-source-file.active {
  background: var(--si-surface-hover);
  color: var(--si-text);
}

.si-source-file.active {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 3px 0 0 var(--si-accent);
}

.si-source-message {
  padding: 1rem;
  color: var(--si-text-secondary);
}

.si-source-message-error {
  color: var(--si-danger);
}

.si-source-code {
  --si-source-scrollbar-track: var(--si-bg);
  margin: 0;
  overflow: auto;
  background: var(--si-bg);
  color: var(--si-text);
  font-size: 0.82rem;
  line-height: 1.45;
}

.si-source-line {
  display: grid;
  align-items: start;
  grid-template-columns: 4rem max-content;
  min-width: max-content;
  scroll-margin-top: var(--si-source-anchor-scroll-offset);
}

.si-source-wrap-lines .si-source-line {
  grid-template-columns: 4rem minmax(0, 1fr);
  min-width: 0;
}

.si-source-line:target,
.si-source-line-target {
  background: var(--si-accent-subtle);
}

.si-source-line-number {
  padding: 0 0.75rem;
  color: var(--si-text-muted);
  text-align: right;
  text-decoration: none !important;
  user-select: none;
  white-space: nowrap;
}

.si-source-line-content {
  padding-right: 1rem;
  white-space: pre;
}

.si-source-wrap-lines .si-source-line-content {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 1080px) {
  .si-source-viewer {
    --si-source-anchor-scroll-offset: 8rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .si-source-viewer.si-source-files-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .si-source-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: none;
    /* Overlay ignores the resizable desktop width on purpose; 280px matches
       the .si-source-page-shell default. */
    width: min(280px, calc(100vw - 2rem));
    max-height: min(42rem, calc(100vh - 2rem));
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
  }

  .si-source-files-collapsed .si-source-sidebar {
    display: none;
  }

  .si-source-resizer {
    display: none;
  }

  .si-source-files-open .si-source-sidebar {
    display: flex;
  }

  .si-source-files-open .si-source-files-backdrop {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
    border: 0;
    background: rgba(13, 17, 23, 0.16);
  }

  .si-source-file-list {
    max-height: calc(min(42rem, 100vh - 2rem) - 7.25rem);
  }

  .si-source-files-toggle span,
  .si-source-wrap-toggle span {
    display: none;
  }
}

.si-sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--si-text-muted);
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

/* Recent project list items */
.si-recent-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--si-border-subtle);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  text-decoration: none;
}

.si-recent-item:last-child {
  border-bottom: none;
}

.si-recent-main {
  min-width: 0;
}

.si-recent-name {
  display: block;
  color: var(--si-accent);
  font-size: 0.9rem;
}

.si-recent-main .si-handle {
  display: block;
  margin-top: 0.15rem;
}

.si-recent-meta {
  color: var(--si-text-muted);
  font-size: 0.8rem;
  text-align: right;
  white-space: nowrap;
}

/* === Alert overrides === */

.si-alert {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border: 1px solid;
}

.si-alert-warning {
  background: var(--si-warning-subtle);
  border-color: rgba(210, 153, 34, 0.3);
  color: var(--si-warning);
}

.si-alert-warning a {
  color: var(--si-accent);
  font-weight: 600;
}

.si-alert-info {
  background: var(--si-info-subtle);
  border-color: var(--si-info);
  color: var(--si-info);
}

.si-alert-danger {
  background: var(--si-danger-subtle);
  border-color: rgba(207, 34, 46, 0.3);
  color: var(--si-danger);
}

.si-text-warning {
  color: var(--si-warning);
}

/* Messages at the top of the page */
.alert.rounded-0 {
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: center;
  position: relative;
}

.si-deployment-banner {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.si-migration-banner-hidden #si-migration-banner {
  display: none;
}

#si-migration-banner i.bi {
  margin-right: 0.4rem;
}

.alert.rounded-0 .btn-close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Empty state */
.si-empty-state {
  text-align: center;
  padding: 3rem 0;
  color: var(--si-text-muted);
}

.si-empty-state i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

/* === Licenses tab === */

.si-license-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--si-text);
  margin: 0 0 0.75rem;
}

.si-license-text {
  background: var(--si-bg);
  border: 1px solid var(--si-border);
  border-radius: 6px;
  padding: 1rem;
  color: var(--si-text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  max-height: 32rem;
  overflow: auto;
}

.si-license-entry {
  border-bottom: 1px solid var(--si-border-subtle);
  padding: 0.75rem 0;
}

.si-license-entry:first-child {
  padding-top: 0;
}

.si-license-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.si-license-entry > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}

.si-license-entry > summary::-webkit-details-marker {
  display: none;
}

.si-license-entry > summary::before {
  content: "\25B6";
  display: inline-block;
  color: var(--si-text-muted);
  font-size: 1rem;
  line-height: 1;
  width: 1.25rem;
  text-align: center;
  transition: transform 0.15s ease;
}

.si-license-entry[open] > summary::before {
  transform: rotate(90deg);
}

.si-license-entry > .si-license-text {
  margin-top: 0.75rem;
}

/* === Footer === */

.si-footer {
  border-top: 1px solid var(--si-border-subtle);
  padding: 2rem 0;
  margin-top: 3rem;
  color: var(--si-text-muted);
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
}

.si-footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  text-align: left;
}

.si-footer-column h6 {
  color: var(--si-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.si-footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.si-footer-column li {
  margin-bottom: 0.25rem;
}

.si-footer-column a {
  color: var(--si-text-muted);
  text-decoration: none;
}

.si-footer-column a:hover {
  color: var(--si-text-secondary);
  text-decoration: underline;
}

.si-footer-copyright {
  color: var(--si-text-muted);
  margin-top: 0;
}

@media (max-width: 576px) {
  .si-footer-columns {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* === Utilities === */

.si-text-accent { color: var(--si-accent); }
.si-text-danger { color: var(--si-danger); }

/* Autocomplete states */
.si-autocomplete-loading::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--si-text-muted);
  border-right-color: transparent;
  border-radius: 50%;
  animation: si-spin 0.6s linear infinite;
}

.si-autocomplete-empty {
  padding: 0.5rem 0.75rem;
  color: var(--si-text-muted);
  font-size: 0.875rem;
}


/* === Syntax highlighting (GitHub-style for light theme) ===
   Shared Pygments palette: each rule is scoped to BOTH rendered markdown code
   blocks (.si-markdown pre) and the client-side source viewer (.si-source-code),
   which emits the same Pygments short class names. Keep the two selectors on
   each rule in sync (and mirrored in the dark-theme block below). */

.si-markdown pre .hll, .si-source-code .hll { background-color: #ffffcc }
.si-markdown pre .c, .si-source-code .c { color: #6a737d; font-style: italic } /* Comment */
.si-markdown pre .err, .si-source-code .err { color: #cb2431 } /* Error */
.si-markdown pre .k, .si-source-code .k { color: #d73a49; font-weight: bold } /* Keyword */
.si-markdown pre .o, .si-source-code .o { color: #24292e } /* Operator */
.si-markdown pre .ch, .si-source-code .ch { color: #6a737d; font-style: italic } /* Comment.Hashbang */
.si-markdown pre .cm, .si-source-code .cm { color: #6a737d; font-style: italic } /* Comment.Multiline */
.si-markdown pre .cp, .si-source-code .cp { color: #6a737d; font-style: italic } /* Comment.Preproc */
.si-markdown pre .cpf, .si-source-code .cpf { color: #6a737d; font-style: italic } /* Comment.PreprocFile */
.si-markdown pre .c1, .si-source-code .c1 { color: #6a737d; font-style: italic } /* Comment.Single */
.si-markdown pre .cs, .si-source-code .cs { color: #6a737d; font-style: italic } /* Comment.Special */
.si-markdown pre .gd, .si-source-code .gd { color: #cb2431 } /* Generic.Deleted */
.si-markdown pre .ge, .si-source-code .ge { font-style: italic } /* Generic.Emph */
.si-markdown pre .ges, .si-source-code .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.si-markdown pre .gr, .si-source-code .gr { color: #cb2431 } /* Generic.Error */
.si-markdown pre .gh, .si-source-code .gh { color: #24292e; font-weight: bold } /* Generic.Heading */
.si-markdown pre .gi, .si-source-code .gi { color: #22863a } /* Generic.Inserted */
.si-markdown pre .go, .si-source-code .go { color: #6a737d } /* Generic.Output */
.si-markdown pre .gp, .si-source-code .gp { color: #005cc5; font-weight: bold } /* Generic.Prompt */
.si-markdown pre .gs, .si-source-code .gs { font-weight: bold } /* Generic.Strong */
.si-markdown pre .gu, .si-source-code .gu { color: #6a737d; font-weight: bold } /* Generic.Subheading */
.si-markdown pre .gt, .si-source-code .gt { color: #cb2431 } /* Generic.Traceback */
.si-markdown pre .kc, .si-source-code .kc { color: #005cc5; font-weight: bold } /* Keyword.Constant */
.si-markdown pre .kd, .si-source-code .kd { color: #d73a49; font-weight: bold } /* Keyword.Declaration */
.si-markdown pre .kn, .si-source-code .kn { color: #d73a49; font-weight: bold } /* Keyword.Namespace */
.si-markdown pre .kp, .si-source-code .kp { color: #005cc5 } /* Keyword.Pseudo */
.si-markdown pre .kr, .si-source-code .kr { color: #d73a49; font-weight: bold } /* Keyword.Reserved */
.si-markdown pre .kt, .si-source-code .kt { color: #005cc5 } /* Keyword.Type */
.si-markdown pre .m, .si-source-code .m { color: #005cc5 } /* Literal.Number */
.si-markdown pre .s, .si-source-code .s { color: #032f62 } /* Literal.String */
.si-markdown pre .na, .si-source-code .na { color: #6f42c1 } /* Name.Attribute */
.si-markdown pre .nb, .si-source-code .nb { color: #005cc5 } /* Name.Builtin */
.si-markdown pre .nc, .si-source-code .nc { color: #6f42c1; font-weight: bold } /* Name.Class */
.si-markdown pre .no, .si-source-code .no { color: #005cc5 } /* Name.Constant */
.si-markdown pre .nd, .si-source-code .nd { color: #6f42c1 } /* Name.Decorator */
.si-markdown pre .ni, .si-source-code .ni { color: #24292e; font-weight: bold } /* Name.Entity */
.si-markdown pre .ne, .si-source-code .ne { color: #6f42c1; font-weight: bold } /* Name.Exception */
.si-markdown pre .nf, .si-source-code .nf { color: #6f42c1 } /* Name.Function */
.si-markdown pre .nl, .si-source-code .nl { color: #24292e } /* Name.Label */
.si-markdown pre .nn, .si-source-code .nn { color: #24292e; font-weight: bold } /* Name.Namespace */
.si-markdown pre .nt, .si-source-code .nt { color: #22863a; font-weight: bold } /* Name.Tag */
.si-markdown pre .nv, .si-source-code .nv { color: #953800 } /* Name.Variable */
.si-markdown pre .ow, .si-source-code .ow { color: #d73a49; font-weight: bold } /* Operator.Word */
.si-markdown pre .w, .si-source-code .w { color: #6a737d } /* Text.Whitespace */
.si-markdown pre .mb, .si-source-code .mb { color: #005cc5 } /* Literal.Number.Bin */
.si-markdown pre .mf, .si-source-code .mf { color: #005cc5 } /* Literal.Number.Float */
.si-markdown pre .mh, .si-source-code .mh { color: #005cc5 } /* Literal.Number.Hex */
.si-markdown pre .mi, .si-source-code .mi { color: #005cc5 } /* Literal.Number.Integer */
.si-markdown pre .mo, .si-source-code .mo { color: #005cc5 } /* Literal.Number.Oct */
.si-markdown pre .sa, .si-source-code .sa { color: #032f62 } /* Literal.String.Affix */
.si-markdown pre .sb, .si-source-code .sb { color: #032f62 } /* Literal.String.Backtick */
.si-markdown pre .sc, .si-source-code .sc { color: #032f62 } /* Literal.String.Char */
.si-markdown pre .dl, .si-source-code .dl { color: #032f62 } /* Literal.String.Delimiter */
.si-markdown pre .sd, .si-source-code .sd { color: #032f62; font-style: italic } /* Literal.String.Doc */
.si-markdown pre .s2, .si-source-code .s2 { color: #032f62 } /* Literal.String.Double */
.si-markdown pre .se, .si-source-code .se { color: #005cc5; font-weight: bold } /* Literal.String.Escape */
.si-markdown pre .sh, .si-source-code .sh { color: #032f62 } /* Literal.String.Heredoc */
.si-markdown pre .si, .si-source-code .si { color: #032f62; font-weight: bold } /* Literal.String.Interpol */
.si-markdown pre .sx, .si-source-code .sx { color: #032f62 } /* Literal.String.Other */
.si-markdown pre .sr, .si-source-code .sr { color: #032f62 } /* Literal.String.Regex */
.si-markdown pre .s1, .si-source-code .s1 { color: #032f62 } /* Literal.String.Single */
.si-markdown pre .ss, .si-source-code .ss { color: #032f62 } /* Literal.String.Symbol */
.si-markdown pre .bp, .si-source-code .bp { color: #005cc5 } /* Name.Builtin.Pseudo */
.si-markdown pre .fm, .si-source-code .fm { color: #6f42c1 } /* Name.Function.Magic */
.si-markdown pre .vc, .si-source-code .vc { color: #953800 } /* Name.Variable.Class */
.si-markdown pre .vg, .si-source-code .vg { color: #953800 } /* Name.Variable.Global */
.si-markdown pre .vi, .si-source-code .vi { color: #953800 } /* Name.Variable.Instance */
.si-markdown pre .vm, .si-source-code .vm { color: #953800 } /* Name.Variable.Magic */
.si-markdown pre .il, .si-source-code .il { color: #005cc5 } /* Literal.Number.Integer.Long */

/* === Syntax highlighting (Monokai-style for dark theme) === */

[data-bs-theme="dark"] .si-markdown pre .hll, [data-bs-theme="dark"] .si-source-code .hll { background-color: #49483e }
[data-bs-theme="dark"] .si-markdown pre .c, [data-bs-theme="dark"] .si-source-code .c { color: #75715e; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .err, [data-bs-theme="dark"] .si-source-code .err { color: #f92672 }
[data-bs-theme="dark"] .si-markdown pre .k, [data-bs-theme="dark"] .si-source-code .k { color: #66d9ef; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .o, [data-bs-theme="dark"] .si-source-code .o { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .ch, [data-bs-theme="dark"] .si-source-code .ch { color: #75715e; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .cm, [data-bs-theme="dark"] .si-source-code .cm { color: #75715e; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .cp, [data-bs-theme="dark"] .si-source-code .cp { color: #75715e; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .cpf, [data-bs-theme="dark"] .si-source-code .cpf { color: #75715e; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .c1, [data-bs-theme="dark"] .si-source-code .c1 { color: #75715e; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .cs, [data-bs-theme="dark"] .si-source-code .cs { color: #75715e; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .gd, [data-bs-theme="dark"] .si-source-code .gd { color: #f92672 }
[data-bs-theme="dark"] .si-markdown pre .ge, [data-bs-theme="dark"] .si-source-code .ge { font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .ges, [data-bs-theme="dark"] .si-source-code .ges { font-weight: bold; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .gr, [data-bs-theme="dark"] .si-source-code .gr { color: #f92672 }
[data-bs-theme="dark"] .si-markdown pre .gh, [data-bs-theme="dark"] .si-source-code .gh { color: #e6edf3; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .gi, [data-bs-theme="dark"] .si-source-code .gi { color: #a6e22e }
[data-bs-theme="dark"] .si-markdown pre .go, [data-bs-theme="dark"] .si-source-code .go { color: #8b949e }
[data-bs-theme="dark"] .si-markdown pre .gp, [data-bs-theme="dark"] .si-source-code .gp { color: #66d9ef; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .gs, [data-bs-theme="dark"] .si-source-code .gs { font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .gu, [data-bs-theme="dark"] .si-source-code .gu { color: #75715e; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .gt, [data-bs-theme="dark"] .si-source-code .gt { color: #f92672 }
[data-bs-theme="dark"] .si-markdown pre .kc, [data-bs-theme="dark"] .si-source-code .kc { color: #66d9ef; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .kd, [data-bs-theme="dark"] .si-source-code .kd { color: #66d9ef; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .kn, [data-bs-theme="dark"] .si-source-code .kn { color: #f92672; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .kp, [data-bs-theme="dark"] .si-source-code .kp { color: #66d9ef }
[data-bs-theme="dark"] .si-markdown pre .kr, [data-bs-theme="dark"] .si-source-code .kr { color: #66d9ef; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .kt, [data-bs-theme="dark"] .si-source-code .kt { color: #66d9ef }
[data-bs-theme="dark"] .si-markdown pre .m, [data-bs-theme="dark"] .si-source-code .m { color: #ae81ff }
[data-bs-theme="dark"] .si-markdown pre .s, [data-bs-theme="dark"] .si-source-code .s { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .na, [data-bs-theme="dark"] .si-source-code .na { color: #a6e22e }
[data-bs-theme="dark"] .si-markdown pre .nb, [data-bs-theme="dark"] .si-source-code .nb { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .nc, [data-bs-theme="dark"] .si-source-code .nc { color: #a6e22e; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .no, [data-bs-theme="dark"] .si-source-code .no { color: #66d9ef }
[data-bs-theme="dark"] .si-markdown pre .nd, [data-bs-theme="dark"] .si-source-code .nd { color: #a6e22e }
[data-bs-theme="dark"] .si-markdown pre .ni, [data-bs-theme="dark"] .si-source-code .ni { color: #f8f8f2; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .ne, [data-bs-theme="dark"] .si-source-code .ne { color: #a6e22e; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .nf, [data-bs-theme="dark"] .si-source-code .nf { color: #a6e22e }
[data-bs-theme="dark"] .si-markdown pre .nl, [data-bs-theme="dark"] .si-source-code .nl { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .nn, [data-bs-theme="dark"] .si-source-code .nn { color: #f8f8f2; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .nt, [data-bs-theme="dark"] .si-source-code .nt { color: #f92672; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .nv, [data-bs-theme="dark"] .si-source-code .nv { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .ow, [data-bs-theme="dark"] .si-source-code .ow { color: #f92672; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .w, [data-bs-theme="dark"] .si-source-code .w { color: #8b949e }
[data-bs-theme="dark"] .si-markdown pre .mb, [data-bs-theme="dark"] .si-source-code .mb { color: #ae81ff }
[data-bs-theme="dark"] .si-markdown pre .mf, [data-bs-theme="dark"] .si-source-code .mf { color: #ae81ff }
[data-bs-theme="dark"] .si-markdown pre .mh, [data-bs-theme="dark"] .si-source-code .mh { color: #ae81ff }
[data-bs-theme="dark"] .si-markdown pre .mi, [data-bs-theme="dark"] .si-source-code .mi { color: #ae81ff }
[data-bs-theme="dark"] .si-markdown pre .mo, [data-bs-theme="dark"] .si-source-code .mo { color: #ae81ff }
[data-bs-theme="dark"] .si-markdown pre .sa, [data-bs-theme="dark"] .si-source-code .sa { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .sb, [data-bs-theme="dark"] .si-source-code .sb { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .sc, [data-bs-theme="dark"] .si-source-code .sc { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .dl, [data-bs-theme="dark"] .si-source-code .dl { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .sd, [data-bs-theme="dark"] .si-source-code .sd { color: #e6db74; font-style: italic }
[data-bs-theme="dark"] .si-markdown pre .s2, [data-bs-theme="dark"] .si-source-code .s2 { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .se, [data-bs-theme="dark"] .si-source-code .se { color: #ae81ff; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .sh, [data-bs-theme="dark"] .si-source-code .sh { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .si, [data-bs-theme="dark"] .si-source-code .si { color: #e6db74; font-weight: bold }
[data-bs-theme="dark"] .si-markdown pre .sx, [data-bs-theme="dark"] .si-source-code .sx { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .sr, [data-bs-theme="dark"] .si-source-code .sr { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .s1, [data-bs-theme="dark"] .si-source-code .s1 { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .ss, [data-bs-theme="dark"] .si-source-code .ss { color: #e6db74 }
[data-bs-theme="dark"] .si-markdown pre .bp, [data-bs-theme="dark"] .si-source-code .bp { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .fm, [data-bs-theme="dark"] .si-source-code .fm { color: #a6e22e }
[data-bs-theme="dark"] .si-markdown pre .vc, [data-bs-theme="dark"] .si-source-code .vc { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .vg, [data-bs-theme="dark"] .si-source-code .vg { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .vi, [data-bs-theme="dark"] .si-source-code .vi { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .vm, [data-bs-theme="dark"] .si-source-code .vm { color: #f8f8f2 }
[data-bs-theme="dark"] .si-markdown pre .il, [data-bs-theme="dark"] .si-source-code .il { color: #ae81ff }

/* === Browsing lists (si-list) === */

.si-list {
  display: flex;
  flex-direction: column;
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 8px;
}

.si-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--si-border-subtle);
}

.si-list-item:last-child {
  border-bottom: none;
}

.si-list-item-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}

.si-list-item-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--si-accent);
}

.si-list-item-title a {
  color: var(--si-accent);
}

.si-list-item-meta {
  font-size: 0.8rem;
  color: var(--si-text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.si-list-item-desc {
  font-size: 0.875rem;
  color: var(--si-text-secondary);
  width: 100%;
}

.si-list-item-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* === Management tables (si-table) === */

.si-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.si-table thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--si-text-muted);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--si-border);
  white-space: nowrap;
}

.si-table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--si-border-subtle);
  color: var(--si-text-secondary);
  vertical-align: middle;
}

.si-table tbody tr:last-child td {
  border-bottom: none;
}

.si-table-actions,
.si-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.si-table-actions > form {
  margin: 0;
}

.si-table-actions .si-btn,
.si-badge-list .si-badge {
  white-space: nowrap;
}

.si-badge-list .si-badge + .si-badge {
  margin-left: 0;
}

.si-table-radio-col {
  width: 40px;
}

.si-table-compact thead th,
.si-table-compact tbody td {
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
}

.si-role-select {
  width: auto;
  min-width: 0;
}

/* === Member avatars === */

.si-members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.si-member-avatar {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
}

.si-avatar-img {
  border-radius: 50%;
  border: 1px solid var(--si-border);
}

/* === Responsive === */

@media (max-width: 768px) {
  .si-home-columns {
    grid-template-columns: 1fr;
  }

  .si-navbar .container {
    gap: 0.5rem;
  }

  .si-nav-links {
    order: 1;
    gap: 0.5rem;
  }

  .si-nav-search {
    order: 10;
    flex-basis: 100%;
    max-width: none;
  }

  .si-nav-username {
    display: none;
  }

  .si-hero h1 {
    font-size: 1.75rem;
  }

  .si-hero {
    padding: 2rem 0 1.5rem;
  }

  .si-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .si-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    min-width: 0;
    /* Right-edge fade signals horizontally cropped tabs. Applied to
       .si-tabs itself so every tab bar gets it automatically — no
       opt-in wrapper. See design.md "Tab Bars". */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
  }

  .si-tabs::-webkit-scrollbar {
    display: none;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }


  .si-tab {
    flex-shrink: 0;
    padding: 0.6rem 0.75rem;
    font-size: 0.75rem;
  }

  .si-card {
    overflow-x: auto;
  }

  .si-project-layout {
    flex-direction: column;
  }

  .si-source-viewer {
    --si-source-anchor-scroll-offset: 8rem;
    grid-template-columns: 1fr;
  }

  .si-source-code-toolbar {
    align-items: start;
  }

  .si-source-actions {
    justify-content: space-between;
    width: auto;
  }

  .si-source-actions {
    gap: 0.5rem;
  }

  .si-source-files-toggle,
  .si-source-wrap-toggle {
    flex: 0 0 auto;
  }

  .si-source-file-list {
    max-height: calc(min(36rem, 100vh - 2rem) - 7.25rem);
  }

  .si-project-sidebar {
    width: 100%;
  }

  .si-page-header {
    flex-wrap: wrap;
  }

  .si-page-header-actions {
    margin-left: auto;
    /* The base rule pins flex-shrink to 0; on narrow screens the action row
       must compress to the line width so its own flex-wrap can engage. */
    flex-wrap: wrap;
    flex-shrink: 1;
  }

  .si-project-header {
    display: flex;
    flex-direction: column;
  }

  .si-list-item {
    gap: 0.5rem;
  }

  .si-list-item-actions {
    flex-shrink: 0;
  }

  .si-release-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .si-release-version {
    min-width: auto;
  }

  .si-release-date {
    margin-left: auto;
  }
}

/* MFA TOTP QR code: allauth emits the QR as black modules on a transparent
   background, which is unreadable on the dark theme. Force a solid white
   panel with quiet-zone padding behind it so it scans reliably in both
   themes. */
.si-qr-panel {
  display: inline-block;
  margin: 0 auto 1rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
}

.si-qr-panel img {
  display: block;
}

/* === T9: Skip link + compact mobile nav (appended; nav base rules near top of file) === */

/* Visually hidden until keyboard focus; first focusable element on every page. */
.si-skip-link {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 2000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  background: var(--si-accent);
  color: #0d1117;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
}

.si-skip-link:focus {
  left: 0.5rem;
  outline: none;
  box-shadow: 0 0 0 3px var(--si-focus-ring);
}

/* Skip-link target: focused programmatically, no full-page focus ring. */
#si-main:focus {
  outline: none;
}

/* Keep the wordmark and Browse visible on narrow phones (375px): the
   search input already drops to its own full-width row at <=768px, so the
   top row only needs brand + Browse + theme toggle + auth controls. Shrink
   text and spacing so the logged-out case (Log in + Register) still fits. */
@media (max-width: 480px) {
  .si-navbar .container {
    padding: 0 0.75rem;
  }

  .si-brand {
    font-size: 1rem;
    gap: 0.35rem;
  }

  .si-brand-logo {
    width: 24px;
    height: 24px;
  }

  .si-nav-links {
    gap: 0.4rem;
  }

  .si-nav-links .si-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
  }
}

/* Search UX: zero-result fallbacks, clear-filters link, facet-less layout
   (also in: search.html, _search_facets.html — keep consistent) */
.si-search-layout-no-facets {
  grid-template-columns: minmax(0, 1fr);
}

.si-clear-filters {
  color: var(--si-text-muted);
  font-size: 0.8rem;
  text-decoration: underline;
}

.si-clear-filters:hover {
  color: var(--si-accent);
}

.si-empty-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
}

.si-empty-tags > span {
  color: var(--si-text-muted);
  font-size: 0.85rem;
}