/* Generated by web/scripts/gen-door-css.mjs from the vendored design system. Do not edit. */
@font-face { font-family: 'DM Serif Display'; src: url('/fonts/DMSerifDisplay-Regular-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

/* Generated by web/scripts/gen-tm-tokens.mjs from web/src/styles/tm/tokens.json. Do not edit:
   `pnpm run check:tmvendor` regenerates this file and fails on any difference. */

:root {
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Geist', 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Courier New', Courier, monospace;
  --color-teal-300: oklch(0.855 0.138 181);
  --color-teal-500: oklch(0.704 0.14 182);
  --color-teal-600: #0d9488;
  --color-teal-700: oklch(0.511 0.096 180);
  --color-yellow-300: oklch(0.927 0.165 102);
  --color-zinc-50: oklch(0.985 0 0);
  --color-zinc-100: oklch(0.967 0.001 286);
  --color-zinc-200: oklch(0.92 0.004 286);
  --color-zinc-300: oklch(0.871 0.006 286);
  --color-zinc-400: oklch(0.707 0.022 286);
  --color-zinc-500: oklch(0.553 0.013 286);
  --color-zinc-600: oklch(0.442 0.017 286);
  --color-zinc-700: oklch(0.37 0.013 286);
  --color-zinc-800: oklch(0.274 0.006 286);
  --color-zinc-900: oklch(0.21 0.006 286);
  --color-zinc-950: oklch(0.145 0.004 286);
  --space-1: 4px;
  --space-2: 8px;
  --space-6: 24px;
  --spacing-section-mobile: 64px;
  --spacing-section-desktop: 96px;
  --spacing-reading: 840px;
  --spacing-content-max: 1280px;
  --space-0: 0;
  --space-0-5: 2px;
  --space-1-5: 6px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.15);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --glow-opacity-card: 0.1;
  --opacity-disabled: 0.5;
  --control-height-sm: 28px;
  --control-height-md: 36px;
  --control-height-lg: 44px;
  --z-base: 0;
  --z-sticky: 10;
  --z-app-bar: 40;
  --z-header: 50;
  --z-dropdown: 100;
  --z-drawer: 200;
  --z-dialog: 300;
  --z-toast: 400;
  --z-tooltip: 500;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-offset-inset: -2px;
  --icon-size-xs: 12px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 40px;
  --icon-stroke: 1.5;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 56px;
  --appbar-height: 56px;
  --page-padding: 24px;
}


:root {
  --color-background: var(--color-zinc-900);
  --color-surface: var(--color-zinc-800);
  --color-surface-elevated: var(--color-zinc-700);
  --color-text: var(--color-zinc-50);
  --color-text-muted: #a1a1aa;
  --color-primary: var(--color-teal-300);
  --color-primary-foreground: #09090b;
  --color-border: var(--color-zinc-700);
  --glow-color: var(--color-teal-300);
  --color-success-fg: oklch(0.80 0.15 150);
  --color-success-bg: oklch(0.29 0.045 150);
  --color-success-border: oklch(0.46 0.09 150);
  --color-warning-fg: oklch(0.84 0.14 80);
  --color-warning-bg: oklch(0.30 0.05 75);
  --color-warning-border: oklch(0.50 0.09 75);
  --color-info-fg: oklch(0.80 0.10 245);
  --color-info-bg: oklch(0.29 0.045 250);
  --color-info-border: oklch(0.47 0.09 250);
  --color-danger-fg: oklch(0.76 0.14 25);
  --color-danger-bg: oklch(0.30 0.06 25);
  --color-danger-border: oklch(0.50 0.13 25);
  --color-neutral-fg: #d4d4d8;
  --color-neutral-bg: oklch(0.30 0.006 286);
  --color-neutral-border: oklch(0.45 0.013 286);
  --color-danger-solid: oklch(0.70 0.17 25);
  --color-danger-solid-fg: #09090b;
  --color-border-control: oklch(0.58 0.013 286);
  --color-row-hover: oklch(0.245 0.006 286);
  --color-primary-subtle: oklch(0.30 0.045 181);
  --color-link: var(--color-primary);
  --color-skeleton: oklch(0.32 0.006 286);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --chart-1: var(--color-primary);
  --chart-2: oklch(0.58 0.12 45);
  --chart-3: oklch(0.70 0.12 125);
  --chart-4: oklch(0.58 0.13 355);
  --chart-5: oklch(0.70 0.015 286);
  --chart-6: oklch(0.78 0.09 205);
  --chart-seq-1: oklch(0.35 0.05 181);
  --chart-seq-2: oklch(0.48 0.08 181);
  --chart-seq-3: oklch(0.62 0.11 181);
  --chart-seq-4: oklch(0.75 0.13 181);
  --chart-seq-5: oklch(0.88 0.12 181);
  --pct-10: var(--color-zinc-500);
  --pct-25: #a1a1aa;
  --pct-50: var(--color-text);
  --pct-75: var(--pct-25);
  --pct-90: var(--pct-10);
  --pct-fill: rgba(250, 250, 250, 0.10);
  --evidence-earned: var(--chart-3);
  --evidence-boards: var(--chart-2);
  --evidence-jobbank: var(--chart-6);
  --evidence-agreements: var(--chart-4);
  --hatch-ink: var(--chart-5);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.5);
}


@media (prefers-color-scheme: light) {
  :root {
    --color-background: #ede8df;
    --color-surface: #e4ddd7;
    --color-surface-elevated: #dfd8cc;
    --color-text: var(--color-zinc-950);
    --color-text-muted: #52525b;
    --color-primary: var(--color-teal-700);
    --color-primary-foreground: #ffffff;
    --color-border: #d4ccc3;
    --glow-color: var(--color-teal-700);
    --color-success-fg: oklch(0.44 0.11 150);
    --color-success-bg: oklch(0.92 0.045 150);
    --color-success-border: oklch(0.70 0.10 150);
    --color-warning-fg: oklch(0.47 0.10 65);
    --color-warning-bg: oklch(0.92 0.06 85);
    --color-warning-border: oklch(0.72 0.11 75);
    --color-info-fg: oklch(0.46 0.13 255);
    --color-info-bg: oklch(0.92 0.035 250);
    --color-info-border: oklch(0.71 0.09 250);
    --color-danger-fg: oklch(0.49 0.17 27);
    --color-danger-bg: oklch(0.92 0.04 25);
    --color-danger-border: oklch(0.72 0.11 25);
    --color-neutral-fg: #3f3f46;
    --color-neutral-bg: #dcd4c8;
    --color-neutral-border: #b3a99c;
    --color-danger-solid: oklch(0.50 0.18 27);
    --color-danger-solid-fg: #ffffff;
    --color-border-control: #807466;
    --color-row-hover: #e7e1d8;
    --color-primary-subtle: #d3e3dc;
    --color-link: oklch(0.437 0.078 188);
    --color-skeleton: #dcd4c8;
    --color-overlay: rgba(24, 24, 27, 0.4);
    --chart-1: var(--color-primary);
    --chart-2: oklch(0.36 0.09 45);
    --chart-3: oklch(0.47 0.10 125);
    --chart-4: oklch(0.32 0.10 355);
    --chart-5: oklch(0.42 0.015 286);
    --chart-6: oklch(0.58 0.09 205);
    --chart-seq-1: oklch(0.88 0.05 181);
    --chart-seq-2: oklch(0.75 0.09 181);
    --chart-seq-3: oklch(0.62 0.11 181);
    --chart-seq-4: oklch(0.50 0.10 181);
    --chart-seq-5: oklch(0.38 0.07 181);
    --pct-10: #6b6b74;
    --pct-25: #52525b;
    --pct-50: var(--color-text);
    --pct-75: var(--pct-25);
    --pct-90: var(--pct-10);
    --pct-fill: rgba(9, 9, 11, 0.10);
    --evidence-earned: var(--chart-3);
    --evidence-boards: var(--chart-2);
    --evidence-jobbank: var(--chart-6);
    --evidence-agreements: var(--chart-4);
    --hatch-ink: var(--chart-5);
    --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.15);
    --shadow-overlay: 0 16px 48px rgba(40, 30, 20, 0.18);
  }
}
:root {
  --color-danger: var(--color-danger-fg);
  --focus-ring-color: var(--color-primary);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The hidden attribute always wins over a component's display rule. */
[hidden] { display: none !important; }

/* Visually hidden, still read by screen readers (table captions, icon-only labels). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── App layer: variables ── */
:root {
  /* App text styles as variables, for components that set size and leading separately (spec 3.3). */
  --app-title-size: 20px; --app-title-line: 28px;
  --app-dialog-title-size: 18px; --app-dialog-title-line: 28px;
  --app-body-size: 14px; --app-body-line: 20px;
  --app-table-size: 13px; --app-table-line: 18px;
  --app-label-size: 13px; --app-label-line: 18px;
  --app-caption-size: 12px; --app-caption-line: 16px;
  --app-heading-size: 16px; --app-heading-line: 24px;
  --app-kpi-size: 28px; --app-kpi-line: 36px;
}
@media (max-width: 767px) { :root { --page-padding: 16px; } }


/* ---- Shared ---- */
[class^="tm-"], [class*=" tm-"] { box-sizing: border-box; }

.tm-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

.tm-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.tm-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding-inline: var(--space-1);
  font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  color: var(--color-text-muted); background: var(--color-surface);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-sm);
}
@media (pointer: coarse) {
  .tm-kbd { display: none; }
}

/* ============================================================
   4.0 AppButton
   ============================================================ */
.tm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); height: var(--control-height-md); padding-inline: var(--space-3);
  font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 500;
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo),
              color var(--duration-fast) var(--ease-out-expo),
              opacity var(--duration-fast) var(--ease-out-expo);
}
.tm-btn--sm { height: var(--control-height-sm); padding-inline: var(--space-2); font-size: 13px; line-height: 18px; }
.tm-btn--lg { height: var(--control-height-lg); padding-inline: var(--space-4); }
.tm-btn--icon { padding-inline: 0; width: var(--control-height-md); }
.tm-btn--icon.tm-btn--sm { position: relative; width: var(--control-height-sm); }
.tm-btn--icon.tm-btn--lg { width: var(--control-height-lg); }
.tm-btn__icon { width: var(--icon-size-md); height: var(--icon-size-md); flex-shrink: 0; }
@media (pointer: coarse) {
  .tm-btn--icon.tm-btn--sm::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
}

.tm-btn--primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.tm-btn--primary:hover { opacity: 0.9; }
.tm-btn--primary:active { opacity: 0.8; }

.tm-btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-control); }
.tm-btn--secondary:hover { background: var(--color-surface); }
.tm-btn--secondary:active { background: var(--color-surface-elevated); }

.tm-btn--ghost { background: transparent; color: var(--color-text); border-color: transparent; }
.tm-btn--ghost:hover { background: var(--color-surface); }
.tm-btn--ghost:active { background: var(--color-surface-elevated); }

.tm-btn--danger { background: var(--color-danger-solid); color: var(--color-danger-solid-fg); }
.tm-btn--danger:hover { opacity: 0.9; }
.tm-btn--danger:active { opacity: 0.8; }

.tm-btn--link {
  background: none; border: none; padding-inline: 0; height: auto; color: var(--color-link);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.tm-btn--link:hover { text-decoration-thickness: 2px; }

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

.tm-btn:disabled, .tm-btn[aria-disabled="true"] {
  opacity: var(--opacity-disabled); cursor: not-allowed;
}
.tm-btn:disabled:hover, .tm-btn[aria-disabled="true"]:hover { background: inherit; opacity: var(--opacity-disabled); }

.tm-btn[aria-busy="true"] .tm-btn__label { opacity: 0.9; }
.tm-btn .tm-spinner { color: currentColor; }

/* ============================================================
   4.1 FormControls
   ============================================================ */
.tm-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.tm-field + .tm-field { margin-top: var(--space-4); }
.tm-field-group + .tm-field-group { margin-top: var(--space-6); }

.tm-field__label {
  font-family: var(--font-body); font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--color-text);
}
.tm-field__required { color: var(--color-danger-fg); margin-left: 2px; }

.tm-field__help { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.tm-field__error {
  display: flex; align-items: flex-start; gap: var(--space-1);
  font-size: 12px; line-height: 16px; color: var(--color-danger-fg);
}
.tm-field__error .tm-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); margin-top: 2px; }

.tm-field-required-note { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }

/* Shared control box */
.tm-input, .tm-textarea, .tm-select, .tm-combobox__input, .tm-datefield__input {
  width: 100%; height: var(--control-height-md); padding-inline: var(--space-3);
  font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-text);
  background: var(--color-background); border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out-expo),
              box-shadow var(--duration-fast) var(--ease-out-expo);
}
.tm-textarea { height: auto; min-height: 88px; padding-block: var(--space-2); resize: vertical; }
.tm-input--sm, .tm-select--sm { height: var(--control-height-sm); padding-inline: var(--space-2); font-size: 13px; line-height: 18px; }
.tm-input--lg, .tm-select--lg { height: var(--control-height-lg); padding-inline: var(--space-4); }
.tm-input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }

.tm-input::placeholder, .tm-textarea::placeholder { color: var(--color-text-muted); }
.tm-input:hover, .tm-textarea:hover, .tm-select:hover { border-color: var(--color-text-muted); }
.tm-input:focus-visible, .tm-textarea:focus-visible, .tm-select:focus-visible,
.tm-input:focus, .tm-textarea:focus, .tm-select:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary);
}
.tm-input[aria-invalid="true"], .tm-textarea[aria-invalid="true"] { border-color: var(--color-danger-fg); }
.tm-input[aria-invalid="true"]:focus, .tm-textarea[aria-invalid="true"]:focus {
  border-color: var(--color-danger-fg); box-shadow: 0 0 0 1px var(--color-danger-fg);
}
.tm-input:disabled, .tm-textarea:disabled, .tm-select:disabled {
  background: var(--color-surface); opacity: var(--opacity-disabled); cursor: not-allowed;
}
.tm-input[readonly] { background: var(--color-surface); border-color: var(--color-border); }

.tm-field__control-wrap { position: relative; display: flex; align-items: center; }
.tm-field__control-icon {
  position: absolute; width: var(--icon-size-md); height: var(--icon-size-md);
  color: var(--color-text-muted); pointer-events: none;
}
.tm-field__control-icon--leading { left: var(--space-3); }
.tm-field__control-icon--trailing { right: var(--space-3); }
.tm-input--has-leading-icon { padding-left: 40px; }
.tm-input--has-trailing-icon { padding-right: 40px; }
.tm-input-money-unit {
  position: absolute; right: var(--space-3); color: var(--color-text-muted); font-size: 14px; pointer-events: none;
}

.tm-textarea-counter { align-self: flex-end; font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.tm-textarea-counter--over { color: var(--color-danger-fg); }

/* Select */
.tm-select-wrap { position: relative; }
.tm-select { appearance: none; -webkit-appearance: none; padding-right: 40px; }

/* Checkbox */
.tm-checkbox-label {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px;
  cursor: pointer; font-size: 14px; line-height: 20px; color: var(--color-text);
}
.tm-checkbox-wrap { position: relative; width: 16px; height: 16px; display: inline-flex; flex-shrink: 0; }
.tm-checkbox {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0;
  border-radius: var(--radius-sm); border: 1px solid var(--color-border-control);
  background: var(--color-background); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo);
}
.tm-checkbox:hover { border-color: var(--color-text-muted); }
.tm-checkbox:checked, .tm-checkbox:indeterminate { background: var(--color-primary); border-color: var(--color-primary); }
.tm-checkbox__check {
  position: absolute; inset: 0; width: 16px; height: 16px; padding: 2px;
  color: var(--color-primary-foreground); opacity: 0; pointer-events: none;
}
.tm-checkbox:checked ~ .tm-checkbox__check, .tm-checkbox:indeterminate ~ .tm-checkbox__check { opacity: 1; }
/* Indeterminate shows a dash, never the tick (spec 4.1: "some rows selected"). */
.tm-checkbox:indeterminate ~ .tm-checkbox__check { display: none; }
.tm-checkbox-wrap:has(.tm-checkbox:indeterminate)::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 7px; height: 2px;
  border-radius: 1px; background: var(--color-primary-foreground); pointer-events: none;
}
.tm-checkbox:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.tm-checkbox[aria-invalid="true"] { border-color: var(--color-danger-fg); }
.tm-checkbox:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.tm-checkbox-label--disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* Radio */
.tm-radio-label {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 24px;
  cursor: pointer; font-size: 14px; line-height: 20px; color: var(--color-text);
}
.tm-radio {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--color-border-control); background: var(--color-background);
  position: relative; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}
.tm-radio:hover { border-color: var(--color-text-muted); }
.tm-radio:checked { border-color: var(--color-primary); }
.tm-radio:checked::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--color-primary); transform: translate(-50%, -50%);
}
.tm-radio:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.tm-radio:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

.tm-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tm-fieldset legend {
  font-family: var(--font-body); font-size: 13px; line-height: 18px; font-weight: 500;
  color: var(--color-text); padding: 0; margin-bottom: var(--space-1);
}

/* Switch */
.tm-switch-row { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--color-text); }
.tm-switch {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center;
  width: 32px; height: 18px; padding: 2px; border: none; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--color-border-control); cursor: pointer; position: relative;
  transition: background-color var(--duration-fast) var(--ease-out-expo);
}
.tm-switch[aria-checked="true"] { background: var(--color-primary); }
.tm-switch__thumb {
  width: 14px; height: 14px; border-radius: 3px; background: var(--color-background);
  transition: transform var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo);
  transform: translateX(0);
}
.tm-switch[aria-checked="true"] .tm-switch__thumb { transform: translateX(14px); background: var(--color-primary-foreground); }
.tm-switch:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.tm-switch:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* Combobox */
.tm-combobox { position: relative; }
.tm-combobox__clear {
  position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: none; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer;
}
.tm-combobox__clear--visible { display: inline-flex; }
.tm-combobox__clear:hover { background: var(--color-surface); color: var(--color-text); }
.tm-combobox__listbox {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--z-dropdown);
  background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown); padding: var(--space-1); max-height: 320px; overflow-y: auto;
  margin: 0; list-style: none;
}
.tm-combobox__listbox[hidden] { display: none; }
.tm-combobox__option {
  display: flex; flex-direction: column; justify-content: center; height: 32px; padding-inline: var(--space-2);
  border-radius: var(--radius-md); font-size: 14px; line-height: 20px; color: var(--color-text); cursor: pointer;
}
.tm-combobox__option-meta { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.tm-combobox__option:hover, .tm-combobox__option[aria-selected="true"] { background: var(--color-surface); }
.tm-combobox__option-check { width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-link); margin-left: auto; }
.tm-combobox__status { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding-inline: var(--space-2); font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.tm-combobox__empty-action { color: var(--color-link); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; font: inherit; }

/* Date field */
.tm-datefield { position: relative; }
.tm-datefield__row { position: relative; display: flex; align-items: center; }
.tm-datefield__row + .tm-datefield__row { margin-top: var(--space-1-5); }
.tm-datefield__trigger {
  position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer;
}
.tm-datefield__trigger:hover { background: var(--color-surface); color: var(--color-text); }
.tm-datepicker {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-dropdown); width: 280px;
  background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown); padding: var(--space-3);
}
.tm-datepicker[hidden] { display: none; }
.tm-datepicker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.tm-datepicker__month { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--color-text); text-transform: capitalize; }
.tm-datepicker__nav {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer;
}
.tm-datepicker__nav:hover { background: var(--color-surface); color: var(--color-text); }
.tm-datepicker__grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }
.tm-datepicker__daylabel {
  width: 32px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 16px; color: var(--color-text-muted);
}
.tm-datepicker__day {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 18px; color: var(--color-text); background: none; border: none;
  border-radius: var(--radius-sm); cursor: pointer;
}
.tm-datepicker__day:hover { background: var(--color-surface); }
.tm-datepicker__day:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset-inset); }
.tm-datepicker__day--today { background: var(--color-primary-subtle); }
.tm-datepicker__day--selected, .tm-datepicker__day--selected:hover { background: var(--color-primary); color: var(--color-primary-foreground); }
.tm-datepicker__day--in-range { background: var(--color-primary-subtle); }
.tm-datepicker__day--outside { color: var(--color-text-muted); opacity: 0.6; }
.tm-datepicker__day:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }


/* ---- P3.4 tm-signin: single sign-in surface, one state visible at a time ---- */
.tm-signin { max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.tm-signin__lockup { display: flex; align-items: center; gap: var(--space-3); justify-content: center; }
.tm-signin__mark { width: 40px; height: 40px; flex: 0 0 auto; }
.tm-signin__mark-placeholder {
  width: 40px; height: 40px; border: 1px dashed var(--color-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--color-text-muted);
  flex: 0 0 auto;
}
.tm-signin__wordwrap { display: flex; flex-direction: column; line-height: 1.15; }
.tm-signin__product { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--color-text); }
.tm-signin__by { font-size: var(--app-caption-size); color: var(--color-text-muted); }
.tm-signin__panel { display: none; flex-direction: column; gap: var(--space-4); text-align: center; }
.tm-signin__panel[data-active] { display: flex; }
.tm-signin__heading { margin: 0; font-size: var(--app-heading-size); font-weight: 600; color: var(--color-text); }
.tm-signin__body { margin: 0; font-size: var(--app-body-size); color: var(--color-text-muted); }
.tm-signin__actions { display: flex; flex-direction: column; gap: var(--space-2); }
.tm-signin__divider { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--app-caption-size); }
.tm-signin__divider::before, .tm-signin__divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--color-border); }
.tm-signin__ref { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: var(--app-caption-size); }
.tm-signin__switch { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-2); }
.tm-signin__switch-label { font-size: var(--app-caption-size); color: var(--color-text-muted); }


/* The bare document the facade renders around the system's SignInDoor. */
html { color-scheme: dark; }
@media (prefers-color-scheme: light) { html { color-scheme: light; } }
body { margin: 0; min-height: 100vh; background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--app-body-size); line-height: var(--app-body-line); }
.tm-door { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-8) var(--page-padding); }
.tm-door .tm-signin { width: 100%; }
.tm-door a { color: var(--color-link, var(--color-primary)); }
.tm-door a.tm-btn--primary { color: var(--color-primary-foreground); }
.tm-door a.tm-btn--secondary { color: var(--color-text); }
.tm-signin__lockup { text-decoration: none; color: inherit; }
.tm-signin__mark--light { display: none; }
@media (prefers-color-scheme: light) { .tm-signin__mark--dark { display: none; } .tm-signin__mark--light { display: block; } }
.tm-signin__form { display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
.tm-signin__form .tm-btn { width: 100%; }
.tm-signin__error { margin: 0; color: var(--color-danger-fg); font-size: var(--app-caption-size); }
.tm-door__nav { display: flex; gap: var(--space-5); justify-content: center; font-size: var(--app-caption-size); }
.tm-signin .tm-btn { height: var(--control-height-lg); }