/* GENERATED by scripts/generate-tokens.mjs. Do not edit.
 * tokens/tokens.dtcg.json release v0.6.1 sha256 94b62e5a10f895fe22defaeb2767849f8703e128900c52e2b2305e3ecfb76067
 * DESIGN.md version 0.6.1 sha256 afdab8b96dd826c391ea5ba9171ee4ce91a28dadc9c5b21fcd4437844f275f93
 * Light mode only. Every component style must resolve to one of these
 * custom properties; literals in component CSS fail the lint gate.
 */
:root {
  --atoura-color-brand-50: #dee4eb;
  --atoura-color-brand-100: #c3d3e1;
  --atoura-color-brand-200: #a8c3d8;
  --atoura-color-brand-300: #8fadc5;
  --atoura-color-brand-400: #6a89a3;
  --atoura-color-brand-500: #577e9d;
  --atoura-color-brand-600: #326893;
  --atoura-color-brand-700: #155587;
  --atoura-color-brand-800: #144c77;
  --atoura-color-brand-900: #134266;
  --atoura-color-brand-950: #123149;
  --atoura-color-neutral-0: #ffffff;
  --atoura-color-neutral-50: #faf9f6;
  --atoura-color-neutral-100: #f5f3ed;
  --atoura-color-neutral-150: #e2e1e0;
  --atoura-color-neutral-200: #ebe9e4;
  --atoura-color-neutral-300: #e1e0db;
  --atoura-color-neutral-400: #cecdca;
  --atoura-color-neutral-500: #777a7e;
  --atoura-color-neutral-600: #5d6065;
  --atoura-color-neutral-700: #44464c;
  --atoura-color-neutral-800: #262b32;
  --atoura-color-neutral-900: #0f151d;
  --atoura-color-neutral-900-a40: #0f151d66;
  --atoura-color-neutral-950: #080808;
  --atoura-color-info-100: #d4dfea;
  --atoura-color-info-500: #7795ae;
  --atoura-color-info-700: #0063b0;
  --atoura-color-success-100: #dcfce7;
  --atoura-color-success-500: #22c55e;
  --atoura-color-success-700: #15803d;
  --atoura-color-warning-100: #fef9c3;
  --atoura-color-warning-500: #eab308;
  --atoura-color-warning-700: #a16207;
  --atoura-color-danger-100: #e5c7c7;
  --atoura-color-danger-500: #b57e7e;
  --atoura-color-danger-700: #972525;
  --atoura-color-action-tertiary-default: #00000000;
  --atoura-color-action-tertiary-disabled: #00000000;
  --atoura-color-primary: #155587;
  --atoura-color-surface-page: #f5f3ed;
  --atoura-color-surface-raised: #ffffff;
  --atoura-color-surface-sunken: #ebe9e4;
  --atoura-color-surface-overlay: #0f151d;
  --atoura-color-surface-inverse: #0f151d;
  --atoura-color-scrim: #0f151d66;
  --atoura-color-text-primary: #0f151d;
  --atoura-color-text-secondary: #44464c;
  --atoura-color-text-muted: #5d6065;
  --atoura-color-text-on-brand: #ffffff;
  --atoura-color-text-on-inverse: #faf9f6;
  --atoura-color-text-disabled: #cecdca;
  --atoura-color-border-default: #e1e0db;
  --atoura-color-border-strong: #777a7e;
  --atoura-color-border-focus: #577e9d;
  --atoura-color-action-primary-default: #155587;
  --atoura-color-action-primary-hover: #144c77;
  --atoura-color-action-primary-active: #134266;
  --atoura-color-action-primary-disabled: #8fadc5;
  --atoura-color-action-primary-text: #ffffff;
  --atoura-color-action-secondary-default: #faf9f6;
  --atoura-color-action-secondary-hover: #f5f3ed;
  --atoura-color-action-secondary-active: #ebe9e4;
  --atoura-color-action-secondary-disabled: #f5f3ed;
  --atoura-color-action-secondary-text: #0f151d;
  --atoura-color-action-tertiary-hover: #faf9f6;
  --atoura-color-action-tertiary-active: #faf9f6;
  --atoura-color-action-tertiary-text: #155587;
  --atoura-color-focus-ring: #6a89a3;
  --atoura-color-feedback-info-fg: #0063b0;
  --atoura-color-feedback-info-bg: #d4dfea;
  --atoura-color-feedback-success-fg: #15803d;
  --atoura-color-feedback-success-bg: #dcfce7;
  --atoura-color-feedback-warning-fg: #a16207;
  --atoura-color-feedback-warning-bg: #fef9c3;
  --atoura-color-feedback-danger-fg: #972525;
  --atoura-color-feedback-danger-bg: #e5c7c7;
  --atoura-color-link: #155587;
  --atoura-color-data-source-synthetic-fg: #a16207;
  --atoura-color-data-source-synthetic-bg: #fef9c3;
  --atoura-color-data-source-crr-fg: #0063b0;
  --atoura-color-data-source-crr-bg: #d4dfea;
  --atoura-color-data-source-policy-upload-fg: #0063b0;
  --atoura-color-data-source-policy-upload-bg: #d4dfea;
  --atoura-color-data-source-processor-sample-fg: #5d6065;
  --atoura-color-data-source-processor-sample-bg: #f5f3ed;
  --atoura-color-data-source-production-fg: #15803d;
  --atoura-color-data-source-production-bg: #dcfce7;
  --atoura-color-state-activation-proposed-fg: #0063b0;
  --atoura-color-state-activation-proposed-bg: #d4dfea;
  --atoura-color-state-activation-awaiting-review-fg: #a16207;
  --atoura-color-state-activation-awaiting-review-bg: #fef9c3;
  --atoura-color-state-activation-confirmed-fg: #15803d;
  --atoura-color-state-activation-confirmed-bg: #dcfce7;
  --atoura-color-state-activation-superseded-fg: #5d6065;
  --atoura-color-state-activation-superseded-bg: #f5f3ed;
  --atoura-color-state-activation-blocked-fg: #972525;
  --atoura-color-state-activation-blocked-bg: #e5c7c7;
  --atoura-color-dependency-status-waiting-celtic-fg: #a16207;
  --atoura-color-dependency-status-waiting-celtic-bg: #fef9c3;
  --atoura-color-dependency-status-waiting-atoura-fg: #0063b0;
  --atoura-color-dependency-status-waiting-atoura-bg: #d4dfea;
  --atoura-color-dependency-status-waiting-third-party-fg: #a16207;
  --atoura-color-dependency-status-waiting-third-party-bg: #fef9c3;
  --atoura-color-dependency-status-ready-fg: #15803d;
  --atoura-color-dependency-status-ready-bg: #dcfce7;
  --atoura-color-dependency-status-overdue-fg: #972525;
  --atoura-color-dependency-status-overdue-bg: #e5c7c7;
  --atoura-color-journey-stage-data-path-fg: #5d6065;
  --atoura-color-journey-stage-data-path-bg: #f5f3ed;
  --atoura-color-journey-stage-mapping-fg: #5d6065;
  --atoura-color-journey-stage-mapping-bg: #f5f3ed;
  --atoura-color-journey-stage-ckg-seed-fg: #5d6065;
  --atoura-color-journey-stage-ckg-seed-bg: #f5f3ed;
  --atoura-color-journey-stage-threshold-confirm-fg: #5d6065;
  --atoura-color-journey-stage-threshold-confirm-bg: #f5f3ed;
  --atoura-color-journey-stage-vamp-view-fg: #5d6065;
  --atoura-color-journey-stage-vamp-view-bg: #f5f3ed;
  --atoura-color-journey-stage-examiner-evidence-fg: #5d6065;
  --atoura-color-journey-stage-examiner-evidence-bg: #f5f3ed;
  --atoura-color-journey-stage-feedback-fg: #5d6065;
  --atoura-color-journey-stage-feedback-bg: #f5f3ed;
  --atoura-color-journey-evidence-required-fg: #a16207;
  --atoura-color-journey-evidence-required-bg: #fef9c3;
  --atoura-color-journey-evidence-collected-fg: #0063b0;
  --atoura-color-journey-evidence-collected-bg: #d4dfea;
  --atoura-color-journey-evidence-accepted-fg: #15803d;
  --atoura-color-journey-evidence-accepted-bg: #dcfce7;
  --atoura-color-journey-evidence-deferred-fg: #5d6065;
  --atoura-color-journey-evidence-deferred-bg: #f5f3ed;
  --atoura-color-journey-evidence-blocked-fg: #972525;
  --atoura-color-journey-evidence-blocked-bg: #e5c7c7;
  --atoura-color-journey-evidence-not-in-scope-fg: #5d6065;
  --atoura-color-journey-evidence-not-in-scope-bg: #f5f3ed;
  --atoura-color-phase-scope-1a-fg: #155587;
  --atoura-color-phase-scope-1a-bg: #dee4eb;
  --atoura-color-phase-scope-1b-fg: #5d6065;
  --atoura-color-phase-scope-1b-bg: #f5f3ed;
  --atoura-color-phase-scope-migration-fg: #5d6065;
  --atoura-color-phase-scope-migration-bg: #f5f3ed;
  --atoura-color-phase-scope-1c-fg: #5d6065;
  --atoura-color-phase-scope-1c-bg: #f5f3ed;
  --atoura-color-phase-scope-future-fg: #5d6065;
  --atoura-color-phase-scope-future-bg: #f5f3ed;
  --atoura-spacing-0: 0px;
  --atoura-spacing-2: 2px;
  --atoura-spacing-4: 4px;
  --atoura-spacing-6: 6px;
  --atoura-spacing-8: 8px;
  --atoura-spacing-12: 12px;
  --atoura-spacing-16: 16px;
  --atoura-spacing-24: 24px;
  --atoura-spacing-32: 32px;
  --atoura-spacing-40: 40px;
  --atoura-spacing-48: 48px;
  --atoura-spacing-64: 64px;
  --atoura-spacing-control-height: 40px;
  --atoura-spacing-control-x: 16px;
  --atoura-spacing-control-y: 8px;
  --atoura-spacing-gap-sm: 8px;
  --atoura-spacing-gap-md: 16px;
  --atoura-spacing-card-padding: 24px;
  --atoura-rounded-none: 0px;
  --atoura-rounded-xxs: 0.5px;
  --atoura-rounded-xs: 1px;
  --atoura-rounded-sm: 2px;
  --atoura-rounded-md: 4px;
  --atoura-rounded-lg: 8px;
  --atoura-rounded-xl: 16px;
  --atoura-rounded-2xl: 24px;
  --atoura-rounded-full: 999px;
  --atoura-rounded-control: 4px;
  --atoura-rounded-card: 8px;
  --atoura-rounded-pill: 999px;
  --atoura-typography-body-md-font-family: var(--atoura-font-sans);
  --atoura-typography-body-md-font-size: 16px;
  --atoura-typography-body-md-font-weight: 400;
  --atoura-typography-body-md-line-height: 24px;
  --atoura-typography-label-sm-font-family: var(--atoura-font-sans);
  --atoura-typography-label-sm-font-size: 14px;
  --atoura-typography-label-sm-font-weight: 500;
  --atoura-typography-label-sm-line-height: 20px;
  --atoura-typography-badge-font-family: var(--atoura-font-sans);
  --atoura-typography-badge-font-size: 14px;
  --atoura-typography-badge-font-weight: 500;
  --atoura-typography-heading-md-font-family: var(--atoura-font-sans);
  --atoura-typography-heading-md-font-size: 18px;
  --atoura-typography-heading-md-font-weight: 700;
  --atoura-typography-heading-md-line-height: 28px;
  --atoura-typography-heading-lg-font-family: var(--atoura-font-sans);
  --atoura-typography-heading-lg-font-size: 20px;
  --atoura-typography-heading-lg-font-weight: 700;
  --atoura-typography-heading-lg-line-height: 32px;
  --atoura-typography-heading-display-font-family: var(--atoura-font-sans);
  --atoura-typography-heading-display-font-size: 30px;
  --atoura-typography-heading-display-font-weight: 700;
  --atoura-typography-heading-display-line-height: 32px;
  --atoura-typography-metric-lg-font-family: var(--atoura-font-sans);
  --atoura-typography-metric-lg-font-size: 24px;
  --atoura-typography-metric-lg-font-weight: 700;
  --atoura-typography-mono-sm-font-family: var(--atoura-font-mono);
  --atoura-typography-mono-sm-font-size: 12px;
  --atoura-typography-mono-sm-font-weight: 400;
  --atoura-typography-mono-sm-line-height: 20px;
  --atoura-font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --atoura-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --atoura-type-size-xxs: 10px;
  --atoura-type-size-xs: 12px;
  --atoura-type-size-sm: 14px;
  --atoura-type-size-md: 16px;
  --atoura-type-size-lg: 18px;
  --atoura-type-size-xl: 20px;
  --atoura-type-size-2xl: 24px;
  --atoura-type-size-3xl: 30px;
  --atoura-type-size-4xl: 36px;
  --atoura-type-line-sm: 20px;
  --atoura-type-line-md: 24px;
  --atoura-type-line-lg: 28px;
  --atoura-type-line-xl: 32px;
  --atoura-type-weight-regular: 400;
  --atoura-type-weight-medium: 500;
  --atoura-type-weight-semibold: 600;
  --atoura-type-weight-bold: 700;
  --atoura-size-control-sm: 32px;
  --atoura-size-control-md: 40px;
  --atoura-size-control-lg: 48px;
  --atoura-size-icon-sm: 16px;
  --atoura-size-icon-md: 20px;
  --atoura-elevation-color: rgba(0, 0, 0, 0.08);
  --atoura-elevation-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --atoura-elevation-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --atoura-elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --atoura-opacity-disabled: 0.4;
  --atoura-opacity-hover: 0.08;
  --atoura-opacity-muted: 0.6;
  --atoura-border-width-default: 0.75px;
  --atoura-border-width-focus: 2px;
  --atoura-border-stroke-0: 0px;
  --atoura-border-stroke-thin: 0.75px;
  --atoura-border-stroke-regular: 1px;
  --atoura-border-stroke-medium: 1.5px;
  --atoura-border-stroke-double: 2px;
  --atoura-border-stroke-thick: 3px;
  --atoura-border-stroke-hairline: 0.75px;
  --atoura-border-stroke-1: 1px;
  --atoura-border-stroke-2: 2px;
  --atoura-motion-fast: 120ms;
  --atoura-motion-base: 200ms;
  --atoura-motion-slow: 320ms;
}

/* Base layer: the shared affordances every component builds on.
 * Light mode only; every value resolves to a --atoura-* custom property. */

/* Dimensions in the specs and the Figma drawings are border-box (a 40
 * control is 40 INCLUDING border and padding). Scoped to component
 * subtrees so the library never resets a consumer's own elements. */
[class^="atoura-"],
[class*=" atoura-"],
[class^="atoura-"] *,
[class*=" atoura-"] * {
  box-sizing: border-box;
}

/* Focus is part of the shape language (DESIGN.md Shapes): every interactive
 * element shows a visible ring, offset, never color-change alone. */
.atoura-focusable:focus-visible {
  outline: var(--atoura-border-width-focus) solid var(--atoura-color-focus-ring);
  outline-offset: var(--atoura-spacing-2);
}

/* Screen-reader-only content (labels for icon-only affordances, loading
 * announcements). The clip pattern keeps it in the accessibility tree. */
.atoura-visually-hidden {
  position: absolute;
  width: 1px; /* literal-ok: sr-only clip pattern, not a design value */
  height: 1px; /* literal-ok: sr-only clip pattern, not a design value */
  margin: -1px; /* literal-ok: sr-only clip pattern, not a design value */
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The loading spinner rotates; a still spinner reads as a broken glyph.
 * Duration is a motion literal pending a spin token (DEC backlog). */
@keyframes atoura-spin {
  to {
    transform: rotate(360deg);
  }
}
.atoura-spinner {
  animation: atoura-spin 800ms linear infinite; /* literal-ok: no motion-spin token exists (DEC backlog) */
}
@media (prefers-reduced-motion: reduce) {
  .atoura-spinner {
    animation: none;
  }
}

/* Shared form-field styling, trued to the drawn canon (2026-08-31 autolayout
 * sync, DEC-2026-08-31-02; sets 2067:21 / 2068:21 / 2077:50). Geometry model
 * from the drawings: a HUG box on the padding model -- 12 inline padding,
 * 8 block padding, a 16 label line over an 18 value line at gap 0, 50 tall at
 * reference (raw 50, DEC-2026-08-31-09; text-area stays fixed 144, pad 12,
 * gap 2). The label is ABSOLUTE with two poses -- centered-left 14 when
 * empty, top 12-line when raised -- and the morph is a designed smooth
 * transition (motion/fast). The control owns a constant 18 value line seated
 * at the drawn two-line position. Disabled = sunken fill with muted label and
 * secondary value ink, as drawn. Error = 1.5 danger border, danger label,
 * alert glyph at the label line; no visible message below (the string is the
 * accessible description). The locked ("inactive") state retired with its
 * drawn nodes per DEC-2026-08-31-03. */

.atoura-field {
  display: flex;
  flex-direction: column;
  font-family: var(--atoura-font-sans);
}

/* The boundary rides an INSET ring shadow, not a border: Figma strokes are
 * INSIDE and the hug box totals 50 with them; a CSS border on a hug box adds
 * outside (modal.css precedent). --field-glow carries the state glows. */
.atoura-field__box {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--atoura-spacing-8) var(--atoura-spacing-12);
  background: var(--atoura-color-surface-raised);
  --field-ring: inset 0 0 0 var(--atoura-border-width-default) var(--atoura-color-border-default);
  --field-glow: 0 0 0 0 transparent;
  box-shadow: var(--field-ring), var(--field-glow);
  border-radius: var(--atoura-rounded-control);
}

/* Text-area: the drawn box is a fixed 144 with the value area filling. */
.atoura-text-area .atoura-field__box {
  height: 144px; /* literal-ok: drawn text-area box, no token exists (DEC backlog) */
  justify-content: flex-start;
  padding-top: var(--atoura-spacing-12);
  padding-bottom: var(--atoura-spacing-12);
}

/* The label: absolute, two poses, smooth designed morph between them. */
.atoura-field__label {
  position: absolute;
  top: 50%;
  left: var(--atoura-spacing-12);
  right: var(--atoura-spacing-12);
  overflow: hidden;
  color: var(--atoura-color-text-secondary);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-regular);
  line-height: 18px; /* literal-ok: drawn 14-size line box */
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  transition:
    top var(--atoura-motion-fast) ease,
    transform var(--atoura-motion-fast) ease,
    font-size var(--atoura-motion-fast) ease,
    color var(--atoura-motion-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
  .atoura-field__label {
    transition: none;
  }
}

/* Raised pose: filled, focused, or error. Sits at the drawn two-line
 * position: block padding 8 -> label line top 8. */
.atoura-field[data-filled] .atoura-field__label,
.atoura-field[data-invalid] .atoura-field__label,
.atoura-field__box:focus-within .atoura-field__label {
  top: 8px; /* literal-ok: drawn raised-label seat = block pad 8 (DEC-2026-08-31-02) */
  font-size: var(--atoura-type-size-xs);
  line-height: 16px; /* literal-ok: drawn 12-size line box */
  transform: translateY(0);
}
.atoura-field.atoura-text-area .atoura-field__label {
  top: var(--atoura-spacing-12);
  transform: translateY(0);
}

/* The control: a constant 18 value line seated under the raised label
 * (16 label line + gap 0 = 16 offset from the padded content top). */
.atoura-field__control {
  width: 100%;
  height: 18px; /* literal-ok: drawn value line (14 at auto leading) */
  margin-top: 16px; /* literal-ok: drawn label line 16 + gap 0 (DEC-2026-08-31-02) */
  padding: 0;
  color: var(--atoura-color-text-primary);
  font-family: var(--atoura-font-sans);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-medium);
  line-height: 18px; /* literal-ok: drawn value line box */
  background: transparent;
  border: none;
  outline: none;
}
.atoura-text-area .atoura-field__control {
  flex: 1 1 auto;
  height: auto;
  margin-top: 18px; /* literal-ok: drawn text-area label line 16 + gap 2 */
  resize: none;
}

.atoura-field__control::placeholder {
  color: var(--atoura-color-text-muted);
  font-weight: var(--atoura-type-weight-regular);
}

/* Hover: label inks up; the box lifts on the secondary-CTA shadow. */
.atoura-field:not([data-disabled]):hover .atoura-field__box {
  --field-glow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
}
.atoura-field:not([data-disabled]):hover .atoura-field__label {
  color: var(--atoura-color-text-primary);
}

/* Focus: 2 border/focus ring plus the input-focus glow; label inks up. */
.atoura-field__box:focus-within {
  --field-ring: inset 0 0 0 var(--atoura-border-width-focus) var(--atoura-color-border-focus);
  --field-glow: 0 var(--atoura-spacing-2) var(--atoura-spacing-8) 0
    var(--atoura-color-brand-50);
}
.atoura-field__box:focus-within .atoura-field__label {
  color: var(--atoura-color-text-primary);
}

/* Disabled, as drawn (DEC-2026-08-31-02): sunken fill, muted label,
 * secondary value ink; no opacity fade. */
.atoura-field[data-disabled] .atoura-field__box {
  background: var(--atoura-color-surface-sunken);
}
.atoura-field[data-disabled] .atoura-field__label {
  color: var(--atoura-color-text-muted);
}
.atoura-field[data-disabled] .atoura-field__control {
  color: var(--atoura-color-text-secondary);
}

/* Error: 1.5 danger ring, danger label, alert glyph at the label line. */
.atoura-field[data-invalid] .atoura-field__box {
  --field-ring: inset 0 0 0 var(--atoura-border-stroke-medium) var(--atoura-color-feedback-danger-fg);
}
.atoura-field[data-invalid] .atoura-field__box:focus-within {
  --field-ring: inset 0 0 0 var(--atoura-border-width-focus) var(--atoura-color-feedback-danger-fg);
}
.atoura-field[data-invalid] .atoura-field__label {
  color: var(--atoura-color-feedback-danger-fg);
}
.atoura-field__alert {
  position: absolute;
  top: 8px; /* literal-ok: seated at the raised label line (block pad 8) */
  right: var(--atoura-spacing-12);
  display: inline-flex;
  color: var(--atoura-color-feedback-danger-fg);
}
.atoura-text-area .atoura-field__alert {
  top: var(--atoura-spacing-12);
}

.atoura-field__trailing {
  position: absolute;
  top: 50%;
  right: var(--atoura-spacing-12);
  display: inline-flex;
  gap: var(--atoura-spacing-4);
  color: var(--atoura-color-text-secondary);
  transform: translateY(-50%);
}

/* badge.md, trued to the drawn set 2028:16 (2026-08-25 parity pass): 24
 * pill, 12 SemiBold label in text/primary on every variant, 1 stroke in
 * the variant's feedback fg, fill in its feedback bg. */
.atoura-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--atoura-spacing-4);
  height: var(--atoura-spacing-24);
  padding: var(--atoura-spacing-2) var(--atoura-spacing-gap-sm);
  color: var(--atoura-color-text-primary);
  font-family: var(--atoura-typography-badge-font-family);
  font-size: var(--atoura-type-size-xs);
  font-weight: var(--atoura-type-weight-semibold);
  line-height: 16px; /* literal-ok: drawn 12-size line box (canon) */
  white-space: nowrap;
  border-radius: var(--atoura-rounded-pill);
  border: var(--atoura-border-stroke-regular) solid var(--atoura-color-border-strong);
  background: var(--atoura-color-surface-sunken);
}

.atoura-badge__icon {
  display: inline-flex;
}

.atoura-badge--info {
  background: var(--atoura-color-feedback-info-bg);
  border-color: var(--atoura-color-feedback-info-fg);
}
.atoura-badge--success {
  background: var(--atoura-color-feedback-success-bg);
  border-color: var(--atoura-color-feedback-success-fg);
}
.atoura-badge--warning {
  background: var(--atoura-color-feedback-warning-bg);
  border-color: var(--atoura-color-feedback-warning-fg);
}
.atoura-badge--danger {
  background: var(--atoura-color-feedback-danger-bg);
  border-color: var(--atoura-color-feedback-danger-fg);
}

/* button.md, trued to the drawn set 2014:40 / 2741 (2026-08-25 parity pass):
 * 40 control (26 compact), 88-320 width envelope, per-state EDGE
 * strokes on primary (brand-900 rest, brand-950 pressed/hover, brand-200
 * disabled; brand-800 on compact rest), CTA shadows on primary and
 * secondary, and the outlined tertiary. Edge strokes bind brand primitives
 * pending the ruled semantic family (DEC-2026-08-25-10 backlog). */
.atoura-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--atoura-spacing-gap-sm);
  min-height: var(--atoura-spacing-control-height);
  min-width: 88px; /* literal-ok: drawn width envelope, no token exists (DEC backlog) */
  max-width: 320px; /* literal-ok: drawn width envelope, no token exists (DEC backlog) */
  padding: var(--atoura-spacing-control-y) var(--atoura-spacing-control-x);
  font-family: var(--atoura-typography-label-sm-font-family);
  font-size: var(--atoura-typography-label-sm-font-size);
  font-weight: var(--atoura-typography-label-sm-font-weight);
  line-height: 18px; /* literal-ok: drawn 14-size line box (canon 2014:4) */
  border-radius: var(--atoura-rounded-control);
  cursor: pointer;
}

.atoura-button--compact {
  min-height: 0;
  height: 26px; /* literal-ok: drawn compact row (canon 2741:5) */
  padding: var(--atoura-spacing-4) var(--atoura-spacing-control-x);
}

.atoura-button--primary {
  color: var(--atoura-color-action-primary-text);
  background: var(--atoura-color-action-primary-default);
  border: var(--atoura-border-stroke-thin) solid var(--atoura-color-brand-900);
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-400);
}
.atoura-button--primary.atoura-button--compact {
  border-color: var(--atoura-color-brand-800);
}
.atoura-button--primary:hover:not(:disabled):not([data-loading]) {
  background: var(--atoura-color-action-primary-hover);
  border-color: var(--atoura-color-brand-950);
}
.atoura-button--primary:active:not(:disabled):not([data-loading]) {
  background: var(--atoura-color-action-primary-active);
  border-color: var(--atoura-color-brand-950);
}
.atoura-button--primary:disabled {
  background: var(--atoura-color-action-primary-disabled);
  border-color: var(--atoura-color-brand-200);
  box-shadow: none;
}

.atoura-button--secondary {
  color: var(--atoura-color-action-secondary-text);
  background: var(--atoura-color-action-secondary-default);
  border: var(--atoura-border-width-default) solid var(--atoura-color-border-default);
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
}
.atoura-button--secondary:hover:not(:disabled):not([data-loading]) {
  background: var(--atoura-color-action-secondary-hover);
}
.atoura-button--secondary:active:not(:disabled):not([data-loading]) {
  background: var(--atoura-color-action-secondary-active);
}
.atoura-button--secondary:disabled {
  background: var(--atoura-color-action-secondary-disabled);
  box-shadow: none;
}

/* Tertiary is the drawn outlined ghost: quiet ink, hairline boundary. */
.atoura-button--tertiary {
  color: var(--atoura-color-text-secondary);
  background: var(--atoura-color-action-tertiary-default);
  border: var(--atoura-border-stroke-regular) solid var(--atoura-color-border-default);
}
.atoura-button--tertiary:hover:not(:disabled):not([data-loading]) {
  background: var(--atoura-color-action-tertiary-hover);
}
.atoura-button--tertiary:active:not(:disabled):not([data-loading]) {
  background: var(--atoura-color-action-tertiary-active);
}
.atoura-button--tertiary:disabled {
  background: var(--atoura-color-action-tertiary-disabled);
}

.atoura-button:disabled {
  cursor: not-allowed;
}
.atoura-button[data-loading] {
  cursor: progress;
}

/* card.md, trued to the drawn set 2028:36 (2026-08-25 parity pass): raised
 * panel with hairline border, 24 padding, the modal-elevation shadow at
 * rest, 18/600 title over 14/400 supporting text on a 4 stack. Selected
 * carries the 2 border/focus (ruled 2026-08-25; now drawn on 2028:30).
 * The former hover-only elevation lift retires: elevation is at rest. */
.atoura-card {
  display: flex;
  border: none; /* hairline lives in the inset ring; kills the UA button border */
  width: 100%;
  flex-direction: column;
  gap: var(--atoura-spacing-24);
  padding: var(--atoura-spacing-card-padding);
  font-family: var(--atoura-font-sans);
  text-align: left;
  text-decoration: none;
  background: var(--atoura-color-surface-raised);
  border-radius: var(--atoura-rounded-card);
  /* hairline as an inset ring: Figma strokes are INSIDE and add no height */
  box-shadow:
    inset 0 0 0 var(--atoura-border-stroke-thin) var(--atoura-color-border-default),
    0 var(--atoura-spacing-8) var(--atoura-spacing-16) 0 var(--atoura-color-neutral-300);
}

.atoura-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--atoura-spacing-4);
}

.atoura-card__title {
  color: var(--atoura-color-text-primary);
  font-size: var(--atoura-type-size-lg);
  font-weight: var(--atoura-type-weight-semibold);
  line-height: 23px; /* literal-ok: drawn line box (canon) */
}

.atoura-card__body {
  color: var(--atoura-color-text-secondary);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-regular);
  line-height: 18px; /* literal-ok: drawn line box (canon) */
}

.atoura-card--interactive {
  cursor: pointer;
}

.atoura-card[data-selected] {
  box-shadow:
    inset 0 0 0 var(--atoura-border-width-focus) var(--atoura-color-border-focus),
    0 var(--atoura-spacing-8) var(--atoura-spacing-16) 0 var(--atoura-color-neutral-300);
}

.atoura-card[data-disabled] {
  opacity: var(--atoura-opacity-disabled);
  cursor: not-allowed;
}

/* checkbox.md: box + glyph + adjacent label; state via the hidden native
 * input's pseudo-classes. The unchecked border-strong outline is a
 * documented 1.4.11 exception (2.27:1) pending reconciliation (TII-136). */
.atoura-checkbox {
  font-size: var(--atoura-type-size-sm);
  line-height: 18px; /* literal-ok: drawn row line box */
  display: inline-flex;
  align-items: center;
  gap: var(--atoura-spacing-gap-sm);
  
  font-family: var(--atoura-font-sans);
  cursor: pointer;
}

.atoura-checkbox__box {
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; /* literal-ok: drawn box, no 18 token exists (DEC backlog) */
  height: 18px; /* literal-ok: drawn box, no 18 token exists (DEC backlog) */
  color: var(--atoura-color-text-on-brand);
  background: var(--atoura-color-surface-raised);
  border: var(--atoura-border-width-default) solid var(--atoura-color-border-strong);
  border-radius: var(--atoura-rounded-control);
}

.atoura-checkbox__glyph {
  position: absolute;
  display: none;
  line-height: 0;
}

.atoura-checkbox__input:checked:not(:indeterminate) + .atoura-checkbox__box {
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
  background: var(--atoura-color-action-primary-default);
  border-color: var(--atoura-color-brand-800);
}
.atoura-checkbox__input:checked:not(:indeterminate) + .atoura-checkbox__box .atoura-checkbox__glyph--check {
  display: inline-flex;
}

.atoura-checkbox__input:indeterminate + .atoura-checkbox__box {
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
  background: var(--atoura-color-action-primary-default);
  border-color: var(--atoura-color-brand-800);
}
.atoura-checkbox__input:indeterminate + .atoura-checkbox__box .atoura-checkbox__glyph--minus {
  display: inline-flex;
}

.atoura-checkbox__input:checked:hover:not(:disabled) + .atoura-checkbox__box,
.atoura-checkbox__input:indeterminate:hover:not(:disabled) + .atoura-checkbox__box {
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
  background: var(--atoura-color-action-primary-hover);
  border-color: var(--atoura-color-action-primary-hover);
}

.atoura-checkbox__input:focus-visible + .atoura-checkbox__box {
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
  outline: var(--atoura-border-width-focus) solid var(--atoura-color-focus-ring);
  outline-offset: var(--atoura-spacing-2);
}

.atoura-checkbox__input:disabled + .atoura-checkbox__box,
.atoura-checkbox__input:disabled ~ .atoura-checkbox__label {
  color: var(--atoura-color-text-primary);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-medium);
  line-height: 18px; /* literal-ok: drawn line box (canon) */
}

.atoura-checkbox:has(.atoura-checkbox__input:disabled) {
  cursor: not-allowed;
}

.atoura-checkbox__label {
  white-space: nowrap; /* drawn single-line label */
  color: var(--atoura-color-text-primary);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-medium);
  line-height: 18px; /* literal-ok: drawn line box (canon) */
}

/* empty-state.md, trued to the drawn set 2029:56 (2026-08-25 parity pass):
 * a left-aligned raised panel (hairline border, modal-elevation shadow,
 * 24 padding/stack) of 18/600 heading over 14/400 body on an 8 inner
 * stack; no glyph is drawn. The action slot renders full-width primary. */
.atoura-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--atoura-spacing-24);
  padding: var(--atoura-spacing-card-padding);
  font-family: var(--atoura-font-sans);
  background: var(--atoura-color-surface-raised);
  border-radius: var(--atoura-rounded-card);
  /* hairline as an inset ring: Figma strokes are INSIDE and add no height */
  box-shadow:
    inset 0 0 0 var(--atoura-border-stroke-thin) var(--atoura-color-border-default),
    0 var(--atoura-spacing-8) var(--atoura-spacing-16) 0 var(--atoura-color-neutral-300);
}

.atoura-empty-state__text {
  display: flex;
  flex-direction: column;
  gap: var(--atoura-spacing-8);
  width: 100%;
}

.atoura-empty-state__heading {
  margin: 0;
  color: var(--atoura-color-text-primary);
  font-size: var(--atoura-type-size-lg);
  font-weight: var(--atoura-type-weight-semibold);
  line-height: 23px; /* literal-ok: drawn line box (canon) */
}

.atoura-empty-state__body {
  margin: 0;
  color: var(--atoura-color-text-secondary);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-regular);
  line-height: 18px; /* literal-ok: drawn line box (canon) */
}

.atoura-empty-state__action {
  display: flex;
  width: 100%;
}
.atoura-empty-state__action > * {
  flex: 1 1 auto;
}

/* modal.md, trued to the drawn set 2497:101 (2026-08-25 parity pass): 320
 * panel, 24 padding and stack gap, hairline border, the modal-elevation
 * shadow, 18/600 title with a 16 close glyph in the title row, 14/400
 * body, and full-width / equal-split footers. The scrim stays: it is the
 * repo-ratified backdrop (DEC-2026-07-10-01); no drawn backdrop exists. */
.atoura-modal__backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--atoura-color-scrim);
}

.atoura-modal {
  display: flex;
  flex-direction: column;
  gap: var(--atoura-spacing-24);
  width: 320px; /* literal-ok: drawn panel width, no token exists (DEC backlog) */
  max-width: 90%; /* literal-ok: viewport guard, not a design value */
  padding: var(--atoura-spacing-24);
  font-family: var(--atoura-font-sans);
  background: var(--atoura-color-surface-raised);
  border-radius: var(--atoura-rounded-card);
  box-shadow:
    inset 0 0 0 var(--atoura-border-stroke-thin) var(--atoura-color-border-default),
    0 var(--atoura-spacing-8) var(--atoura-spacing-16) 0 var(--atoura-color-neutral-300);
}

.atoura-modal__header {
  display: flex;
  flex-direction: column;
  gap: var(--atoura-spacing-8);
}

.atoura-modal__title-row {
  display: flex;
  align-items: center;
  gap: var(--atoura-spacing-8);
}

.atoura-modal__title {
  flex: 1 1 auto;
  margin: 0;
  color: var(--atoura-color-text-primary);
  font-size: var(--atoura-type-size-lg);
  font-weight: var(--atoura-type-weight-semibold);
  line-height: 23px; /* literal-ok: drawn line box (canon) */
}

.atoura-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  color: var(--atoura-color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--atoura-rounded-control);
  cursor: pointer;
}

.atoura-modal__body {
  margin: 0;
  color: var(--atoura-color-text-secondary);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-regular);
  line-height: 18px; /* literal-ok: drawn line box (canon) */
}

.atoura-modal__footer {
  display: flex;
  align-items: stretch;
  gap: var(--atoura-spacing-16);
}
.atoura-modal__footer > * {
  flex: 1 1 0;
}

/* radio.md: ring + dot + adjacent label; the unselected border-strong ring is
 * a documented 1.4.11 exception (2.27:1) pending reconciliation (TII-136). */
.atoura-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--atoura-spacing-gap-sm);
  margin: 0;
  padding: 0;
  border: none;
}

.atoura-radio-group__legend {
  padding: 0;
  margin-bottom: var(--atoura-spacing-4);
  color: var(--atoura-color-text-secondary);
  font-family: var(--atoura-typography-label-sm-font-family);
  font-size: var(--atoura-typography-label-sm-font-size);
  font-weight: var(--atoura-typography-label-sm-font-weight);
  line-height: var(--atoura-typography-label-sm-line-height);
}

.atoura-radio {
  font-size: var(--atoura-type-size-sm);
  line-height: 18px; /* literal-ok: drawn row line box */
  display: inline-flex;
  align-items: center;
  gap: var(--atoura-spacing-gap-sm);
  
  font-family: var(--atoura-font-sans);
  cursor: pointer;
}

.atoura-radio__ring {
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--atoura-size-icon-sm);
  height: var(--atoura-size-icon-sm);
  background: var(--atoura-color-neutral-50);
  border: var(--atoura-border-width-default) solid var(--atoura-color-border-strong);
  border-radius: var(--atoura-rounded-pill);
}

.atoura-radio__dot {
  display: none;
  width: var(--atoura-spacing-8);
  height: var(--atoura-spacing-8);
  background: var(--atoura-color-action-primary-default);
  border-radius: var(--atoura-rounded-pill);
}

.atoura-radio__input:checked + .atoura-radio__ring .atoura-radio__dot {
  display: block;
}

.atoura-radio__input:checked:hover:not(:disabled) + .atoura-radio__ring .atoura-radio__dot {
  background: var(--atoura-color-action-primary-hover);
}

.atoura-radio__input:focus-visible + .atoura-radio__ring {
  box-shadow: 0 var(--atoura-spacing-2) var(--atoura-spacing-4) 0
    var(--atoura-color-neutral-200);
  outline: var(--atoura-border-width-focus) solid var(--atoura-color-focus-ring);
  outline-offset: var(--atoura-spacing-2);
}

.atoura-radio__input:disabled + .atoura-radio__ring,
.atoura-radio__input:disabled ~ .atoura-radio__label {
  color: var(--atoura-color-text-primary);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-medium);
  line-height: 18px; /* literal-ok: drawn line box (canon) */
}

.atoura-radio:has(.atoura-radio__input:disabled) {
  cursor: not-allowed;
}

.atoura-radio__label {
  white-space: nowrap; /* drawn single-line label */
  color: var(--atoura-color-text-primary);
  font-size: var(--atoura-type-size-sm);
  font-weight: var(--atoura-type-weight-medium);
  line-height: 18px; /* literal-ok: drawn line box (canon) */
}

/* select.md: the trigger mirrors the form-field contract (field.css); the
 * open menu is user-agent native (documented deviation, TII-135). */
.atoura-select__control {
  appearance: none;
  cursor: pointer;
}

.atoura-select .atoura-field__trailing {
  color: var(--atoura-color-text-secondary);
  pointer-events: none;
}

/* Chevron sharpens to text/primary when the trigger is active (spec focus/open rows). */
.atoura-select .atoura-field__box:focus-within .atoura-field__trailing {
  color: var(--atoura-color-text-primary);
}

/* Error keeps the danger-colored alert icon dominant. */
.atoura-select.atoura-field[data-invalid] .atoura-field__trailing {
  color: var(--atoura-color-feedback-danger-fg);
}

.atoura-select .atoura-field__control:disabled {
  cursor: not-allowed;
}

/* Drawn open state (2077:33): the chevron flips while the menu is open. */
.atoura-select .atoura-field__box:focus-within .atoura-icon-chevron {
  transform: rotate(180deg);
}

/* table.md state matrix. Dividers are structural (low contrast accepted per
 * the spec's 1.4.11 note). */
.atoura-table {
  width: 100%;
  font-family: var(--atoura-font-sans);
  background: var(--atoura-color-surface-raised);
  border-collapse: collapse;
  border: var(--atoura-border-stroke-regular) solid var(--atoura-color-border-default);
  overflow: clip;
  border-radius: var(--atoura-rounded-card);
}

.atoura-table__head {
  background: var(--atoura-color-surface-sunken);
}

.atoura-table__header-cell {
  padding: var(--atoura-spacing-8) var(--atoura-spacing-12);
  color: var(--atoura-color-text-secondary);
  font-size: var(--atoura-type-size-xs);
  font-weight: var(--atoura-type-weight-semibold);
  line-height: 18px; /* literal-ok: snapped header row 34 = pad 8 + 18 line (drawn 12 SemiBold, DEC-2026-08-31-06) */
  text-align: left;
}

/* Sorted column header sharpens to text/primary (spec sorted row). */

.atoura-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--atoura-spacing-4);
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Direction by glyph rotation, visible only when the column is sorted. */
.atoura-table__sort-glyph {
  display: inline-flex;
  line-height: 0;
}
.atoura-table__sort-glyph[data-direction="none"] {
  visibility: hidden;
}
.atoura-table__sort-glyph[data-direction="ascending"] {
  transform: rotate(180deg);
}

.atoura-table__row {
  border-bottom: var(--atoura-border-stroke-regular) solid var(--atoura-color-border-default);
}

.atoura-table__row:hover:not(.atoura-table__row--skeleton) {
  background: var(--atoura-color-surface-sunken);
}

.atoura-table__row[data-selected], .atoura-table__row[data-selected]:hover {
  background: var(--atoura-color-feedback-info-bg);
}

.atoura-table__cell {
  padding: var(--atoura-spacing-8) var(--atoura-spacing-12);
  color: var(--atoura-color-text-primary);
  font-size: var(--atoura-type-size-sm);
  line-height: 20px; /* literal-ok: snapped row 36 = pad 8 + 20 line (cell-text atom 14-value, DEC-2026-08-31-06) */
}

.atoura-table__cell--secondary {
  color: var(--atoura-color-text-muted);
}

.atoura-table__row--skeleton .atoura-table__cell {
  background: var(--atoura-color-surface-sunken);
}

.atoura-table__skeleton {
  display: block;
  height: var(--atoura-spacing-8);
  background: var(--atoura-color-border-default);
  border-radius: var(--atoura-rounded-pill);
}

/* Drawn sort glyph renders at 12 (canon 2100:220) inside the 16 icon frame. */
.atoura-table__sort-glyph svg {
  width: var(--atoura-spacing-12);
  height: var(--atoura-spacing-12);
}

/* tabs.md state matrix. Inactive labels bind text/muted as drawn -- passing
 * AA post-DEC-2026-08-10-02 (5.69:1 page, 6.31:1 raised; the stale failing
 * claim retired per DEC-2026-08-25-11, comment trued 2026-08-31). Active is
 * indicator + text/primary, never color alone (1.4.1). */
.atoura-tab-list {
  align-items: flex-start;
  display: flex;
  gap: var(--atoura-spacing-gap-sm);
  border-bottom: var(--atoura-border-width-default) solid var(--atoura-color-border-default);
}

.atoura-tab {
  white-space: nowrap; /* drawn single-line label */
  padding: var(--atoura-spacing-2) var(--atoura-spacing-gap-sm);
  color: var(--atoura-color-text-muted);
  font-family: var(--atoura-typography-label-sm-font-family);
  font-size: var(--atoura-typography-label-sm-font-size);
  font-weight: var(--atoura-typography-label-sm-font-weight);
  line-height: 18px; /* literal-ok: drawn line box (canon) */
  background: none;
  border: none;
  box-shadow: inset 0 calc(-1 * var(--atoura-border-stroke-medium)) 0 0 transparent; /* indicator seat: drawn 22 row, stroke inside */
  cursor: pointer;
}


.atoura-tab[aria-selected="true"] {
  color: var(--atoura-color-text-primary);
  box-shadow: inset 0 calc(-1 * var(--atoura-border-stroke-medium)) 0 0 var(--atoura-color-text-primary);
}

.atoura-tab[aria-disabled="true"] {
  color: var(--atoura-color-text-muted);
  opacity: var(--atoura-opacity-disabled);
  cursor: not-allowed;
}

.atoura-tab-panel {
  padding-top: var(--atoura-spacing-gap-md);
  font-family: var(--atoura-font-sans);
  color: var(--atoura-color-text-primary);
}

/* text-area.md: vertical resize only; the resize affordance is never the
 * focus indicator (the border-focus treatment from field.css carries that). */
.atoura-text-area__control {
  resize: vertical;
}

.atoura-text-area .atoura-field__box {
  justify-content: flex-start;
}

/* The trailing alert icon anchors to the top on multiline fields. */
.atoura-text-area .atoura-field__trailing {
  top: var(--atoura-spacing-control-x);
  transform: none;
}