/* 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;
}

/* Gate the hover underline to pointer devices: on touch :hover latches on tap,
   so an ungated underline sticks to a link after a tap or a scroll that starts
   on it. Touch feedback for links comes from the clickable-row press state. */
@media (hover: hover) {
  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;
}

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);
}

@media (hover: hover) {
  .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-brand-text {
  display: inline-block;
}

.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;
}

@media (hover: hover) {
  .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;
}

@media (hover: hover) {
  .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;
}

.si-nav-browse {
  white-space: nowrap;
}

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

@media (hover: hover) {
  .si-nav-links > a:not(.si-btn):hover {
    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);
}

@media (hover: hover) {
  .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);
}

@media (hover: hover) {
  .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;
}

@media (hover: hover) {
  .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);
}

@media (hover: hover) {
  .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);
}

@media (hover: hover) {
  .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;
  /* Suppress the default mobile tap flash; navigation is the feedback. */
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard focus always shows the highlight. The pointer hover version is
   gated to real hover devices below so it does not stick on touchscreens,
   where :hover latches on tap (and a drag across rows leaves several rows
   stuck highlighted until you tap elsewhere). */
.si-clickable-row:focus-visible {
  background-color: var(--si-surface-hover);
  box-shadow: inset 3px 0 0 var(--si-accent);
  text-decoration: none;
}

@media (hover: hover) {
  .si-clickable-row:hover {
    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;
}

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

/* Touch press feedback. Touch has no hover, so on touch devices the row
   acknowledges a genuine tap with the same highlight, applied via the
   .si-row-pressed class (added a short beat after pointerdown and removed the
   moment the gesture turns into a scroll; see project.js). Gated to
   `hover: none` so pointer devices keep using :hover instead. */
@media (hover: none) {
  .si-clickable-row.si-row-pressed {
    background-color: var(--si-surface-hover);
    box-shadow: inset 3px 0 0 var(--si-accent);
    text-decoration: none;
  }

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

/* Reduced motion: snap the row highlight instead of fading, which also
   removes any lingering tail if a press is canceled by a scroll. */
/* Global reduced-motion guard: near-instant animations/transitions and no
   smooth scrolling for users who prefer reduced motion. This neutralizes the
   infinite loading spinner and Bootstrap modal/dropdown fades; the targeted
   blocks (clickable rows below, hero-title swap further down) remain for the
   cases that swap content rather than only easing it. Durations are kept
   non-zero so transitionend still fires and Bootstrap's JS stays in sync. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .si-clickable-row,
  .si-table tr.si-clickable-row td:first-child {
    transition: none;
  }
}

/* === 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:focus-visible,
.si-badge-link:focus-visible {
  box-shadow: inset 0 0 0 1px currentColor;
  filter: brightness(1.15);
  text-decoration: none;
}

@media (hover: hover) {
  a.si-badge:hover,
  .si-badge-link:hover {
    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);
}

/* "Your work" strip: a signed-in user's pending invitations and most
   recently released projects, shown between the hero and the stat strip
   only when non-empty. Reuses the compact clickable-row project items. */
.si-home-yourwork {
  margin-bottom: 1.5rem;
}

.si-home-yourwork-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Chip drops below the title on narrow screens instead of squeezing the
     h2 into wrapping mid-word. */
  flex-wrap: wrap;
}

.si-home-yourwork-title h2 {
  white-space: nowrap;
}

/* On narrow screens the full chip text cannot share the title row; keep
   the header a single row by compacting the chip to icon + count (the
   full wording stays in the aria-label/title). */
@media (max-width: 575px) {
  .si-home-yourwork-title .si-yourwork-chip-text {
    display: none;
  }
}

/* Below ~360px even the compact layout cannot share a row without
   widening the page (the body must never scroll horizontally); let the
   header wrap only under that pressure. */
@media (max-width: 359px) {
  .si-home-yourwork .si-section-header {
    flex-wrap: wrap;
  }
}


/* Each project is its own si-card-style tile (surface, 1px border, 8px
   radius, accent border on hover) matching the column cards below, with
   the same row padding as their compact items. */
.si-home-yourwork-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.si-home-yourwork-projects .si-recent-item {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 8px;
  padding: 0.85rem 1.25rem;
}

/* The list-context rule `.si-recent-item:last-child { border-bottom: none }`
   (for rows inside si-card columns) appears later in this file and would
   strip the last tile's bottom border; restore it for the tile context. */
.si-home-yourwork-projects .si-recent-item:last-child {
  border-bottom: 1px solid var(--si-border);
}

.si-home-yourwork-projects .si-recent-item:focus-visible {
  border-color: var(--si-accent);
}

@media (hover: hover) {
  .si-home-yourwork-projects .si-recent-item:hover {
    border-color: var(--si-accent);
  }
}

/* Publisher social-proof row under the stat strip: real publisher names
   linked to their public profiles, derived from live index data. */
.si-home-publishers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.6rem;
  row-gap: 0.5rem;
  padding: 1rem 1rem 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
}

.si-home-publishers-label {
  color: var(--si-text-muted);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.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;
  /* flex-start keeps the View-all action anchored to the heading's first
     line (not floating mid-block when the heading wraps or carries a
     chip) at exactly the same row height as centering. */
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: nowrap;
}

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

/* The ghost View-all box sits flush against the container's right edge (where
   the cards below align), so its hover pill never overflows that edge. Its
   horizontal padding is trimmed from the .si-btn-sm default so the resting text
   is only slightly inset from the edge rather than noticeably offset; the pill
   and text can't both be flush (the padding sits between them), so this keeps
   the pill aligned and the text close. */
.si-section-header .si-btn-ghost.si-btn-sm {
  padding: 0.3rem 0.5rem;
}

.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;
}

@media (hover: hover) {
  .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 {
  /* Horizontal padding keeps content clear of the clickable-row hover
     tint and its 3px inset accent bar (content must never sit 0px from
     the row edge). --si-border (not -subtle) so result boundaries are
     visible at rest, not only on hover. */
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--si-border);
  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-desc {
  font-size: 0.875rem;
  color: var(--si-text-secondary);
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.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);
}

@media (hover: hover) {
  .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;
}

@media (hover: hover) {
  .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.active {
  color: var(--si-accent);
  text-decoration: none;
}

@media (hover: hover) {
  .si-sort-link:hover {
    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;
}

/* 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;
}

@media (hover: hover) {
  .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;
}

/* === 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);
}

/* At-a-glance signals under the project title (downloads, release date) */
.si-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.25rem;
  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;
  white-space: nowrap;
}

@media (hover: hover) {
  .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 {
  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:focus,
.dropdown-menu .dropdown-item:focus-visible {
  background-color: var(--si-surface-hover);
  color: var(--si-text);
  text-decoration: none;
}

@media (hover: hover) {
  .dropdown-menu .dropdown-item:hover {
    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. The per-publisher
   sub-headings contain normalized handles, so they must not be uppercased. */
.si-card-section-heading,
.si-usage-group-heading {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--si-text-muted);
}

.si-card-section-heading {
  text-transform: uppercase;
}

.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;
}

/* Sidebar PURL row (in: _project_sidebar.html) */
.si-purl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.si-purl-text {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--si-text-secondary);
}

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

.si-purl-help {
  flex: 0 0 auto;
  font-size: 0.8rem;
  line-height: 1;
  color: var(--si-text-muted);
}

/* 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;
}

@media (hover: hover) {
  .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:focus-visible,
.si-source-wrap-toggle:focus-visible {
  background: var(--si-surface-hover);
  color: var(--si-text);
}

@media (hover: hover) {
  .si-source-files-toggle:hover,
  .si-source-wrap-toggle:hover {
    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:focus-visible,
.si-source-file:focus-visible,
.si-source-file.active {
  background: var(--si-surface-hover);
  color: var(--si-text);
}

@media (hover: hover) {
  .si-source-tree-item:hover,
  .si-source-file:hover {
    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;
}

@media (hover: hover) {
  .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;
}

/* A linked handle in a meta line (search results filter by publisher) keeps
   the muted handle look; accent only on direct hover. */
.si-list-item-meta a.si-handle {
  color: var(--si-text-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .si-list-item-meta a.si-handle:hover {
    color: var(--si-accent);
  }
}

.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;
}

/* Action row of allauth element forms (allauth/elements/form.html):
   wrapping buttons keep a consistent gap on both axes. */
.si-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Radio rows mixing text and badges (allauth/elements/field.html):
   the radio stays tied to the start of the label text; only the label's
   badges wrap onto following lines, with even gaps. */
.si-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0;
}

.si-check .form-check-input {
  float: none;
  flex-shrink: 0;
  margin-left: 0;
  margin-top: 0.2em;
}

.si-check-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

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

/* Radio-select rows: the whole row is a click target for its radio (see the
   .si-radio-select-table handler in project.js). Pointer affordance only; the
   radio itself shows the selected state, and native radios keep keyboard
   operation. Hover is gated so it never sticks on touch. */
.si-radio-select-table tbody tr {
  cursor: pointer;
}

@media (hover: hover) {
  .si-radio-select-table tbody tr:hover {
    background: var(--si-surface-hover);
  }
}

.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. This constant fade is the no-JS fallback;
       project.js refines it via data-scroll-fade (below) so fades only
       appear on edges with clipped content and never obscure the active
       tab once fully scrolled. 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);
  }

  /* JS-refined overflow fades (data-scroll-fade set by project.js).
     "right" needs no rule; it matches the fallback above. A mask (not a
     gradient overlay) fades to whatever background is behind the tabs,
     so it stays correct in both themes and on page or surface
     backgrounds. */
  .si-tabs[data-scroll-fade="none"] {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .si-tabs[data-scroll-fade="left"] {
    -webkit-mask-image: linear-gradient(to right, transparent, black 2rem);
    mask-image: linear-gradient(to right, transparent, black 2rem);
  }

  .si-tabs[data-scroll-fade="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent, black 2rem, black calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, transparent, black 2rem, black calc(100% - 2rem), transparent);
  }

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

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Right-edge fade cues horizontally clipped columns (row actions live on
       the right, so they are the first to scroll off). Same mask pattern as
       .si-tabs; project.js refines it per scroll edge via data-scroll-fade so
       a table that fits shows no fade and the fade drops at scroll end. */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
  }

  .table-responsive[data-scroll-fade="none"] {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .table-responsive[data-scroll-fade="left"] {
    -webkit-mask-image: linear-gradient(to right, transparent, black 2rem);
    mask-image: linear-gradient(to right, transparent, black 2rem);
  }

  .table-responsive[data-scroll-fade="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent, black 2rem, black calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, transparent, black 2rem, black calc(100% - 2rem), transparent);
  }


  .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;
}

@media (hover: hover) {
  .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;
}