@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --select-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  .page-shell {
    @apply mx-auto w-full max-w-7xl;
  }

  /* Stacked form fields: 4px gap + 24px label line-height */
  .mc-form-field {
    @apply flex flex-col gap-1;
  }

  .mc-form-label {
    @apply text-sm font-medium leading-6 text-foreground;
  }

  /* Single-line native controls (38px); use with selects or text-like inputs not using ui/Input */
  .mc-control {
    @apply dark:bg-input/30 border-input h-[38px] w-full min-w-0 rounded-md border bg-transparent px-3 py-0 text-base leading-none shadow-xs transition-[color,box-shadow] outline-none md:text-sm md:leading-none;
    @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
    @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
    @apply disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
  }

  .mc-form-textarea {
    @apply dark:bg-input/30 border-input w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm;
    @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
    @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
    @apply disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
  }

  select[data-slot='select'],
  select.mc-control,
  select.rounded-md.border.border-input.bg-background.px-3.py-2 {
    appearance: none;
    background-image: var(--select-chevron-icon);
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 0.9rem;
    min-height: 38px;
    height: 38px;
    padding-right: 2.5rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.25rem;
  }

  select[data-slot='select'] option,
  select.mc-control option,
  select.rounded-md.border.border-input.bg-background.px-3.py-2 option,
  select[data-slot='select'] optgroup,
  select.mc-control optgroup,
  select.rounded-md.border.border-input.bg-background.px-3.py-2 optgroup {
    background-color: var(--popover);
    color: var(--popover-foreground);
  }

  .wiki-editor-toggle-button {
    @apply rounded-full px-4 py-2 text-sm font-medium text-muted-foreground transition;
  }

  .wiki-editor-toggle-button:hover {
    @apply text-foreground;
  }

  .wiki-editor-toggle-button--active {
    @apply bg-background text-foreground shadow-sm;
  }

  .wiki-toolbar-group {
    @apply inline-flex flex-wrap items-center gap-1 rounded-2xl border border-border bg-muted/35 p-1.5 shadow-sm;
  }

  .wiki-toolbar-button {
    @apply inline-flex min-h-9 min-w-9 items-center justify-center rounded-xl border border-transparent bg-background px-3 py-2 text-[12px] font-semibold tracking-tight text-foreground transition;
  }

  .wiki-toolbar-button:hover:not(:disabled) {
    @apply border-border bg-card;
  }

  .wiki-toolbar-button:disabled {
    @apply cursor-not-allowed opacity-55;
  }

  .mission-markdown-editor {
    @apply rounded-[1.75rem];
  }

  .mission-markdown-editor__frame {
    @apply overflow-hidden rounded-[1.75rem] border border-border bg-card shadow-sm;
  }

  .mission-markdown-editor__header {
    @apply flex flex-col gap-4 border-b border-border bg-[linear-gradient(135deg,rgba(148,163,184,0.14),rgba(15,23,42,0.02))] px-5 py-5 lg:flex-row lg:items-start lg:justify-between;
  }

  .mission-markdown-editor__copy {
    @apply min-w-0;
  }

  .mission-markdown-editor__label {
    @apply text-sm font-semibold uppercase tracking-[0.16em] text-muted-foreground;
  }

  .mission-markdown-editor__helper {
    @apply mt-2 max-w-3xl text-sm leading-6 text-muted-foreground;
  }

  .mission-markdown-editor__metrics {
    @apply inline-flex shrink-0 items-center gap-2 self-start rounded-full border border-border bg-background/80 px-3 py-2 text-xs font-medium text-muted-foreground shadow-sm;
  }

  .mission-markdown-editor__metric {
    @apply whitespace-nowrap;
  }

  .mission-markdown-editor__metric + .mission-markdown-editor__metric {
    @apply border-l border-border pl-2;
  }

  .mission-markdown-editor__body {
    @apply p-4;
  }

  .mission-markdown-editor__surface {
    @apply relative overflow-hidden rounded-[1.35rem] border border-border bg-background/80;
  }

  .mission-markdown-editor__footer {
    @apply border-t border-border bg-muted/20 px-5 py-3;
  }

  .mission-markdown-editor__source-note {
    @apply text-xs text-muted-foreground;
  }

  .mission-markdown-editor .toastui-editor-defaultUI {
    @apply overflow-hidden border-0 bg-card text-foreground shadow-none;
    border-radius: 0;
  }

  .mission-markdown-editor .toastui-editor-toolbar {
    @apply flex flex-wrap items-center gap-3 border-b border-border bg-[linear-gradient(180deg,rgba(148,163,184,0.12),rgba(15,23,42,0.02))] px-4 py-4;
  }

  .mission-markdown-editor .toastui-editor-defaultUI-toolbar {
    @apply flex flex-1 flex-wrap items-center gap-3 bg-transparent p-0;
  }

  .mission-markdown-editor .toastui-editor-toolbar-group {
    @apply inline-flex items-center gap-1 rounded-2xl border border-border bg-background/80 p-1 shadow-sm;
  }

  .mission-markdown-editor .toastui-editor-toolbar-divider {
    @apply mx-1 h-6 border-border/70;
  }

  .mission-markdown-editor .toastui-editor-toolbar button {
    @apply inline-flex h-10 min-w-10 items-center justify-center rounded-xl border border-transparent bg-transparent text-muted-foreground transition;
  }

  .mission-markdown-editor .toastui-editor-toolbar button:hover,
  .mission-markdown-editor .toastui-editor-toolbar button.active {
    @apply border-border bg-muted/70 text-foreground;
  }

  .mission-markdown-editor .toastui-editor-toolbar button:disabled {
    @apply cursor-not-allowed opacity-55;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.toastui-editor-toolbar-icons {
    filter: grayscale(1) brightness(0.85) contrast(1.1);
  }

  .dark .mission-markdown-editor .toastui-editor-toolbar button.toastui-editor-toolbar-icons {
    filter: brightness(0) invert(1) opacity(0.78);
  }

  .dark .mission-markdown-editor .toastui-editor-toolbar button:hover.toastui-editor-toolbar-icons,
  .dark .mission-markdown-editor .toastui-editor-toolbar button.active.toastui-editor-toolbar-icons {
    filter: brightness(0) invert(1) opacity(1);
  }

  .mission-markdown-editor .toastui-editor-main {
    @apply border-b border-border bg-background;
  }

  .mission-markdown-editor .toastui-editor-main-container,
  .mission-markdown-editor .toastui-editor-md-container,
  .mission-markdown-editor .toastui-editor-ww-container,
  .mission-markdown-editor .toastui-editor-md-preview,
  .mission-markdown-editor .toastui-editor.ww-mode,
  .mission-markdown-editor .toastui-editor.md-mode,
  .mission-markdown-editor .toastui-editor-ww-container .ProseMirror,
  .mission-markdown-editor .toastui-editor-contents {
    @apply bg-background text-foreground;
  }

  .mission-markdown-editor .toastui-editor-ww-container,
  .mission-markdown-editor .toastui-editor-md-preview {
    @apply border-l border-border;
  }

  .mission-markdown-editor .toastui-editor-ww-container .ProseMirror,
  .mission-markdown-editor .toastui-editor-md-container .ProseMirror,
  .mission-markdown-editor .toastui-editor-md-preview {
    @apply min-h-full;
  }

  .mission-markdown-editor .toastui-editor-mode-switch,
  .mission-markdown-editor .toastui-editor-md-tab-container {
    @apply flex items-center justify-end border-t border-border bg-[linear-gradient(180deg,rgba(148,163,184,0.08),rgba(15,23,42,0.03))] px-3 py-3;
  }

  .mission-markdown-editor .toastui-editor-tabs {
    @apply inline-flex items-center gap-1 rounded-full border border-border bg-background/80 p-1 shadow-sm;
  }

  .mission-markdown-editor .toastui-editor-mode-switch .tab-item,
  .mission-markdown-editor .toastui-editor-md-tab-container .tab-item {
    @apply rounded-full border border-transparent px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground transition;
    border-right-width: 0;
  }

  .mission-markdown-editor .toastui-editor-mode-switch .tab-item:hover,
  .mission-markdown-editor .toastui-editor-md-tab-container .tab-item:hover {
    @apply text-foreground;
  }

  .mission-markdown-editor .toastui-editor-mode-switch .tab-item.active,
  .mission-markdown-editor .toastui-editor-md-tab-container .tab-item.active {
    @apply border-border bg-muted text-foreground shadow-sm;
  }

  .mission-markdown-editor .toastui-editor-contents,
  .mission-markdown-editor .ProseMirror,
  .mission-markdown-editor .toastui-editor-md-preview {
    @apply px-5 py-5 text-[15px] leading-7 text-foreground;
  }

  .mission-markdown-editor .toastui-editor-contents .placeholder,
  .mission-markdown-editor .ProseMirror .placeholder {
    @apply text-muted-foreground;
  }

  .mission-markdown-editor .toastui-editor-contents h1,
  .mission-markdown-editor .toastui-editor-contents h2,
  .mission-markdown-editor .toastui-editor-contents h3,
  .mission-markdown-editor .toastui-editor-contents h4,
  .mission-markdown-editor .toastui-editor-contents h5,
  .mission-markdown-editor .toastui-editor-contents h6 {
    @apply font-semibold tracking-tight text-foreground;
  }

  .mission-markdown-editor .toastui-editor-contents ul {
    @apply list-disc pl-6;
  }

  .mission-markdown-editor .toastui-editor-contents ol {
    @apply list-decimal pl-6;
  }

  .mission-markdown-editor .toastui-editor-contents li {
    @apply my-1 text-foreground/90;
  }

  .mission-markdown-editor .toastui-editor-contents a {
    @apply underline decoration-sky-300 underline-offset-4;
  }

  .mission-markdown-editor .toastui-editor-contents a:hover {
    @apply text-sky-800;
  }

  .mission-markdown-editor .toastui-editor-contents p,
  .mission-markdown-editor .toastui-editor-contents ul,
  .mission-markdown-editor .toastui-editor-contents ol,
  .mission-markdown-editor .toastui-editor-contents blockquote,
  .mission-markdown-editor .toastui-editor-contents pre {
    @apply my-4;
  }

  .mission-markdown-editor .toastui-editor-contents blockquote {
    @apply rounded-r-2xl border-l-4 border-sky-300 bg-sky-50 px-4 py-3 text-sky-950;
  }

  .mission-markdown-editor .toastui-editor-contents code {
    @apply rounded-md bg-foreground/5 px-1.5 py-0.5 font-mono text-[0.95em] text-foreground;
  }

  .mission-markdown-editor .toastui-editor-contents pre {
    @apply overflow-x-auto rounded-2xl border border-border bg-slate-950 px-4 py-4 text-slate-100;
  }

  .mission-markdown-editor .toastui-editor-contents pre code {
    @apply bg-transparent p-0 text-inherit;
  }

  .mission-markdown-editor .CodeMirror,
  .mission-markdown-editor .CodeMirror-scroll {
    @apply text-[15px] leading-7 text-foreground;
  }

  .mission-markdown-editor .CodeMirror,
  .mission-markdown-editor .CodeMirror-scroll,
  .mission-markdown-editor .CodeMirror-sizer,
  .mission-markdown-editor .CodeMirror-lines {
    @apply bg-background;
  }

  .mission-markdown-editor .CodeMirror-gutters {
    @apply border-r border-border bg-muted/20;
  }

  .mission-markdown-editor .CodeMirror-cursor {
    @apply border-l-foreground;
  }

  .mission-markdown-editor .CodeMirror-selected {
    @apply bg-muted;
  }

  .mission-markdown-editor .toastui-editor-popup,
  .mission-markdown-editor .toastui-editor-dropdown-toolbar {
    @apply rounded-2xl border border-border bg-popover text-popover-foreground shadow-lg;
  }

  .mission-markdown-editor .toastui-editor-popup,
  .mission-markdown-editor .toastui-editor-popup-body,
  .mission-markdown-editor .toastui-editor-popup-body ul,
  .mission-markdown-editor .toastui-editor-popup-body li,
  .mission-markdown-editor .toastui-editor-popup-body h1,
  .mission-markdown-editor .toastui-editor-popup-body h2,
  .mission-markdown-editor .toastui-editor-popup-body h3,
  .mission-markdown-editor .toastui-editor-popup-body h4,
  .mission-markdown-editor .toastui-editor-popup-body h5,
  .mission-markdown-editor .toastui-editor-popup-body h6,
  .mission-markdown-editor .toastui-editor-popup-body div,
  .mission-markdown-editor .toastui-editor-dropdown-toolbar,
  .mission-markdown-editor .toastui-editor-dropdown-toolbar ul,
  .mission-markdown-editor .toastui-editor-dropdown-toolbar li {
    background-color: var(--popover) !important;
    color: var(--popover-foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-popup-body li:hover,
  .mission-markdown-editor .toastui-editor-popup-body li:focus,
  .mission-markdown-editor .toastui-editor-popup-body li:focus-visible,
  .mission-markdown-editor .toastui-editor-dropdown-toolbar li:hover,
  .mission-markdown-editor .toastui-editor-dropdown-toolbar li:focus,
  .mission-markdown-editor .toastui-editor-dropdown-toolbar li:focus-visible {
    background-color: var(--muted) !important;
    color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-popup-body input,
  .mission-markdown-editor .toastui-editor-popup-body textarea,
  .mission-markdown-editor .toastui-editor-popup-body select {
    @apply rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none;
  }

  .mission-markdown-editor .toastui-editor-popup-body label,
  .mission-markdown-editor .toastui-editor-popup-body span {
    @apply text-sm text-muted-foreground;
  }

  .mission-markdown-editor--standup .toastui-editor-defaultUI {
    @apply bg-card;
  }

  .mission-markdown-editor--standup .mission-markdown-editor__body {
    @apply p-5;
  }

  .mission-markdown-editor--standup .mission-markdown-editor__surface {
    @apply rounded-[1.5rem];
  }

  .mission-markdown-editor--standup .toastui-editor-defaultUI-toolbar,
  .mission-markdown-editor--compact .toastui-editor-defaultUI-toolbar {
    min-height: 56px !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar,
  .mission-markdown-editor--compact .toastui-editor-toolbar {
    gap: 8px !important;
    min-height: 56px !important;
    padding: 10px 12px !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar-group,
  .mission-markdown-editor--compact .toastui-editor-toolbar-group {
    border-radius: 16px !important;
    gap: 2px !important;
    padding: 3px !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar button,
  .mission-markdown-editor--compact .toastui-editor-toolbar button {
    border-radius: 10px !important;
    font-size: 12px !important;
    height: 32px !important;
    min-width: 32px !important;
    width: 32px !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar button.quote::after,
  .mission-markdown-editor--compact .toastui-editor-toolbar button.quote::after,
  .mission-markdown-editor--standup .toastui-editor-toolbar button.bullet-list::after,
  .mission-markdown-editor--compact .toastui-editor-toolbar button.bullet-list::after,
  .mission-markdown-editor--standup .toastui-editor-toolbar button.more::after,
  .mission-markdown-editor--compact .toastui-editor-toolbar button.more::after {
    font-size: 13px;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar button.code::after,
  .mission-markdown-editor--compact .toastui-editor-toolbar button.code::after {
    font-size: 9px;
  }

  .mission-markdown-editor--standup .toastui-editor-mode-switch,
  .mission-markdown-editor--standup .toastui-editor-md-tab-container,
  .mission-markdown-editor--compact .toastui-editor-mode-switch,
  .mission-markdown-editor--compact .toastui-editor-md-tab-container {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }

  .mission-markdown-editor--standup .toastui-editor-tabs,
  .mission-markdown-editor--compact .toastui-editor-tabs {
    gap: 2px !important;
    padding: 3px !important;
  }

  .mission-markdown-editor--standup .toastui-editor-mode-switch .tab-item,
  .mission-markdown-editor--standup .toastui-editor-md-tab-container .tab-item,
  .mission-markdown-editor--compact .toastui-editor-mode-switch .tab-item,
  .mission-markdown-editor--compact .toastui-editor-md-tab-container .tab-item {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    padding: 7px 10px !important;
  }

  .mission-markdown-editor--compact .mission-markdown-editor__header {
    @apply px-4 py-4;
  }

  .mission-markdown-editor--compact .mission-markdown-editor__body {
    @apply p-3;
  }

  .mission-markdown-editor--compact .mission-markdown-editor__footer {
    @apply px-4 py-2.5;
  }

  .mission-markdown-editor--compact .toastui-editor-toolbar {
    @apply gap-2 px-3 py-3;
  }

  .mission-markdown-editor--full-page .toastui-editor-contents,
  .mission-markdown-editor--full-page .ProseMirror,
  .mission-markdown-editor--full-page .toastui-editor-md-preview {
    @apply px-6 py-5;
  }

  .mission-markdown-editor--full-page .mission-markdown-editor__body {
    @apply p-5;
  }

  .mission-markdown-editor .toastui-editor-defaultUI,
  .mission-markdown-editor .toastui-editor-defaultUI-toolbar,
  .mission-markdown-editor .toastui-editor-toolbar,
  .mission-markdown-editor .toastui-editor-main,
  .mission-markdown-editor .toastui-editor-main-container,
  .mission-markdown-editor .toastui-editor-md-container,
  .mission-markdown-editor .toastui-editor-md-preview,
  .mission-markdown-editor .toastui-editor.md-mode,
  .mission-markdown-editor .toastui-editor-contents,
  .mission-markdown-editor .CodeMirror,
  .mission-markdown-editor .CodeMirror-scroll,
  .mission-markdown-editor .CodeMirror-sizer,
  .mission-markdown-editor .CodeMirror-lines,
  .mission-markdown-editor .toastui-editor-mode-switch,
  .mission-markdown-editor .toastui-editor-md-tab-container {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-defaultUI,
  .mission-markdown-editor .toastui-editor-main,
  .mission-markdown-editor .toastui-editor-mode-switch,
  .mission-markdown-editor .toastui-editor-md-tab-container,
  .mission-markdown-editor .toastui-editor-toolbar,
  .mission-markdown-editor .toastui-editor-toolbar-group,
  .mission-markdown-editor .toastui-editor-popup,
  .mission-markdown-editor .toastui-editor-dropdown-toolbar {
    border-color: var(--border) !important;
  }

  .mission-markdown-editor .toastui-editor-toolbar,
  .mission-markdown-editor .toastui-editor-defaultUI-toolbar {
    background-color: var(--card) !important;
    height: auto !important;
  }

  .mission-markdown-editor .toastui-editor-defaultUI-toolbar {
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
  }

  .mission-markdown-editor .toastui-editor-toolbar {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    min-height: 0 !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mission-markdown-editor .toastui-editor-toolbar-group {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mission-markdown-editor .toastui-editor-toolbar button {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    color: var(--muted-foreground) !important;
    margin: 0 !important;
    height: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
  }

  .mission-markdown-editor .toastui-editor-toolbar button:hover {
    background-color: color-mix(in oklab, var(--card) 92%, var(--foreground) 8%) !important;
    border-color: color-mix(in oklab, var(--border) 90%, var(--foreground) 10%) !important;
    color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.active {
    background-color: color-mix(in oklab, var(--card) 84%, var(--foreground) 16%) !important;
    border-color: color-mix(in oklab, var(--border) 78%, var(--foreground) 22%) !important;
    color: var(--foreground) !important;
  }

  .mission-markdown-editor__mention-menu {
    @apply absolute z-20 w-80 overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md;
  }

  .mission-markdown-editor__mention-list {
    @apply max-h-64 overflow-y-auto py-1;
  }

  .mission-markdown-editor__mention-option {
    @apply flex w-full items-center gap-2 rounded px-3 py-1.5 text-left text-sm;
  }

  .mission-markdown-editor__mention-option:hover,
  .mission-markdown-editor__mention-option--active {
    @apply bg-accent text-accent-foreground;
  }

  .mission-markdown-editor__mention-code {
    @apply shrink-0 font-mono text-xs text-muted-foreground;
  }

  .mission-markdown-editor__mention-title {
    @apply truncate text-sm text-foreground;
  }

  .mission-markdown-editor__mention-empty {
    @apply px-3 py-2 text-sm text-muted-foreground;
  }

  .mission-markdown-editor .toastui-editor-mode-switch,
  .mission-markdown-editor .toastui-editor-md-tab-container {
    display: none !important;
  }

  .mission-markdown-editor .toastui-editor-md-container,
  .mission-markdown-editor .toastui-editor-md-preview,
  .mission-markdown-editor .toastui-editor-contents {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-main-container .ProseMirror,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror *,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents *,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-md-preview,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-md-preview * {
    color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-main-container .ProseMirror p,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror div,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror h1,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror h2,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror h3,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror h4,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror h5,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror h6,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror li,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror blockquote,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror code,
  .mission-markdown-editor .toastui-editor-main-container .ProseMirror pre,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents p,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents div,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents h1,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents h2,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents h3,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents h4,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents h5,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents h6,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents li,
  .mission-markdown-editor .toastui-editor-main-container .toastui-editor-contents blockquote {
    color: var(--foreground) !important;
    background-color: transparent !important;
    caret-color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-md-container,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-scroll,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-sizer,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-lines,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror pre,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-line,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-line *,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-lines * {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-md-container .CodeMirror,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-scroll,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror pre,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-line {
    caret-color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-contents .placeholder,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-placeholder,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-line .placeholder,
  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-line .CodeMirror-placeholder {
    color: var(--muted-foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-cursor {
    border-left-color: var(--foreground) !important;
  }

  .mission-markdown-editor .toastui-editor-md-container .CodeMirror-selected {
    background-color: color-mix(in oklab, var(--muted) 80%, transparent) !important;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.toastui-editor-toolbar-icons::after {
    align-items: center;
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    justify-content: center;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.heading::after {
    content: 'H';
  }

  .mission-markdown-editor .toastui-editor-toolbar button.bold::after {
    content: 'B';
    font-size: 14px;
    font-weight: 700;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.italic::after {
    content: 'I';
    font-size: 14px;
    font-style: italic;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.strike::after {
    content: 'S';
    font-size: 13px;
    text-decoration: line-through;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.bullet-list::after {
    content: '\2022';
    font-size: 18px;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.ordered-list::after {
    content: '1.';
  }

  .mission-markdown-editor .toastui-editor-toolbar button.task-list::after {
    content: '[]';
  }

  .mission-markdown-editor .toastui-editor-toolbar button.quote::after {
    content: '"';
    font-size: 18px;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.link::after {
    content: '\2197';
    font-size: 14px;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.code::after {
    content: '</>';
    font-size: 10px;
    letter-spacing: 0;
    text-transform: none;
  }

  .mission-markdown-editor .toastui-editor-toolbar button.codeblock::after {
    content: 'CB';
  }

  .mission-markdown-editor .toastui-editor-toolbar button.more::after {
    content: '+';
    font-size: 16px;
    font-weight: 500;
  }

  .mission-markdown-editor--standup .toastui-editor-defaultUI-toolbar,
  .mission-markdown-editor--compact .toastui-editor-defaultUI-toolbar {
    min-height: 0 !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar,
  .mission-markdown-editor--compact .toastui-editor-toolbar {
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar-group,
  .mission-markdown-editor--compact .toastui-editor-toolbar-group {
    border-radius: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar button,
  .mission-markdown-editor--compact .toastui-editor-toolbar button {
    border-radius: 9px !important;
    font-size: 11px !important;
    height: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar button.bold::after,
  .mission-markdown-editor--standup .toastui-editor-toolbar button.italic::after,
  .mission-markdown-editor--standup .toastui-editor-toolbar button.link::after,
  .mission-markdown-editor--compact .toastui-editor-toolbar button.bold::after,
  .mission-markdown-editor--compact .toastui-editor-toolbar button.italic::after,
  .mission-markdown-editor--compact .toastui-editor-toolbar button.link::after {
    font-size: 12px;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar button.task-list::after,
  .mission-markdown-editor--compact .toastui-editor-toolbar button.task-list::after {
    font-size: 10px;
  }

  .mission-markdown-editor--standup .mission-markdown-editor__body,
  .mission-markdown-editor--compact .mission-markdown-editor__body {
    padding: 0 !important;
  }

  .mission-markdown-editor--standup .toastui-editor-toolbar-group,
  .mission-markdown-editor--compact .toastui-editor-toolbar-group,
  .mission-markdown-editor--standup .toastui-editor-toolbar-divider,
  .mission-markdown-editor--compact .toastui-editor-toolbar-divider {
    flex-shrink: 0 !important;
  }

  .mission-markdown-editor--standup .toastui-editor-contents,
  .mission-markdown-editor--standup .toastui-editor-md-preview,
  .mission-markdown-editor--compact .toastui-editor-contents,
  .mission-markdown-editor--compact .toastui-editor-md-preview {
    padding: 14px 16px !important;
  }

  .wiki-markdown {
    @apply max-w-none text-[15px] leading-7 text-foreground;
  }

  .wiki-markdown--card {
    @apply rounded-[1.5rem] border border-border bg-card/95 px-6 py-6 shadow-sm;
  }

  .wiki-markdown--embedded {
    @apply rounded-[1rem] bg-transparent px-2 py-2;
  }

  .wiki-markdown h1,
  .wiki-markdown h2,
  .wiki-markdown h3,
  .wiki-markdown h4,
  .wiki-markdown h5,
  .wiki-markdown h6 {
    @apply font-semibold tracking-tight text-foreground;
  }

  .wiki-markdown h1 {
    @apply mb-4 text-4xl leading-tight;
  }

  .wiki-markdown h2 {
    @apply mb-3 mt-10 text-3xl leading-tight;
  }

  .wiki-markdown h3 {
    @apply mb-3 mt-8 text-2xl leading-tight;
  }

  .wiki-markdown h4 {
    @apply mb-2 mt-6 text-xl leading-tight;
  }

  .wiki-markdown p,
  .wiki-markdown ul,
  .wiki-markdown ol,
  .wiki-markdown table,
  .wiki-markdown blockquote,
  .wiki-markdown pre {
    @apply my-4;
  }

  .wiki-markdown ul {
    @apply list-disc pl-6;
  }

  .wiki-markdown ol {
    @apply list-decimal pl-6;
  }

  .wiki-markdown li {
    @apply my-1 text-foreground/90;
  }

  .wiki-markdown a {
    @apply underline decoration-sky-300 underline-offset-4;
  }

  .wiki-markdown a:hover {
    @apply text-sky-800;
  }

  .wiki-markdown .wiki-link {
    @apply font-semibold text-sky-700;
  }

  .wiki-markdown .wiki-link-missing {
    @apply rounded-md bg-amber-100 px-1.5 py-0.5 font-medium text-amber-900;
  }

  .wiki-markdown code {
    @apply rounded-md bg-foreground/5 px-1.5 py-0.5 font-mono text-[0.95em] text-foreground;
  }

  .wiki-markdown pre {
    @apply overflow-x-auto rounded-2xl border border-border bg-slate-950 px-4 py-4 text-slate-100 shadow-sm;
  }

  .wiki-markdown pre code {
    @apply bg-transparent p-0 text-inherit;
  }

  .wiki-markdown blockquote {
    @apply rounded-r-2xl border-l-4 border-sky-300 bg-sky-50 px-4 py-3 text-sky-950;
  }

  .wiki-markdown hr {
    @apply my-8 border-border;
  }

  .wiki-markdown table {
    @apply w-full border-collapse overflow-hidden rounded-2xl border border-border;
  }

  .wiki-markdown thead {
    @apply bg-muted/70;
  }

  .wiki-markdown th,
  .wiki-markdown td {
    @apply border border-border px-3 py-2 text-left align-top;
  }

  .wiki-markdown img {
    @apply my-6 rounded-xl border border-border shadow-sm;
  }

  .standup-markdown {
    @apply max-w-none text-sm leading-6 text-foreground;
  }

  .standup-markdown h1,
  .standup-markdown h2,
  .standup-markdown h3,
  .standup-markdown h4,
  .standup-markdown h5,
  .standup-markdown h6 {
    @apply font-semibold tracking-tight text-foreground;
  }

  .standup-markdown h1 {
    @apply mb-2 text-xl;
  }

  .standup-markdown h2 {
    @apply mb-2 text-lg;
  }

  .standup-markdown h3,
  .standup-markdown h4,
  .standup-markdown h5,
  .standup-markdown h6 {
    @apply mb-1.5 text-base;
  }

  .standup-markdown p,
  .standup-markdown ul,
  .standup-markdown ol,
  .standup-markdown blockquote,
  .standup-markdown pre {
    @apply my-2;
  }

  .standup-markdown ul {
    @apply list-disc pl-5;
  }

  .standup-markdown ol {
    @apply list-decimal pl-5;
  }

  .standup-markdown li {
    @apply my-1;
  }

  .standup-markdown a,
  .standup-markdown__task-link {
    @apply font-medium text-sky-400 underline decoration-sky-500/60 underline-offset-4 transition hover:text-sky-300;
  }

  .standup-markdown code {
    @apply rounded-md bg-foreground/8 px-1.5 py-0.5 font-mono text-[0.92em] text-foreground;
  }

  .standup-markdown pre {
    @apply overflow-x-auto rounded-xl border border-border bg-background/80 px-3 py-3 shadow-sm;
  }

  .standup-markdown pre code {
    @apply bg-transparent p-0 text-inherit;
  }

  .standup-markdown blockquote {
    @apply rounded-r-xl border-l-2 border-sky-400/50 bg-sky-500/5 px-3 py-2;
  }

  .standup-markdown--blockers a,
  .standup-markdown--blockers .standup-markdown__task-link {
    @apply text-sky-300 hover:text-sky-200;
  }

  /* Route transition: staggered M–A–D–O–W bounce (~1s loop) */
  @keyframes madow-loading-bounce {
    0%,
    100%,
    58% {
      transform: translateY(0);
    }
    24% {
      transform: translateY(-16%);
    }
    42% {
      transform: translateY(0);
    }
  }

  .madow-loading-mark .madow-loading-letter {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: madow-loading-bounce 1s cubic-bezier(0.34, 1.25, 0.55, 1) infinite;
    animation-delay: calc(var(--madow-i) * 0.13s);
  }

  @media (prefers-reduced-motion: reduce) {
    .madow-loading-mark .madow-loading-letter {
      animation: none;
    }
  }

  [data-test-route-loading-overlay][aria-hidden='true'] .madow-loading-letter {
    animation-play-state: paused;
  }
}