/* @ordomint/design-system:start sha256:cf0893b06ab454af25421f97ff1213179c29ebd7e86f964a52ecfc95d01610d8 */
/* Generated by scripts/tokens.mjs. Do not edit. */
:root,
html[data-om-theme="ordomint-light"] {
  --om-comp-button-default-background: var(--om-sys-color-action-primary-background);
  --om-comp-button-default-border: var(--om-sys-color-action-primary-border);
  --om-comp-button-default-foreground: var(--om-sys-color-action-primary-foreground);
  --om-comp-button-radius: var(--om-sys-radius-control);
  --om-comp-navigation-row-min-height: var(--om-sys-density-navigation-row-min-height);
  --om-comp-navigation-row-padding-block: var(--om-sys-density-navigation-row-padding-block);
  --om-comp-navigation-row-padding-inline: var(--om-sys-density-navigation-row-padding-inline);
  --om-ref-border-width-default: 1px;
  --om-ref-border-width-selected: 2px;
  --om-ref-breakpoint-large: 1024px;
  --om-ref-breakpoint-medium: 768px;
  --om-ref-breakpoint-small: 640px;
  --om-ref-breakpoint-wide: 1280px;
  --om-ref-color-action-hover: #B4C5AA;
  --om-ref-color-action-pressed: #A5B69D;
  --om-ref-color-canvas: #F4F6EF;
  --om-ref-color-canvas-soft: #F8FAF6;
  --om-ref-color-danger: #A3212C;
  --om-ref-color-danger-hover: #861923;
  --om-ref-color-danger-pressed: #6D141D;
  --om-ref-color-danger-subtle: #FFF0F1;
  --om-ref-color-forest: #13201D;
  --om-ref-color-info: #145DA0;
  --om-ref-color-info-subtle: #EBF4FF;
  --om-ref-color-ink: #091214;
  --om-ref-color-neutral-100: #EEEEEE;
  --om-ref-color-neutral-200: #E2E2E2;
  --om-ref-color-neutral-300: #D4D4D4;
  --om-ref-color-neutral-500: #737373;
  --om-ref-color-neutral-600: #525252;
  --om-ref-color-neutral-800: #333333;
  --om-ref-color-neutral-900: #222222;
  --om-ref-color-neutral-950: #111111;
  --om-ref-color-sage: #C3D5B7;
  --om-ref-color-sage-muted: #5F6F66;
  --om-ref-color-sage-strong: #3F5A4C;
  --om-ref-color-scrim: rgb(19 32 29 / 0.4);
  --om-ref-color-success: #23633E;
  --om-ref-color-success-subtle: #EAF6EE;
  --om-ref-color-transparent: rgb(0 0 0 / 0);
  --om-ref-color-warning: #754600;
  --om-ref-color-warning-subtle: #FFF5D6;
  --om-ref-color-white: #FFFFFF;
  --om-ref-density-control-default: 2.5rem;
  --om-ref-density-control-icon: 2.75rem;
  --om-ref-density-control-large: 2.75rem;
  --om-ref-density-control-small: 2rem;
  --om-ref-density-navigation-row-min-height: 1.875rem;
  --om-ref-density-navigation-row-padding-block: 0.25rem;
  --om-ref-density-navigation-row-padding-inline: 0.5rem;
  --om-ref-density-target: 2.75rem;
  --om-ref-elevation-floating-blur: 24px;
  --om-ref-elevation-floating-color: rgb(9 18 20 / 0.16);
  --om-ref-elevation-floating-offset-x: 0px;
  --om-ref-elevation-floating-offset-y: 8px;
  --om-ref-elevation-floating-spread: -4px;
  --om-ref-elevation-modal-blur: 48px;
  --om-ref-elevation-modal-color: rgb(9 18 20 / 0.24);
  --om-ref-elevation-modal-offset-x: 0px;
  --om-ref-elevation-modal-offset-y: 16px;
  --om-ref-elevation-modal-spread: -8px;
  --om-ref-elevation-none-blur: 0px;
  --om-ref-elevation-none-color: rgb(9 18 20 / 0);
  --om-ref-elevation-none-offset-x: 0px;
  --om-ref-elevation-none-offset-y: 0px;
  --om-ref-elevation-none-spread: 0px;
  --om-ref-elevation-raised-blur: 8px;
  --om-ref-elevation-raised-color: rgb(9 18 20 / 0.08);
  --om-ref-elevation-raised-offset-x: 0px;
  --om-ref-elevation-raised-offset-y: 2px;
  --om-ref-elevation-raised-spread: 0px;
  --om-ref-focus-offset: 2px;
  --om-ref-focus-width: 2px;
  --om-ref-font-family-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  --om-ref-font-family-sans: "Avenir Next", "Hiragino Sans", "Yu Gothic", "YuGothic", "Segoe UI", sans-serif;
  --om-ref-font-letter-spacing-normal: 0rem;
  --om-ref-font-line-height-125: 1.25;
  --om-ref-font-line-height-140: 1.4;
  --om-ref-font-line-height-150: 1.5;
  --om-ref-font-line-height-170: 1.7;
  --om-ref-font-line-height-175: 1.75;
  --om-ref-font-line-height-195: 1.95;
  --om-ref-font-size-12: 0.75rem;
  --om-ref-font-size-13: 0.8125rem;
  --om-ref-font-size-14: 0.875rem;
  --om-ref-font-size-16: 1rem;
  --om-ref-font-size-20: 1.25rem;
  --om-ref-font-size-24: 1.5rem;
  --om-ref-font-size-32: 2rem;
  --om-ref-font-weight-bold: 700;
  --om-ref-font-weight-regular: 400;
  --om-ref-font-weight-semibold: 600;
  --om-ref-layer-base: 0;
  --om-ref-layer-dialog: 40;
  --om-ref-layer-dropdown: 20;
  --om-ref-layer-scrim: 30;
  --om-ref-layer-skip: 100;
  --om-ref-layer-sticky: 10;
  --om-ref-layer-toast: 60;
  --om-ref-layer-tooltip: 50;
  --om-ref-layout-content: 72rem;
  --om-ref-layout-gutter-compact: 1rem;
  --om-ref-layout-gutter-default: 1.5rem;
  --om-ref-layout-section-compact: 4rem;
  --om-ref-layout-section-default: 6rem;
  --om-ref-motion-duration-fast: 120ms;
  --om-ref-motion-duration-instant: 0ms;
  --om-ref-motion-duration-slow: 240ms;
  --om-ref-motion-duration-standard: 180ms;
  --om-ref-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --om-ref-radius-control: 0.75rem;
  --om-ref-radius-navigation: 0.5rem;
  --om-ref-radius-none: 0rem;
  --om-ref-radius-pill: 624.9375rem;
  --om-ref-radius-small: 0.25rem;
  --om-ref-radius-surface: 1rem;
  --om-ref-space-0: 0rem;
  --om-ref-space-12: 0.75rem;
  --om-ref-space-16: 1rem;
  --om-ref-space-2: 0.125rem;
  --om-ref-space-20: 1.25rem;
  --om-ref-space-24: 1.5rem;
  --om-ref-space-32: 2rem;
  --om-ref-space-4: 0.25rem;
  --om-ref-space-40: 2.5rem;
  --om-ref-space-48: 3rem;
  --om-ref-space-6: 0.375rem;
  --om-ref-space-64: 4rem;
  --om-ref-space-8: 0.5rem;
  --om-ref-space-80: 5rem;
  --om-ref-space-96: 6rem;
  --om-sys-border-width-default: var(--om-ref-border-width-default);
  --om-sys-border-width-selected: var(--om-ref-border-width-selected);
  --om-sys-breakpoint-large: var(--om-ref-breakpoint-large);
  --om-sys-breakpoint-medium: var(--om-ref-breakpoint-medium);
  --om-sys-breakpoint-small: var(--om-ref-breakpoint-small);
  --om-sys-breakpoint-wide: var(--om-ref-breakpoint-wide);
  --om-sys-color-action-destructive-background: var(--om-ref-color-danger);
  --om-sys-color-action-destructive-border: var(--om-ref-color-danger);
  --om-sys-color-action-destructive-foreground: var(--om-ref-color-white);
  --om-sys-color-action-destructive-hover-background: var(--om-ref-color-danger-hover);
  --om-sys-color-action-destructive-pressed-background: var(--om-ref-color-danger-pressed);
  --om-sys-color-action-disabled-background: var(--om-ref-color-canvas);
  --om-sys-color-action-disabled-border: var(--om-ref-color-neutral-500);
  --om-sys-color-action-disabled-foreground: var(--om-sys-color-text-disabled);
  --om-sys-color-action-ghost-background: var(--om-ref-color-transparent);
  --om-sys-color-action-ghost-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-action-ghost-hover-background: var(--om-ref-color-canvas);
  --om-sys-color-action-ghost-inverse-foreground: var(--om-sys-color-text-inverse);
  --om-sys-color-action-ghost-inverse-hover-background: var(--om-ref-color-sage-strong);
  --om-sys-color-action-ghost-inverse-pressed-background: var(--om-ref-color-ink);
  --om-sys-color-action-ghost-pressed-background: var(--om-ref-color-sage);
  --om-sys-color-action-outline-background: var(--om-ref-color-white);
  --om-sys-color-action-outline-border: var(--om-ref-color-neutral-500);
  --om-sys-color-action-outline-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-action-outline-hover-background: var(--om-ref-color-canvas);
  --om-sys-color-action-outline-pressed-background: var(--om-ref-color-sage);
  --om-sys-color-action-primary-background: var(--om-ref-color-sage);
  --om-sys-color-action-primary-border: var(--om-ref-color-sage-strong);
  --om-sys-color-action-primary-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-action-primary-hover-background: var(--om-ref-color-action-hover);
  --om-sys-color-action-primary-pressed-background: var(--om-ref-color-action-pressed);
  --om-sys-color-action-secondary-background: var(--om-ref-color-canvas);
  --om-sys-color-action-secondary-border: var(--om-ref-color-sage-strong);
  --om-sys-color-action-secondary-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-action-secondary-hover-background: var(--om-ref-color-sage);
  --om-sys-color-action-secondary-pressed-background: var(--om-ref-color-action-hover);
  --om-sys-color-border-control: var(--om-ref-color-neutral-500);
  --om-sys-color-border-control-inverse: var(--om-ref-color-sage);
  --om-sys-color-border-decorative: var(--om-ref-color-sage);
  --om-sys-color-border-decorative-inverse: var(--om-ref-color-sage-strong);
  --om-sys-color-border-selected: var(--om-ref-color-neutral-500);
  --om-sys-color-focus-gap: var(--om-ref-color-canvas);
  --om-sys-color-focus-gap-inverse: var(--om-ref-color-forest);
  --om-sys-color-focus-ring: var(--om-ref-color-sage-strong);
  --om-sys-color-focus-ring-inverse: var(--om-ref-color-sage);
  --om-sys-color-icon-inverse: var(--om-sys-color-text-inverse);
  --om-sys-color-icon-primary: var(--om-sys-color-text-primary);
  --om-sys-color-icon-secondary: var(--om-sys-color-text-secondary);
  --om-sys-color-selection-background: var(--om-ref-color-neutral-100);
  --om-sys-color-selection-border: var(--om-ref-color-neutral-500);
  --om-sys-color-selection-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-selection-hover-background: var(--om-ref-color-neutral-200);
  --om-sys-color-status-danger-background: var(--om-ref-color-danger-subtle);
  --om-sys-color-status-danger-border: var(--om-ref-color-danger);
  --om-sys-color-status-danger-foreground: var(--om-ref-color-danger);
  --om-sys-color-status-danger-icon: var(--om-ref-color-danger);
  --om-sys-color-status-info-background: var(--om-ref-color-info-subtle);
  --om-sys-color-status-info-border: var(--om-ref-color-info);
  --om-sys-color-status-info-foreground: var(--om-ref-color-info);
  --om-sys-color-status-info-icon: var(--om-ref-color-info);
  --om-sys-color-status-success-background: var(--om-ref-color-success-subtle);
  --om-sys-color-status-success-border: var(--om-ref-color-success);
  --om-sys-color-status-success-foreground: var(--om-ref-color-success);
  --om-sys-color-status-success-icon: var(--om-ref-color-success);
  --om-sys-color-status-warning-background: var(--om-ref-color-warning-subtle);
  --om-sys-color-status-warning-border: var(--om-ref-color-warning);
  --om-sys-color-status-warning-foreground: var(--om-ref-color-warning);
  --om-sys-color-status-warning-icon: var(--om-ref-color-warning);
  --om-sys-color-surface-canvas: var(--om-ref-color-canvas-soft);
  --om-sys-color-surface-default: var(--om-ref-color-white);
  --om-sys-color-surface-inverse: var(--om-ref-color-forest);
  --om-sys-color-surface-scrim: var(--om-ref-color-scrim);
  --om-sys-color-surface-subtle: var(--om-ref-color-canvas);
  --om-sys-color-text-disabled: var(--om-ref-color-neutral-500);
  --om-sys-color-text-inverse: var(--om-ref-color-white);
  --om-sys-color-text-link: var(--om-ref-color-neutral-800);
  --om-sys-color-text-link-hover: var(--om-ref-color-neutral-900);
  --om-sys-color-text-link-inverse: var(--om-ref-color-neutral-300);
  --om-sys-color-text-link-inverse-hover: var(--om-ref-color-white);
  --om-sys-color-text-link-inverse-pressed: var(--om-ref-color-white);
  --om-sys-color-text-link-pressed: var(--om-ref-color-neutral-950);
  --om-sys-color-text-primary: var(--om-ref-color-neutral-900);
  --om-sys-color-text-secondary: var(--om-ref-color-neutral-600);
  --om-sys-color-text-secondary-inverse: var(--om-ref-color-neutral-300);
  --om-sys-density-control-default: var(--om-ref-density-control-default);
  --om-sys-density-control-icon: var(--om-ref-density-control-icon);
  --om-sys-density-control-large: var(--om-ref-density-control-large);
  --om-sys-density-control-small: var(--om-ref-density-control-small);
  --om-sys-density-field: var(--om-ref-density-target);
  --om-sys-density-navigation-row-min-height: var(--om-ref-density-navigation-row-min-height);
  --om-sys-density-navigation-row-padding-block: var(--om-ref-density-navigation-row-padding-block);
  --om-sys-density-navigation-row-padding-inline: var(--om-ref-density-navigation-row-padding-inline);
  --om-sys-density-target: var(--om-ref-density-target);
  --om-sys-elevation-floating-blur: var(--om-ref-elevation-floating-blur);
  --om-sys-elevation-floating-color: var(--om-ref-elevation-floating-color);
  --om-sys-elevation-floating-offset-x: var(--om-ref-elevation-floating-offset-x);
  --om-sys-elevation-floating-offset-y: var(--om-ref-elevation-floating-offset-y);
  --om-sys-elevation-floating-spread: var(--om-ref-elevation-floating-spread);
  --om-sys-elevation-modal-blur: var(--om-ref-elevation-modal-blur);
  --om-sys-elevation-modal-color: var(--om-ref-elevation-modal-color);
  --om-sys-elevation-modal-offset-x: var(--om-ref-elevation-modal-offset-x);
  --om-sys-elevation-modal-offset-y: var(--om-ref-elevation-modal-offset-y);
  --om-sys-elevation-modal-spread: var(--om-ref-elevation-modal-spread);
  --om-sys-elevation-none-blur: var(--om-ref-elevation-none-blur);
  --om-sys-elevation-none-color: var(--om-ref-elevation-none-color);
  --om-sys-elevation-none-offset-x: var(--om-ref-elevation-none-offset-x);
  --om-sys-elevation-none-offset-y: var(--om-ref-elevation-none-offset-y);
  --om-sys-elevation-none-spread: var(--om-ref-elevation-none-spread);
  --om-sys-elevation-raised-blur: var(--om-ref-elevation-raised-blur);
  --om-sys-elevation-raised-color: var(--om-ref-elevation-raised-color);
  --om-sys-elevation-raised-offset-x: var(--om-ref-elevation-raised-offset-x);
  --om-sys-elevation-raised-offset-y: var(--om-ref-elevation-raised-offset-y);
  --om-sys-elevation-raised-spread: var(--om-ref-elevation-raised-spread);
  --om-sys-focus-offset: var(--om-ref-focus-offset);
  --om-sys-focus-width: var(--om-ref-focus-width);
  --om-sys-font-family-mono: var(--om-ref-font-family-mono);
  --om-sys-font-family-sans: var(--om-ref-font-family-sans);
  --om-sys-font-weight-bold: var(--om-ref-font-weight-bold);
  --om-sys-font-weight-regular: var(--om-ref-font-weight-regular);
  --om-sys-font-weight-semibold: var(--om-ref-font-weight-semibold);
  --om-sys-layer-base: var(--om-ref-layer-base);
  --om-sys-layer-dialog: var(--om-ref-layer-dialog);
  --om-sys-layer-dropdown: var(--om-ref-layer-dropdown);
  --om-sys-layer-scrim: var(--om-ref-layer-scrim);
  --om-sys-layer-skip: var(--om-ref-layer-skip);
  --om-sys-layer-sticky: var(--om-ref-layer-sticky);
  --om-sys-layer-toast: var(--om-ref-layer-toast);
  --om-sys-layer-tooltip: var(--om-ref-layer-tooltip);
  --om-sys-layout-content: var(--om-ref-layout-content);
  --om-sys-layout-flow-block: var(--om-sys-space-32);
  --om-sys-layout-flow-group: var(--om-sys-space-48);
  --om-sys-layout-flow-related: var(--om-sys-space-16);
  --om-sys-layout-flow-text: var(--om-sys-space-24);
  --om-sys-layout-flow-tight: var(--om-sys-space-8);
  --om-sys-layout-gutter-compact: var(--om-ref-layout-gutter-compact);
  --om-sys-layout-gutter-default: var(--om-ref-layout-gutter-default);
  --om-sys-layout-section-compact: var(--om-ref-layout-section-compact);
  --om-sys-layout-section-default: var(--om-ref-layout-section-default);
  --om-sys-motion-duration-fast: var(--om-ref-motion-duration-fast);
  --om-sys-motion-duration-instant: var(--om-ref-motion-duration-instant);
  --om-sys-motion-duration-slow: var(--om-ref-motion-duration-slow);
  --om-sys-motion-duration-standard: var(--om-ref-motion-duration-standard);
  --om-sys-motion-easing-standard: var(--om-ref-motion-easing-standard);
  --om-sys-radius-control: var(--om-ref-radius-control);
  --om-sys-radius-navigation: var(--om-ref-radius-navigation);
  --om-sys-radius-none: var(--om-ref-radius-none);
  --om-sys-radius-pill: var(--om-ref-radius-pill);
  --om-sys-radius-small: var(--om-ref-radius-small);
  --om-sys-radius-surface: var(--om-ref-radius-surface);
  --om-sys-space-0: var(--om-ref-space-0);
  --om-sys-space-12: var(--om-ref-space-12);
  --om-sys-space-16: var(--om-ref-space-16);
  --om-sys-space-2: var(--om-ref-space-2);
  --om-sys-space-20: var(--om-ref-space-20);
  --om-sys-space-24: var(--om-ref-space-24);
  --om-sys-space-32: var(--om-ref-space-32);
  --om-sys-space-4: var(--om-ref-space-4);
  --om-sys-space-40: var(--om-ref-space-40);
  --om-sys-space-48: var(--om-ref-space-48);
  --om-sys-space-6: var(--om-ref-space-6);
  --om-sys-space-64: var(--om-ref-space-64);
  --om-sys-space-8: var(--om-ref-space-8);
  --om-sys-space-80: var(--om-ref-space-80);
  --om-sys-space-96: var(--om-ref-space-96);
  --om-sys-type-body-small-family: var(--om-ref-font-family-sans);
  --om-sys-type-body-small-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-body-small-line-height: var(--om-ref-font-line-height-175);
  --om-sys-type-body-small-size: var(--om-ref-font-size-14);
  --om-sys-type-body-small-weight: var(--om-ref-font-weight-regular);
  --om-sys-type-body-family: var(--om-ref-font-family-sans);
  --om-sys-type-body-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-body-line-height: var(--om-ref-font-line-height-175);
  --om-sys-type-body-size: var(--om-ref-font-size-16);
  --om-sys-type-body-weight: var(--om-ref-font-weight-regular);
  --om-sys-type-code-family: var(--om-ref-font-family-mono);
  --om-sys-type-code-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-code-line-height: var(--om-ref-font-line-height-170);
  --om-sys-type-code-size: var(--om-ref-font-size-13);
  --om-sys-type-code-weight: var(--om-ref-font-weight-regular);
  --om-sys-type-heading-family: var(--om-ref-font-family-sans);
  --om-sys-type-heading-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-heading-line-height: var(--om-ref-font-line-height-140);
  --om-sys-type-heading-size: var(--om-ref-font-size-24);
  --om-sys-type-heading-weight: var(--om-ref-font-weight-semibold);
  --om-sys-type-label-family: var(--om-ref-font-family-sans);
  --om-sys-type-label-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-label-line-height: var(--om-ref-font-line-height-150);
  --om-sys-type-label-size: var(--om-ref-font-size-12);
  --om-sys-type-label-weight: var(--om-ref-font-weight-semibold);
  --om-sys-type-navigation-label-family: var(--om-ref-font-family-sans);
  --om-sys-type-navigation-label-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-navigation-label-line-height: var(--om-ref-font-line-height-150);
  --om-sys-type-navigation-label-size: var(--om-ref-font-size-12);
  --om-sys-type-navigation-label-weight: var(--om-ref-font-weight-semibold);
  --om-sys-type-prose-compact-family: var(--om-ref-font-family-sans);
  --om-sys-type-prose-compact-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-prose-compact-line-height: var(--om-ref-font-line-height-195);
  --om-sys-type-prose-compact-size: var(--om-ref-font-size-14);
  --om-sys-type-prose-compact-weight: var(--om-ref-font-weight-regular);
  --om-sys-type-subheading-family: var(--om-ref-font-family-sans);
  --om-sys-type-subheading-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-subheading-line-height: var(--om-ref-font-line-height-150);
  --om-sys-type-subheading-size: var(--om-ref-font-size-20);
  --om-sys-type-subheading-weight: var(--om-ref-font-weight-semibold);
  --om-sys-type-title-family: var(--om-ref-font-family-sans);
  --om-sys-type-title-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-title-line-height: var(--om-ref-font-line-height-125);
  --om-sys-type-title-size: var(--om-ref-font-size-32);
  --om-sys-type-title-weight: var(--om-ref-font-weight-semibold);
  --background: var(--om-sys-color-surface-canvas);
  --foreground: var(--om-sys-color-text-primary);
  --primary: var(--om-sys-color-action-primary-background);
  --primary-foreground: var(--om-sys-color-action-primary-foreground);
  --muted: var(--om-sys-color-surface-subtle);
  --muted-foreground: var(--om-sys-color-text-secondary);
  --border: var(--om-sys-color-border-decorative);
  --radius: var(--om-sys-radius-control);
}

/* Scoped component styles. Import tokens.css first; no reset, body or Tailwind rules. */
@layer components {
.om-button, .om-input, .om-select, .om-textarea, .om-navigation-item, .om-dialog-close {
  box-sizing: border-box;
  font-family: var(--om-sys-type-body-small-family);
  font-size: var(--om-sys-type-body-small-size);
  line-height: var(--om-sys-type-body-small-line-height);
  letter-spacing: var(--om-sys-type-body-small-letter-spacing);
  transition: color var(--om-sys-motion-duration-fast) var(--om-sys-motion-easing-standard), background-color var(--om-sys-motion-duration-fast) var(--om-sys-motion-easing-standard), border-color var(--om-sys-motion-duration-fast) var(--om-sys-motion-easing-standard);
}
:where(.om-button, .om-navigation-item, .om-dialog-close, .om-brand, .om-link, .om-skip-link):focus-visible {
  outline: var(--om-sys-focus-width) solid var(--om-context-focus-ring, var(--om-sys-color-focus-ring));
  outline-offset: var(--om-sys-focus-offset);
  box-shadow: 0 0 0 var(--om-sys-focus-offset) var(--om-context-focus-gap, var(--om-sys-color-focus-gap));
}
.om-button {
  --om-action-background: var(--om-sys-color-action-primary-background);
  --om-action-hover: var(--om-sys-color-action-primary-hover-background);
  --om-action-pressed: var(--om-sys-color-action-primary-pressed-background);
  --om-action-foreground: var(--om-sys-color-action-primary-foreground);
  --om-action-border: var(--om-sys-color-action-primary-border);
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--om-sys-space-8);
  min-width: 0;
  max-inline-size: 100%;
  min-height: var(--om-sys-density-control-default);
  /* 2026-11-10: with a 1.5 line height a one-line label fits inside 40px (14px text) and 44px (16px text) with 8px above and below;
     min-height sets the size, and a wrapped label keeps the same 8px. The small size uses 4px (see below). */
  padding: var(--om-sys-space-8) var(--om-sys-space-16);
  border: var(--om-sys-border-width-default) solid var(--om-action-border);
  border-radius: var(--om-sys-radius-control);
  background: var(--om-action-background);
  color: var(--om-action-foreground);
  font-weight: var(--om-sys-type-label-weight);
  line-height: var(--om-sys-type-label-line-height);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.om-button--secondary {
  --om-action-background: var(--om-sys-color-action-secondary-background);
  --om-action-hover: var(--om-sys-color-action-secondary-hover-background);
  --om-action-pressed: var(--om-sys-color-action-secondary-pressed-background);
  --om-action-foreground: var(--om-sys-color-action-secondary-foreground);
  --om-action-border: var(--om-sys-color-action-secondary-border);
}
.om-button--outline {
  --om-action-background: var(--om-sys-color-action-outline-background);
  --om-action-hover: var(--om-sys-color-action-outline-hover-background);
  --om-action-pressed: var(--om-sys-color-action-outline-pressed-background);
  --om-action-foreground: var(--om-sys-color-action-outline-foreground);
  --om-action-border: var(--om-sys-color-action-outline-border);
}
.om-button--ghost {
  --om-action-background: var(--om-sys-color-action-ghost-background);
  --om-action-hover: var(--om-context-ghost-hover, var(--om-sys-color-action-ghost-hover-background));
  --om-action-pressed: var(--om-context-ghost-pressed, var(--om-sys-color-action-ghost-pressed-background));
  --om-action-foreground: var(--om-context-ghost-foreground, var(--om-sys-color-action-ghost-foreground));
  --om-action-border: var(--om-sys-color-action-ghost-background);
}
.om-button--destructive {
  --om-action-background: var(--om-sys-color-action-destructive-background);
  --om-action-hover: var(--om-sys-color-action-destructive-hover-background);
  --om-action-pressed: var(--om-sys-color-action-destructive-pressed-background);
  --om-action-foreground: var(--om-sys-color-action-destructive-foreground);
  --om-action-border: var(--om-sys-color-action-destructive-border);
}
.om-button--link {
  --om-action-background: var(--om-sys-color-action-ghost-background);
  --om-action-hover: var(--om-sys-color-action-ghost-background);
  --om-action-pressed: var(--om-sys-color-action-ghost-background);
  --om-action-foreground: var(--om-context-link, var(--om-sys-color-text-link));
  --om-action-border: var(--om-sys-color-action-ghost-background);
  text-decoration: underline;
  text-underline-offset: var(--om-sys-space-4);
}
@media (hover: hover) {
  .om-button:hover { background: var(--om-action-hover); }
  .om-button--link:hover { color: var(--om-context-link-hover, var(--om-sys-color-text-link-hover)); }
}
.om-button:active { background: var(--om-action-pressed); }
.om-button--link:active { color: var(--om-context-link-pressed, var(--om-sys-color-text-link-pressed)); }
.om-button--destructive:active { border-color: var(--om-action-pressed); }
.om-button--size-sm { min-height: var(--om-sys-density-control-small); padding-block: var(--om-sys-space-4); padding-inline: var(--om-sys-space-12); border-radius: var(--om-sys-radius-small); }
.om-button--size-lg { min-height: var(--om-sys-density-control-large); padding-inline: var(--om-sys-space-24); font-size: var(--om-sys-type-body-size); }
.om-button--size-icon { min-width: var(--om-sys-density-control-icon); min-height: var(--om-sys-density-control-icon); padding: var(--om-sys-space-8); }
/* The tap area: a transparent box that grows a button lower or narrower than the 44px target (sys.density.target) to that size,
   without changing how it looks or sits. min(0px, ...) never shrinks a button that is already larger. It reaches 2px past a 40px button
   and 6px past a 32px one; keep other controls at least that far away (the later one in the page wins where two areas overlap). */
.om-button::before { content: ""; position: absolute; inset: min(0px, calc((100% - var(--om-sys-density-target)) / 2)); }
.om-button > svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); flex-shrink: 0; pointer-events: none; }
.om-button > span { min-width: 0; }
.om-button:disabled, .om-button[aria-disabled="true"], .om-input:disabled, .om-select:disabled, .om-textarea:disabled, .om-dialog-close:disabled, .om-navigation-item:disabled, .om-navigation-item[aria-disabled="true"] {
  background: var(--om-sys-color-action-disabled-background);
  color: var(--om-sys-color-action-disabled-foreground);
  border-color: var(--om-sys-color-action-disabled-border);
  cursor: not-allowed;
  opacity: 1;
}
.om-button[aria-busy="true"] { cursor: progress; }
.om-card, .om-dialog-content, .om-tooltip-content {
  --om-context-focus-ring: var(--om-sys-color-focus-ring);
  --om-context-focus-gap: var(--om-sys-color-focus-gap);
  --om-context-link: var(--om-sys-color-text-link);
  --om-context-link-hover: var(--om-sys-color-text-link-hover);
  --om-context-link-pressed: var(--om-sys-color-text-link-pressed);
  --om-context-text-primary: var(--om-sys-color-text-primary);
  --om-context-ghost-foreground: var(--om-sys-color-action-ghost-foreground);
  --om-context-ghost-hover: var(--om-sys-color-action-ghost-hover-background);
  --om-context-ghost-pressed: var(--om-sys-color-action-ghost-pressed-background);
  box-sizing: border-box;
  background: var(--om-sys-color-surface-default);
  color: var(--om-sys-color-text-primary);
  border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative);
  border-radius: var(--om-sys-radius-surface);

  overflow-wrap: anywhere; font-family: var(--om-sys-type-body-family); font-size: var(--om-sys-type-body-size); font-weight: var(--om-sys-type-body-weight); line-height: var(--om-sys-type-body-line-height); letter-spacing: var(--om-sys-type-body-letter-spacing); }
.om-card-header { display: flex; flex-direction: column; gap: var(--om-sys-space-8); padding: var(--om-sys-space-24) var(--om-sys-space-24) 0; }
.om-card-title { margin: 0; font-family: var(--om-sys-type-subheading-family); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-type-subheading-weight); line-height: var(--om-sys-type-subheading-line-height); letter-spacing: var(--om-sys-type-subheading-letter-spacing); }
.om-card-description, .om-dialog-description { margin: 0; color: var(--om-sys-color-text-secondary); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-card-content { padding: var(--om-sys-space-24); }
.om-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--om-sys-space-12); padding: 0 var(--om-sys-space-24) var(--om-sys-space-24); }
.om-shell { display: flex; min-height: 100dvh; flex-direction: column; font-family: var(--om-sys-type-body-family); font-size: var(--om-sys-type-body-size); font-weight: var(--om-sys-type-body-weight); line-height: var(--om-sys-type-body-line-height); letter-spacing: var(--om-sys-type-body-letter-spacing); }
.om-main { min-width: 0; flex: 1; outline: none; }
.om-header { background: var(--om-sys-color-surface-canvas); border-bottom: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.om-header-inner, .om-footer-inner { box-sizing: border-box; width: 100%; max-width: var(--om-sys-layout-content); margin-inline: auto; padding-inline: var(--om-sys-layout-gutter-compact); }
.om-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--om-sys-space-16); min-height: calc(var(--om-sys-density-control-default) + var(--om-sys-space-24)); padding-block: var(--om-sys-space-12); }
.om-brand { display: inline-flex; min-width: 0; align-items: center; gap: var(--om-sys-space-12); color: var(--om-sys-color-text-primary); text-decoration: none; border-radius: var(--om-sys-radius-control); overflow-wrap: anywhere; }
.om-brand-mark { display: inline-flex; width: var(--om-sys-density-control-small); height: var(--om-sys-density-control-small); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-action-primary-background); color: var(--om-sys-color-action-primary-foreground); }
.om-brand-mark svg { width: var(--om-sys-space-20); height: var(--om-sys-space-20); }
.om-brand-name { font-family: var(--om-sys-type-subheading-family); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-type-subheading-weight); line-height: var(--om-sys-type-subheading-line-height); letter-spacing: var(--om-sys-type-subheading-letter-spacing); }
.om-header-description { color: var(--om-sys-color-text-secondary); font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-footer { margin-top: var(--om-sys-space-48); padding-bottom: calc(var(--om-sys-space-64) + var(--om-sys-space-32)); border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.om-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--om-sys-space-16); padding-block: var(--om-sys-space-24); color: var(--om-sys-color-text-secondary); font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-footer-note { margin: 0; overflow-wrap: anywhere; }
.om-link { color: var(--om-context-link, var(--om-sys-color-text-link)); text-decoration: underline; text-underline-offset: var(--om-sys-space-4); border-radius: var(--om-sys-radius-small); }
.om-link:hover { color: var(--om-context-link-hover, var(--om-sys-color-text-link-hover)); }
.om-link:active { color: var(--om-context-link-pressed, var(--om-sys-color-text-link-pressed)); }
.om-skip-link { position: fixed; top: var(--om-sys-space-12); left: var(--om-sys-space-12); z-index: var(--om-sys-layer-skip); transform: translateY(calc(-100% - var(--om-sys-space-24))); border-radius: var(--om-sys-radius-control); padding: var(--om-sys-space-12) var(--om-sys-space-16); background: var(--om-sys-color-surface-inverse); color: var(--om-sys-color-text-inverse); }
.om-skip-link:focus { transform: none; }
.om-dialog-overlay { position: fixed; inset: 0; z-index: var(--om-sys-layer-scrim); background: var(--om-sys-color-surface-scrim); }
.om-dialog-content { position: fixed; top: 50%; left: 50%; z-index: var(--om-sys-layer-dialog); max-height: calc(100dvh - var(--om-sys-space-32)); width: calc(100% - var(--om-sys-space-32)); max-width: calc(var(--om-sys-space-64) * 8); transform: translate(-50%, -50%); overflow-y: auto; overscroll-behavior: contain; padding: var(--om-sys-space-24); box-shadow: var(--om-sys-elevation-modal-offset-x) var(--om-sys-elevation-modal-offset-y) var(--om-sys-elevation-modal-blur) var(--om-sys-elevation-modal-spread) var(--om-sys-elevation-modal-color); }
.om-dialog-content:focus { outline: none; }
.om-dialog-close { position: absolute; top: var(--om-sys-space-8); right: var(--om-sys-space-8); display: inline-flex; align-items: center; justify-content: center; min-width: var(--om-sys-density-control-icon); min-height: var(--om-sys-density-control-icon); padding: var(--om-sys-space-8); border: var(--om-sys-border-width-default) solid var(--om-sys-color-action-ghost-background); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-action-ghost-background); color: var(--om-sys-color-icon-secondary); cursor: pointer; font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-dialog-close:hover:not(:disabled) { background: var(--om-sys-color-action-ghost-hover-background); color: var(--om-sys-color-text-primary); }
.om-dialog-close:active:not(:disabled) { background: var(--om-sys-color-action-ghost-pressed-background); color: var(--om-sys-color-text-primary); }
.om-dialog-close svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); }
.om-dialog-header { display: flex; flex-direction: column; gap: var(--om-sys-space-8); margin-bottom: var(--om-sys-space-24); padding-right: var(--om-sys-density-control-icon); }
.om-dialog-footer { display: flex; flex-direction: column-reverse; gap: var(--om-sys-space-8); margin-top: var(--om-sys-space-20); }
.om-dialog-title { margin: 0; font-family: var(--om-sys-type-subheading-family); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-type-subheading-weight); line-height: var(--om-sys-type-subheading-line-height); letter-spacing: var(--om-sys-type-subheading-letter-spacing); }
.om-input, .om-select, .om-textarea { display: block; width: 100%; min-width: 0; min-height: var(--om-sys-density-field); padding: var(--om-sys-space-8) var(--om-sys-space-12); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-control); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-default); color: var(--om-sys-color-text-primary); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); box-sizing: border-box; }
.om-input::placeholder, .om-textarea::placeholder { color: var(--om-sys-color-text-secondary); opacity: 1; }
.om-input[aria-invalid="true"], .om-select[aria-invalid="true"], .om-textarea[aria-invalid="true"] { border-color: var(--om-sys-color-status-danger-border); }
.om-input[readonly], .om-textarea[readonly] { background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-secondary); }
.om-input:disabled, .om-select:disabled, .om-textarea:disabled { background: var(--om-sys-color-action-disabled-background); color: var(--om-sys-color-action-disabled-foreground); border-color: var(--om-sys-color-action-disabled-border); }
/* Text fields already have a border: the ring hugs it (no gap) instead of floating like the action ring. Placed after the base field rules; low specificity keeps the invalid border.
   The border keeps the light-surface ring colour because the field stays white on inverse panels too; only the outer ring follows the context. */
:where(.om-input, .om-select, .om-textarea):focus-visible {
  border-color: var(--om-sys-color-focus-ring);
  outline: var(--om-sys-focus-width) solid var(--om-context-focus-ring, var(--om-sys-color-focus-ring));
  outline-offset: 0;
  box-shadow: none;
}
.om-select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%), linear-gradient(135deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%);
  background-position: right calc(var(--om-sys-space-12) + var(--om-sys-space-16) / 2) center, right var(--om-sys-space-12) center;
  background-size: calc(var(--om-sys-space-16) / 2) calc(var(--om-sys-space-16) / 2);
  background-repeat: no-repeat;
  padding-inline-end: calc(var(--om-sys-space-12) * 2 + var(--om-sys-space-16));
}
.om-select:not([multiple]):is(:not([size]), [size="0"], [size="1"]):dir(rtl) {
  background-position: left var(--om-sys-space-12) center, left calc(var(--om-sys-space-12) + var(--om-sys-space-16) / 2) center;
}
.om-textarea { resize: vertical; }
.om-status { display: flex; gap: var(--om-sys-space-8); align-items: flex-start; padding: var(--om-sys-space-16); border: var(--om-sys-border-width-default) solid var(--om-sys-color-status-info-border); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-status-info-background); color: var(--om-sys-color-status-info-foreground);    overflow-wrap: anywhere; font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-status[data-tone="success"] { border-color: var(--om-sys-color-status-success-border); background: var(--om-sys-color-status-success-background); color: var(--om-sys-color-status-success-foreground); }
.om-status[data-tone="warning"] { border-color: var(--om-sys-color-status-warning-border); background: var(--om-sys-color-status-warning-background); color: var(--om-sys-color-status-warning-foreground); }
.om-status[data-tone="danger"] { border-color: var(--om-sys-color-status-danger-border); background: var(--om-sys-color-status-danger-background); color: var(--om-sys-color-status-danger-foreground); }
.om-status-icon { display: inline-flex; inline-size: var(--om-sys-space-16); block-size: 1lh; flex-shrink: 0; align-items: center; justify-content: center; font-weight: var(--om-sys-type-label-weight); }
.om-status-content { flex: 1; min-width: 0; }
.om-status-label { display: block; font-weight: var(--om-sys-type-label-weight); }
.om-status-content > p { margin: var(--om-sys-space-4) 0 0; }
.om-status-content :where(a, small, svg) { color: inherit; }
.om-spinner { display: inline-flex; min-width: 0; align-items: center; gap: var(--om-sys-space-8); color: inherit; }
.om-spinner-label { min-width: 0; overflow-wrap: anywhere; }
.om-spinner-glyph { width: 1em; height: 1em; flex-shrink: 0; animation: om-spin calc(var(--om-sys-motion-duration-slow) * 4) linear infinite; }
@keyframes om-spin { to { transform: rotate(360deg); } }
.om-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.om-tooltip-root { position: relative; display: inline-flex; max-width: 100%; }
.om-tooltip-content { position: absolute; top: 100%; left: 0; z-index: var(--om-sys-layer-tooltip); transform: translateX(var(--om-tooltip-shift, 0px)); width: max-content; max-width: min(calc(var(--om-sys-space-64) * 4), calc(100vw - var(--om-sys-space-32))); padding: var(--om-sys-space-12); border-color: var(--om-sys-color-border-control);   box-shadow: var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-tooltip-content[hidden] { display: none; }
.om-tooltip-content[data-side="top"] { top: auto; bottom: 100%; }
.om-navigation-item { position: relative; display: flex; width: 100%; min-width: 0; min-height: var(--om-sys-density-navigation-row-min-height); align-items: flex-start; gap: var(--om-sys-space-8); box-sizing: border-box; padding: var(--om-sys-density-navigation-row-padding-block) var(--om-sys-density-navigation-row-padding-inline); border: var(--om-sys-border-width-default) solid var(--om-sys-color-action-ghost-background); border-radius: var(--om-sys-radius-navigation); background: var(--om-sys-color-action-ghost-background); color: var(--om-context-text-primary, var(--om-sys-color-text-primary));     text-align: start; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-regular); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-navigation-item > svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); flex-shrink: 0; margin-block-start: max(0px, calc((1lh - var(--om-sys-space-16)) / 2)); }
.om-navigation-item:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--om-context-ghost-hover, var(--om-sys-color-action-ghost-hover-background)); }
.om-navigation-item:active:not(:disabled):not([aria-disabled="true"]) { background: var(--om-context-ghost-pressed, var(--om-sys-color-action-ghost-pressed-background)); }
.om-navigation-item[aria-current]:not([aria-current="false"]) { background: var(--om-sys-color-selection-background); color: var(--om-sys-color-selection-foreground); font-weight: var(--om-sys-font-weight-semibold); }
.om-navigation-item[aria-current]:not([aria-current="false"]):hover, .om-navigation-item[aria-current]:not([aria-current="false"]):active { background: var(--om-sys-color-selection-hover-background); }
.om-navigation-item[aria-current]:not([aria-current="false"]):is(:disabled, [aria-disabled="true"]) { background: var(--om-sys-color-action-disabled-background); color: var(--om-sys-color-action-disabled-foreground); border-color: var(--om-sys-color-action-disabled-border); cursor: not-allowed; }
.om-navigation-label { min-width: 0; flex: 1; }
.om-navigation-meta, .om-navigation-icon { flex-shrink: 0; color: inherit; }
.om-navigation-item :where(small, svg, a) { color: inherit; }
[data-om-surface="inverse"] { --om-context-focus-ring: var(--om-sys-color-focus-ring-inverse); --om-context-focus-gap: var(--om-sys-color-focus-gap-inverse); --om-context-link: var(--om-sys-color-text-link-inverse); --om-context-link-hover: var(--om-sys-color-text-link-inverse-hover); --om-context-link-pressed: var(--om-sys-color-text-link-inverse-pressed); --om-context-text-primary: var(--om-sys-color-text-inverse); --om-context-ghost-foreground: var(--om-sys-color-action-ghost-inverse-foreground); --om-context-ghost-hover: var(--om-sys-color-action-ghost-inverse-hover-background); --om-context-ghost-pressed: var(--om-sys-color-action-ghost-inverse-pressed-background); background: var(--om-sys-color-surface-inverse); color: var(--om-sys-color-text-inverse); }
.om-feedback-trigger { position: fixed; right: max(var(--om-sys-space-20), env(safe-area-inset-right)); bottom: max(var(--om-sys-space-20), env(safe-area-inset-bottom)); z-index: var(--om-sys-layer-dropdown); border-radius: var(--om-sys-radius-pill); box-shadow: var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color); }
.om-feedback-eyebrow, .om-feedback-label, .om-feedback-legend { display: block; margin-bottom: var(--om-sys-space-8); color: var(--om-sys-color-text-primary); font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-feedback-eyebrow { color: var(--om-sys-color-text-link); }
.om-feedback-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.om-feedback-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc((100% - var(--om-sys-space-8)) / 2), calc(var(--om-sys-space-16) * 6))), 1fr)); gap: var(--om-sys-space-8); }
.om-feedback-choice { position: relative; min-width: 0; cursor: pointer; }
.om-feedback-category { display: grid; grid-template-columns: var(--om-sys-space-16) minmax(0, 1fr); box-sizing: border-box; min-height: var(--om-sys-density-control-large); height: 100%; align-items: start; align-content: center; gap: var(--om-sys-space-8); padding: var(--om-sys-space-8) var(--om-sys-space-12); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-control); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-default); color: var(--om-sys-color-text-primary);   overflow-wrap: anywhere; font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-regular); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-feedback-control:checked + .om-feedback-category { border-color: var(--om-sys-color-selection-border); background: var(--om-sys-color-selection-background); color: var(--om-sys-color-selection-foreground); font-weight: var(--om-sys-font-weight-semibold); }
@media (hover: hover) {
  .om-feedback-choice:hover > .om-feedback-control:not(:disabled) + .om-feedback-category { background: var(--om-sys-color-action-ghost-hover-background); }
  .om-feedback-choice:hover > .om-feedback-control:checked:not(:disabled) + .om-feedback-category { background: var(--om-sys-color-selection-hover-background); }
}
.om-feedback-choice:active > .om-feedback-control:not(:disabled) + .om-feedback-category { background: var(--om-sys-color-action-ghost-pressed-background); }
.om-feedback-choice:active > .om-feedback-control:checked:not(:disabled) + .om-feedback-category { background: var(--om-sys-color-selection-hover-background); }
.om-feedback-control:focus-visible + .om-feedback-category { outline: var(--om-sys-focus-width) solid var(--om-sys-color-focus-ring); outline-offset: var(--om-sys-focus-offset); }
.om-feedback-control:disabled + .om-feedback-category { background: var(--om-sys-color-action-disabled-background); color: var(--om-sys-color-action-disabled-foreground); border-color: var(--om-sys-color-action-disabled-border); cursor: wait; }
.om-feedback-symbol { display: inline-flex; inline-size: var(--om-sys-space-16); block-size: 1lh; align-items: center; justify-content: center; }
.om-feedback-symbol-glyph { font-size: var(--om-sys-type-body-small-size); line-height: 1; }
.om-feedback-category-label { min-width: 0; }
.om-feedback-message { margin-top: var(--om-sys-space-20); }
.om-feedback-label small { color: var(--om-sys-color-text-secondary); font-weight: var(--om-sys-type-body-weight); }
.om-feedback-counter { margin: var(--om-sys-space-4) 0 0; color: var(--om-sys-color-text-secondary);   text-align: right; font-variant-numeric: tabular-nums; font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-feedback-note { margin: var(--om-sys-space-20) 0 0; padding: var(--om-sys-space-12); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-secondary); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-feedback-error { margin-top: var(--om-sys-space-12); color: var(--om-sys-color-status-danger-foreground); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
/* Breakpoint is sys.breakpoint.small (640 CSS px); media conditions cannot use var(). */
@media (min-width: 640px) {
  .om-header-inner, .om-footer-inner { padding-inline: var(--om-sys-layout-gutter-default); }
  .om-dialog-footer { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .om-spinner-glyph { animation: none; }
  .om-button, .om-input, .om-select, .om-textarea, .om-navigation-item, .om-dialog-close { transition: none; }
}
@media (forced-colors: active) {
  .om-select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) { appearance: auto; background-image: none; padding-inline-end: var(--om-sys-space-12); }
  .om-button, .om-navigation-item, .om-input, .om-select, .om-textarea, .om-dialog-close, .om-status { border-color: ButtonText; }
  .om-navigation-item[aria-current]:not([aria-current="false"]):not(:disabled):not([aria-disabled="true"]), .om-feedback-control:checked:not(:disabled) + .om-feedback-category, .om-feedback-choice:is(:hover, :active) > .om-feedback-control:checked:not(:disabled) + .om-feedback-category { background: Highlight; color: HighlightText; border-color: Highlight; }
  .om-navigation-item:is(:disabled, [aria-disabled="true"]), .om-navigation-item[aria-current]:not([aria-current="false"]):is(:disabled, [aria-disabled="true"]), .om-feedback-control:disabled + .om-feedback-category { background: Canvas; color: GrayText; border-color: GrayText; }
}
}
/* Sonner injects unlayered CSS; scoped host overrides must share that cascade. */
.om-toaster[data-sonner-toaster] { font-family: var(--om-sys-font-family-sans); z-index: var(--om-sys-layer-toast); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] { box-sizing: border-box; flex-wrap: wrap; padding: var(--om-sys-space-16); gap: var(--om-sys-space-6); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); border-width: var(--om-sys-border-width-default); border-radius: var(--om-sys-radius-control); box-shadow: var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color); overflow-wrap: anywhere; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-title], [data-description]) { font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); color: inherit; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-title] { font-weight: var(--om-sys-font-weight-semibold); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-content] { gap: var(--om-sys-space-2); flex-basis: calc(100% - var(--om-sys-space-32)); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-icon], .om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-icon] svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); margin: 0; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-button], [data-close-button]) { box-sizing: border-box; max-width: 100%; height: auto; min-width: var(--om-sys-density-control-icon); min-height: var(--om-sys-density-control-icon); justify-content: center; gap: var(--om-sys-space-8); padding: var(--om-sys-space-8) var(--om-sys-space-12); margin: 0; border: var(--om-sys-border-width-default) solid var(--om-sys-color-action-primary-border); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-action-primary-background); color: var(--om-sys-color-action-primary-foreground); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-semibold); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); white-space: normal; overflow-wrap: anywhere; transition: background-color var(--om-sys-motion-duration-fast) var(--om-sys-motion-easing-standard); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-button]:hover:not(:disabled) { background: var(--om-sys-color-action-primary-hover-background); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-button]:active:not(:disabled) { background: var(--om-sys-color-action-primary-pressed-background); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button] { position: static; transform: none; width: auto; padding: var(--om-sys-space-8); border-color: var(--om-sys-color-border-control); background: var(--om-sys-color-surface-default); color: var(--om-sys-color-text-primary); z-index: auto; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button]:hover:not(:disabled) { border-color: var(--om-sys-color-border-control); background: var(--om-sys-color-action-ghost-hover-background); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button]:active:not(:disabled) { background: var(--om-sys-color-action-ghost-pressed-background); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button] svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-button], [data-close-button]):disabled { background: var(--om-sys-color-action-disabled-background); color: var(--om-sys-color-action-disabled-foreground); border-color: var(--om-sys-color-action-disabled-border); cursor: not-allowed; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled]:focus-visible, .om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-button], [data-close-button]):focus-visible { outline: var(--om-sys-focus-width) solid var(--om-sys-color-focus-ring); outline-offset: var(--om-sys-focus-offset); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-button], [data-close-button]):focus-visible { box-shadow: 0 0 0 var(--om-sys-focus-offset) var(--om-sys-color-focus-gap); }
.om-toaster[data-sonner-toaster] .sonner-loading-wrapper { --size: var(--om-sys-space-16); }
.om-toaster[data-sonner-toaster] .sonner-loading-bar { background: currentColor; border-radius: var(--om-sys-radius-pill); animation-duration: calc(var(--om-sys-motion-duration-slow) * 5); }
.om-toaster[data-sonner-toaster], .om-toaster[data-sonner-toaster] [data-sonner-toast], .om-toaster[data-sonner-toaster] .sonner-loader { transition-duration: var(--om-sys-motion-duration-standard); transition-timing-function: var(--om-sys-motion-easing-standard); }
.om-toaster[data-sonner-toaster] [data-sonner-toast] > * { transition-duration: var(--om-sys-motion-duration-standard); transition-timing-function: var(--om-sys-motion-easing-standard); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"] { transition-duration: var(--om-sys-motion-duration-standard); transition-timing-function: var(--om-sys-motion-easing-standard); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-promise="true"] [data-icon] > svg, .om-toaster[data-sonner-toaster] .sonner-loading-wrapper[data-visible="false"], .om-toaster[data-sonner-toaster] [data-sonner-toast][data-swipe-out="true"] { animation-duration: var(--om-sys-motion-duration-standard); animation-timing-function: var(--om-sys-motion-easing-standard); }
@media (prefers-reduced-motion: reduce) { .om-toaster [data-sonner-toast], .om-toaster [data-sonner-toast] * { animation: none !important; transition: none !important; } }
/* @ordomint/design-system:end */

/* 管理画面だけの見た目（2026-10-25、REQ-ADMIN-009。2026-11-05に画面ぜんぶを見直した、REQ-ADMIN-022・設計の20節）。
   上の生成区間は node scripts/sync-design-system.mjs admin が写す（手で直さない）。
   余白は共通デザインの間隔（--om-sys-space-*）だけを使い、「まとまりの中は狭く（8〜16px）、まとまりの間は広く（24〜32px）」にする。 */
body.admin { --admin-width: 48rem; --admin-width-auth: 26rem; margin: 0; background: var(--om-sys-color-surface-canvas); color: var(--om-sys-color-text-primary); }
.admin-brand { display: flex; align-items: center; gap: var(--om-sys-space-12); margin: 0; min-width: 0; }
.admin-brand__name { font-weight: 700; font-size: var(--om-sys-type-body-size); line-height: 1.4; }
/* アイコン（2026-11-11、REQ-ADMIN-030・設計の28節）：文字に添える線のアイコン。色は文字と同じ。大きさは文字に合わせる。 */
.admin-icon { width: 1.25em; height: 1.25em; flex: none; }
.om-brand-mark .admin-icon { width: var(--om-sys-space-20); height: var(--om-sys-space-20); }
.om-status-icon .admin-icon { width: 18px; height: 18px; }
.om-button .admin-icon { width: 18px; height: 18px; margin-inline-start: calc(-1 * var(--om-sys-space-4)); }
.admin-logout { margin: 0; }
/* ヘッダー・本文・フッターの左の端をそろえる（同じ幅・同じ左右の余白）。 */
.admin .om-header-inner, .admin .om-footer-inner, .admin-container { max-width: var(--admin-width); }
.admin-container { box-sizing: border-box; width: 100%; margin-inline: auto; padding: var(--om-sys-space-32) var(--om-sys-layout-gutter-compact) var(--om-sys-space-48); }
.admin-container h1 { margin: 0 0 var(--om-sys-space-24); font-size: 28px; line-height: 1.4; }
.admin-container h2 { margin: var(--om-sys-space-40) 0 var(--om-sys-space-12); font-size: 20px; line-height: 1.5; }
.admin-container p { margin: 0 0 var(--om-sys-space-16); line-height: 1.8; overflow-wrap: anywhere; }
/* 改行の整え（Chrome・Edge。対応しないブラウザーは今までどおり）。見出しと、ログインの画面の短い案内は文節で折り返し、
   「ご確認くださ／い。」のように語の途中で行が分かれないようにする（知らせの枠と長い文は、右に大きな空きができるので対象にしない）。 */
.admin-container :is(h1, h2), .admin-container .admin-auth__lead, .admin-container .admin-auth__lead p, .admin-container .admin-auth__secondary p { word-break: auto-phrase; }
.admin-container form { display: grid; gap: var(--om-sys-space-24); margin: 0 0 var(--om-sys-space-24); }
/* 知らせは共通デザインの形（左にアイコン、右に文とボタン。2026-11-11）。 */
.admin-container .om-status { margin: 0 0 var(--om-sys-space-24); }
.admin-container .om-status p { margin: 0; }
.admin-container .om-status-content > p + p { margin-top: var(--om-sys-space-4); }
.admin-container code { overflow-wrap: anywhere; }
.admin-container .admin-hint { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: var(--om-sys-type-body-small-line-height); }
.admin-container .admin-empty { color: var(--om-sys-color-text-secondary); }

/* 画面の階層を戻るリンク（見出しの上に小さく）・見出しと主な操作の行。 */
.admin-container .admin-up { margin: calc(-1 * var(--om-sys-space-12)) 0 var(--om-sys-space-4); line-height: var(--om-sys-type-body-small-line-height); font-size: var(--om-sys-type-body-small-size); }
.admin-up .om-link { display: inline-flex; align-items: center; gap: var(--om-sys-space-4); padding-block: var(--om-sys-space-12); }
.admin-up .admin-icon { width: 16px; height: 16px; }
.admin-container .admin-back { margin-top: var(--om-sys-space-24); }
.admin-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--om-sys-space-12) var(--om-sys-space-16); margin: 0 0 var(--om-sys-space-24); }
.admin-container .admin-page-header h1 { margin: 0; }

/* 入力欄。説明・誤りの行は欄に付けて狭く（.admin-container p の下の余白を持ち込まない）。 */
.admin-field { display: grid; gap: var(--om-sys-space-8); }
.admin-field__label { font-weight: 700; }
.admin-field__required { margin-inline-start: var(--om-sys-space-8); padding: 0 var(--om-sys-space-8); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-secondary); font-size: 12px; font-weight: 400; }
.admin-container .admin-field__help { margin: 0; color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: var(--om-sys-type-body-small-line-height); }
.admin-container .admin-field__error { margin: 0; color: var(--om-sys-color-status-danger-foreground); font-size: var(--om-sys-type-body-small-size); font-weight: 700; line-height: var(--om-sys-type-body-small-line-height); }
.admin-field--check { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--om-sys-space-8); min-height: var(--om-sys-density-target); }
.admin-field--check input { width: 20px; height: 20px; margin: 0; }
.admin-field--check .admin-field__help, .admin-field--check .admin-field__error { grid-column: 1 / -1; }
.admin-field-group { display: grid; gap: var(--om-sys-space-8); }
.admin-container .om-textarea { min-height: 12em; resize: vertical; font-family: inherit; line-height: 1.7; }
.admin-container input.om-input[type="file"] { padding-block: var(--om-sys-space-4); }
.admin-container input.om-input[type="file"]::file-selector-button { min-height: var(--om-sys-density-control-small); margin-inline-end: var(--om-sys-space-12); padding-inline: var(--om-sys-space-12); border: var(--om-sys-border-width-default) solid var(--om-sys-color-action-outline-border); border-radius: var(--om-sys-radius-small); background: var(--om-sys-color-action-outline-background); color: var(--om-sys-color-action-outline-foreground); font: inherit; font-weight: 700; cursor: pointer; }
.admin-container button.om-button { justify-self: start; }

/* ボタンの行：主な操作を左に、削除などの別の操作を反対の端に。 */
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--om-sys-space-12) var(--om-sys-space-24); margin-top: var(--om-sys-space-8); }
.admin-actions--start { justify-content: flex-start; gap: var(--om-sys-space-12); }
.admin-link--danger { display: inline-flex; align-items: center; gap: var(--om-sys-space-4); min-height: var(--om-sys-density-target); color: var(--om-sys-color-status-danger-foreground); }

/* 行で選ぶ一覧（サイトの選択・サイトの内容）：行の全体を押せる、44px以上の高さ。
   2026-11-11：左にアイコン（淡い面の四角）、中に名前と説明、右に矢印のアイコン。 */
.admin-menu { margin: 0 0 var(--om-sys-space-24); padding: 0; list-style: none; border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-default); }
.admin-menu li + li { border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.admin-menu .om-link, .admin-menu__off { display: flex; align-items: center; gap: var(--om-sys-space-12); min-height: var(--om-sys-density-control-large); padding: var(--om-sys-space-12) var(--om-sys-space-16); box-sizing: border-box; }
.admin-menu .om-link { border-radius: 0; text-decoration: none; }
.admin-menu li:first-child .om-link { border-start-start-radius: var(--om-sys-radius-control); border-start-end-radius: var(--om-sys-radius-control); }
.admin-menu li:last-child .om-link { border-end-start-radius: var(--om-sys-radius-control); border-end-end-radius: var(--om-sys-radius-control); }
.admin-menu__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-subtle); }
.admin-menu__body { display: grid; flex: 1; min-width: 0; gap: 2px; }
.admin-menu__label { font-weight: 700; }
.admin-menu__note { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: var(--om-sys-type-body-small-line-height); }
/* 2026-11-05: 矢印は行の文字の色（currentColor）のまま。別の淡い色にしない。 */
.admin-menu__off { color: var(--om-sys-color-text-secondary); }
@media (hover: hover) { .admin-menu .om-link:hover { background: var(--om-sys-color-surface-subtle); } .admin-menu .om-link:hover .admin-menu__label { text-decoration: underline; } .admin-menu .om-link:hover .admin-menu__icon { background: var(--om-sys-color-surface-default); } }
/* 見出しのアイコン・「更新履歴をすべて見る」・更新履歴の操作のアイコン。 */
.admin-container .admin-heading { display: flex; align-items: center; gap: var(--om-sys-space-8); }
.admin-more { display: inline-flex; align-items: center; gap: var(--om-sys-space-4); min-height: var(--om-sys-density-target); }
.admin-history__text { display: flex; align-items: flex-start; gap: var(--om-sys-space-8); }
.admin-history__text .admin-icon { width: 16px; height: 16px; margin-top: 0.3em; color: var(--om-sys-color-text-secondary); }
.admin-link--danger .admin-icon, .admin-pager .admin-icon { width: 18px; height: 18px; }

/* 記事の一覧・更新履歴・画像の一覧。日付は幅をそろえた列にし、狭い画面では題の上に置く。 */
.admin-list, .admin-history { margin: 0 0 var(--om-sys-space-24); padding: 0; list-style: none; display: grid; gap: var(--om-sys-space-12); }
.admin-list--files { gap: var(--om-sys-space-8); }
.admin-entries { margin: 0 0 var(--om-sys-space-24); padding: 0; list-style: none; border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.admin-entry { display: grid; padding-block: var(--om-sys-space-4); border-bottom: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.admin-entry__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--om-sys-space-12); min-width: 0; }
.admin-entry__title .om-link, .admin-container .admin-back .om-link { display: inline-block; padding-block: var(--om-sys-space-8); }
.admin-entry__date { padding-top: var(--om-sys-space-8); }
.admin-entry__date:empty, .admin-history__date:empty { display: none; }
.admin-entry__date, .admin-history__date { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-entry__draft { padding: 0 var(--om-sys-space-8); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-status-warning-background); color: var(--om-sys-color-status-warning-foreground); font-size: 12px; white-space: nowrap; }
.admin-history li { display: grid; gap: var(--om-sys-space-4); }

.admin-help { padding: var(--om-sys-space-4) var(--om-sys-space-16); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-default); font-size: var(--om-sys-type-body-small-size); }
.admin-help summary { cursor: pointer; font-weight: 700; min-height: var(--om-sys-density-target); display: flex; align-items: center; }
.admin-help ul { margin: 0 0 var(--om-sys-space-12); padding-inline-start: 1.2em; line-height: 1.8; }

/* 画像のページ：貼り付ける1行は、選びやすい枠に入れる。 */
.admin-container .om-status .admin-snippet { margin-top: var(--om-sys-space-4); padding: var(--om-sys-space-8) var(--om-sys-space-12); border-radius: var(--om-sys-radius-small); background: var(--om-sys-color-surface-default); color: var(--om-sys-color-text-primary); user-select: all; }

/* ログインの2つの画面：狭い1列のカード（よくあるログインの形）。主な操作は幅いっぱいのボタン1つ。
   確認コードの画面は、区切り線の下に「届かないとき」のまとまり（迷惑メールの1行・再送信・メールアドレスの変更）を離して置く。 */
.admin-auth { box-sizing: border-box; max-width: var(--admin-width-auth); margin: 0 auto; }
.admin-container .admin-auth h1 { margin-bottom: var(--om-sys-space-16); font-size: var(--om-sys-type-heading-size); }
.admin-container .admin-auth__lead { margin-bottom: var(--om-sys-space-24); }
.admin-container .admin-auth__lead p { margin-bottom: var(--om-sys-space-4); }
.admin-container .admin-auth__lead p:last-child { margin-bottom: 0; }
.admin-container .admin-auth form { margin-bottom: 0; }
.admin-container .admin-auth button.admin-button--block { justify-self: stretch; width: 100%; }
/* 確認コードの欄は「ログイン」のボタンと同じ幅（カードの中いっぱい。2026-11-05、狭い欄と幅いっぱいのボタンが釣り合わないため）。数字は大きく、字間を空ける。 */
.admin-container .admin-input--code { font-size: var(--om-sys-type-subheading-size); font-variant-numeric: tabular-nums; letter-spacing: 0.25em; }
.admin-auth__secondary { display: grid; justify-items: start; gap: var(--om-sys-space-12); margin-top: var(--om-sys-space-32); padding-top: var(--om-sys-space-24); border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.admin-container .admin-auth__secondary p, .admin-container .admin-auth__secondary form.admin-resend { margin: 0; }
.admin-container .admin-auth__alt { font-size: var(--om-sys-type-body-small-size); }
.admin-auth__alt .om-link { display: inline-flex; align-items: center; min-height: var(--om-sys-density-target); }

/* 送信中の表示（2026-11-04、REQ-ADMIN-020）。/submit.js がボタンに admin-busy を付け、共通デザインの om-spinner（回る印と、動きを減らす設定で止める決まり）を入れる。 */
.om-button.admin-busy:disabled { cursor: progress; }
/* フッター（2026-11-04の2回目、REQ-ADMIN-021）。小さな文字の1行だけ。文字の大きさと色は共通デザインの om-footer-inner（label・text-secondary）のまま、
   並べ方と、上下の余白だけを小さくする（会社サイトのフッターの下の大きな余白はチャットボットのボタンのためで、管理画面には要らない）。 */
.admin-footer { margin-top: 0; padding-bottom: 0; }
.admin-footer .om-footer-inner { padding-block: var(--om-sys-space-16); }
.admin-footer__note { display: flex; flex-wrap: wrap; column-gap: var(--om-sys-space-12); row-gap: var(--om-sys-space-4); }
/* 知らせの中の「もう一度反映する」（枠線のボタン。画面の主な操作と並ばないように）。一覧のページの案内。 */
.admin-container .om-status form.admin-retry { margin: var(--om-sys-space-8) 0 0; }
.admin-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--om-sys-space-16); margin: 0 0 var(--om-sys-space-16); }
.admin-pager .om-link { display: inline-flex; align-items: center; gap: var(--om-sys-space-4); min-height: var(--om-sys-density-target); }
.admin-container .admin-pager__count { margin: 0; color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); }

/* 640px（共通デザインの small）から：左右の余白をヘッダーと同じにし、ログインの画面をカードにし、一覧の日付を列にする。 */
@media (min-width: 640px) {
  .admin-container { padding: var(--om-sys-space-48) var(--om-sys-layout-gutter-default) var(--om-sys-space-64); }
  .admin-auth { padding: var(--om-sys-space-32); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); border-radius: var(--om-sys-radius-surface); background: var(--om-sys-color-surface-default); }
  .admin-entry { grid-template-columns: 7.5rem 1fr; column-gap: var(--om-sys-space-16); align-items: baseline; }
  .admin-history li { grid-template-columns: 9.5rem 1fr; gap: var(--om-sys-space-16); align-items: baseline; }
  /* 日付が空で隠れた行も、題と文は2つ目の列に置く（狭い日付の列に入れない）。 */
  .admin-entry__title, .admin-history__text { grid-column: 2; }
}
/* 639px まで：小さいボタン（ログアウト・もう一度反映する）も、ふつうのボタンの高さ（40px）にする。押せる範囲は、共通デザインの
   ボタンの ::before がどのボタンでも44px以上に広げる（2026-11-10、会社サイトの REQ-CORPORATE-SITE-078）。 */
@media (max-width: 639px) {
  .admin .om-button--size-sm { min-height: var(--om-sys-density-control-default); }
}

/* 確認用（Preview）の管理画面だと分かる帯（2026-11-11、REQ-ADMIN-031）。ヘッダーの上に横いっぱいに出す。
   黄色の地と濃い茶の文字（比は4.5:1を超える）。本番と手元では帯を出さない（app.mjs）。 */
.admin-staging { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--om-sys-space-4) var(--om-sys-space-8); padding: var(--om-sys-space-8) var(--om-sys-layout-gutter-compact); background: #fff1b8; color: #3d2c00; border-bottom: 1px solid #d9a800; font-size: 0.875rem; line-height: 1.5; text-align: center; text-wrap: balance; word-break: auto-phrase; }
.admin-staging__tag { border-radius: 4px; padding: 0 var(--om-sys-space-8); background: #3d2c00; color: #fff1b8; font-weight: 700; letter-spacing: 0.04em; }