/*
 * Janus.Guru consumer bridge for AV DS 4.
 *
 * AV DS owns the token names and composition semantics. Janus owns the
 * runtime, routes, copy, data and page-specific composition. This file keeps
 * that boundary explicit: it does not import a React package or add network,
 * routing or persistence behaviour.
 */
@layer avds4-consumer {
  :root {
    /* AV DS 4 token aliases mapped to Janus' product theme. */
    --av-color-background: var(--surface-canvas, #f5f3ee);
    --av-color-foreground: var(--color-text-primary, #1a1714);
    --av-color-surface: var(--surface-base, #ffffff);
    --av-color-muted: var(--surface-muted, #f7f4ee);
    --av-color-muted-foreground: var(--color-text-secondary, #6a655d);
    --av-color-border: var(--color-border-default, #e0dcd4);
    --av-color-primary: var(--color-accent-primary, #8d6f22);
    --av-color-primary-foreground: var(--color-text-on-accent, #ffffff);
    --av-color-white: #ffffff;

    --av-spacing-0: 0px;
    --av-spacing-1: 4px;
    --av-spacing-2: 8px;
    --av-spacing-3: 12px;
    --av-spacing-4: 16px;
    --av-spacing-5: 20px;
    --av-spacing-6: 24px;
    --av-spacing-8: 32px;
    --av-spacing-10: 40px;
    --av-spacing-12: 48px;

    --av-radius-sm: 4px;
    --av-radius-md: 8px;
    --av-radius-lg: 12px;
    --av-radius-xl: 16px;
    --av-radius-full: 999px;
    --av-duration-fast: 120ms;
    --av-duration-base: 180ms;
    --av-duration-slow: 280ms;
    --av-easing-standard: 0.2, 0, 0, 1;
    --av-opacity-disabled: 0.48;
    --av-shadow-sm: var(--avds-shadow-sm, 0 1px 2px rgba(26, 23, 20, 0.04));
    --av-shadow-lg: var(--avds-shadow-lg, 0 16px 32px -12px rgba(26, 23, 20, 0.18));

    /* Width-aware composition contract. Page layouts may opt in gradually. */
    --avds-shell-gutter: var(--container-px, clamp(18px, 3vw, 32px));
    --avds-shell-max: var(--container-max, 1240px);
    --avds-reading-max: 76ch;
    --avds-layout-gap: clamp(16px, 2vw, 24px);

    --av-text-body-font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
    --av-text-body-font-size: 16px;
    --av-text-body-font-weight: 400;
    --av-text-body-line-height: 24px;
    --av-text-body: var(--av-text-body-font-weight) var(--av-text-body-font-size) /
      var(--av-text-body-line-height) var(--av-text-body-font-family);
  }

  html,
  body {
    max-width: 100%;
  }

  body[data-avds-contract='responsive-composition-v1'] {
    min-width: 320px;
    overflow-x: clip;
  }

  /* Neutral composition helpers for the next page-by-page migration waves. */
  .avds-shell-section {
    width: min(100%, var(--avds-shell-max));
    margin-inline: auto;
    padding-inline: var(--avds-shell-gutter);
  }

  .avds-reading-measure {
    max-width: var(--avds-reading-max);
  }

  .avds-layout-grid {
    display: grid;
    gap: var(--avds-layout-gap);
  }

  .avds-rail {
    border-inline-start: 2px solid var(--av-color-primary);
    padding-inline-start: var(--av-spacing-4);
  }

  /* Stable AV DS 4 foundation names, available without a package import. */
  .av-button,
  .av-icon-button,
  .av-link,
  .av-input,
  .av-select,
  .av-textarea,
  .av-badge,
  .av-chip,
  .av-card,
  .av-divider,
  .av-progress,
  .av-table-wrapper {
    box-sizing: border-box;
  }

  .av-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--av-spacing-2);
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--av-radius-md);
    padding: 0 var(--av-spacing-4);
    color: var(--av-color-primary-foreground);
    background: var(--av-color-primary);
    font: var(--av-text-body);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition:
      background var(--av-duration-base) cubic-bezier(var(--av-easing-standard)),
      border-color var(--av-duration-base) cubic-bezier(var(--av-easing-standard)),
      box-shadow var(--av-duration-base) cubic-bezier(var(--av-easing-standard)),
      opacity var(--av-duration-fast) cubic-bezier(var(--av-easing-standard));
  }

  .av-button:hover {
    text-decoration: none;
    box-shadow: var(--av-shadow-sm);
  }

  .av-button:disabled {
    cursor: not-allowed;
    opacity: var(--av-opacity-disabled);
  }

  .av-button--sm { min-height: 32px; padding-inline: var(--av-spacing-3); }
  .av-button--lg { min-height: 48px; padding-inline: var(--av-spacing-5); }
  .av-button--secondary {
    color: var(--av-color-foreground);
    background: var(--av-color-surface);
    border-color: var(--av-color-border);
  }
  .av-button--ghost {
    color: var(--av-color-foreground);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .av-button--icon,
  .av-icon-button {
    width: 40px;
    min-width: 40px;
    padding-inline: 0;
  }

  .av-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .av-link {
    color: var(--av-color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .av-link--standalone {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
  }

  .av-link--muted { color: var(--av-color-muted-foreground); }

  .av-input,
  .av-select,
  .av-textarea {
    width: 100%;
    border: 1px solid var(--av-color-border);
    border-radius: var(--av-radius-md);
    padding: var(--av-spacing-3) var(--av-spacing-4);
    color: var(--av-color-foreground);
    background: var(--av-color-surface);
    font: var(--av-text-body);
  }

  .av-input { min-height: 40px; }
  .av-textarea { min-height: 112px; resize: vertical; }

  .av-badge,
  .av-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    gap: var(--av-spacing-1);
    padding: 0 var(--av-spacing-2);
    border: 1px solid var(--av-color-border);
    border-radius: var(--av-radius-full);
    color: var(--av-color-muted-foreground);
    background: var(--av-color-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
  }

  .av-card {
    border: 1px solid var(--av-color-border);
    border-radius: var(--av-radius-lg);
    background: var(--av-color-surface);
    box-shadow: var(--av-shadow-sm);
  }

  .av-divider {
    height: 1px;
    border: 0;
    background: var(--av-color-border);
  }

  .av-progress {
    height: 8px;
    overflow: hidden;
    border-radius: var(--av-radius-full);
    background: var(--av-color-muted);
  }

  .av-progress > * {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--av-color-primary);
  }

  .av-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--av-color-border);
    border-radius: var(--av-radius-lg);
    background: var(--av-color-surface);
  }

}

/* AV DS 4 public/explainer patterns used by the generated page family.
   These selectors intentionally stay unlayered: legacy page styles are
   unlayered too, and the explicit AV DS pattern class must win where a page
   opts into the pattern. */
.av-source-registry {
    display: grid;
    gap: var(--av-spacing-4);
  }

.av-source-registry .evidence-metric-grid {
  gap: var(--av-spacing-3);
}

.av-related-question-grid {
  display: grid;
  gap: var(--av-spacing-5);
}

.av-related-question-grid__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--av-spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-related-question-grid__card { min-width: 0; }

.av-related-question-grid__card .av-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--av-spacing-3);
  min-height: 44px;
  padding: var(--av-spacing-3);
  border: 1px solid var(--av-color-border);
  border-radius: var(--av-radius-md);
  color: var(--av-color-foreground);
  background: var(--av-color-surface);
  text-decoration: none;
}

.av-related-question-grid__card .av-link:hover {
  border-color: var(--av-color-primary);
  background: var(--av-color-muted);
}

.av-related-question-grid__arrow {
  flex: 0 0 auto;
  color: var(--av-color-primary);
  font-size: 18px;
  line-height: 1;
}

.av-public-export-matrix {
  display: grid;
  gap: var(--av-spacing-6);
}

.av-public-export-matrix .api-quickstart-grid {
  gap: var(--av-layout-gap, var(--avds-layout-gap));
}

.av-public-export-matrix .api-example {
  min-width: 0;
  border-color: var(--av-color-border);
  border-radius: var(--av-radius-lg);
  background: var(--av-color-surface);
  box-shadow: var(--av-shadow-sm);
}

.av-public-export-matrix pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Corpus detail reading surface: keep the editorial blocks and live registry
   on the same AV DS evidence vocabulary as the catalog and Data Lab. The
   existing page layout remains authoritative; these rules only make the
   opted-in surfaces consistent and expose a clear async state. */
.avds-reading-section {
  min-width: 0;
}

.avds-reading-section > .avds-summary-card {
  min-width: 0;
  border-color: var(--av-color-border);
  border-radius: var(--av-radius-lg);
  box-shadow: var(--av-shadow-sm);
}

.avds-reading-measure {
  max-width: var(--avds-reading-max);
}

.corpus-transparency.avds-data-panel {
  min-width: 0;
  border-color: var(--av-color-border);
  border-radius: var(--av-radius-lg);
  background: var(--av-color-surface);
  box-shadow: var(--av-shadow-sm);
}

.avds-async-state[data-avds-state='loading'] {
  color: var(--av-color-muted-foreground);
}

.avds-async-state[data-avds-state='error'] {
  color: var(--av-color-muted-foreground);
  font-weight: 500;
}

:where(.av-button, .av-icon-button, .av-link, .av-input, .av-select, .av-textarea, .av-card):focus-visible {
  outline: 2px solid var(--av-color-primary);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  :root {
    --avds-shell-gutter: max(16px, env(safe-area-inset-left));
    --avds-layout-gap: 16px;
    /* Compact mobile rhythm: keep one deliberate breathing unit between
       sections, but do not leave a full desktop-sized band around dense
       cards and reading lists. Page-specific copy and controls keep their
       own local spacing. */
    --avds-section-py: 40px;
  }

  .av-related-question-grid__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-grid,
  .product-section,
  .solution-section,
  .persona-section,
  .product-boundary,
  .solution-decision,
  .product-cta,
  .use-case-overview,
  .corpus-transparency {
    padding-top: var(--avds-section-py);
    padding-bottom: var(--avds-section-py);
  }

  .seo-hero,
  .product-hero,
  .solution-hero {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .product-section-head {
    margin-bottom: 22px;
  }

  body[data-avds-surface='landing'] {
    --section-py: 40px;
  }

  body[data-avds-surface='landing'] .section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
  }

  body[data-avds-surface='landing'] .section-header {
    margin-bottom: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --avds-shell-gutter: clamp(24px, 4vw, 40px);
    --avds-layout-gap: 20px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --avds-shell-gutter: clamp(28px, 3vw, 48px);
    --avds-layout-gap: 24px;
  }
}

@media (min-width: 1440px) and (max-width: 1919px) {
  :root {
    --avds-shell-gutter: clamp(32px, 3vw, 56px);
    --avds-shell-max: min(1540px, calc(100vw - 128px));
    --avds-layout-gap: clamp(24px, 1.6vw, 32px);
  }
}

@media (min-width: 1920px) {
  :root {
    --avds-shell-gutter: 64px;
    --avds-shell-max: min(1780px, calc(100vw - 160px));
    --avds-layout-gap: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}