/* ============================================================
   Lyncia — Global layout foundation (shared by site + app)
   Container system, vertical rhythm, focus system.
   Loaded before every page-specific stylesheet.
   ============================================================ */

:root {
  /* --- Container system -------------------------------------------------- */
  /* One scale, used by header, hero, sections, app pages. Never hardcode
     a one-off max-width in a component; pick a container class instead. */
  --container-max: 1280px;      /* default marketing/content width      */
  --container-max-wide: 1480px; /* app shell / full-bleed dashboards    */
  --container-max-narrow: 880px;/* long-form prose, legal, focus flows  */
  --container-pad: clamp(20px, 3.6vw, 48px);
  --prose-max: 68ch;            /* UX rule: bound text measure          */

  /* --- Vertical rhythm --------------------------------------------------- */
  --header-h: 72px;
  --section-y: clamp(56px, 6.5vw, 104px);
  --section-y-tight: clamp(40px, 4.5vw, 72px);
  --block-gap: clamp(24px, 2.6vw, 40px);
  --stack-gap: clamp(16px, 1.6vw, 24px);

  /* --- Elevation used by both surfaces ----------------------------------- */
  --ring-w: 2px;
  --ring-offset: 2px;
}

/* Sticky headers must not cover the element that scroll/focus lands on. */
html {
  scroll-padding-top: calc(var(--header-h) + 24px);
}

/* ---------------------------------------------------------------- Containers
   `.l-container` is the single alignment authority. Header, hero, stats,
   sections, page headers and app pages all sit on the same left/right edge. */
.l-container,
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.l-container--wide { max-width: var(--container-max-wide); }
.l-container--narrow,
.container.narrow { max-width: var(--container-max-narrow); }
.l-container--flush { padding-inline: 0; }

/* Bounded measure for running text inside any container. */
.l-prose { max-width: var(--prose-max); }

/* ------------------------------------------------------------------ Rhythm */
.l-section { padding-block: var(--section-y); }
.l-section--tight { padding-block: var(--section-y-tight); }
.l-stack { display: flex; flex-direction: column; gap: var(--stack-gap); }
.l-stack--block { gap: var(--block-gap); }

/* ------------------------------------------------------------- Focus system
   One visible keyboard indicator everywhere: 2px solid perimeter at >=3:1,
   offset so it never merges with the control's own border. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-w) solid var(--focus-outline);
  outline-offset: var(--ring-offset);
  border-radius: inherit;
}

/* Long tokens (URLs, city names, ids) must never force horizontal overflow. */
.l-wrap-anywhere { overflow-wrap: anywhere; }

/* Screen-reader-only, for labels that must exist but not display. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Any wide element (table, chart, code) scrolls inside itself, not the page. */
.l-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}