/*
 * how-we-work.css — AI OS doc-site styling (#246, G3).
 *
 * A LAYER ABOVE brand.css. Every visual decision draws from the shared brand
 * tokens (assets/brand.css); the doc-site-specific tokens below extend that
 * surface without modifying it, so async-digital.com and audient-site
 * consumers are unaffected (the #246 "no regression" constraint, satisfied by
 * construction — brand.css is untouched).
 *
 * Implements the ratified F6 design briefs in notes/design-briefs/:
 *   - dense-reference-pages.md  measure, type scale, tables, links
 *   - code-block-treatment.md   block + inline code (F4)
 *   - navigation-ia.md          sidebar / breadcrumb / TOC
 *   - search-experience.md      overlay (#249)
 *
 * Token taxonomy is documented in brand/doc-site-tokens.md.
 *
 * Not yet implemented (need JS / pipeline support, deferred per the briefs'
 * own "no syntax highlighting v1" phasing): code language-label pill,
 * long-block fade + "show more", per-line diff stripes.
 */

/* ---- Doc-site token layer (extends brand.css) ---- */
:root {
  /* Reading measure: 65ch comfortable, never past 80 (dense-reference brief). */
  --docs-measure: 68ch;
  --docs-sidebar-width: 16rem;
  --docs-toc-width: 14rem;
  --docs-gap: var(--space-xl);
  /* Breathing room between the topbar and the content block. Wide viewports
     leave the rails short and the page top-heavy; dropping the block uses the
     vertical space better. Collapses back to --space-lg on small screens. */
  --docs-top-offset: calc(var(--space-2xl) + var(--space-lg));

  /* Doc body runs a touch larger and looser than marketing body, for
     long-form reading (dense-reference: 17px / line-height 1.6). */
  --docs-body-size: 17px;
  --docs-body-lh: 1.6;

  /* Monospace stack  brand.css defines no mono family; this is doc-local. */
  --docs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --docs-code-size: 14px;
  /* Subtle fill: ~5% of text colour mixed into the page background (F4: about
     4% luminance contrast). Border sits one hairline lighter than the fill. */
  --docs-code-bg: color-mix(in srgb, var(--text) 5%, var(--bg));
  --docs-code-border: var(--border);
}

/* ---- Page frame ---- */
.howework-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--docs-body-size);
  line-height: var(--docs-body-lh);
}

.howework-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-hairline);
}

.howework-topbar .back {
  color: var(--text);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

/* Right-hand topbar group: EN/CY switch (#247) + search trigger. The
   .lang-switch base styles come from styles.css; the apex pages give it a
   top margin that the flex topbar doesn't want. */
.howework-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.howework-topbar .lang-switch {
  margin: 0;
}

.howework-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr) var(--docs-toc-width);
  gap: var(--docs-gap);
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--docs-top-offset) var(--space-lg) var(--space-lg);
  align-items: start;
}

/* ---- Sidebar (navigation-ia: always present, never decorative) ---- */
.docs-sidebar {
  position: sticky;
  top: var(--space-lg);
  font-size: var(--size-small);
  line-height: var(--lh-normal);
  max-height: calc(100vh - 2 * var(--space-lg));
  overflow-y: auto;
}

.docs-section > summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
  color: var(--accent);
  padding: var(--space-xs) 0;
  list-style: none;
}

.docs-section > summary::-webkit-details-marker {
  display: none;
}

.docs-section > summary a {
  color: inherit;
  text-decoration: none;
}

.docs-section ul {
  list-style: none;
  margin: var(--space-xs) 0 var(--space-md);
  padding-left: var(--space-md);
}

.docs-section li {
  margin: var(--space-xs) 0;
}

.docs-sidebar a {
  color: var(--muted);
  text-decoration: none;
  /* >=24px touch target (WCAG 2.5.8 AA) for dense nav links. */
  display: block;
  padding: 5px 0;
}

.docs-sidebar a:hover {
  color: var(--text);
}

.docs-sidebar a[aria-current="page"] {
  color: var(--primary);
  font-weight: var(--weight-medium);
}

/* ---- Main column ---- */
.docs-main {
  min-width: 0;
}

.docs-breadcrumb {
  font-size: var(--size-small);
  color: var(--muted);
  margin-bottom: var(--space-md);
}

.docs-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.docs-article {
  max-width: var(--docs-measure);
}

/* Heading tiers drop one weight at a time; no colour, no all-caps
   (dense-reference brief). */
.docs-article h1 {
  font-size: var(--size-h1);
  line-height: var(--lh-tight);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-sm);
}

.docs-article h2 {
  font-size: var(--size-h2);
  line-height: var(--lh-snug);
  font-weight: var(--weight-medium);
  margin: var(--space-xl) 0 var(--space-sm);
}

.docs-article h3 {
  font-size: var(--size-h3);
  line-height: var(--lh-snug);
  font-weight: var(--weight-medium);
  margin: var(--space-lg) 0 var(--space-xs);
}

.docs-article h4 {
  font-size: var(--size-body);
  font-style: italic;
  font-weight: var(--weight-regular);
  margin: var(--space-md) 0 var(--space-xs);
}

.docs-article p,
.docs-article ul,
.docs-article ol {
  margin-block: 0 1.1em;
}

/* Subtitle from the description frontmatter, under H1. */
.docs-subtitle {
  font-size: var(--size-intro);
  line-height: var(--lh-relaxed);
  color: var(--muted);
  margin: 0 0 var(--space-lg);
}

/* Cross-links: body underline + brand colour, same for visited (brief). */
.docs-article a {
  color: var(--primary);
  text-decoration: underline;
}

.docs-article a:visited {
  color: var(--primary);
}

.wikilink-missing {
  color: inherit;
}

.missing-marker {
  font-size: 0.75em;
  color: var(--muted);
  margin-left: 0.2em;
}

.docs-meta {
  font-size: var(--size-small);
  color: var(--muted);
  margin-top: var(--space-2xl);
  border-top: var(--border-hairline);
  padding-top: var(--space-sm);
}

/* ---- Tables: quiet reference, no striping, no hover (dense-reference) ---- */
.docs-article table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto; /* scroll on mobile rather than reflow */
  width: 100%;
  margin: var(--space-md) 0;
}

.docs-article th {
  font-size: var(--size-small);
  font-weight: var(--weight-medium);
  text-align: left;
  border-bottom: 2px solid var(--border);
  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
}

.docs-article td {
  font-size: var(--size-body);
  border-bottom: var(--border-hairline);
  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
  vertical-align: top;
}

/* ---- Code: not the protagonist (F4) ---- */
.docs-article pre {
  background: var(--docs-code-bg);
  border: 1px solid var(--docs-code-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  overflow-x: auto;
  line-height: 1.5;
  margin: var(--space-md) 0;
}

.docs-article pre code {
  font-family: var(--docs-font-mono);
  font-size: var(--docs-code-size);
}

.docs-article :not(pre) > code {
  font-family: var(--docs-font-mono);
  font-size: 1em; /* match surrounding body text (F4 inline) */
  background: var(--docs-code-bg);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}

/* ---- Right-rail TOC ---- */
.docs-toc {
  position: sticky;
  top: var(--space-lg);
  font-size: var(--size-small);
}

.docs-toc-label {
  font-weight: var(--weight-medium);
  color: var(--accent);
  margin: 0 0 var(--space-xs);
}

.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-toc li {
  margin: var(--space-xs) 0;
}

.docs-toc a {
  color: var(--muted);
  text-decoration: none;
  /* >=24px touch target (WCAG 2.5.8 AA). */
  display: block;
  padding: 5px 0;
}

.docs-toc a:hover {
  color: var(--text);
}

/* ---- Search overlay (#249); tokens applied here ---- */
.howework-search-trigger {
  font: inherit;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
}

.howework-search-trigger kbd {
  font-family: var(--docs-font-mono);
  font-size: 0.8em;
  color: var(--muted);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 0 0.3em;
  margin-left: 0.4em;
}

.howework-search[hidden] {
  display: none;
}

.howework-search {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--text) 35%, transparent);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10vh var(--space-md) var(--space-md);
}

.howework-search-modal {
  width: 100%;
  max-width: 40rem;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: var(--border-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--text) 25%, transparent);
}

.howework-search-input {
  font: inherit;
  font-size: var(--size-intro);
  padding: var(--space-md) var(--space-lg);
  border: 0;
  border-bottom: var(--border-hairline);
  background: transparent;
  color: var(--text);
  outline: none;
}

.howework-search-results {
  overflow-y: auto;
}

.howework-search-group {
  padding-bottom: var(--space-xs);
}

.howework-search-grouphead {
  font-size: var(--size-small);
  color: var(--muted);
  margin: 0;
  padding: var(--space-sm) var(--space-lg) var(--space-xs);
}

.howework-search-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  color: var(--text);
}

.howework-search-result:hover,
.howework-search-result[aria-selected="true"] {
  background: var(--card);
}

.howework-search-label {
  font-weight: var(--weight-medium);
}

.howework-search-section {
  font-size: var(--size-small);
  color: var(--muted);
  white-space: nowrap;
}

.howework-search-excerpt {
  grid-column: 1 / -1;
  font-size: var(--size-small);
  color: var(--muted);
}

.howework-search-excerpt mark,
.howework-search-label mark {
  background: color-mix(in srgb, var(--warning) 30%, transparent);
  color: inherit;
}

.howework-search-empty {
  padding: var(--space-lg);
  color: var(--muted);
}

.howework-search-empty a {
  color: var(--primary);
}

body.howework-search-open {
  overflow: hidden;
}

/* ---- Focus visibility (brand focus tokens) ---- */
.howework-page a:focus-visible,
.howework-page button:focus-visible,
.howework-search-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---- Skip link: hidden until focused, then anchored top-left ---- */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -3rem;
  z-index: 1100;
  padding: var(--space-xs) var(--space-md);
  background: var(--bg);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  color: var(--primary);
  transition: top var(--dur-1) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* ---- Honour reduced-motion: drop the only transition (the skip link). ---- */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* ---- Responsive: single column below the breakpoint (full nav is #248) ---- */
@media (max-width: 60rem) {
  .howework-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-top: var(--space-lg);
  }
  .docs-sidebar,
  .docs-toc {
    position: static;
    max-height: none;
  }
}