/* ═══════════════════════════════════════════════════════════════════════════
   SBR Air — shared/ui/sbr-air.base.css  (V1 shared design foundation)
   Font face + base typography, focus ring and utilities. Every rule is scoped to .sa-scope (opt-in);
   there is no global reset. The @font-face only defines the private family "SBR Air Inter"; the file is
   downloaded by the browser only when an element inside .sa-scope renders text with it.
   Inter variable font: SIL Open Font License 1.1 (shared/ui/fonts/LICENSE-inter-OFL.txt).
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "SBR Air Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}

.sa-scope {
  font-family: var(--sa-font);
  font-size: var(--sa-text-md);
  line-height: var(--sa-lh-md);
  font-weight: var(--sa-weight-regular);
  color: var(--sa-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}
.sa-scope *, .sa-scope *::before, .sa-scope *::after { box-sizing: border-box; }
.sa-scope button, .sa-scope input, .sa-scope select, .sa-scope textarea { font: inherit; color: inherit; }

/* Canvas helper for a migrated workspace area (v1.1 §8 Level 1) */
.sa-scope.sa-canvas, .sa-scope .sa-canvas { background: var(--sa-canvas); }

/* Typography helpers (v1.1 §5) */
.sa-scope .sa-h1 { font-size: var(--sa-text-xl); line-height: var(--sa-lh-xl); font-weight: var(--sa-weight-semibold); margin: 0; }
.sa-scope .sa-h2 { font-size: var(--sa-text-lg); line-height: var(--sa-lh-lg); font-weight: var(--sa-weight-semibold); margin: 0; }
.sa-scope .sa-h3 { font-size: var(--sa-text-md); line-height: var(--sa-lh-md); font-weight: var(--sa-weight-semibold); margin: 0; }
.sa-scope .sa-secondary { font-size: var(--sa-text-sm); line-height: var(--sa-lh-sm); color: var(--sa-text-2); }
.sa-scope .sa-meta { font-size: var(--sa-text-xs); line-height: var(--sa-lh-xs); color: var(--sa-text-3); }
.sa-scope .sa-tnum { font-variant-numeric: tabular-nums; }
.sa-scope .sa-id { font-weight: var(--sa-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: .2px; }

/* Focus standard (v1.1 §22): 2 px ring, 2 px offset, never removed.
   On dark surfaces the ring uses blue.400 #60A5FA (#2563EB is below 3:1 on #1C1F24 / #2F343C). */
.sa-scope :focus { outline: none; }
.sa-scope :focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 2px; }
.sa-scope .sa-on-dark :focus-visible, .sa-scope.sa-on-dark :focus-visible { outline-color: var(--sa-nav-indicator); }

/* Icons (Lucide, rendered by SBR.ui.icon) */
.sa-scope .sa-ico { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px; line-height: 0; }
.sa-scope .sa-ico svg { width: 100%; height: 100%; display: block; }
.sa-scope .sa-ico-12 { width: 12px; height: 12px; vertical-align: -1px; }
.sa-scope .sa-ico-14 { width: 14px; height: 14px; vertical-align: -2px; }
.sa-scope .sa-ico-18 { width: 18px; height: 18px; vertical-align: -4px; }
.sa-scope .sa-ico-20 { width: 20px; height: 20px; vertical-align: -5px; }
.sa-scope .sa-ico-24 { width: 24px; height: 24px; vertical-align: -6px; }

/* Utilities */
.sa-scope .sa-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; }
.sa-scope .sa-truncate { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .sa-scope *, .sa-scope *::before, .sa-scope *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
}