/*
 * Public docs page layout — the two-column content region + "On this page" rail
 * (working-plan §5, public docs page design). Ported verbatim from the product
 * mock (mocks/docs-vm-show.html → mocks.css `.docs-main` / `.toc` rules). Plain
 * token-consuming CSS, the same pattern as prose.css/editor.css, so it tracks the
 * active Ekosystem theme and survives Tailwind purge.
 *
 * The outer shell (header, left sidebar) is the gateway's; this only styles what
 * our body fragment renders inside <main>: the article column + the TOC rail.
 *
 * `.toc__list a.active` is toggled by the toc scroll-spy Stimulus controller as the
 * reader scrolls; the links still work without JS.
 */

/* ── Documentation home (/docs + host root) ──────────────────────────────────
 * The landing page: a brand hero banner above a "Browse by service" card grid.
 * The hero is brand chrome — a solid dark Krystal green with the Krystal mark
 * (which carries the #297E2A→#1B391D gradient itself) bleeding off the top-right
 * corner — so its colour is the brand green rather than a theme token. The body
 * beneath, and the section title, consume theme tokens like the rest of the
 * docs surface. The cards themselves are hand-built anchors styled with Tailwind
 * token utilities in the view; this only lays out the hero and the body. */
.docs-home {
  width: 100%;
}

/* Full-bleed green band; its inner content is re-constrained to the same
 * centered 1200px column as the body so the heading lines up with the cards. */
.docs-hero {
  position: relative;
  overflow: hidden;
  background: #1b391d;
  color: #fff;
}

.docs-hero__content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 48px;
}

/* Hold the prose itself to a readable width within the full-bleed band. */
.docs-hero__content > * {
  max-width: 640px;
}

.docs-hero__title {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.docs-hero__intro {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.8);
}

/* The mark sits in the top-right, partly clipped by the banner's overflow. */
.docs-hero__mark {
  position: absolute;
  top: -24px;
  right: 0;
  width: 200px;
  height: auto;
  pointer-events: none;
}

.docs-home__body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 48px 80px;
}

.docs-home__section-title {
  margin-bottom: 20px;
  font-size: 1rem;
  font-weight: 600;
  color: oklch(var(--eko-t-color-text));
}

@media (max-width: 1024px) {
  .docs-hero__content {
    padding: 48px 24px;
  }
  .docs-hero__mark {
    width: 140px;
  }
  .docs-home__body {
    padding: 32px 24px 64px;
  }
}

.docs-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 48px;
  padding: 36px 48px 80px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Pages with no h2s render no rail — collapse to a single column so the article
 * is not left with an empty 220px gutter. */
.docs-main--full {
  grid-template-columns: minmax(0, 1fr);
}

/* Below the rail's useful width, stack the columns and drop the rail. */
@media (max-width: 1024px) {
  .docs-main {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 24px 64px;
  }
  .docs-main .toc {
    display: none;
  }
}

/* Inside the eko :page container (docs/pages/show) the container already centres
 * and insets the column, so the grid drops its own max-width/margin/horizontal
 * padding and keeps only the two-column layout and vertical rhythm. Standalone
 * uses (API guide pages, apis/pages/show) keep the self-centring base rule above. */
eko-container .docs-main {
  max-width: none;
  margin: 0;
  padding: 0 0 80px;
}

@media (max-width: 1024px) {
  eko-container .docs-main {
    padding: 0 0 64px;
  }
}

/* Lead paragraph (the page description) at the top of the article column, so the
 * "On this page" rail beside it starts level with the first line of article text
 * rather than below the description. As the grid's sibling it took its gap from
 * the eko :page container's `space-y-5`; inside the column it owns that 20px. */
.docs-lead {
  margin-bottom: 20px;
}

/* Breadcrumb tweaks the eko-breadcrumb component can't do itself: a crumb with no
 * href (an unpublished ancestor) is still link-coloured by the component, so mute
 * it via its reflected href attribute. Scoped to the developer-hub / docs page
 * headers where hrefless crumbs occur. The current-page crumb is a plain span (see
 * the view) styled to match the component's metrics but in the text colour. */
eko-page-header eko-breadcrumb:not([href]) {
  --eko-breadcrumb-color: oklch(var(--eko-t-color-text-weak));
}

.docs-breadcrumb-current {
  font-size: var(--eko-t-font-size-text-sm);
  font-weight: var(--eko-t-font-weight-semibold);
  line-height: var(--eko-t-line-height-text-sm);
  letter-spacing: var(--eko-t-letter-spacing-text-sm);
  color: oklch(var(--eko-t-color-text-weaker));
  white-space: nowrap;
}

/* Markdown/meta toolbar in the page header's "tabs" slot (docs/pages/show): the
 * export actions on the left, the live version's publish date pushed to the far
 * right. The slot region and the divider above it are the component's; the buttons
 * are Ekosystem components — so this owns only the full-width bar layout, the
 * inter-action rule and the date text.
 *
 * eko-page-header renders the "tabs" slot outside its padded inner container, so a
 * plain slotted div sits flush to the header edges. Mirror the component's own
 * padding (page-header.css: --eko-page-header-padding-x 16px, 24px at ≥1024px;
 * --eko-page-header-padding-y 14px) so the toolbar aligns with the title and
 * breadcrumbs above it. */
.doc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 5px 10px;
  border-top: 1px solid oklch(var(--eko-t-color-border));
}

@media (min-width: 1024px) {
  .doc-meta {
    padding-right: 24px;
  }
}

.doc-meta__updated {
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--eko-t-color-text-weaker));
}

/* Drop the publish date on small screens, where eko-page-header collapses to a
 * single column and the toolbar has no room for it alongside the export actions. */
@media (max-width: 640px) {
  .doc-meta__updated {
    display: none;
  }
}

/* The export button groups sit together on the left of the bar, the date held
 * right by the parent's space-between. The min-height reserves the height of a
 * default eko-button (padding-y 8px x2 + line-height-md 20px + 1px border x2), so
 * the bar keeps the same height on pages where no export groups render. */
.doc-meta__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

/* A single export group (markdown or llms.txt): its own clipboard controller
 * scope, laying out the copy button and view link inline, split by a rule. */
.doc-meta__group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Vertical rule between the "Copy" and "View" actions within a group. */
.doc-meta__sep {
  width: 1px;
  height: 20px;
  background: oklch(var(--eko-t-color-border));
}

/* Leave breathing room above a heading when an anchor jump lands on it (TOC links
 * and the heading anchors below), instead of pinning it flush to the scroll edge. */
.prose :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 1rem;
}

/* GitHub-style heading anchors. heading_anchors_controller appends a link to each
 * content heading (anchored to the slug id the renderer stamped on it); it trails
 * the heading text, is revealed on hover/focus, and on click jumps to the section
 * and copies its deep-link URL. */
.heading-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  vertical-align: middle;
  color: oklch(var(--eko-t-color-text-weaker));
  opacity: 0;
  transition: opacity 0.1s ease;
}

.prose :is(h1, h2, h3, h4, h5, h6):hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}

.heading-anchor:hover {
  color: oklch(var(--eko-t-color-text-link));
}

.toc {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  font-size: 13px;
  color: oklch(var(--eko-t-color-text-weak));
}

/* Title row: the align-left glyph + "On this page", in muted sentence case. */
.toc__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: oklch(var(--eko-t-color-text-weaker));
  margin-bottom: 12px;
}

/* The entries sit against a continuous 2px rail; the active entry's 2px accent
 * segment is pulled the full rail width left so it lands exactly on the rail and
 * fully covers the gray. */
.toc__list {
  border-left: 2px solid oklch(var(--eko-t-color-border));
}

.toc__list a {
  display: block;
  padding: 5px 0 5px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: oklch(var(--eko-t-color-text-weak));
  text-decoration: none;
}

.toc__list a:hover {
  color: oklch(var(--eko-t-color-text-link));
}

.toc__list a.active {
  color: oklch(var(--eko-t-color-text));
  border-left-color: oklch(var(--eko-t-color-accent));
  font-weight: 600;
}

/* ── Clearing the sticky page header ─────────────────────────────────────────
 * The public reading surfaces that carry the search trigger in their page header
 * (docs/pages/show, apis/index, apis/show, apis/endpoints/show) pin that header
 * with `sticky top-0 z-1` in the view, so search and the breadcrumb trail follow
 * the reader down the page. eko-page-header is opaque (--eko-t-color-surface) with
 * a bottom border of its own, so nothing is needed to stop the content showing
 * through.
 *
 * z-1 is deliberately the smallest value that works, and it is a ceiling as much
 * as a floor. It has to beat the page's own positioned content, which is z-index
 * auto and later in tree order — a code block's copy button would otherwise ride
 * over the header as the block scrolls under it. It must stay *below* the shell,
 * whose header menus (org switcher, help, notifications, user) are all z-10 in the
 * gateway's light DOM: at z-10 the page header tied with them and won on tree
 * order, since the body is slotted after the shell header, so those panels opened
 * behind it. Everything else shell-side already outranks this (the compact
 * secondary nav is 1, its layout button 50, and the mobile sidebar and header 199
 * and 200), as does the search panel the header opens (eko-command-menu: 999).
 *
 * What does need doing is keeping everything that scrolls into the same top edge
 * clear of it, which needs the header's height as a number: ~132px here — the
 * breadcrumb + title row (padding 14/13px around a ~52px block, over the ≥1024px
 * 64px minimum) plus the .doc-meta toolbar in the "tabs" slot (1px rule + 10px
 * padding + a 38px action row) — and taller below 640px, where eko-page-header
 * stops being a two-column grid and stacks the search trigger under the title.
 *
 * Scoped to the modifier rather than applied to .docs-main outright because the
 * API guide page (apis/pages/show) renders the same grid, rail and prose under a
 * header that does not stick — there the base offsets above are already correct. */
.docs-main--sticky-header {
  --docs-sticky-header: 132px;
}

@media (max-width: 640px) {
  .docs-main--sticky-header {
    --docs-sticky-header: 180px;
  }
}

/* An anchor jump (a TOC link, or a heading anchor's deep link) has to land below
 * the pinned header instead of behind it, so the heading's scroll margin carries
 * the header's height on top of the breathing room above. */
.docs-main--sticky-header .prose :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: calc(var(--docs-sticky-header) + 1rem);
}

/* The rail pins below the header rather than at the viewport top, and loses the
 * header's height from the space it can fill. */
.docs-main--sticky-header .toc {
  top: calc(var(--docs-sticky-header) + 24px);
  max-height: calc(100vh - var(--docs-sticky-header) - 48px);
}