/* ============================================================
   Landometer Design System v0.9.0 — lds-base.css
   Kit lds-kit-0.9.0-r4 · Copy verbatim after lds-tokens.css.
   Contains no raw hex: every value derives from tokens.
   The reduced-motion kill switch is the only sanctioned !important.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  background: var(--surface-canvas);
  color: var(--text-primary);
}
img, video, canvas, svg { display: block; max-width: 100%; height: auto; }
[id] { scroll-margin-top: 88px; }

/* Heading roles [TYPE-01] — script-aware */
h1, h2, h3 { margin: 0 0 var(--space-4); font-weight: 700; }
:where(html[lang="th"]) h1 { font-family: var(--font-display-th); font-size: var(--type-h1-th); line-height: var(--leading-display-th); }
:where(html[lang="en"]) h1 { font-family: var(--font-display-en); font-size: var(--type-h1-en); line-height: var(--leading-display-en); }
:where(html[lang="th"]) h2, :where(html[lang="th"]) h3 { font-family: var(--font-ui-heading-th); line-height: var(--leading-ui-heading-th); }
:where(html[lang="en"]) h2, :where(html[lang="en"]) h3 { font-family: var(--font-ui-heading-en); line-height: var(--leading-ui-heading-en); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
.technical, code, kbd { font-family: var(--font-technical); font-weight: 400; font-size: var(--type-label); line-height: 1.48; }
.meta { color: var(--text-metadata); font-size: var(--type-body-sm); }

/* Focus [A11Y-01] — token-bound, theme-aware; never a fixed hex */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--interaction-focus-ring);
  outline-offset: 2px;
}

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-tooltip); background: var(--surface-raised); color: var(--text-primary); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
.skip-link:focus { left: var(--space-4); }

/* Buttons [BTN-GEOM-01] — capsule or circle; no third shape exists */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 10px var(--space-5);
  border: 2px solid var(--interaction-accent); border-radius: var(--radius-pill);
  background: transparent; color: var(--interaction-accent);
  font: 600 var(--type-body)/1.2 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-duration-feedback) var(--motion-ease-state),
              transform var(--motion-duration-feedback) var(--motion-ease-press);
}
.btn:hover { background: var(--surface-blue-tint); }
.btn:active { background: var(--surface-soft); transform: translateY(var(--motion-distance-feedback)); }
.btn:disabled, .btn[aria-disabled="true"] { border-color: var(--border-hairline); color: var(--text-disabled); cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { border-color: transparent; }
.btn--quiet:hover { background: var(--surface-soft); }
.btn-icon { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; }
/* On atmosphere surfaces the contract's interactive pair applies */
.scene-atmosphere .btn { background: var(--fg-interactive-surface); color: var(--fg-interactive-ink); border-color: transparent; }

/* Status capsules — non-interactive; tint+border+small height distinguish them from buttons */
.status { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3); border-radius: var(--radius-pill); font-size: var(--type-label); line-height: var(--leading-label); font-weight: 600; }
.status--success { background: var(--semantic-success-fill); color: var(--semantic-success-ink); }
.status--warning { background: var(--semantic-warning-fill); color: var(--semantic-warning-ink); }
.status--danger { background: var(--semantic-danger-fill); color: var(--semantic-danger-ink); }
.status--info { background: var(--semantic-info-fill); color: var(--semantic-info-ink); }
.status--neutral { background: var(--semantic-neutral-fill); color: var(--semantic-neutral-ink); }
.status--pending { background: var(--semantic-pending-fill); color: var(--semantic-pending-ink); }
.status--assisted { background: var(--semantic-assisted-fill); color: var(--semantic-assisted-ink); }

/* Source-status chips (A2.1) — color is redundancy; the visible label is the meaning */
.source-status { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2); border-radius: var(--radius-pill); border: 1px solid currentColor; font-family: var(--font-technical); font-size: var(--type-label); }
.source-status--candidate { color: var(--status-source-candidate); }
.source-status--derived { color: var(--status-source-derived); }
.source-status--other { color: var(--status-source-other); }

/* Cards + verified lineage (A2.1) */
.card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-5); }
.card--verified { border-top: 3px solid var(--status-source-verified-bar); }

/* Overlay glass caption (A2.1) — the one glass treatment over media */
.overlay-caption { background: var(--overlay-glass); color: var(--overlay-glass-ink); border: 1px solid var(--overlay-glass-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: var(--type-body-sm); }
.overlay-caption .meta { color: var(--overlay-glass-ink2); }

/* Atmosphere scenes [SURFACE-01] — surface and local foreground contract travel together */
.scene-atmosphere { color: var(--on-atmosphere, var(--fg-on-deep-primary)); }
.scene-atmosphere--measure { background-image: var(--surface-atmosphere-measure); --on-atmosphere: var(--on-atmosphere-measure); --on-atmosphere-2: var(--on-atmosphere-measure-2); }
.scene-atmosphere--ground { background-image: var(--surface-atmosphere-ground); --on-atmosphere: var(--on-atmosphere-ground); --on-atmosphere-2: var(--on-atmosphere-ground-2); }
.scene-atmosphere--cultivate { background-image: var(--surface-atmosphere-cultivate); --on-atmosphere: var(--on-atmosphere-cultivate); --on-atmosphere-2: var(--on-atmosphere-cultivate-2); }
.scene-atmosphere--diversity { background-image: var(--surface-atmosphere-diversity); --on-atmosphere: var(--on-atmosphere-diversity); --on-atmosphere-2: var(--on-atmosphere-diversity-2); }
.scene-atmosphere .meta { color: var(--on-atmosphere-2); }
.scene-atmosphere :where(a, button, [tabindex]):focus-visible { outline-color: var(--on-atmosphere); }

/* Layout */
.container { max-width: var(--container-default); margin-inline: auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 600px) { .container { padding-inline: var(--gutter-tablet); } }
@media (min-width: 900px) { .container { padding-inline: var(--gutter-desktop); } }
.container--reading { max-width: var(--container-reading); }
.container--wide { max-width: var(--container-wide); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Layered complexity fields [LAYER-FIELD-01] — sizes/positions are build-local; colors/opacities are not */
.layer-field { position: relative; overflow: hidden; }
.layer-field__layer { position: absolute; border-radius: var(--radius-xl); opacity: var(--opacity-subtle); }
.layer-field__layer--soft { opacity: var(--opacity-soft); }
.layer-field__layer--ghost { opacity: var(--opacity-ghost); }
.layer-field__content { position: relative; }
.layer-field__label { font-family: var(--font-technical); font-size: var(--type-label); }

/* Icon symbols [ICON-01] — Material Symbols Rounded ONLY; axes locked; self-host the subset (A11) */
.icon-symbol { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
.icon-symbol--fill { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* active/selected only */
.icon-symbol--sm { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }

/* Category chips [CATEGORY-ID-01] — set --category-color from a series/pillar token in the build-local layer */
.category-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); border-radius: var(--radius-pill); border: 1.5px solid var(--category-color, var(--border-emphasis)); background: var(--surface-card); color: var(--text-primary); font-size: var(--type-label); font-weight: 600; }
.category-chip .icon-symbol { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; color: var(--category-color, currentColor); }
.category-chip .icon { width: 18px; height: 18px; color: var(--category-color, currentColor); } /* approved registered custom glyphs only */

/* Evidence affordance [DISCLOSURE-01] — the quiet door to layer 2; never a warning banner */
.evidence-affordance { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-metadata); font-family: var(--font-technical); font-size: var(--type-label); text-decoration: underline; text-underline-offset: 3px; }

/* Riddim reveal [MOTION-01] — guided/expressive_short only; runs once; ≤5 staggered items */
@keyframes lds-reveal { from { opacity: 0; transform: translateY(var(--motion-distance-reveal)); } to { opacity: 1; transform: none; } }
.reveal { animation: lds-reveal var(--motion-duration-reveal) var(--motion-ease-enter) both; }
.reveal:nth-child(2) { animation-delay: var(--motion-delay-stagger); }
.reveal:nth-child(3) { animation-delay: calc(var(--motion-delay-stagger) * 2); }
.reveal:nth-child(4) { animation-delay: calc(var(--motion-delay-stagger) * 3); }
.reveal:nth-child(5) { animation-delay: var(--motion-delay-stagger-cap); }
.reveal:nth-child(n+6) { animation: none; }
.settle { animation: lds-reveal var(--motion-duration-state) var(--motion-ease-settle) both; }

/* Reduced motion [MOTION-01] — canonical kill switch (the one sanctioned !important) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}