/* AYA's own palette and type on top of mdBook's default "light" theme.
 *
 * book.toml pins default-theme AND preferred-dark-theme to "light" — both
 * of mdBook's own theme-picker branches always resolve to the "light" CSS
 * class, so mdBook itself never switches palettes. Every variable below is
 * scoped to :root/html directly (not `.light`) so a STALE `mdbook-theme`
 * value already sitting in a visitor's localStorage from a previous visit
 * — before the theme-picker was hidden, or from another mdBook site
 * sharing the same origin — can never un-brand this page by landing on a
 * different theme class; these variables apply unconditionally. Each is
 * redefined a second time inside `@media (prefers-color-scheme: dark)`
 * against the same `:root, html` selector — same specificity, later in the
 * cascade (this file loads last), so it wins outright with no JS or theme
 * class involved. The result: this book's colors track the visitor's OS
 * setting continuously, not just on first load the way mdBook's own
 * localStorage-persisted theme picker would.
 *
 * Values are ported from packages/aya-ui/src/tokens.ts (the same tokens
 * the desktop app and apps/web build their own palette from), mapped onto
 * mdBook's own variable names so the rest of its stylesheets — sidebar,
 * search, tables, blockquotes — pick them up with no selector overrides of
 * our own needed. Sequence-diagram colors are the same tokens again, kept
 * in theme/mermaid-init.js since mermaid takes them as JS theme variables,
 * not CSS custom properties.
 */

:root,
html {
  --bg: #f1f5fd;
  --fg: #0f172a;

  --sidebar-bg: #ffffff;
  --sidebar-fg: #0f172a;
  --sidebar-non-existant: #5f6f85;
  --sidebar-active: #2563eb;
  --sidebar-spacer: #e4ecfc;
  --sidebar-header-border-color: #e4ecfc;

  --icons: #5f6f85;
  --icons-hover: #0f172a;

  --links: #2563eb;
  --inline-code-color: #2563eb;

  --theme-popup-bg: #ffffff;
  --theme-popup-border: #e4ecfc;
  --theme-hover: #e4ecfc;

  --quote-bg: #eef0f2;
  --quote-border: #e4ecfc;

  --warning-border: #b45309;

  --table-border-color: #e4ecfc;
  --table-header-bg: #e4ecfc;
  --table-alternate-bg: rgba(37, 99, 235, 0.05);

  --searchbar-border-color: #e4ecfc;
  --searchbar-bg: #ffffff;
  --searchbar-fg: #0f172a;
  --searchbar-shadow-color: rgba(15, 23, 42, 0.16);
  --searchresults-header-fg: #5f6f85;
  --searchresults-border-color: #e4ecfc;
  --searchresults-li-bg: #e4ecfc;
  --search-mark-bg: #fde68a;

  --color-scheme: light;

  --footnote-highlight: #2563eb;
  --overlay-bg: rgba(15, 23, 42, 0.45);

  --blockquote-note-color: #4f6df5;
  --blockquote-tip-color: #16a34a;
  --blockquote-important-color: #6366f1;
  --blockquote-warning-color: #b45309;
  --blockquote-caution-color: #dc2626;

  /* Hero gradient stops — see the "landing-page hero" block below for why
   * these are hand-darkened rather than the raw --accent/--secondary
   * token values. */
  --hero-gradient-start: #2563eb;
  --hero-gradient-end: #4f46c9;
}

@media (prefers-color-scheme: dark) {
  :root,
  html {
    --bg: #131417;
    --fg: #e6e7ea;

    --sidebar-bg: #1b1d21;
    --sidebar-fg: #e6e7ea;
    --sidebar-non-existant: #9aa0aa;
    --sidebar-active: #6b85ff;
    --sidebar-spacer: #2a2d33;
    --sidebar-header-border-color: #2a2d33;

    --icons: #9aa0aa;
    --icons-hover: #e6e7ea;

    --links: #6b85ff;
    --inline-code-color: #6b85ff;

    --theme-popup-bg: #1b1d21;
    --theme-popup-border: #2a2d33;
    --theme-hover: #24262b;

    --quote-bg: #24262b;
    --quote-border: #2a2d33;

    --warning-border: #fbbf24;

    --table-border-color: #2a2d33;
    --table-header-bg: #24262b;
    --table-alternate-bg: rgba(107, 133, 255, 0.08);

    --searchbar-border-color: #2a2d33;
    --searchbar-bg: #1b1d21;
    --searchbar-fg: #e6e7ea;
    --searchbar-shadow-color: rgba(0, 0, 0, 0.55);
    --searchresults-header-fg: #9aa0aa;
    --searchresults-border-color: #2a2d33;
    --searchresults-li-bg: #24262b;
    --search-mark-bg: #92722a;

    --color-scheme: dark;

    --footnote-highlight: #6b85ff;
    --overlay-bg: rgba(0, 0, 0, 0.65);

    --blockquote-note-color: #6b85ff;
    --blockquote-tip-color: #4ade80;
    --blockquote-important-color: #8991ff;
    --blockquote-warning-color: #fbbf24;
    --blockquote-caution-color: #f87171;

    /* Same gradient as light: this is a fixed brand surface, not part of
     * the page's own light/dark background, and dark scheme's own
     * --accent (#6b85ff) is too light on its own to hold white hero text
     * above 4.5:1 at all (~3.4:1) — see the hero block below. */
  }
}

/* ---- type scale --------------------------------------------------------
 * mdBook sets the document root to font-size: 62.5% — a common trick that
 * makes 1rem == 10px against a 16px browser default, so headings sized in
 * "the obvious" rem numbers come out FAR smaller than intended (a naive
 * 1.4rem "h3" renders at 14px, actually smaller than 16px body text). Every
 * value below is chosen against that real 10px rem, not the 16px a browser
 * default would suggest: 4rem = 40px, 3rem = 30px, 2.2rem = 22px. Body
 * text is mdBook's own 1.6rem (16px) — left alone, not redeclared here.
 */

html {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}

code,
pre,
.hljs {
  --mono-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.content h1 {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 0;
}

.content h2 {
  font-size: 3rem;
  font-weight: 650;
  margin-top: 2.4em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--table-border-color);
}

.content h3 {
  font-size: 2.2rem;
  font-weight: 650;
  margin-top: 1.8em;
}

.content p,
.content li {
  line-height: 1.6em;
}

/* ---- wider content column ----------------------------------------------- */

:root {
  --content-max-width: 880px;
}

/* ---- code blocks on the panel surface -----------------------------------
 * Sized independently, not via one shared `pre, code { font-size }` rule —
 * a <pre><code> block would otherwise apply 0.85em TWICE (once inherited
 * from pre, once from the code rule itself), compounding to ~0.72em
 * (11.56px against a 16px base) despite the number written here looking
 * like a single 0.85em step. Each selector below applies its own 0.85em
 * exactly once: a fenced block via `.content pre` alone (code inside it
 * inherits, unchanged), inline code via `.content :not(pre) > code` alone
 * — both land at the same 13.6px, just reached without compounding.
 */

.content pre {
  font-size: 0.85em;
  background: var(--sidebar-bg);
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
}

.content :not(pre) > code {
  font-size: 0.85em;
  background: var(--sidebar-bg);
  border: 1px solid var(--table-border-color);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* ---- dark-mode syntax highlighting ---------------------------------------
 * mdBook's own highlight stylesheet (highlight-*.css, "Base16 Atelier Dune
 * Light") is loaded unconditionally — book.toml pins BOTH default-theme and
 * preferred-dark-theme to "light", so mdBook itself never swaps in its own
 * dark highlight sheet — and sets `.hljs { background: #f6f7f6; color: #000
 * }` with no media query of its own. `.content pre`'s dark background
 * (--sidebar-bg, `#1b1d21`) paints the OUTER `<pre>`, but the INNER
 * `<code class="hljs">` is `display: block`, filling that box with its own
 * opaque near-white fill on top — 39 of the site's 42 fenced blocks
 * rendered as flat white slabs in dark mode before this fix; the mermaid
 * diagram blocks were the only ones unaffected, since their `<code>` gets
 * replaced by rendered SVG rather than highlight.js markup (the separate
 * "mermaid diagrams keep the panel surface" rule below covers those).
 * Loaded after highlight-*.css (this file loads last), so this wins on the
 * cascade with
 * no extra specificity needed: `.hljs` itself goes transparent (revealing
 * `pre`'s own dark fill), and every token class gets a color chosen for
 * ≥4.5:1 against that `#1b1d21` surface, reusing this theme's own existing
 * dark accent tokens rather than inventing a parallel palette.
 */
@media (prefers-color-scheme: dark) {
  .hljs {
    background: transparent;
    color: var(--fg);
  }
  .hljs-comment,
  .hljs-quote {
    color: #9aa0aa; /* --fg-muted (dark) — ~6.4:1 on #1b1d21 */
  }
  .hljs-variable,
  .hljs-template-variable,
  .hljs-attribute,
  .hljs-attr,
  .hljs-tag,
  .hljs-name,
  .hljs-regexp,
  .hljs-link,
  .hljs-selector-id,
  .hljs-selector-class {
    color: #f87171; /* --blockquote-caution-color (dark) — ~6.1:1 */
  }
  .hljs-number,
  .hljs-meta,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-literal,
  .hljs-type,
  .hljs-params {
    color: #fbbf24; /* --blockquote-warning-color (dark) — ~10.1:1 */
  }
  .hljs-string,
  .hljs-symbol,
  .hljs-bullet {
    color: #4ade80; /* --blockquote-tip-color (dark) — ~9.7:1 */
  }
  .hljs-title,
  .hljs-section {
    color: #6b85ff; /* --links (dark) — ~5.2:1 */
  }
  .hljs-keyword,
  .hljs-selector-tag {
    color: #8991ff; /* --blockquote-important-color (dark) — ~6.1:1 */
  }
}

/* ---- tables with hairlines ----------------------------------------------- */

.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
}

.content table th,
.content table td {
  padding: 0.5em 0.8em;
  border: 1px solid var(--table-border-color);
  text-align: left;
}

.content table thead tr {
  border-bottom: 2px solid var(--table-border-color);
}

.content table tbody tr:nth-child(2n) {
  background: var(--table-alternate-bg);
}

/* ---- the reference page's operation table --------------------------------
 * `reference.md` wraps its generated table in `<div class="operation-table">`
 * (mdBook still parses the markdown table inside it as a real GFM table —
 * the blank lines on both sides keep it out of raw-HTML-block mode). At
 * this book's 880px content width, five columns of unbroken content
 * (`table-layout: auto`'s default) forced the table wider than the column,
 * pushing Purpose off the right edge and leaving mdBook's own
 * `.table-wrapper` (`overflow-x: auto`) as the only way to read it — a
 * reference table should be readable without scrolling at a normal
 * viewport width. `table-layout: fixed` plus explicit percentage widths
 * make every column share the container's actual width instead of
 * growing to fit its widest cell; `.table-wrapper`'s own scroll stays as
 * a fallback for genuinely narrow (phone) viewports, not something a
 * 1280px-wide reader should ever hit.
 */
.operation-table table {
  table-layout: fixed;
  width: 100%;
}

.operation-table th:nth-child(1),
.operation-table td:nth-child(1) {
  width: 13%; /* Group — "Capabilities"/"Integrations" (the two longest
                 group names) were breaking mid-word at 12%; nowrap below
                 needs the extra 1% (taken from Purpose) to fit them on
                 one line. */
}
.operation-table th:nth-child(2),
.operation-table td:nth-child(2) {
  width: 10%; /* Method */
}
.operation-table th:nth-child(3),
.operation-table td:nth-child(3) {
  width: 30%; /* Path */
}
.operation-table th:nth-child(4),
.operation-table td:nth-child(4) {
  width: 22%; /* Scope — `execution:heartbeat` (the longest chip, ~180px)
                 needs more than a plain 20% cut gave it once cell padding
                 is subtracted; verified against measured scrollWidth, not
                 just eyeballed. */
}
.operation-table th:nth-child(5),
.operation-table td:nth-child(5) {
  width: 25%; /* Purpose */
}

.operation-table td,
.operation-table th {
  overflow-wrap: break-word;
}

/* Group (single words like "Capabilities"/"Integrations"), Method (a
 * single word like "GET"/"POST"), and Scope (chips like
 * `execution:heartbeat`, the longest at 180px) never benefit from a
 * mid-word break — force one unbroken line on each so the column widths
 * above (sized to fit the longest real value) are what actually governs,
 * not word-wrap's own guess. */
.operation-table th:nth-child(1),
.operation-table td:nth-child(1),
.operation-table th:nth-child(2),
.operation-table td:nth-child(2),
.operation-table th:nth-child(4),
.operation-table td:nth-child(4) {
  white-space: nowrap;
}

/* A path like `/api/agent/workers/self/commands/{id}/heartbeat` is one
 * unbroken run of characters with no space for the browser to wrap on —
 * the generator (generate-operation-table.jq) already emits it as
 * `<code>` with a `<wbr>` after every `/`, the boundary a reader already
 * parses a path by; `anywhere` is a safety net for anything that still
 * doesn't fit, not the primary mechanism. */
.operation-table td:nth-child(3) code {
  overflow-wrap: anywhere;
}

/* The Scope column's chips (`execution:heartbeat`, the longest at ~180px)
 * have no `<wbr>` help and no `/`-shaped natural break the way a path
 * does — `anywhere` on them would just pick an arbitrary mid-word split.
 * `white-space: nowrap` on the cell itself (above) is what actually keeps
 * a scope name on one line at 1280px; this just keeps `overflow-wrap`
 * from fighting that inside the `<code>` chip specifically. */
.operation-table td:nth-child(4) code {
  overflow-wrap: normal;
}

/* Below 700px, five fixed-percentage columns squeeze every cell's content
 * regardless of width — the Scope/Method nowrap above would then just
 * clip instead of wrap. Let the columns size to their natural content
 * instead and hand horizontal scrolling to mdBook's own `.table-wrapper`
 * (`overflow-x: auto`), the documented fallback for a genuinely narrow
 * viewport (see this block's own opening comment above). */
@media (max-width: 700px) {
  .operation-table table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
  }
}

/* ---- landing-page hero -----------------------------------------------------
 * The gradient stops are named custom properties, not raw hex, so their
 * provenance is legible from the :root block above: --hero-gradient-start
 * is aya-ui's own --accent (#2563EB) unchanged; --hero-gradient-end is
 * --secondary (#6366F1) hand-darkened toward indigo. --secondary itself,
 * used verbatim, leaves white hero text at ~4.6:1 at that edge — under the
 * 5:1 floor this hero targets across its whole width. #4f46c9 keeps the
 * same hue family and clears ~6.8:1; the start edge (--accent unchanged)
 * separately clears ~5.2:1. One gradient for both color schemes: the hero
 * is a fixed brand surface, not themed off the page's own light/dark
 * background tokens.
 */

.content .hero {
  margin: -1em -1.2em 2em;
  padding: 2.2em 1.6em;
  /* Needed for the phone-width rule below: with the default content-box
   * sizing, `width: 100%` plus this rule's own horizontal padding would
   * add up to MORE than 100% of the container, overflowing the content
   * column by exactly the padding's width. border-box folds padding
   * inside the 100%, so `width: 100%` really does mean "the container's
   * width," at every breakpoint. */
  box-sizing: border-box;
  background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-end) 100%);
  color: #ffffff;
  border-radius: 12px;
}

.content .hero h1 {
  color: inherit;
  margin-bottom: 0.4em;
}

.content .hero strong {
  color: inherit;
}

.content .hero a {
  color: inherit;
  text-decoration: underline;
}

/* mdBook's own `.content .header:link/:visited` rule (a heading's
 * self-link wrapper, incl. the hero's own <h1>) outranks `.content .hero a`
 * above on specificity (three classes/pseudo-classes vs. two-plus-element),
 * so it kept winning and rendering the hero's h1 in mdBook's near-black
 * default heading-link color instead of white — 3.58:1 on the gradient, a
 * failure. This selector is specific enough to beat it. */
.content .hero a.header:link,
.content .hero a.header:visited {
  color: inherit;
}

@media (max-width: 700px) {
  .content .hero {
    /* Stays INSIDE the content box instead of breaking out to the
     * viewport edge. The previous 100vw/50%/-50% breakout assumed
     * .content's ancestors were plain in-flow boxes, but
     * #mdbook-content is itself a horizontal scroll container
     * (`overflow-x: auto` in mdBook's own CSS) — a descendant that
     * pokes past ITS box gets clipped there, not bled to the actual
     * viewport edge, which cut ~15px of hero text off both sides at
     * 390px wide. Full width of the content column, no negative
     * margins, 12px radius kept (matching the desktop rule instead of
     * zeroing it out). */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
    margin-top: 0;
    margin-bottom: 1.5em;
    padding: 1.6em 1em;
    border-radius: 12px;
  }
}

/* ---- mermaid diagrams keep the panel surface, not a stark white box ------ */

.content pre.mermaid,
.mermaid svg {
  background: transparent;
}

/* ---- one look, not six ---------------------------------------------------
 * mdBook's own theme-picker (Light/Rust/Coal/Navy/Ayu/Auto) switches the
 * html class away from "light" straight into mdBook's stock, unbranded
 * palettes. Hiding the picker keeps every visitor on the palette above,
 * which already follows the system light/dark preference on its own (see
 * the top of this file) — and since that palette is scoped to :root/html
 * directly rather than `.light`, a stale picker choice from before this
 * was hidden can't un-brand the page even if the picker's own click
 * handlers still run.
 */
#mdbook-theme-toggle {
  display: none;
}

/* ---- sidebar: overlay with a scrim under 700px, not a content push -------
 * mdBook's own narrow-screen behavior slides the SIDEBAR in via
 * `.sidebar`'s fixed positioning while shoving `.page-wrapper` sideways
 * with a transform/margin to "make room" — a push, not an overlay. Below
 * 700px this cancels that push and dims the page behind the sidebar
 * instead, the more usual mobile-nav pattern. The sidebar itself is
 * already `position: fixed` in mdBook's own CSS, so it already draws on
 * top of the page; only the page's own reaction to it changes here.
 */
@media (max-width: 700px) {
  #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
    transform: none !important;
    margin-inline-start: 0 !important;
  }

  #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 15;
  }

  .sidebar {
    z-index: 20;
  }
}