/* Atlas base — reset, typography, focus, motion, role gating and layout
 * primitives.
 *
 * Spec: docs/design/Atlas_Experience_Redesign.md §5; reference:
 * docs/design/Atlas_Design_System.md. Values come only from atlas-tokens.css.
 * Component classes live in atlas-components.css; element rules here are the
 * defaults every page starts from.
 *
 * !important is used only where the spec allows it in base: [hidden], reduced
 * motion and role gating. In the layer order an !important declaration in an
 * earlier layer beats one in a later layer, so these contracts hold everywhere.
 */
@layer atlas.base {
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) transparent;
}

/* Body type: 14/20 (15/22 on phones), IBM Plex Sans, warm near-black on white.
   The line height is unitless so legacy text with its own size keeps a
   proportional leading instead of inheriting a fixed 20 px. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4286;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* A long unbroken token (a pasted code, a URL-like name) wraps instead of
     pushing the page sideways. */
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  body { font-size: var(--fs-body-lg); line-height: 1.4667; }
}

/* Form controls use the page type instead of the 13.33 px browser default. */
button, input, select, textarea { font-family: inherit; font-size: 100%; color: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
/* Native controls without a component class read as unavailable when disabled
   (components set their own disabled look). */
:where(button, input, select, textarea):disabled { opacity: .55; }
/* Fieldsets group fields without a box; the legend is plain text. */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
code, kbd, samp, pre { font-family: var(--font-mono); }

/* Headings and numbers. ALCEDO: the top display headings (h1–h3) are set in
   Instrument Serif at 400 like the website's titles; the tighter sub-headings
   (h4–h6) stay in Manrope semibold so dense UI headers keep their weight. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--text); letter-spacing: -0.01em; }
h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; color: var(--text); }
strong, b { font-weight: 600; }
.num, time, [data-num] { font-variant-numeric: tabular-nums; }

/* Links: accent text, underline on hover. */
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Icons: lucide (pinned 0.454.0) is the only icon set. Stroke 1.75 everywhere;
   size classes for new markup (legacy rules size their own icons). */
svg.lucide { stroke-width: var(--icon-stroke); flex: none; }
.icon, .atlas-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.icon--md, .atlas-icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg, .atlas-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl, .atlas-icon--xl { width: var(--icon-xl); height: var(--icon-xl); stroke-width: var(--icon-stroke-xl); }

/* Focus: always visible for keyboard users — 2 px accent outline, 2 px offset. */
:where(button, a[href], input, select, textarea, summary, [role="button"], [role="tab"], [role="switch"], [role="menuitem"], [tabindex]):focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* A title that receives focus programmatically (a dialog or sheet title, a
   page heading after navigation: tabindex="-1") is a reading position, not a
   control: no ring. Keyboard focus on controls stays visible. */
:is(h1, h2, h3, h4, [tabindex="-1"]):focus:not(:focus-visible),
:is(h1, h2, h3, h4)[tabindex="-1"]:focus { outline: none; }

::selection { background: rgba(232, 115, 42, .26); color: var(--text); }

/* The hidden attribute always hides (spec §9.1 allows !important here). */
[hidden] { display: none !important; }

/* Role gating (spec §9.1 allows !important here). Commercial controls stay
   hidden unless the verified profile is a manager or admin (index.html toggles
   body.atlas-commercial-manager after loadActiveProfile). Database grants and
   RLS remain the authoritative boundary; this only keeps the UI honest. */
body:not(.atlas-commercial-manager) :is([data-commercial-only], [data-view="suppliers"]) { display: none !important; }

/* Screen-reader only text. */
.sr-only, .atlas-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;
}

/* Wide tables scroll inside their card; the page never scrolls sideways. */
.atlas-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Layout primitives ----------
   Stack: vertical rhythm. Cluster: a wrapping row (buttons, chips, meta).
   Grid: responsive auto columns. Gaps come from the spacing scale. */
.atlas-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); min-width: 0; }
.atlas-stack--xs { --stack-gap: var(--s-1); }
.atlas-stack--sm { --stack-gap: var(--s-2); }
.atlas-stack--md { --stack-gap: var(--s-3); }
.atlas-stack--lg { --stack-gap: var(--s-6); }
.atlas-stack--xl { --stack-gap: var(--s-10); }
.atlas-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-2)); min-width: 0; }
.atlas-cluster--end { justify-content: flex-end; }
.atlas-cluster--between { justify-content: space-between; }
.atlas-cluster--nowrap { flex-wrap: nowrap; }
.atlas-auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 240px)), 1fr)); gap: var(--grid-gap, var(--s-4)); }
.atlas-spacer { flex: 1 1 auto; }
/* Page container contract: the shell's .atlas-content owns the gutter, the
   top and bottom space and the max width (atlas-shell.css). A module's page
   wrapper adds none of its own, so every page header starts at the same x/y. */
.atlas-page { min-width: 0; margin: 0; padding: 0; }
.atlas-page--wide { max-width: none; }
.atlas-reading { max-width: var(--reading-max); }

/* ---------- Reduced motion ----------
   prefers-reduced-motion and the personal Reduce motion preference
   (html.atlas-reduce-motion): no movement; fades are cut to the 120 ms limit
   or less; the skeleton shimmer is static. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
html.atlas-reduce-motion *,
html.atlas-reduce-motion *::before,
html.atlas-reduce-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
}