/* Landing-page composition layer.
 *
 * Everything here resolves through design-system tokens — no raw colours,
 * fonts, or spacing values. This file carries only what the system does not
 * yet ship as a class: the OWA-grammar site chrome, the code surface, and the
 * nested-disclosure density inside the Resources and Tools cards.
 *
 * Ported from the ratified design at
 * .agent/reports/mcp-128-landing/full-page-conversion.html, with the three
 * blocking cures from that design's pre-integration accessibility audit
 * applied (each marked "a11y cure" below).
 */

/* Page-scoped re-point of the main grid's gap, which components.css declares
   as `0 var(--gap-l)` — no row gap, because a generic main does not know its
   rows are stacked bands. This page's are. `--main-gap` is on brand.css's
   re-pointable list, so this is the sanctioned lever, not a workaround.

   --band-pad is deliberately NOT re-pointed. The system ships it as a clamp
   that already delivers the OWA rhythm fluidly (40px at 375, 64px at 1440);
   an earlier version of this file overrode it to a hard step at 960px on the
   false premise that bands shipped `--band-pad: 0`. */
[data-page='home'] {
  /* Density-aware, like the lever's own default (--gap-l multiplies
     --density): a brand that turns the one density knob re-flows this
     gap with everything else. At --density: 1 these resolve to the
     plain space tokens — no visual change. */
  --main-gap: calc(var(--density) * var(--space-40));
}
@media (min-width: 960px) {
  [data-page='home'] {
    --main-gap: calc(var(--density) * var(--space-56));
  }
}

/* Content rhythm — full-bleed colour bands (homepage grammar) + section gaps */
.band-lemon {
  --band-bg: var(--surface-decorative-5-subtle);
}
.connect pre,
.connect code {
  background: var(--bg-primary);
}
.connect pre code {
  background: none;
}
[data-region='content'] {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a grid item's automatic minimum size is its
     min-content, and the config snippet's URL is one unbreakable token. Left
     at 1fr the column widens to fit it and the whole page scrolls sideways —
     393px inside a 320px viewport, breaking SC 1.4.10. Zero as the floor lets
     the item shrink, so the <pre> scrolls within itself as intended, which is
     what its tabindex is there to make reachable. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-56);
  padding-bottom: var(--space-80);
}

/* Site chrome — matches OWA TopNavMinimal / LayoutSiteFooter grammar, tokens only.

   The band is an INVERTED SURFACE, and says so: --bg-inverted carries that
   meaning across all four themes, where --bg-btn-primary merely happens to
   resolve to the same values today and would drag the masthead along with any
   re-point of the primary button.

   --focus-ring is swapped wholesale rather than recomposed. A custom property
   is substituted where it is DECLARED: --focus-ring resolves against :root's
   --shadow-ground and inherits down already-resolved, so overriding the ground
   here would not reach it. The previous version of this rule did exactly that
   and measured 1.27:1 in dark — a cure that read correctly and did nothing.

   Declared on the CONTROLS, never the band: the property inherits, so a
   band-level declaration would hand the inverted ring to any future
   non-inverted descendant (a card on a white fill inside the band) — the
   cured failure, mirrored. The system's own doctrine records this
   placement rule (colors_and_type.css §focus). */
.site-tabs {
  background: var(--bg-inverted);
  padding-block: var(--space-16) 0;
}
.site-tabs-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m);
}
.site-tabs .oak-btn {
  --focus-ring: var(--focus-ring-inverted);
  border-bottom-left-radius: var(--radius-square);
  border-bottom-right-radius: var(--radius-square);
  border-bottom-width: var(--border-solid-none);
}

.site-nav {
  background: var(--bg-primary);
  border-bottom: var(--border-solid-s) solid var(--border-neutral-lighter);
  padding-block: var(--space-16);
}
.site-nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-l);
}
.site-nav-logo img,
.site-footer-inner img {
  display: block;
  height: var(--size-icon-xxl);
  width: auto;
  filter: var(--filter-icon);
}
/* Bare focusables (logo links, the scrollable snippet) get the system's
   ring recipe: the kit scopes :focus-visible to its own .oak-* classes,
   so unclassed elements would otherwise fall back to the UA default and
   break the page's one focus vocabulary. */
.site-nav-logo:focus-visible,
.site-footer-inner a:focus-visible,
.connect pre:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring);
}
.site-nav-back {
  margin-left: auto;
  border-radius: var(--radius-circle);
}
.site-footer-meta {
  font-style: normal;
}
[data-region='footer'] {
  background: var(--bg-primary);
}
.site-footer-rule {
  display: block;
  width: 100%;
  height: var(--space-4);
  filter: var(--filter-icon);
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-l);
  padding-block: var(--space-32) var(--space-56);
}
.site-footer-meta p {
  margin: 0;
}
/* Chrome links take text colour, not link blue, so the chrome matches the
   main site — the same convention as .breadcrumbs .oak-link below. :where()
   keeps this at one-class specificity so the system's .oak-link state
   colours (:hover/:visited/:focus-visible) still win over the base chrome
   colour. The padding lifts each line box to a WCAG 2.5.8 target that
   passes on size alone; layout comes from the system's own .oak-cluster. */
:where(.site-footer-legal) .oak-link {
  color: var(--text-primary);
  padding-block: var(--space-4);
}

/* a11y cure — SC 1.4.10 Reflow.
   At 320px the masthead forced 603px of horizontal scroll: the nav rows did
   not wrap and .oak-btn is white-space: nowrap. The rows wrap (above), the
   long label's trailing words are visually hidden at narrow widths, and the
   back pill stops claiming the row. */
@media (max-width: 640px) {
  .site-nav-back {
    margin-left: 0;
  }
  .site-nav-back .site-nav-back__long {
    /* Visually hidden, never display:none: on screen the short form reads
       as a sentence ("Back to"), while "Back to the main Oak website" stays
       the accessible name at every width. Recipe mirrors the design
       system's .oak-visually-hidden. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Hero copy column — OWA Header: 24px gap, left-aligned, own margins off */
.hero-copy {
  align-items: flex-start;
}
.breadcrumbs {
  font: var(--type-body-3);
  letter-spacing: var(--tracking-body);
  align-items: center;
  margin-bottom: var(--space-24);
}
.breadcrumbs .oak-link {
  color: var(--text-primary);
}
.hero-copy h1,
.hero-copy p {
  margin: 0;
}
@media (max-width: 640px) {
  .hero-copy h1 {
    font: var(--type-heading-4);
  }
}

/* Code — the system ships no code surface yet; composed from tokens only */
code {
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading);
  background: var(--bg-subtle);
  border: var(--border-solid-s) solid var(--border-neutral-lighter);
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-4);
}
pre {
  background: var(--bg-subtle);
  border: var(--border-solid-s) solid var(--border-neutral-lighter);
  border-radius: var(--radius-container);
  padding: var(--inset-m);
  margin: 0;
  overflow-x: auto;
}
pre code {
  /* The system's dense-code slot, added for this page — never recompose
     the shorthand from primitives; the slot is what a re-brand re-points. */
  font: var(--type-code-4);
  letter-spacing: var(--tracking-heading);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Card-accordions: card inset governs; oak-accordion control padding stands down */
.oak-card.oak-accordion {
  padding: 0;
}
.oak-card.oak-accordion > summary {
  padding: var(--card-pad);
}
.oak-card.oak-accordion > .oak-accordion__body {
  padding: 0 var(--card-pad) var(--card-pad);
}
.oak-accordion summary h2 {
  margin: 0;
}

/* Interior lists (Resources / Tools) */
.tool-list {
  margin: var(--space-8) 0 0;
}
ul.tool-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}
ul.tool-list li {
  margin: 0;
}
div.tool-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}
.tool-list code {
  font-weight: var(--weight-semibold);
  /* SC 1.4.10 Reflow: resource URIs are single unbreakable tokens
     (docs://oak/guidance/…). Without a break opportunity the longest one
     drives 61px of horizontal scroll at 320px with Resources expanded —
     the grid's minmax(0, 1fr) floor constrains the track, not this list. */
  overflow-wrap: anywhere;
}
.resource-title {
  display: block;
  font: var(--type-body-2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-body);
  margin-top: var(--space-4);
}
.tool-desc {
  display: block;
  font: var(--type-body-3);
  letter-spacing: var(--tracking-body);
  margin-top: var(--space-4);
}

/* Nested disclosures. The marker reset, flex row and chevron now come from
   .oak-disclosure — this file previously hand-rolled them and got it wrong:
   it set `justify-content` and a sized, transformed `::before` without ever
   setting `display: flex` or `list-style: none`. .oak-accordion's rules are
   child-scoped and never reached these nested <details>, so the summary stayed
   `display: list-item`, the ::before stayed an inline box that ignores width,
   height and transform, and every row rendered the native triangle beside a
   2px stub. Only the density and the ::after stand-down remain page-local. */
.tool-list summary {
  min-height: var(--size-target-dense);
  padding: var(--space-4) 0;
  font: var(--type-body-2);
  letter-spacing: var(--tracking-body);
}
.tool-list summary::after {
  content: none;
}
.tool-item > .tool-desc {
  margin: 0 0 var(--space-8);
  padding-left: calc(var(--select-chevron) + var(--space-8) + var(--space-2));
}
.tool-how-to-use {
  margin-top: var(--space-8);
}
.tool-how-to-use > summary {
  font: var(--type-label);
  letter-spacing: var(--tracking-body);
  color: var(--text-subdued);
}
.tool-how-to-use > summary::before {
  border-color: var(--text-subdued);
}
.tool-how-to-use-body {
  margin-top: var(--space-4);
  font: var(--type-body-3);
  letter-spacing: var(--tracking-body);
  white-space: pre-wrap;
}

/* Group labels within Tools */
.tool-group-label {
  font: var(--type-heading-7);
  letter-spacing: var(--tracking-heading);
  margin: var(--space-24) 0 0;
}
.tool-group-label.muted {
  color: var(--text-subdued);
}
.tool-group-hint {
  font: var(--type-body-3);
  letter-spacing: var(--tracking-body);
  color: var(--text-subdued);
  margin: var(--space-4) 0 var(--space-8);
}
.tool-divider {
  border: none;
  border-top: var(--border-solid-s) solid var(--border-neutral-lighter);
  margin: var(--space-24) 0;
}