/*
 * shipit-agent docs — Anthropic Claude-inspired theme
 *
 * Dark-first with clean light mode. Modeled after docs.anthropic.com:
 * - Warm neutral tones, minimal decoration
 * - Bold uppercase sidebar section headers
 * - Active link with left accent border
 * - Clean typography with Inter font
 * - Both dark (#1B1B1F) and light (#FAFAF9) themes
 */

/* ─────────────────────────────────────────────────────────── */
/* 1. Color tokens                                             */
/* ─────────────────────────────────────────────────────────── */

:root {
  --s-accent:       #D97706;
  --s-accent-hover: #F59E0B;
  --s-accent-bg:    rgba(217, 119, 6, 0.1);
  --s-blue:         #60A5FA;
  --s-green:        #34D399;
  --s-red:          #F87171;
}

/* ── Dark mode (primary) ────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:           #1B1B1F;
  --md-primary-fg-color--light:    #232328;
  --md-primary-fg-color--dark:     #131316;
  --md-default-bg-color:           #1B1B1F;
  --md-default-bg-color--light:    #222226;
  --md-default-fg-color:           #E8E8EA;
  --md-default-fg-color--light:    #A0A0A8;
  --md-default-fg-color--lighter:  #6E6E78;
  --md-default-fg-color--lightest: #38383E;
  --md-accent-fg-color:            #D97706;
  --md-typeset-a-color:            #E8A23E;
  --md-code-bg-color:              #141417;
  --md-code-fg-color:              #E8E8EA;
  --md-footer-bg-color:            #141417;
  --md-footer-bg-color--dark:      #0E0E11;
  --s-bg:           #1B1B1F;
  --s-surface:      #232328;
  --s-hover:        #2B2B30;
  --s-border:       #38383E;
  --s-border-dim:   #2C2C32;
  --s-text:         #E8E8EA;
  --s-text-muted:   #A0A0A8;
  --s-text-dim:     #6E6E78;
  --s-link:         #E8A23E;
  --s-sidebar-bg:   #1B1B1F;
}

/* ── Light mode ─────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:           #FFFFFF;
  --md-primary-fg-color--light:    #F5F5F4;
  --md-primary-fg-color--dark:     #1C1917;
  --md-primary-bg-color:           #1C1917;
  --md-primary-bg-color--light:    #57534E;
  --md-default-bg-color:           #FAFAF9;
  --md-default-fg-color:           #1C1917;
  --md-default-fg-color--light:    #57534E;
  --md-default-fg-color--lighter:  #A8A29E;
  --md-default-fg-color--lightest: #E7E5E4;
  --md-accent-fg-color:            #B45309;
  --md-typeset-a-color:            #B45309;
  --md-code-bg-color:              #F5F5F4;
  --s-bg:           #FAFAF9;
  --s-surface:      #F5F5F4;
  --s-hover:        #EEEEEC;
  --s-border:       #E7E5E4;
  --s-border-dim:   #E7E5E4;
  --s-text:         #1C1917;
  --s-text-muted:   #57534E;
  --s-text-dim:     #A8A29E;
  --s-link:         #B45309;
  --s-sidebar-bg:   #FAFAF9;
}

/* ─────────────────────────────────────────────────────────── */
/* 2. Typography                                               */
/* ─────────────────────────────────────────────────────────── */

.md-typeset {
  font-size: 0.9rem;
  line-height: 1.75;
}

.md-typeset h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.4em;
  /* No gradient — clean solid text */
  background: none !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}

.md-typeset h2 {
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-top: 2.5em;
  padding-top: 1em;
  border-top: 1px solid var(--s-border-dim);
}

.md-typeset h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0.5em;
}

.md-typeset h3 {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset p {
  color: var(--s-text-muted);
}

.md-typeset strong {
  color: var(--s-text);
  font-weight: 600;
}

/* ── Full-width layout ─────────────────────────────────────
 * Override mkdocs-material's default ~61rem grid cap so the
 * page uses the full viewport, with tight horizontal padding.
 * The right-hand TOC stays on screens >= 1220px (md-grid breakpoint).
 */
.md-grid {
  max-width: none;
}

.md-main__inner {
  max-width: none;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.md-typeset .md-content__inner {
  max-width: none;
  padding: 0 1rem;
  margin: 0 auto;
}

/* Tighter inner padding on the content slot itself */
.md-content {
  padding: 0;
}

.md-content__inner {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/* On wide screens, leave a little breathing room around tables and code blocks */
@media (min-width: 1600px) {
  .md-typeset .md-content__inner {
    padding: 0 2rem;
  }
}

/* ─────────────────────────────────────────────────────────── */
/* Collapsible right-hand TOC sidebar                          */
/* ─────────────────────────────────────────────────────────── */

/*
 * The right-hand "Table of contents" panel (`.md-sidebar--secondary`)
 * is hidden by default so the page content fills the viewport. The
 * `shipit-toc-open` class is added to <html> by toc-toggle.js when the
 * user clicks the floating "📑 Show TOC" button.
 */
.md-sidebar--secondary {
  display: none !important;
}

html.shipit-toc-open .md-sidebar--secondary {
  display: block !important;
}

/* When the TOC is shown, give the content a tasteful right margin so
   it doesn't crash into the sidebar edge. */
@media screen and (min-width: 76.25em) {
  html.shipit-toc-open .md-main__inner {
    margin-right: 0.75rem;
  }
}

/* The floating toggle button — top-right corner, above all content. */
.shipit-toc-toggle {
  position: fixed;
  top: 4.2rem;
  right: 1rem;
  z-index: 100;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lightest, rgba(0, 0, 0, 0.12));
  background: var(--md-default-bg-color, #fff);
  color: var(--md-default-fg-color, #1B1B1F);
  font: 600 0.72rem/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background 0.15s ease, color 0.15s ease;
}

.shipit-toc-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  background: var(--md-accent-fg-color, #D97706);
  color: #fff;
  border-color: transparent;
}

.shipit-toc-toggle:active {
  transform: translateY(0);
}

[aria-pressed="true"].shipit-toc-toggle {
  background: var(--s-accent-bg, rgba(217, 119, 6, 0.1));
  color: var(--md-accent-fg-color, #D97706);
  border-color: var(--md-accent-fg-color, #D97706);
}

/* On narrow screens, hide the toggle entirely — the right TOC isn't
   shown by mkdocs-material below 76.25em anyway. */
@media (max-width: 76.25em) {
  .shipit-toc-toggle {
    display: none;
  }
}

/* Landing page title — slightly larger */
.md-typeset .md-content__inner > h1:first-child {
  font-size: 2.2rem;
  letter-spacing: -0.03em;
}

/* ─────────────────────────────────────────────────────────── */
/* 3. Links                                                    */
/* ─────────────────────────────────────────────────────────── */

.md-typeset a {
  color: var(--s-link);
  text-decoration: underline;
  text-decoration-color: rgba(217, 119, 6, 0.25);
  text-underline-offset: 3px;
  transition: all 0.15s ease;
}

.md-typeset a:hover {
  color: var(--s-accent-hover);
  text-decoration-color: var(--s-accent-hover);
}

/* ─────────────────────────────────────────────────────────── */
/* 4. Header & top tabs                                        */
/* ─────────────────────────────────────────────────────────── */

.md-header {
  border-bottom: 1px solid var(--s-border);
  box-shadow: none !important;
}

[data-md-color-scheme="default"] .md-header {
  background: #FFFFFF !important;
  color: #1C1917 !important;
}

[data-md-color-scheme="default"] .md-header .md-header__title {
  color: #1C1917 !important;
}

[data-md-color-scheme="slate"] .md-header {
  background: var(--s-bg) !important;
}

.md-tabs {
  border-bottom: 1px solid var(--s-border-dim);
}

[data-md-color-scheme="default"] .md-tabs {
  background: #FFFFFF !important;
}

[data-md-color-scheme="default"] .md-tabs__link {
  color: #57534E !important;
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #1C1917 !important;
}

[data-md-color-scheme="slate"] .md-tabs {
  background: var(--s-bg) !important;
}

.md-tabs__link {
  font-weight: 500;
  font-size: 0.82rem;
  opacity: 0.65;
}

.md-tabs__link--active {
  opacity: 1;
  font-weight: 600;
}

/* Search — rounded, subtle */
.md-search__form {
  border-radius: 8px;
  background: var(--s-surface) !important;
  border: 1px solid var(--s-border) !important;
}

.md-search__form:focus-within {
  border-color: var(--s-accent) !important;
}

/* ─────────────────────────────────────────────────────────── */
/* 5. Sidebar — Anthropic style                                */
/* ─────────────────────────────────────────────────────────── */

.md-sidebar {
  background: var(--s-sidebar-bg);
}

[data-md-color-scheme="slate"] .md-sidebar {
  border-right: 1px solid var(--s-border-dim);
}

[data-md-color-scheme="default"] .md-sidebar {
  border-right: 1px solid var(--s-border);
}

/* All sidebar nav links — base reset */
.md-sidebar .md-nav__link {
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Section group headers (Getting started, Build with SHIPIT, etc.)
   These are <label class="md-nav__link" for="__nav_N"> elements */
.md-nav[data-md-level="1"] > .md-nav__title,
label.md-nav__link[for^="__nav_"] {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--s-text-dim) !important;
  padding: 0.7rem 0.6rem 0.2rem !important;
  text-align: left !important;
  opacity: 1 !important;
}

/* The expand/collapse icon next to section headers */
label.md-nav__link[for^="__nav_"] .md-nav__icon {
  display: none;
}

/* Sub-page links — the actual menu items */
.md-nav[data-md-level="1"] .md-nav__link,
.md-nav[data-md-level="2"] .md-nav__link {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--s-text-muted) !important;
  padding: 0.28rem 0.6rem !important;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: all 0.1s ease;
  line-height: 1.4;
}

.md-nav[data-md-level="1"] .md-nav__link:hover,
.md-nav[data-md-level="2"] .md-nav__link:hover {
  color: var(--s-text) !important;
  background: var(--s-hover);
}

/* Active page link — clean accent, very subtle bg */
a.md-nav__link--active {
  color: var(--s-text) !important;
  font-weight: 500 !important;
  background: rgba(217, 119, 6, 0.06) !important;
  border-left: 2px solid var(--s-accent) !important;
  border-radius: 0 4px 4px 0 !important;
}

[data-md-color-scheme="slate"] a.md-nav__link--active {
  background: rgba(217, 119, 6, 0.08) !important;
}

/* TOC active link in right sidebar — same treatment */
label.md-nav__link--active {
  color: var(--s-text) !important;
  font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────── */
/* 6. Code                                                     */
/* ─────────────────────────────────────────────────────────── */

.md-typeset code {
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 4px;
  padding: 0.15em 0.35em;
  background: var(--s-surface);
  border: 1px solid var(--s-border-dim);
}

.md-typeset pre > code {
  border-radius: 8px;
  border: 1px solid var(--s-border);
  font-size: 0.82rem;
  line-height: 1.65;
  padding: 1rem;
}

[data-md-color-scheme="slate"] .md-typeset pre > code {
  background: #141417;
}

.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ─────────────────────────────────────────────────────────── */
/* 7. Tables                                                   */
/* ─────────────────────────────────────────────────────────── */

.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--s-border);
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--s-surface);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--s-border);
}

.md-typeset table:not([class]) td {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--s-border-dim);
}

.md-typeset table:not([class]) tr:hover {
  background: var(--s-hover);
}

/* ─────────────────────────────────────────────────────────── */
/* 8. Admonitions                                              */
/* ─────────────────────────────────────────────────────────── */

.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border: 1px solid var(--s-border);
  border-left-width: 3px;
  box-shadow: none;
  background: var(--s-surface);
  font-size: 0.85rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
  font-size: 0.85rem;
  background: transparent !important;
}

.md-typeset .admonition.tip { border-left-color: var(--s-accent); }
.md-typeset .admonition.note { border-left-color: var(--s-blue); }
.md-typeset .admonition.warning { border-left-color: var(--s-red); }

/* ─────────────────────────────────────────────────────────── */
/* 9. Cards                                                    */
/* ─────────────────────────────────────────────────────────── */

.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--s-border);
  border-radius: 10px;
  padding: 1.25rem;
  background: var(--s-surface);
  transition: all 0.15s ease;
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li::before,
.md-typeset .grid > .card::before {
  display: none;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-2px);
  border-color: var(--s-accent);
  background: var(--s-hover);
}

.md-typeset .grid.cards > ul > li .twemoji,
.md-typeset .grid > .card .twemoji {
  color: var(--s-accent);
}

/* ─────────────────────────────────────────────────────────── */
/* 10. Content tabs                                            */
/* ─────────────────────────────────────────────────────────── */

.md-typeset .tabbed-labels > label {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  color: var(--s-text-muted);
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--s-text);
}

.md-typeset .tabbed-labels::after {
  background: var(--s-accent);
}

/* ─────────────────────────────────────────────────────────── */
/* 11. Footer                                                  */
/* ─────────────────────────────────────────────────────────── */

.md-footer {
  border-top: 1px solid var(--s-border-dim);
}

/* ─────────────────────────────────────────────────────────── */
/* 12. Misc                                                    */
/* ─────────────────────────────────────────────────────────── */

.md-typeset hr {
  border: 0;
  height: 1px;
  background: var(--s-border);
  margin: 2.5rem 0;
}

.md-typeset blockquote {
  border-left: 3px solid var(--s-accent);
  background: var(--s-surface);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 1rem;
  font-style: normal;
  color: var(--s-text-muted);
}

.md-typeset .md-button {
  border-radius: 6px;
  padding: 0.5rem 1.2rem;
  font-weight: 600;
  font-size: 0.85rem;
}

.md-typeset .md-button--primary {
  background: var(--s-accent);
  border: none;
  color: white;
}

.md-typeset .md-button--primary:hover {
  background: var(--s-accent-hover);
}

/* Scrollbars — dark */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 8px; height: 8px;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: var(--s-bg);
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: var(--s-border);
  border-radius: 4px;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: var(--s-text-dim);
}

::selection {
  background: rgba(217, 119, 6, 0.25);
}

html {
  scroll-behavior: smooth;
}

/* Images — rounded corners, border, constrained width */
.md-typeset img {
  border-radius: 8px;
  border: 1px solid var(--s-border);
  max-width: 100%;
}

/* Hide broken / placeholder images gracefully */
.md-typeset img[src$=".png"]:not([width]) {
  min-height: 40px;
  background: var(--s-surface);
}