/* =========================================================================
   SIRAYA Docs — BASE stylesheet (theme-agnostic)

   This file holds all *structure*: layout, spacing, component shapes, type
   scale and behaviour. It contains NO literal colors — every color is read
   from a CSS custom property ("token") that the ACTIVE THEME defines.

   Themes live in `stylesheets/themes/<name>.css` and are selected at build
   time by the `SIRAYA_THEME` env var (see mkdocs.yml / docker-compose.yml).
   The selected theme file is linked AFTER this one (via overrides/main.html),
   so its tokens are what these rules resolve to.

   To build a new theme, copy an existing file in themes/ and change the token
   values. You never need to edit this file.

   Token contract a theme must define (in :root for the light/default scheme,
   and again under [data-md-color-scheme="slate"] for the dark scheme):
     Accent : --ed-orange  --ed-orange-dark  --ed-orange-light
              --ed-orange-rgb (e.g. "241,90,41")  --ed-orange-tint
              --ed-orange-tint-2  --ed-on-accent
     Neutral: --ed-paper  --ed-surface  --ed-ink  --ed-ink-2  --ed-ink-soft
              --ed-ink-rgb (e.g. "42,38,34")  --ed-border  --ed-heading
              --ed-heading-2  --ed-nav-section  --ed-header-bg
              --ed-header-border  --ed-code-inline-bg  --ed-code-inline-fg
     Material: --md-default-bg-color etc. (see a theme file for the full list)
   ========================================================================= */

:root {
    --or-radius: 12px;   /* structural constant, shared by every theme */

    /* Legacy OpenRouter token names kept as aliases so older rules and any
       inline usages keep working; they point at the active theme's accent. */
    --or-accent:       var(--ed-orange);
    --or-accent-dark:  var(--ed-orange-dark);
    --or-accent-light: var(--ed-orange-light);
    --or-border:       var(--ed-border);
    --or-text:         var(--ed-ink);
    --mr-indigo:       var(--ed-orange);
    --mr-indigo-light: var(--ed-orange-light);
    --mr-indigo-dark:  var(--ed-orange-dark);
}

/* =========================================================================
   Header + top tabs
   ========================================================================= */
.md-header { box-shadow: none; }
.md-header,
.md-tabs {
    background-color: var(--ed-header-bg) !important;
    background-image: none !important;
    color: var(--ed-ink);
    --md-header-fg-color: var(--ed-ink);
    border-bottom: 1px solid var(--ed-header-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.md-tabs { border-bottom: 1px solid var(--ed-header-border); }

.md-header__title { font-weight: 700; letter-spacing: -0.01em; }

/* Light/dark palette toggle: recolor + round hover, keep Material's sizing. */
[data-md-component="palette"] label.md-header__button.md-icon {
    border-radius: 999px;
    color: var(--ed-ink-2);
    opacity: 1;
    transition: background-color 140ms, color 140ms;
}
[data-md-component="palette"] label.md-header__button.md-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}
[data-md-component="palette"] label.md-header__button.md-icon:hover {
    background-color: var(--ed-orange-tint);
    color: var(--ed-orange);
}
[data-md-component="palette"] input:focus-visible + label.md-header__button.md-icon {
    outline: none;
    box-shadow: 0 0 0 3px var(--ed-orange-tint);
}

/* Runtime theme switcher (button + dropdown, injected by editorial.js). */
.ed-theme { position: relative; display: inline-flex; align-items: center; }
.ed-theme-btn {
    border-radius: 999px;
    color: var(--ed-ink-2);
    cursor: pointer;
    transition: background-color 140ms, color 140ms;
}
.ed-theme-btn svg { width: 1.15rem; height: 1.15rem; }
.ed-theme-btn:hover { background-color: var(--ed-orange-tint); color: var(--ed-orange); }
.ed-theme-menu {
    position: fixed;   /* fixed + JS-positioned so the header's overflow can't clip it */
    min-width: 12.5rem;
    padding: 0.35rem;
    background: var(--ed-surface);
    border: 1px solid var(--ed-border);
    border-radius: 11px;
    box-shadow: 0 10px 34px rgba(var(--ed-ink-rgb), 0.22);
    z-index: 20;
    display: none;
}
.ed-theme-menu[data-open="true"] { display: block; }
.ed-theme-menu__title {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-ink-soft);
    padding: 0.3rem 0.55rem 0.4rem;
}
.ed-theme-opt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.42rem 0.55rem;
    border: 0;
    background: none;
    border-radius: 7px;
    color: var(--ed-ink);
    font-size: 0.72rem;
    cursor: pointer;
}
.ed-theme-opt:hover { background: var(--ed-orange-tint); color: var(--ed-orange-dark); }
.ed-theme-opt__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(var(--ed-ink-rgb), 0.18) inset;
    flex: 0 0 auto;
}
.ed-theme-opt__label { flex: 1 1 auto; }
.ed-theme-opt[aria-checked="true"] { color: var(--ed-orange); font-weight: 600; }
.ed-theme-opt[aria-checked="true"]::after {
    content: "";
    width: 0.55rem; height: 0.32rem;
    border-left: 2px solid var(--ed-orange);
    border-bottom: 2px solid var(--ed-orange);
    transform: rotate(-45deg) translateY(-1px);
    flex: 0 0 auto;
}

/* The tab strip starts under the logo; the title starts after it. editorial.js
   measures the title and sets the exact indent so "Get Started" lines up with
   the title text (robust to logo size changes). This is just a fallback. */
.md-tabs__list { margin-left: 3rem; }

.md-tabs__link {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.72;
    transition: opacity 80ms, color 80ms;
}
.md-tabs__link:hover { opacity: 1; }
.md-tabs__item--active .md-tabs__link {
    opacity: 1 !important;
    color: var(--ed-orange) !important;
    border-bottom: 2px solid var(--ed-orange) !important;
    padding-bottom: 3px !important;
}

/* =========================================================================
   Search — soft box, clear focus, ⌘K hint (kbd injected by editorial.js)
   ========================================================================= */
.md-search__form {
    border-radius: 11px;
    box-shadow: none;
    background-color: rgba(var(--ed-ink-rgb), 0.035);
    border: 1px solid rgba(var(--ed-ink-rgb), 0.07);
    transition: border-color 140ms, background-color 140ms, box-shadow 140ms;
}
.md-search__form:hover { background-color: rgba(var(--ed-ink-rgb), 0.06); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form,
.md-search__input:focus ~ .md-search__form,
.md-search__form:focus-within {
    border-color: rgba(var(--ed-orange-rgb), 0.5);
    background-color: var(--ed-surface);
    box-shadow: 0 0 0 3px var(--ed-orange-tint);
}
.md-search__input { font-size: 0.72rem; }
.md-search__input::placeholder { color: var(--ed-ink-soft); opacity: 0.75; }
/* Material colors the magnifier white (for colored headers); on our themed
   surface that's invisible. Tie it to the muted ink token. */
.md-header .md-search__icon,
.md-search__icon[for] { color: var(--ed-ink-soft) !important; }
.md-search__icon svg { fill: currentColor; }

.ed-kbd {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
    padding: 0.14em 0.5em;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ed-ink-soft);
    background: rgba(var(--ed-ink-rgb), 0.06);
    border: 1px solid rgba(var(--ed-ink-rgb), 0.07);
    border-radius: 6px;
    opacity: 0.85;
    pointer-events: none;
}
.md-search__form:focus-within .ed-kbd { opacity: 0; }

/* =========================================================================
   Layout — 3 columns; constrained reading measure; right-hand TOC
   ========================================================================= */
@media screen and (min-width: 1220px) {
    .md-grid { max-width: 88rem; }
    .md-sidebar--primary { width: 15.5rem !important; }
    .md-sidebar--secondary { width: 13rem !important; }
}
.md-content { max-width: 100%; }
.md-content__inner {
    max-width: 46rem;     /* ≈ 720–736px, ~70–80 characters */
    margin-right: auto;
}
@media screen and (min-width: 1220px) {
    .md-content__inner { margin-left: 0.8rem; }
}

.md-sidebar--secondary { display: block !important; }
.md-sidebar--secondary .md-nav__title {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ed-ink-soft);
    padding-bottom: 0.4rem;
}
.md-sidebar--secondary .md-nav__list { border-left: 1px solid var(--ed-border); }
.md-sidebar--secondary .md-nav__item { padding-left: 0 !important; }
.md-sidebar--secondary .md-nav__link {
    margin: 0;
    padding: 0.28em 0.8em;
    border-radius: 0;
    border-left: 2px solid transparent;
    margin-left: -1px;
    color: var(--ed-ink-soft);
    font-size: 0.7rem;
}
.md-sidebar--secondary .md-nav__link:hover { color: var(--ed-orange); background: none; }
.md-sidebar--secondary .md-nav__link--active {
    color: var(--ed-orange) !important;
    font-weight: 600;
    border-left-color: var(--ed-orange);
    background: none !important;
}

/* =========================================================================
   Header band — eyebrow + breadcrumb + H1 rhythm
   ========================================================================= */
.md-path {
    font-size: 0.7rem;
    margin-top: 0.4rem;
    margin-bottom: 0.2rem;
    color: var(--ed-ink-soft);
}
.md-path__item a { color: var(--ed-ink-soft); }
.md-path__item a:hover { color: var(--ed-orange); }
.md-path__item:last-child { color: var(--ed-ink-2); font-weight: 500; }

.ed-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ed-orange);
    margin: 0.2rem 0 0.55rem;
}
.ed-lede {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ed-ink-soft);
    margin: -0.2rem 0 1.6rem;
    max-width: 42rem;
}

.md-typeset h1 {
    font-size: 2.4em;
    font-weight: 700;            /* Play ships 400/700; avoid faux-bold */
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin-bottom: 0.35em;
    color: var(--ed-heading);
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--ed-border);
}
.md-typeset h2 {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: -0.012em;
    margin-top: 2.4em;
    color: var(--ed-heading-2);
}
.md-typeset h3 {
    font-size: 1.18em;
    font-weight: 600;
    margin-top: 1.8em;
}

/* =========================================================================
   Typography
   ========================================================================= */
/* Reading size: smaller than before so more fits and lines breathe. Headings
   and component text are em-based, so they scale down proportionally with this.
   Generous line-height keeps it soft and easy to read. */
.md-typeset { font-size: 0.8rem; line-height: 1.75; }
.md-typeset p { margin: 0.9em 0; }
.md-typeset li { line-height: 1.7; }

.md-typeset a {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--ed-orange-tint-2);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color 80ms, text-decoration-color 80ms;
}
.md-typeset a:hover {
    color: var(--ed-orange-dark);
    text-decoration-color: var(--ed-orange);
}
.md-nav a,
.md-tabs a,
.md-path a,
.md-header a,
.md-footer a,
.md-typeset .md-button,
.md-typeset h1 a, .md-typeset h2 a, .md-typeset h3 a,
.md-typeset h4 a, .md-typeset h5 a, .md-typeset h6 a,
.md-typeset .headerlink,
.md-typeset .grid.cards a { text-decoration: none; }

/* =========================================================================
   Left sidebar — accent active item with a left bar
   ========================================================================= */
.md-nav__title,
.md-nav__item--section > .md-nav__link {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 1.2em;
    color: var(--ed-nav-section);
}
.md-nav__item--section > .md-nav__link:not(.md-nav__link--active) { cursor: default; }
.md-nav__item { padding-left: 0.5em !important; }

.md-nav__list .md-nav__link {
    border-radius: 7px;
    padding: 0.34em 0.6em;
    margin: 0.05em 0.4em 0.05em 0;
    border-left: 2px solid transparent;
    transition: background-color 80ms, color 80ms;
}
.md-nav__list .md-nav__link:hover {
    background-color: var(--ed-orange-tint);
    color: var(--ed-orange-dark);
}
.md-nav__list .md-nav__link.md-nav__container {
    padding: 0 !important;
    margin: 0 !important;
    border-left: 0;
}
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
    color: var(--ed-orange) !important;
    font-weight: 600;
    background-color: var(--ed-orange-tint);
    border-left: 2px solid var(--ed-orange);
    border-radius: 0 7px 7px 0;
}
.md-nav__link--active:hover { background-color: var(--ed-orange-tint-2); }

/* =========================================================================
   Images — framed figure + caption (+ glightbox zoom)
   ========================================================================= */
.md-typeset figure.ed-figure { margin: 1.8em 0; text-align: center; }
.md-typeset .ed-figure img,
.md-typeset a.glightbox img {
    border: 1px solid var(--ed-border);
    border-radius: var(--or-radius);
    background: var(--ed-surface);
    padding: 6px;
    box-shadow: 0 1px 2px rgba(var(--ed-ink-rgb), 0.05), 0 8px 24px rgba(var(--ed-ink-rgb), 0.06);
    cursor: zoom-in;
    transition: box-shadow 120ms, transform 120ms;
}
.md-typeset a.glightbox:hover img {
    box-shadow: 0 2px 4px rgba(var(--ed-ink-rgb), 0.08), 0 12px 30px rgba(var(--ed-ink-rgb), 0.10);
}
.md-typeset .ed-figcaption {
    display: block;
    margin-top: 0.7em;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ed-ink-soft);
}

/* =========================================================================
   Back to top — fixed bottom-right circular FAB
   ========================================================================= */
.md-top {
    position: fixed;
    right: 1.6rem !important;
    bottom: 1.6rem !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ed-orange);
    color: var(--ed-on-accent);
    box-shadow: 0 6px 18px rgba(var(--ed-orange-rgb), 0.35);
    font-size: 0;
    z-index: 5;
}
.md-top:hover { background: var(--ed-orange-dark); color: var(--ed-on-accent); }
.md-top .md-icon svg, .md-top svg { width: 1.15rem; height: 1.15rem; }

/* =========================================================================
   Code, callouts, tables
   ========================================================================= */
.md-typeset .highlight,
.md-typeset .highlighttable,
.md-typeset pre > code { border-radius: var(--or-radius); }
.md-typeset .highlight {
    border: 1px solid var(--ed-border);
    border-radius: var(--or-radius);
    overflow: hidden;
}
.md-typeset .highlight pre { margin: 0; }
.md-typeset .highlight > pre > code,
.md-typeset pre > code { border-radius: 0; }
.md-typeset .tabbed-set > .tabbed-content .highlight {
    border-radius: 0 0 var(--or-radius) var(--or-radius);
}

.md-typeset code { border-radius: 6px; padding: 0.1em 0.35em; }
.md-typeset :not(pre) > code {
    background-color: var(--ed-code-inline-bg);
    border: 1px solid var(--ed-border);
    color: var(--ed-code-inline-fg);
}

.md-typeset .admonition,
.md-typeset details {
    border: 1px solid var(--ed-border);
    border-left-width: 1px;
    border-radius: var(--or-radius);
    box-shadow: none;
    font-size: inherit;
    background: var(--ed-surface);
}
.md-typeset .admonition-title,
.md-typeset summary { border-radius: var(--or-radius) var(--or-radius) 0 0; }
/* Tint note/info/abstract toward SIRAYA orange — for both the static (!!!) form
   (.admonition.note) and the collapsible (???) form (details.note), which carry
   the type as a bare class without "admonition". */
.md-typeset .admonition.note,  .md-typeset details.note,
.md-typeset .admonition.info,  .md-typeset details.info,
.md-typeset .admonition.abstract, .md-typeset details.abstract {
    border-color: var(--ed-orange-tint-2);
    background-color: var(--ed-orange-tint);
}
/* Header bar (<p class=admonition-title> or <summary>): stronger tint + orange. */
.md-typeset .note > .admonition-title,
.md-typeset .note > summary,
.md-typeset .info > .admonition-title,
.md-typeset .info > summary,
.md-typeset .abstract > .admonition-title,
.md-typeset .abstract > summary {
    color: var(--ed-orange-dark);
    background-color: var(--ed-orange-tint-2);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before,
.md-typeset .abstract > .admonition-title::before,
.md-typeset .abstract > summary::before { background-color: var(--ed-orange); }
/* Collapse/expand chevron. */
.md-typeset .note > summary::after,
.md-typeset .info > summary::after,
.md-typeset .abstract > summary::after { background-color: var(--ed-orange-dark); }

.md-typeset table:not([class]) {
    border: 1px solid var(--ed-border);
    border-radius: var(--or-radius);
    overflow: hidden;
    box-shadow: none;
    font-size: 1em;   /* track body size; Material defaults tables much smaller */
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td { font-size: inherit; }
.md-typeset table:not([class]) th {
    background-color: var(--ed-surface);
    font-weight: 600;
    color: var(--ed-ink);
}

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

/* =========================================================================
   Hero + grid cards
   ========================================================================= */
.mr-hero { margin: 1.5rem 0 2.5rem; }
.mr-hero h1.md-typeset {
    font-size: 2.6em; font-weight: 700; letter-spacing: -0.025em;
    margin-bottom: .2em; border-bottom: 0; padding-bottom: 0;
}
.mr-hero .mr-subtitle {
    font-size: 1.15em; color: var(--md-default-fg-color--light); margin-top: 0;
}
.md-typeset .grid.cards > :is(ul,ol) > li {
    border: 1px solid var(--ed-border);
    border-radius: var(--or-radius);
    background: var(--ed-surface);
    box-shadow: none;
}
.md-typeset .grid.cards > :is(ul,ol) > li:hover {
    border-color: var(--ed-orange);
    box-shadow: 0 0 0 1px var(--ed-orange);
}

/* =========================================================================
   Mintlify-style API reference components
   ========================================================================= */
.api-grid { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; margin-top: 2rem; }
.api-docs { flex: 1 1 50%; min-width: 300px; }
.api-code { flex: 1 1 40%; min-width: 300px; position: sticky; top: 5rem; }

.api-endpoint-box {
    display: inline-flex; align-items: center;
    background: var(--ed-surface);
    border: 1px solid var(--ed-border);
    border-radius: 8px; padding: 6px 16px; margin-bottom: 24px;
    font-family: monospace; font-size: 0.9em; color: var(--ed-ink-2); word-break: break-all;
}

.api-badge { color: #fff; font-weight: bold; font-size: 0.8em; padding: 4px 8px; border-radius: 4px; margin-right: 12px; }
.api-badge-post   { background-color: #10b981; }
.api-badge-get    { background-color: #3b82f6; }
.api-badge-put    { background-color: #f59e0b; }
.api-badge-delete { background-color: #ef4444; }

.api-params-container { margin-top: 10px; margin-bottom: 30px; }
.api-param { border-top: 1px solid var(--ed-border); padding: 16px 0; }
.api-param:last-child { border-bottom: 1px solid var(--ed-border); }
.api-param-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.api-param-name { font-weight: 600; font-family: monospace; font-size: 0.9em; color: var(--ed-ink); }
.api-param-type { font-size: 0.85em; color: var(--ed-ink-soft); }
.api-param-required {
    font-size: 0.75em; color: var(--ed-orange-dark);
    background: var(--ed-orange-tint); padding: 2px 6px; border-radius: 4px;
    border: 1px solid var(--ed-orange-tint-2); font-weight: 500;
}
.api-param-default {
    font-size: 0.75em; color: var(--ed-ink-2);
    background: var(--ed-code-inline-bg); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--ed-border);
}
.api-param-desc { font-size: 1em; color: var(--ed-ink-2); line-height: 1.6; }
.api-param-desc p { margin: 0; }

/* Syntax-ish accent colors (kept fixed across themes for recognisability) */
.type-string  { color: #0d8a5f !important; }
.type-integer { color: #2563eb !important; }
.type-number  { color: #b45309 !important; }
.type-boolean { color: #c2410c !important; }
[data-md-color-scheme="slate"] .type-string  { color: #34d399 !important; }
[data-md-color-scheme="slate"] .type-integer { color: #60a5fa !important; }
[data-md-color-scheme="slate"] .type-number  { color: #fbbf24 !important; }
[data-md-color-scheme="slate"] .type-boolean { color: #fdba74 !important; }

.lang-curl   { color: #4da52e; font-weight: 600; }
.lang-python { color: #3776ab; font-weight: 600; }
[data-md-color-scheme="slate"] .lang-curl   { color: #6ece4d; }
[data-md-color-scheme="slate"] .lang-python { color: #5a9fd4; }