/* ==========================================================================
   Atlas primitives, built on the tokens in atlas.css.

   Each block follows the token bindings documented on that component in Figma,
   including the semantic fallbacks the designer marked as intentional.
   Atlas icons are Material Symbols (every Atlas icon names its Material
   Symbols glyph), so they are rendered with the Material Symbols font bound to
   --size-icon-default and the --color-icon-* tokens.
   ========================================================================== */

.atlas {
  font-family: var(--type-body-default-family), -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--type-body-default-size);
  font-weight: var(--type-body-default-weight);
  line-height: var(--type-body-default-line-height);
  color: var(--color-text-primary);
  background: var(--color-background-page);
}

.atlas *, .atlas *::before, .atlas *::after { box-sizing: border-box; }

/* ---------- Icons ---------- */

.atlas .ms {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: var(--size-icon-default);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--color-icon-primary);
  user-select: none;
}

.atlas .ms--lg { font-size: var(--size-icon-large); }
.atlas .ms--secondary { color: var(--color-icon-secondary); }
.atlas .ms--brand { color: var(--color-icon-brand); }
.atlas .ms--on-brand { color: var(--color-icon-on-brand); }

/* ---------- Type roles ---------- */

.atlas .t-page-title {
  font-size: var(--type-page-title-size);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-line-height);
  letter-spacing: var(--type-page-title-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.atlas .t-card-title, .atlas .t-section-subtitle {
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-line-height);
  letter-spacing: var(--type-card-title-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.atlas .t-body-large { font-size: var(--type-body-large-size); line-height: var(--type-body-large-line-height); }
.atlas .t-body-small { font-size: var(--type-body-small-size); line-height: var(--type-body-small-line-height); }
.atlas .t-body-bold { font-size: var(--type-body-bold-size); font-weight: var(--type-body-bold-weight); line-height: var(--type-body-bold-line-height); }
.atlas .t-caption { font-size: var(--type-caption-default-size); line-height: var(--type-caption-default-line-height); }
.atlas .t-label { font-size: var(--type-label-default-size); font-weight: var(--type-label-default-weight); line-height: var(--type-label-default-line-height); }

.atlas .t-secondary { color: var(--color-text-secondary); }
.atlas .t-subtle { color: var(--color-text-subtle); }
.atlas .t-brand { color: var(--color-text-brand); }

/* ==========================================================================
   Button — variant (primary|secondary|tertiary) × size (small|medium|large)
   Focus is a 2px ring at 2px offset on every variant (Atlas decision 0021).
   ========================================================================== */

.atlas .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--component-button-gap);
  height: var(--size-control-medium);
  padding: 0 var(--component-button-padding-x-medium);
  border: var(--border-default) solid transparent;
  border-radius: var(--radius-default);
  font-family: var(--type-control-default-family);
  font-size: var(--type-control-default-size);
  font-weight: var(--type-control-default-weight);
  line-height: var(--type-control-default-line-height);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.atlas .btn:focus-visible {
  outline: var(--border-focus-width) solid var(--color-border-focus);
  outline-offset: var(--border-focus-offset);
}

.atlas .btn--small { height: var(--size-control-small); padding: 0 var(--component-button-padding-x-small);
  font-size: var(--type-control-small-size); line-height: var(--type-control-small-line-height); }
.atlas .btn--large { height: var(--size-control-large); padding: 0 var(--component-button-padding-x-large); }

.atlas .btn--primary {
  background: var(--color-background-brand-default);
  border-color: var(--color-background-brand-default);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-button-contained);
}
.atlas .btn--primary:hover:not(:disabled) { background: var(--color-background-brand-hover); border-color: var(--color-background-brand-hover); }
/* Pressed drops the bevel — Atlas decision 0024. */
.atlas .btn--primary:active:not(:disabled) { background: var(--color-background-brand-active); border-color: var(--color-background-brand-active); box-shadow: none; }

.atlas .btn--secondary {
  background: var(--color-background-surface-raised-1);
  border-color: var(--color-border-default);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-button-contained);
}
.atlas .btn--secondary:hover:not(:disabled) { background: var(--color-background-brand-subtle); }
.atlas .btn--secondary:active:not(:disabled) { background: var(--color-background-brand-subtle); box-shadow: none; }

.atlas .btn--tertiary { background: transparent; border-color: transparent; color: var(--color-text-brand); box-shadow: none; }
.atlas .btn--tertiary:hover:not(:disabled) { background: var(--color-background-brand-subtle); }

.atlas .btn:disabled, .atlas .btn[aria-disabled="true"] {
  background: var(--color-background-disabled);
  border-color: var(--color-border-default);
  color: var(--color-text-disabled);
  box-shadow: none;
  cursor: default;
}
.atlas .btn:disabled .ms, .atlas .btn[aria-disabled="true"] .ms { color: var(--color-icon-disabled); }
.atlas .btn--primary .ms { color: var(--color-icon-on-brand); }
.atlas .btn--secondary .ms { color: var(--color-icon-secondary); }
.atlas .btn--tertiary .ms { color: var(--color-icon-brand); }

/* ==========================================================================
   Text field — label ABOVE the input, then input, then helper row.
   ========================================================================== */

.atlas .field { display: flex; flex-direction: column; gap: var(--space-gap-related); }

.atlas .field__label {
  display: flex;
  align-items: center;
  gap: var(--space-gap-pair);
  font-size: var(--type-label-default-size);
  font-weight: var(--type-label-default-weight);
  line-height: var(--type-label-default-line-height);
  color: var(--color-text-secondary);
}

.atlas .field__required { color: var(--color-text-error); }

.atlas .input {
  display: flex;
  align-items: center;
  gap: var(--component-input-gap);
  width: 100%;
  height: var(--component-textfield-height-large);
  padding: 0 var(--component-input-padding-x-medium);
  background: var(--color-background-surface-raised-1);
  border: var(--border-default) solid var(--color-border-input);
  border-radius: var(--radius-default);
}

.atlas .input:focus-within {
  outline: var(--border-focus-width) solid var(--color-border-focus);
  outline-offset: var(--border-focus-offset);
}

.atlas .input input, .atlas .input select {
  flex: 1 0 0;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--type-body-default-family);
  font-size: var(--type-body-default-size);
  line-height: var(--type-body-default-line-height);
  color: var(--color-text-primary);
}

.atlas .input input::placeholder { color: var(--color-text-subtle); }

.atlas .input select { appearance: none; cursor: pointer; }

.atlas .input--error { border-color: var(--color-border-error); }

.atlas .input--readonly { background: var(--color-background-surface-sunken); }

.atlas .input:has(:disabled) { background: var(--color-background-disabled); }
.atlas .input :disabled { color: var(--color-text-disabled); }

/* Helper row doubles as a neutral hint; in error it carries icon + message,
   because status is never colour alone. */
.atlas .field__helper {
  display: flex;
  align-items: center;
  gap: var(--space-gap-pair);
  font-size: var(--type-caption-default-size);
  line-height: var(--type-caption-default-line-height);
  color: var(--color-text-subtle);
}
.atlas .field__helper--error { color: var(--color-text-error); }
.atlas .field__helper--error .ms { color: var(--color-icon-error); }

/* ==========================================================================
   Card — raised-1 surface, 1px border, radius/large, Shadow/xs
   ========================================================================== */

.atlas .card {
  background: var(--color-background-surface-raised-1);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xs);
  padding: var(--space-padding-surface);
}

.atlas .card--hero { padding: var(--space-padding-hero); }
.atlas .card--flush { padding: 0; }

/* ==========================================================================
   Callout — inline status message. Severity wash + always-present icon +
   title/body text, so the wash is never the only cue. No border, no shadow.
   ========================================================================== */

.atlas .callout {
  display: flex;
  gap: var(--space-gap-pair);
  padding: var(--space-padding-surface);
  border-radius: var(--radius-large);
}

.atlas .callout__body { display: flex; flex-direction: column; gap: var(--space-gap-pair); flex: 1 0 0; min-width: 0; }
.atlas .callout__title { font-size: var(--type-body-bold-size); font-weight: var(--type-body-bold-weight); line-height: var(--type-body-bold-line-height); }
.atlas .callout__text { font-size: var(--type-body-default-size); line-height: var(--type-body-default-line-height); }
.atlas .callout__actions { display: flex; gap: var(--space-gap-related); margin-top: var(--space-gap-pair); }

.atlas .callout--info { background: var(--color-background-info-subtle); }
.atlas .callout--info .callout__title, .atlas .callout--info .callout__text { color: var(--color-text-info); }
.atlas .callout--info .ms { color: var(--color-icon-info); }

.atlas .callout--success { background: var(--color-background-success-subtle); }
.atlas .callout--success .callout__title, .atlas .callout--success .callout__text { color: var(--color-text-success); }
.atlas .callout--success .ms { color: var(--color-icon-success); }

/* warning and error bodies stay text/primary — the severity colour fails
   contrast on those washes in dark mode, so Atlas keeps the body neutral. */
.atlas .callout--warning { background: var(--color-background-warning-subtle); }
.atlas .callout--warning .callout__title { color: var(--color-text-warning); }
.atlas .callout--warning .callout__text { color: var(--color-text-primary); }
.atlas .callout--warning .ms { color: var(--color-icon-warning); }

.atlas .callout--error { background: var(--color-background-error-subtle); }
.atlas .callout--error .callout__title { color: var(--color-text-error); }
.atlas .callout--error .callout__text { color: var(--color-text-primary); }
.atlas .callout--error .ms { color: var(--color-icon-error); }

/* ==========================================================================
   Badge
   ========================================================================== */

.atlas .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-gap-pair);
  padding: 0 var(--space-padding-cell);
  height: var(--size-control-small);
  border-radius: var(--radius-full);
  font-size: var(--type-label-default-size);
  font-weight: var(--type-label-default-weight);
  line-height: var(--type-label-default-line-height);
  white-space: nowrap;
}

.atlas .badge--brand { background: var(--color-background-brand-subtle); color: var(--color-text-brand); }
.atlas .badge--warning { background: var(--color-background-warning-subtle); color: var(--color-text-warning); }
.atlas .badge--success { background: var(--color-background-success-subtle); color: var(--color-text-success); }
.atlas .badge--neutral { background: var(--color-background-info-subtle); color: var(--color-text-secondary); }

/* ==========================================================================
   Composed pieces — Atlas has no Chip (WIP), stepper, modal, table or page
   shell, so these are built from tokens rather than lifted from another
   library.
   ========================================================================== */

/* Filter chip */
.atlas .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-gap-pair);
  height: var(--size-control-medium);
  padding: 0 var(--space-padding-item);
  background: var(--color-background-surface-raised-1);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-full);
  font-family: var(--type-control-default-family);
  font-size: var(--type-control-default-size);
  font-weight: var(--type-control-default-weight);
  line-height: var(--type-control-default-line-height);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.atlas .chip:hover { background: var(--color-background-hover); }
.atlas .chip[aria-pressed="true"] {
  background: var(--color-background-brand-subtle);
  border-color: var(--color-border-brand);
  color: var(--color-text-brand);
}
.atlas .chip:focus-visible { outline: var(--border-focus-width) solid var(--color-border-focus); outline-offset: var(--border-focus-offset); }

/* Quantity stepper */
.atlas .qty { display: inline-flex; align-items: center; border: var(--border-default) solid var(--color-border-input);
  border-radius: var(--radius-default); background: var(--color-background-surface-raised-1); height: var(--size-control-large); }
.atlas .qty:focus-within { outline: var(--border-focus-width) solid var(--color-border-focus); outline-offset: var(--border-focus-offset); }
.atlas .qty__btn {
  display: flex; align-items: center; justify-content: center;
  width: var(--size-control-large); height: 100%;
  border: 0; background: transparent; cursor: pointer; color: var(--color-icon-secondary);
}
.atlas .qty__btn:hover:not(:disabled) { background: var(--color-background-hover); }
.atlas .qty__btn:first-child { border-radius: var(--radius-default) 0 0 var(--radius-default); }
.atlas .qty__btn:last-child { border-radius: 0 var(--radius-default) var(--radius-default) 0; }
.atlas .qty__btn:disabled { color: var(--color-icon-disabled); cursor: default; }
.atlas .qty__btn:focus-visible { outline: none; }
.atlas .qty__value {
  width: 48px; height: 100%; border: 0; outline: 0; background: transparent; text-align: center;
  font-family: var(--type-control-default-family); font-size: var(--type-control-default-size);
  font-weight: var(--type-control-default-weight); color: var(--color-text-primary);
  -moz-appearance: textfield;
}
.atlas .qty__value::-webkit-outer-spin-button, .atlas .qty__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Spec / summary rows */
.atlas .rows { display: flex; flex-direction: column; }
.atlas .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-gap-group);
  padding: var(--space-padding-cell) 0;
}
.atlas .row__key { color: var(--color-text-secondary); font-weight: var(--type-body-bold-weight); flex: 0 0 40%; }
.atlas .row__val { color: var(--color-text-primary); text-align: right; }

/* Divider */
.atlas .divider { height: var(--border-divider); background: var(--color-border-default); border: 0; margin: 0; }

/* Link */
.atlas .link { color: var(--color-text-brand); text-decoration: none; }
.atlas .link:hover { text-decoration: underline; }
.atlas .link:focus-visible { outline: var(--border-focus-width) solid var(--color-border-focus); outline-offset: var(--border-focus-offset); border-radius: var(--radius-small); }

/* Visually hidden */
.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;
}

/* Modal

   Atlas publishes no Modal, so this is composed: a raised surface at the large
   radius, the sunken tint for the footer, and dividers in the default border
   colour. Atlas has no scrim token either — the scrim below is
   --color-text-primary (#14141c) at 50%, which is the ink the shadow tokens
   are mixed from. UNVERIFIED in the same sense as the four values in
   css/atlas.css: reasoned from neighbours, not read off a frame.

   z-index clears the Odin shell, whose highest layer is 50 in css/styles.css. */
.atlas .modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  padding: var(--space-padding-page);
  background: rgba(20, 20, 28, 0.5);
  overflow-y: auto;
}

.atlas .modal__dialog {
  width: 100%;
  max-width: 880px;
  margin: auto;
  background: var(--color-background-surface-raised-1);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.atlas .modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap-group);
  padding: var(--space-padding-hero);
  border-bottom: var(--border-default) solid var(--color-border-default);
}
.atlas .modal__title { margin: 0; }

.atlas .modal__close {
  display: flex; align-items: center; justify-content: center;
  width: var(--size-control-medium); height: var(--size-control-medium);
  border: 0; border-radius: var(--radius-default);
  background: transparent; color: var(--color-icon-secondary); cursor: pointer;
}
.atlas .modal__close:hover { background: var(--color-background-hover); }
.atlas .modal__close:focus-visible { outline: var(--border-focus-width) solid var(--color-border-focus); outline-offset: var(--border-focus-offset); }

.atlas .modal__body { padding: 0 var(--space-padding-hero); }

.atlas .modal__foot {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--space-gap-group);
  padding: var(--space-padding-hero);
  background: var(--color-background-surface-sunken);
  border-top: var(--border-default) solid var(--color-border-default);
}