/* calycode static CLI docs — shell, sidebar, prose and landing. Loaded after rich.css. */

:root {
   --d-bg: #222326;
   --d-bg-elev: #2a2b30;
   --d-bg-sidebar: #222326;
   --d-fg: #e6e7ea;
   --d-fg-muted: #9aa0a6;
   --d-fg-faint: #6f747c;
   --d-border: #34363c;
   --d-accent: #45f3ff;
   --d-accent-contrast: #06282b;
   --d-accent-soft: rgba(69, 243, 255, 0.14);
   --d-hover: rgba(255, 255, 255, 0.045);
   --d-scrollbar-thumb: #3a3c43;
   --d-scrollbar-thumb-hover: #4d5058;
   --d-header-h: 56px;
   --d-sidebar-w: 300px;
   --d-content-max: 108ch;
   --d-radius: 10px;
   --d-font: 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
   --d-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme='light'] {
   --d-bg: #f7f8fa;
   --d-bg-elev: #ffffff;
   --d-bg-sidebar: #f7f8fa;
   --d-fg: #1c1f24;
   --d-fg-muted: #555b64;
   --d-fg-faint: #858a99;
   --d-border: #dfe2e8;
   --d-accent: #0891b2;
   --d-accent-contrast: #ffffff;
   --d-accent-soft: rgba(8, 145, 178, 0.12);
   --d-hover: rgba(0, 0, 0, 0.04);
   --d-scrollbar-thumb: #cfd3da;
   --d-scrollbar-thumb-hover: #b4bac4;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body.d-body {
   margin: 0;
   background: var(--d-bg);
   color: var(--d-fg);
   font-family: var(--d-font);
   font-size: 16px;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
}

a {
   color: var(--d-accent);
}

/* ── Scrollbars ─────────────────────────────────── */
/* Chromium/Safari: rounded, gutter-less thumb that reads as part of the surface. Firefox gets the
   standard properties below instead — setting them in Chromium makes it ignore ::-webkit-scrollbar. */
*::-webkit-scrollbar {
   width: 11px;
   height: 11px;
}
*::-webkit-scrollbar-track {
   background: transparent;
}
*::-webkit-scrollbar-thumb {
   background-color: var(--d-scrollbar-thumb);
   border: 3px solid transparent;
   border-radius: 999px;
   background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
   background-color: var(--d-scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner {
   background: transparent;
}
@supports (-moz-appearance: none) {
   * {
      scrollbar-width: thin;
      scrollbar-color: var(--d-scrollbar-thumb) transparent;
   }
}

.d-skip {
   position: absolute;
   left: -999px;
   top: 0;
   background: var(--d-accent);
   color: var(--d-accent-contrast);
   padding: 8px 14px;
   border-radius: 0 0 var(--d-radius) 0;
   z-index: 100;
}
.d-skip:focus {
   left: 0;
}

/* ── Header ─────────────────────────────────────── */
.d-header {
   position: sticky;
   top: 0;
   z-index: 40;
   display: flex;
   align-items: center;
   gap: 12px;
   height: var(--d-header-h);
   padding: 0 18px;
   background: color-mix(in srgb, var(--d-bg) 88%, transparent);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--d-border);
}

.d-brand {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   text-decoration: none;
   color: var(--d-fg);
   font-weight: 700;
}
.d-brand img {
   display: block;
}
.d-brand__name {
   letter-spacing: 0.01em;
}
.d-brand__tag {
   font-size: 0.72em;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--d-accent);
   border: 1px solid var(--d-accent);
   border-radius: 999px;
   padding: 1px 8px;
}

.d-header__spacer {
   flex: 1;
}
.d-header__link {
   color: var(--d-fg-muted);
   text-decoration: none;
   font-size: 0.9em;
   padding: 6px 8px;
   border-radius: 8px;
}
.d-header__link:hover {
   color: var(--d-accent);
   background: var(--d-accent-soft);
}

.d-theme,
.d-hamburger {
   background: transparent;
   color: var(--d-fg-muted);
   border: 1px solid var(--d-border);
   border-radius: 8px;
   cursor: pointer;
   height: 34px;
}
.d-theme {
   width: 34px;
   font-size: 15px;
}
.d-theme:hover {
   color: var(--d-accent);
   border-color: var(--d-accent);
}

.d-hamburger {
   display: none;
   width: 38px;
   flex-direction: column;
   justify-content: center;
   gap: 4px;
   padding: 0 9px;
}
.d-hamburger span {
   display: block;
   height: 2px;
   background: currentColor;
   border-radius: 2px;
}

/* ── Layout ─────────────────────────────────────── */
.d-layout {
   display: grid;
   grid-template-columns: var(--d-sidebar-w) minmax(0, 1fr);
   align-items: start;
}

.d-sidebar {
   position: sticky;
   top: var(--d-header-h);
   height: calc(100vh - var(--d-header-h));
   overflow-y: auto;
   padding: 18px 12px 60px;
   background: var(--d-bg-sidebar);
   border-right: 1px solid var(--d-border);
}
.d-sidebar__scrim {
   display: none;
}

.d-main {
   min-width: 0;
   padding: 32px clamp(20px, 5vw, 64px) 0;
}
.d-article {
   max-width: var(--d-content-max);
   margin: 0 auto;
}

/* ── Sidebar nav ────────────────────────────────── */
.d-nav,
.d-nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
/* Deliberately low-contrast: the tree is navigation, and the active page is the one thing that
   should pull the eye. */
.d-nav {
   --d-nav-fg: var(--d-fg-muted);
}

/* Section headings carry real weight so the groups read as structure, not stray labels. */
.d-nav__section {
   margin: 24px 6px 8px;
   padding: 0 4px 7px;
   font-size: 0.72em;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.14em;
   color: var(--d-fg);
   border-bottom: 1px solid var(--d-border);
}
.d-search + .d-nav__section {
   margin-top: 6px;
}

.d-nav__item,
.d-nav__group {
   margin: 1px 0;
}

/* One muted, compact treatment for every nav anchor — tree links and flat/external links alike. */
.d-nav a {
   display: block;
   color: var(--d-nav-fg);
   text-decoration: none;
   font-size: 0.875em;
   font-weight: 400;
   line-height: 1.35;
   padding: 6px 10px;
   border-radius: 0 8px 8px 0;
   border-left: 2px solid transparent;
   transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.d-nav a:hover {
   color: var(--d-fg);
   background: var(--d-bg-elev);
}
.d-nav a.is-active {
   color: var(--d-accent);
   background: var(--d-bg-elev);
   border-left-color: var(--d-accent);
   font-weight: 500;
}

/* A group that is also a page: same tone as its children, only the chevron distinguishes it. */
.d-nav__group > .d-nav__row > .d-nav__link--group {
   color: var(--d-nav-fg);
   font-weight: 500;
   font-size: 0.84em;
   letter-spacing: 0.01em;
}
.d-nav__group > .d-nav__row > .d-nav__link--group:hover {
   color: var(--d-fg);
}
.d-nav__group.is-open > .d-nav__row > .d-nav__link--group {
   color: var(--d-nav-fg);
}
.d-nav__group > .d-nav__row > .d-nav__link--group.is-active {
   color: var(--d-accent);
   border-left-color: var(--d-accent);
}
.d-nav__group.is-open > .d-nav__row > .d-nav__link--group.is-active {
   color: var(--d-accent);
}
.d-nav__label {
   cursor: default;
}

/* The rail for each level lives on the nested list and aligns with its parent's chevron gutter, so
   it sits under the disclosure controls rather than at the sidebar edge. The `.d-nav` prefix is
   load-bearing: without it the `margin/padding: 0` reset on `.d-nav ul` wins on specificity. */
.d-nav .d-nav__children {
   margin-left: 8px;
   padding-left: 9px;
   border-left: 1px solid var(--d-border);
}
.d-nav .d-nav__children[hidden] {
   display: none;
}

.d-nav__row {
   display: flex;
   align-items: center;
}
.d-nav__row > .d-nav__link {
   flex: 1;
   min-width: 0;
}
/* The gutter every row reserves for its disclosure control; leaves get a spacer of the same
   size so labels never jump between levels. */
.d-nav__toggle,
.d-nav__spacer {
   flex: none;
   width: 18px;
   height: 18px;
   margin: 0 3px 0 0;
}
/* A drawn chevron: two borders on a rotated square, so it stays crisp and inherits the muted
   colour. No button chrome until the pointer is over it. */
.d-nav__toggle {
   border: none;
   background: transparent;
   color: var(--d-fg-faint);
   cursor: pointer;
   border-radius: 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: color 0.12s ease;
}
.d-nav__toggle::before {
   content: '';
   width: 5px;
   height: 5px;
   border-right: 1.5px solid currentColor;
   border-bottom: 1.5px solid currentColor;
   transform: rotate(-45deg);
   transition: transform 0.18s ease;
}
.d-nav__group.is-open > .d-nav__row > .d-nav__toggle::before {
   transform: rotate(45deg);
}
.d-nav__toggle:hover {
   color: var(--d-fg-muted);
}
.d-nav__group.is-open > .d-nav__row > .d-nav__toggle {
   color: var(--d-fg-muted);
}

/* External resources keep the same compact scale as the tree; the trailing glyph marks that they
   leave the site. */
.d-nav a[target='_blank'] {
   display: flex;
   align-items: center;
   gap: 6px;
}
.d-nav a[target='_blank']:hover {
   color: var(--d-accent);
}
.d-nav a[target='_blank']::after {
   content: '';
   flex: none;
   width: 11px;
   height: 11px;
   margin-left: auto;
   background-color: currentColor;
   opacity: 0.7;
   -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207'/%3E%3Cpath%20d='M8%207h9v9'/%3E%3C/svg%3E")
      center / contain no-repeat;
   mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017%2017%207'/%3E%3Cpath%20d='M8%207h9v9'/%3E%3C/svg%3E")
      center / contain no-repeat;
}

/* ── Search ─────────────────────────────────────── */
.d-search {
   position: relative;
   margin: 4px 6px 6px;
}
.d-search__input {
   width: 100%;
   background: var(--d-bg-elev);
   color: var(--d-fg);
   border: 1px solid var(--d-border);
   border-radius: 8px;
   padding: 8px 11px;
   font: inherit;
   font-size: 0.9em;
}
.d-search__input:focus {
   outline: none;
   border-color: var(--d-accent);
   box-shadow: 0 0 0 3px var(--d-accent-soft);
}
.d-search__results {
   position: absolute;
   inset-inline: 0;
   top: calc(100% + 6px);
   z-index: 50;
   max-height: 60vh;
   overflow-y: auto;
   background: var(--d-bg-elev);
   border: 1px solid var(--d-border);
   border-radius: var(--d-radius);
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
   padding: 6px;
}
.d-search__results[hidden] {
   display: none;
}
.d-search__empty {
   color: var(--d-fg-faint);
   padding: 10px;
   font-size: 0.88em;
}
.d-search__item {
   display: block;
   padding: 8px 10px;
   border-radius: 8px;
   text-decoration: none;
   color: var(--d-fg);
}
.d-search__item[aria-selected='true'],
.d-search__item:hover {
   background: var(--d-accent-soft);
}
.d-search__item-title {
   font-weight: 600;
   font-size: 0.92em;
}
.d-search__item-section {
   color: var(--d-fg-faint);
   font-size: 0.76em;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}
.d-search__item-snippet {
   display: block;
   color: var(--d-fg-muted);
   font-size: 0.82em;
   margin-top: 2px;
}
.d-search__mark {
   color: var(--d-accent);
   background: transparent;
}

/* ── Prose (rendered by content-kit) ────────────── */
.d-article .ck-article {
   color: var(--d-fg);
}
.d-article .ck-article h1,
.d-article .ck-article h2,
.d-article .ck-article h3,
.d-article .ck-article h4 {
   color: var(--d-fg);
   line-height: 1.25;
}
.d-article .ck-article h1 {
   font-size: 2em;
   margin: 0.2em 0 0.6em;
}
.d-article .ck-article h2 {
   font-size: 1.5em;
   margin: 1.6em 0 0.6em;
}
.d-article .ck-article h3 {
   font-size: 1.2em;
   margin: 1.4em 0 0.5em;
}
.d-article .ck-article h4 {
   font-size: 1.02em;
   margin: 1.2em 0 0.4em;
}
.d-article .ck-article p,
.d-article .ck-article ul,
.d-article .ck-article ol {
   margin: 0.7em 0;
}
.d-article .ck-article :where(h1, h2, h3, h4, h5, h6) {
   scroll-margin-top: calc(var(--d-header-h) + 12px);
}
.d-article .ck-article a {
   overflow-wrap: anywhere;
}
.d-article .ck-article blockquote {
   margin: 1em 0;
   padding: 0.4em 1em;
   border-left: 3px solid var(--d-accent);
   background: var(--d-accent-soft);
   border-radius: 0 8px 8px 0;
}
/* Raw `<details>` blocks restored by the build (content-kit escapes HTML). */
.d-article .ck-article details.md-details {
   margin: 1em 0;
   padding: 0.6em 1em;
   border: 1px solid var(--d-border);
   border-radius: var(--d-radius);
   background: var(--d-bg-elev);
}
.d-article .ck-article details.md-details > summary {
   cursor: pointer;
   font-weight: 600;
   color: var(--d-fg);
}
.d-article .ck-article details.md-details[open] > summary {
   margin-bottom: 0.6em;
}
.d-article .ck-article table {
   width: 100%;
   border-collapse: collapse;
   margin: 1em 0;
   font-size: 0.92em;
}
.d-article .ck-article th,
.d-article .ck-article td {
   border: 1px solid var(--d-border);
   padding: 8px 10px;
   text-align: left;
   vertical-align: top;
}
.d-article .ck-article th {
   background: var(--d-bg-elev);
}
.d-article .ck-article img {
   max-width: 100%;
   height: auto;
}
.d-article .ck-article hr {
   border: none;
   border-top: 1px solid var(--d-border);
   margin: 2em 0;
}

/* ── Pager ──────────────────────────────────────── */
.d-pager {
   display: flex;
   justify-content: space-between;
   gap: 14px;
   max-width: var(--d-content-max);
   margin: 40px auto 0;
}
.d-pager__link {
   display: block;
   flex: 1;
   max-width: 48%;
   padding: 12px 16px;
   border: 1px solid var(--d-border);
   border-radius: var(--d-radius);
   text-decoration: none;
   color: var(--d-fg);
}
.d-pager__link:hover {
   border-color: var(--d-accent);
}
.d-pager__link--next {
   text-align: right;
   margin-left: auto;
}
.d-pager__dir {
   display: block;
   font-size: 0.74em;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--d-fg-faint);
}
.d-pager__title {
   color: var(--d-accent);
   font-weight: 600;
   font-size: 0.94em;
}

/* ── Footer ─────────────────────────────────────── */
.d-footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 10px;
   max-width: var(--d-content-max);
   margin: 48px auto 0;
   padding: 22px 0 40px;
   border-top: 1px solid var(--d-border);
   color: var(--d-fg-muted);
   font-size: 0.86em;
}

/* ── Landing ────────────────────────────────────── */
.d-header--landing {
   position: static;
}
.d-landing {
   max-width: 980px;
   margin: 0 auto;
   padding: 8px 22px 0;
}
.d-hero {
   padding: 72px 0 48px;
   text-align: center;
}
.d-hero__eyebrow {
   color: var(--d-accent);
   font-family: var(--d-mono);
   font-size: 0.86em;
   margin: 0 0 12px;
}
.d-hero__title {
   font-size: clamp(2.1rem, 5vw, 3.4rem);
   line-height: 1.1;
   margin: 0 0 18px;
}
.d-hero__lede {
   max-width: 60ch;
   margin: 0 auto 28px;
   color: var(--d-fg-muted);
   font-size: 1.08em;
}
.d-hero__actions {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 30px;
}
.d-btn {
   display: inline-block;
   padding: 11px 20px;
   border-radius: var(--d-radius);
   border: 1px solid var(--d-border);
   color: var(--d-fg);
   text-decoration: none;
   font-weight: 600;
}
.d-btn:hover {
   border-color: var(--d-accent);
   color: var(--d-accent);
}
.d-btn--primary {
   background: var(--d-accent);
   color: var(--d-accent-contrast);
   border-color: var(--d-accent);
}
.d-btn--primary:hover {
   color: var(--d-accent-contrast);
   filter: brightness(1.06);
}

.d-install {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: var(--d-bg-elev);
   border: 1px solid var(--d-border);
   border-radius: var(--d-radius);
   padding: 12px 16px;
   font-family: var(--d-mono);
   font-size: 0.92em;
   position: relative;
   padding-left: 74px;
}
.d-install__dots {
   position: absolute;
   left: 16px;
   display: inline-flex;
   gap: 6px;
}
.d-install__dots span {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #d9515d;
}
.d-install__dots span:nth-child(2) {
   background: #f4c025;
}
.d-install__dots span:nth-child(3) {
   background: #3ec930;
}
.d-install code {
   color: var(--d-fg);
}
.d-install__copy {
   background: transparent;
   border: 1px solid var(--d-border);
   color: var(--d-fg-muted);
   border-radius: 6px;
   cursor: pointer;
   padding: 2px 8px;
   font: inherit;
   font-size: 0.8em;
}
.d-install__copy:hover {
   color: var(--d-accent);
   border-color: var(--d-accent);
}

.d-features {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 16px;
   margin: 24px 0 8px;
}
.d-feature {
   background: var(--d-bg-elev);
   border: 1px solid var(--d-border);
   border-radius: var(--d-radius);
   padding: 20px;
}
.d-feature h2 {
   font-size: 1.05em;
   margin: 0 0 8px;
   color: var(--d-fg);
}
.d-feature p {
   margin: 0;
   color: var(--d-fg-muted);
   font-size: 0.92em;
}
.d-cta {
   text-align: center;
   margin: 56px 0 24px;
}
.d-cta h2 {
   font-size: 1.6em;
   margin: 0 0 8px;
}
.d-cta p {
   color: var(--d-fg-muted);
   margin: 0 0 20px;
}
.d-footer--landing {
   max-width: 980px;
   margin: 40px auto 0;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 960px) {
   .d-layout {
      grid-template-columns: minmax(0, 1fr);
   }
   .d-hamburger {
      display: flex;
   }
   .d-sidebar {
      position: fixed;
      top: var(--d-header-h);
      left: 0;
      width: min(86vw, var(--d-sidebar-w));
      z-index: 45;
      transform: translateX(-102%);
      transition: transform 0.2s ease;
   }
   body.sidebar-open .d-sidebar {
      transform: translateX(0);
   }
   body.sidebar-open .d-sidebar__scrim {
      display: block;
      position: fixed;
      inset: var(--d-header-h) 0 0 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 44;
   }
   .d-main {
      padding: 24px 18px 0;
   }
   .d-pager {
      flex-direction: column;
   }
   .d-pager__link {
      max-width: 100%;
   }
}