@layer starlight, user;

@layer user.overrides {
  :root {
    --sl-font: system-ui, sans-serif;
    --sl-font-heading: 'polymath-display', sans-serif;

    --sl-color-text-heading: var(--heading-fill);
    --sl-text-h1: var(--sl-text-6xl);
    --sl-color-accent-hsl: 311 100% 50%;
    --sl-color-accent-low: hsl(311 100% 50% / 0.1);
    --sl-color-accent: hsl(311 100% 50% / 0.9);
    --sl-color-accent-high: hsl(311 100% 50% / 1);

    --sl-color-bg: var(--container-fill);
    --sl-color-bg-nav: var(--container-fill);
    --sl-color-bg-sidebar: var(--container-fill);
    --sl-color-bg-inline-code: var(--surface-inner-fill);
    --sl-color-bg-accent: var(--sl-color-accent-high);
    --sl-color-hairline-light: var(--surface-border-fill);
    --sl-color-hairline: var(--surface-border-fill);
    --sl-color-hairline-shade: var(--surface-border-fill);

    --sl-icon-color: var(--heading-fill);
  }

  :is(h1, h2, h3, h4, h5, h6) {
    font-feature-settings: 'ss03' on, 'ss12' on;
  }

  :is(h1, .starlight-sidebar-topics) {
    font-feature-settings: 'ss01' on, 'ss03' on, 'ss09' on, 'ss10' on, 'ss12' on;
    font-family: var(--sl-font-heading);
  }

  :is(.starlight-sidebar-topics li) {
    font: inherit;
    font-feature-settings: inherit;
    text-transform: lowercase;
  }

  :is(h1) {
    --c-border: var(--heading-fill);
    --c-start: var(--heading-fill);
    --c-end: var(--heading-muted);
    --s-border: 1px;
    -webkit-text-stroke-color: var(--c-border);
    -webkit-text-stroke-width: var(--s-border);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--c-start), var(--c-end));
    letter-spacing: 1px;
  }

  :is(h2, h3, h4, h5, h6) {
    --c-start: var(--heading-fill);
    --c-end: var(--heading-muted);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--c-start), var(--c-end));
  }

  /* Target specific elements */
  .sl-nav-link,
  .site-title,
  .sl-doc-title,
  header h1 {
    font-family: var(--sl-font-heading);
  }

  a.site-title {
    color: var(--heading-fill);
  }

  /* Right sidebar (TOC) background gradient */
  .right-sidebar {
    background: linear-gradient(to bottom, var(--color-gray-90) 0%, var(--container-fill) 100%);
  }

  starlight-toc nav>ul {
    border-left: 1px solid transparent;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: var(--border-050);
      background: linear-gradient(to bottom, var(--surface-border-highlight), var(--surface-border-fill));
    }

    a {
      border-left: 2px solid transparent;
      border-radius: 0;
    }

    [aria-current] {
      border-left-color: hsl(var(--sl-color-accent-hsl) / 0.9);
      font-weight: 600;
      color: var(--separator-fill);
    }
  }

  p,
  li,
  td,
  blockquote {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  /* Content links — use current accent color */
  .sl-markdown-content a:not(:where(.not-content *)) {
    color: hsl(var(--sl-color-accent-hsl));
  }
  .sl-markdown-content a:hover:not(:where(.not-content *)) {
    color: hsl(var(--sl-color-accent-hsl) / 0.8);
  }

  .sl-link-button.primary {
    background: radial-gradient(ellipse at center, hsl(var(--sl-color-accent-hsl) / 0.5), hsl(var(--sl-color-accent-hsl) / 0.1));
    border: 2px solid hsl(var(--sl-color-accent-hsl) / 0.9);
    border-radius: var(--radius-100);
    color: var(--color-white-100);
    font-family: var(--__sl-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: var(--space-400) var(--space-600);
  }

  .sl-link-button:not(.primary) {
    background: radial-gradient(ellipse at center, var(--color-white-50), var(--color-white-10));
    border: 2px solid var(--color-white-90);
    border-radius: var(--radius-100);
    color: var(--color-white-100);
    font-family: var(--__sl-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: var(--space-400) var(--space-600);
  }

  .sl-link-button > svg {
    fill: currentColor;
  }

  .cli-preview {
    padding: 1em;
    border: 1px solid #292929;
    border-radius: 0.5em;
    white-space: pre;
    line-height: 1.2em;
    font-family: monospace;
    background-color: #181818;
    color: var(--color-white-100);
  }

  /* Expressive Code — subtle border, rounded, gradient bg */
  .expressive-code {
    --ec-brdWd: 1px;
    --ec-brdCol: var(--color-white-50);
    --ec-brdRad: var(--radius-100);
    --ec-codeBg: var(--container-fill);
    --ec-frm-shdCol: transparent;
    --ec-frm-frameBoxShdCssVal: none;
    --ec-frm-trmTtbBg: transparent;
    --ec-frm-trmTtbBrdBtmCol: transparent;
    --ec-frm-trmBg: var(--container-fill);
    --ec-frm-edBg: var(--container-fill);
    --ec-frm-edTabBarBg: transparent;
    --ec-frm-edTabBarBrdCol: transparent;
    --ec-frm-edTabBarBrdBtmCol: transparent;
    --ec-frm-edActTabBg: transparent;
    --ec-frm-edActTabBrdCol: transparent;
  }

  /* Terminal title bar — subtle gradient fade */
  .expressive-code .frame.is-terminal .header {
    background: linear-gradient(to bottom, var(--color-white-0), var(--color-white-10));
  }

  /* Editor title bar — same treatment */
  .expressive-code .frame.has-title:not(.is-terminal) .header {
    background: linear-gradient(to bottom, var(--color-white-0), var(--color-white-10));
  }

  /* Sidebar background gradient */
  .sidebar-pane {
    background: linear-gradient(to bottom, var(--color-gray-90) 0%, var(--container-fill) 100%) !important;

    a {
      border: 1px solid transparent;
      border-radius: 0;
    }

    /* Move connector line from per-item to per-group */
    ul ul {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        left: calc(var(--sl-sidebar-item-padding-inline) * 2);
        border-inline-start: 1px solid;
        border-image: linear-gradient(to bottom, var(--surface-border-highlight), var(--surface-border-fill)) 1;
        pointer-events: none;
        z-index: 0;
      }
    }
    ul ul li {
      border-inline-start: none;
      z-index: 1;
    }

    /* Active sidebar link — accent text + left indicator, no bg */
    [aria-current="page"],
    [aria-current="page"]:hover,
    [aria-current="page"]:focus {
      color: hsl(var(--sl-color-accent-hsl));
      background: transparent;
      border-inline-start: 2px solid hsl(var(--sl-color-accent-hsl));
    }

    a:hover,
    a:focus-visible {
      border-inline-start: 2px solid hsl(var(--sl-color-accent-hsl) / 0.5);
    }

    /* Sidebar group labels — uppercase */
    summary .group-label .large {
      text-transform: uppercase;
      font-size: var(--sl-text-sm);
      letter-spacing: 0.01em;
    }
  }

  /* Sidebar topic list — gradient box on hover + active */
  .starlight-sidebar-topics a:is(.starlight-sidebar-topics-current, :hover, :focus-visible) {
    background: linear-gradient(to right, hsl(var(--sl-color-accent-hsl) / 0.1), hsl(var(--sl-color-accent-hsl) / 0.5));
    border: 1px solid hsl(var(--sl-color-accent-hsl) / 0.9);
    border-radius: var(--radius-100);
  }

  .starlight-sidebar-topics a:not(.starlight-sidebar-topics-current) {
    color: var(--heading-muted);
  }

  .starlight-sidebar-topics a .starlight-sidebar-topics-icon {
    border-color: transparent;
    background: transparent;
    color: hsl(var(--sl-color-accent-hsl));
  }

  /* Canonical topic hover colors — each topic uses its own color on hover */
  .starlight-sidebar-topics a {
    --sl-color-accent-low: hsl(var(--sl-color-accent-hsl) / 0.1);
    --sl-color-accent: hsl(var(--sl-color-accent-hsl) / 0.9);
    --sl-color-accent-high: hsl(var(--sl-color-accent-hsl) / 1);
    --sl-color-text-accent: var(--sl-color-accent-high);
    --sl-color-text-invert: black;
    --sl-icon-color: currentColor;
  }
  .starlight-sidebar-topics a[href*="/clack"] {
    --sl-color-accent-hsl: 311 100% 50%;
  }
  .starlight-sidebar-topics a[href*="/args"] {
    --sl-color-accent-hsl: 52 81% 53%;
  }
  .starlight-sidebar-topics a[href*="/tab"] {
    --sl-color-accent-hsl: 134 94% 49%;
  }

  starlight-menu-button button,
  mobile-starlight-toc nav {
    top: unset;
    bottom: 0;
  }

  /* Aside/Note — full border, gradient bg, corner decorations */
  .starlight-aside {
    border: 1px solid var(--sl-color-asides-border);
    border-inline-start-width: 1px;
    position: relative;
    overflow: visible;
  }

  .starlight-aside--note {
    background: radial-gradient(ellipse at center top, hsl(234 100% 50% / 0.5), hsl(234 100% 50% / 0.1));
  }
  .starlight-aside--tip {
    background: radial-gradient(ellipse at center top, hsl(281 82% 63% / 0.5), hsl(281 82% 63% / 0.1));
  }
  .starlight-aside--caution {
    background: radial-gradient(ellipse at center top, hsl(41 82% 63% / 0.5), hsl(41 82% 63% / 0.1));
  }
  .starlight-aside--danger {
    background: radial-gradient(ellipse at center top, hsl(339 82% 63% / 0.5), hsl(339 82% 63% / 0.1));
  }

  .starlight-aside::before,
  .starlight-aside::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: var(--sl-color-asides-border);
    border-style: solid;
  }
  .starlight-aside::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
  }
  .starlight-aside::after {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
  }

  .starlight-aside__title {
    font-family: var(--__sl-font-mono);
    text-transform: uppercase;
    font-size: var(--sl-text-sm);
    letter-spacing: 0.01em;
  }

  /* Search bar — pill shape */
  site-search button {
    border-radius: var(--radius-full) !important;
    border: 1px solid var(--surface-border-highlight);
  }

  /* Light theme specific overrides for better readability */
  :root[data-theme=light] {
    --sl-color-text: var(--color-gray-100);
    --sl-color-text-muted: var(--color-gray-70);
    --sl-color-text-accent: var(--color-gray-90);

    .sl-nav-link,
    .site-title,
    .sl-doc-title {
      color: var(--color-gray-100);
    }

    input::placeholder {
      color: var(--color-gray-50);
    }

    --sl-icon-color: var(--color-gray-100);

    .sl-link-button.primary {
      background: radial-gradient(ellipse at center, hsl(var(--sl-color-accent-hsl) / 0.3), hsl(var(--sl-color-accent-hsl) / 0.05));
      border-color: hsl(var(--sl-color-accent-hsl) / 0.9);
      color: var(--color-gray-100);
    }

    .sl-link-button:not(.primary) {
      background: radial-gradient(ellipse at center, var(--color-gray-80), var(--color-gray-100));
      border-color: var(--color-gray-90);
      color: var(--color-white-100);
    }

    .sl-link-button>svg {
      fill: currentColor;
    }

    .starlight-sidebar-topics-icon {
      background-color: var(--color-gray-20);
    }
  }
}