/*
  JudieAI application styles: base, layout and text roles.

  Rule: no literal values. Every value is a design token from the JudieAI design
  library (brand/tokens.css, vendored from github.com/JudieAI/brand by
  `bin/rails brand:sync`). Local custom properties are allowed only when they are
  themselves set from tokens. `bun run lint:css` (Stylelint, stylelint.config.mjs) enforces this.
  Layouts are intrinsic (auto-fit grids, wrapping flex), so there are no breakpoints.

  Load order (see the application layout): brand/fonts, brand/tokens,
  application, components, then page styles.
*/

/* ---------- Base ---------- */
html { font-size: var(--jd-font-size-root); scroll-behavior: var(--jd-landing-scroll-behavior); }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: var(--jd-space-none);
  min-height: var(--jd-size-full);
  display: flex;
  flex-direction: column;
  background: var(--jd-bg);
  color: var(--jd-fg);
  font-family: var(--jd-font-body);
  font-size: var(--jd-font-size-body);
  line-height: var(--jd-font-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { height: var(--jd-size-full); }
img, svg { max-width: var(--jd-size-full); }
h1, h2, h3 {
  margin: var(--jd-space-none);
  font-family: var(--jd-font-display);
  font-weight: var(--jd-font-weight-semibold);
  letter-spacing: var(--jd-font-tracking-tight);
  line-height: var(--jd-font-leading-snug);
  text-wrap: balance;
}
h1 { font-size: var(--jd-font-size-display); line-height: var(--jd-font-leading-tight); }
h2 { font-size: var(--jd-font-size-h2); }
h3 { font-size: var(--jd-font-size-h3); }
p { margin: var(--jd-space-none); max-width: var(--jd-size-measure); }
figure { margin: var(--jd-space-none); }
a { color: var(--jd-accent); }
code, kbd, pre { font-family: var(--jd-font-mono); font-size: var(--jd-font-size-code); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: var(--jd-border-focus) var(--jd-border-solid) var(--jd-accent); outline-offset: var(--jd-border-focus-offset); }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.container { width: var(--jd-size-full); max-width: var(--jd-landing-container); margin-inline: var(--jd-size-auto); padding-inline: var(--jd-space-gutter); }
.app-main { flex: auto; }
.page { padding-block: var(--jd-space-xxl) var(--jd-space-section); }
.skip-link {
  position: absolute;
  inset-inline-start: var(--jd-space-sm);
  top: var(--jd-space-sm);
  z-index: var(--jd-landing-z-header);
  padding: var(--jd-space-xs) var(--jd-space-md);
  background: var(--jd-brand);
  color: var(--jd-brand-fg);
  border-radius: var(--jd-radius-pill);
  transform: var(--jd-landing-skip-hidden);
}
.skip-link:focus { transform: none; }

/* Header */
.site-header {
  position: sticky;
  top: var(--jd-space-none);
  z-index: var(--jd-landing-z-header);
  background: var(--jd-header-bg);
  backdrop-filter: var(--jd-landing-header-blur);
  -webkit-backdrop-filter: var(--jd-landing-header-blur);
  box-shadow: var(--jd-landing-header-shadow);
}
.site-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jd-space-xs) var(--jd-space-lg); min-height: var(--jd-landing-header-height); }
.site-header__brand { display: inline-flex; align-items: center; gap: var(--jd-space-sm); min-height: var(--jd-landing-touch); color: inherit; text-decoration: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--jd-space-sm); margin-inline-start: var(--jd-size-auto); }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--jd-space-lg); }
.site-nav a { color: var(--jd-muted); text-decoration: none; font-size: var(--jd-font-size-small); padding-block: var(--jd-space-sm); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--jd-fg); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--jd-flag); text-decoration-thickness: var(--jd-border-marker); text-underline-offset: var(--jd-space-xs); }

/* Footer */
.site-footer { padding-block: var(--jd-space-footer); font-size: var(--jd-font-size-caption); color: var(--jd-muted); border-top: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jd-space-sm) var(--jd-space-xxl); }

/* Flash region */
.flash-stack { display: grid; gap: var(--jd-space-sm); padding-top: var(--jd-space-lg); }

/* ---------- Composition ---------- */
.stack { display: grid; gap: var(--jd-space-lg); align-content: start; }
.stack--tight { gap: var(--jd-space-xs); }
.stack--loose { gap: var(--jd-space-xxl); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jd-space-sm); }
.cluster--loose { gap: var(--jd-space-lg); }
.cluster--end { align-items: flex-end; }
.grid { display: grid; gap: var(--jd-space-lg); }
.grid--card   { grid-template-columns: repeat(auto-fit, minmax(min(var(--jd-size-track-card), var(--jd-size-full)), var(--jd-size-fr))); }
.grid--wide   { grid-template-columns: repeat(auto-fit, minmax(min(var(--jd-size-track-wide), var(--jd-size-full)), var(--jd-size-fr))); }
.grid--swatch { grid-template-columns: repeat(auto-fit, minmax(min(var(--jd-size-track-swatch), var(--jd-size-full)), var(--jd-size-fr))); }
.grid--state  { grid-template-columns: repeat(auto-fit, minmax(min(var(--jd-size-track-state), var(--jd-size-full)), var(--jd-size-fr))); gap: var(--jd-space-md); }
.section { display: grid; gap: var(--jd-space-xl); padding-block: var(--jd-space-xxxl); border-top: var(--jd-border-hairline) var(--jd-border-solid) var(--jd-line); }
.section:first-child { border-top: none; padding-top: var(--jd-space-none); }
.section__head { display: grid; gap: var(--jd-space-sm); }

/* ---------- Text roles ---------- */
.eyebrow {
  font-family: var(--jd-font-mono);
  font-size: var(--jd-font-size-label);
  letter-spacing: var(--jd-font-tracking-label);
  text-transform: uppercase;
  color: var(--jd-muted);
}
.eyebrow__sep { color: var(--jd-flag); }
.lede { font-size: var(--jd-font-size-lede); max-width: var(--jd-size-measure-lede); }
.caption { font-size: var(--jd-font-size-caption); color: var(--jd-muted); }
.numeric { font-family: var(--jd-font-mono); font-variant-numeric: var(--jd-font-numeric); }
.visually-hidden { position: absolute; width: var(--jd-border-hairline); height: var(--jd-border-hairline); overflow: hidden; clip-path: inset(var(--jd-size-half)); white-space: nowrap; }