/* Generated by scripts/generateBrowserAssets.js. Do not edit. */

/* styles.css */
/* src/styles/tokens.css */
@font-face {
  font-family: "Ubuntu Sans";
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/ubuntu-sans/ubuntu-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Ubuntu Sans";
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/ubuntu-sans/ubuntu-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Ubuntu Sans";
  font-style: italic;
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/ubuntu-sans/ubuntu-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Ubuntu Sans";
  font-style: italic;
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/ubuntu-sans/ubuntu-sans-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-muted: #f7f8fa;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-soft: #eff6ff;
  --color-success: #22c55e;
  --color-success-soft: #f0fdf4;
  --color-warning: #f59e0b;
  --color-warning-soft: #fffbeb;
  --color-danger: #ef4444;
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-muted: #9ca3af;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-background: var(--color-bg);
  --color-surface-subtle: #fbfcfd;
  --color-danger-soft: #fef2f2;
  --color-primary-pressed: #1d4ed8;
  --color-warning-strong: #d97706;
  --color-warning-text: #92400e;
  --color-warning-deep: #7c2d12;
  --color-accent-purple: #7c3aed;
  --color-accent-teal: #00a7a0;
  --color-accent-orange: #ea580c;
  --color-highlight-orange: #fb923c;
  --color-accent-green: #16a34a;
  --color-accent-blue: #1677ff;
  --color-badge-blue: #075fca;
  --color-icon-strong: #273650;
  --color-hierarchy: #d9d0ec;
  --color-hierarchy-strong: #8b7bb8;
  --color-black: #000000;
  --color-backdrop-soft: rgb(15 23 42 / 32%);
  --color-backdrop: rgb(15 23 42 / 48%);
  --color-backdrop-strong: rgb(2 6 23 / 72%);
  --color-backdrop-solid: rgb(15 23 42 / 96%);
  --shadow-ink-04: rgb(15 23 42 / 4%);
  --shadow-ink-05: rgb(15 23 42 / 5%);
  --shadow-ink-06: rgb(15 23 42 / 6%);
  --shadow-ink-07: rgb(15 23 42 / 7%);
  --shadow-ink-08: rgb(15 23 42 / 8%);
  --shadow-ink-10: rgb(15 23 42 / 10%);
  --shadow-ink-11: rgb(15 23 42 / 11%);
  --shadow-ink-12: rgb(15 23 42 / 12%);
  --shadow-ink-14: rgb(15 23 42 / 14%);
  --shadow-ink-15: rgb(15 23 42 / 15%);
  --shadow-ink-16: rgb(15 23 42 / 16%);
  --shadow-ink-18: rgb(15 23 42 / 18%);
  --shadow-ink-24: rgb(15 23 42 / 24%);
  --shadow-ink-34: rgb(15 23 42 / 34%);
  --shadow-ink-42: rgb(15 23 42 / 42%);
  --color-focus: rgb(59 130 246 / 24%);
  --color-on-primary: #ffffff;
  --card-border: var(--color-border);
  --space-1: 0.0625rem;
  --space-2: 0.125rem;
  --space-3: 0.1875rem;
  --space-4: 0.25rem;
  --space-5: 0.3125rem;
  --space-6: 0.375rem;
  --space-7: 0.4375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-18: 1.125rem;
  --space-20: 1.25rem;
  --space-22: 1.375rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-30: 1.875rem;
  --space-32: 2rem;
  --space-36: 2.25rem;
  --space-40: 2.5rem;
  --space-44: 2.75rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --radius-hairline: 0.125rem;
  --radius-xs: 0.25rem;
  --radius-control: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;
  --radius-full: 999px;
  --shadow-subtle: 0 1px 2px var(--shadow-ink-06);
  --shadow-sm: 0 0.2rem 0.65rem var(--shadow-ink-07);
  --shadow-card: 0 0.3rem 0.9rem var(--shadow-ink-07);
  --shadow-md: 0 0.75rem 2rem var(--shadow-ink-12);
  --shadow-lg: 0 1.25rem 3rem var(--shadow-ink-16);
  --shadow-floating: 0 1rem 2.5rem var(--shadow-ink-16);
  --shadow-modal: 0 1.5rem 4rem rgb(15 23 42 / 22%);
  --font-sans: "Ubuntu Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-strong: 600;
  --text-display: 2.5rem;
  --text-heading: 1.5rem;
  --text-section: 1.125rem;
  --text-title: 0.875rem;
  --text-body: 0.875rem;
  --text-caption: 0.75rem;
  --text-body-sm: 0.8125rem;
  --text-body-small: 0.75rem;
  --font-size-caption: var(--text-caption);
  --line-tight: 1.1;
  --line-base: 1.5;
  --line-normal: 1.4;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --control-height-sm: 2.25rem;
  --control-height: 2.5rem;
  --control-height-md: var(--control-height);
  --control-height-lg: 2.75rem;
  --focus-ring: 3px solid var(--color-focus);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-motion: 240ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --adaptive-min-touch-target: var(--space-44);
  --adaptive-safe-area-top: env(safe-area-inset-top, 0px);
  --adaptive-safe-area-right: env(safe-area-inset-right, 0px);
  --adaptive-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --adaptive-safe-area-left: env(safe-area-inset-left, 0px);

  /* Shared visual hierarchy for every application page. */
  --workspace-background: var(--color-bg);
  --workspace-surface: var(--color-surface);
  --workspace-page-gutter: var(--space-20);
  --workspace-content-inset: var(--space-24);
  --workspace-section-gap: var(--space-14);
  --workspace-command-height: 3.5rem;
  --workspace-panel-border: 1px solid var(--color-border);
  --workspace-panel-radius: var(--radius-lg);
  --workspace-panel-shadow: var(--shadow-sm);
  --workspace-panel-padding: var(--space-16);
  --workspace-panel-gap: var(--space-12);
  --workspace-header-background: color-mix(in srgb, var(--workspace-surface) 88%, var(--workspace-background));
  --workspace-title-size: var(--text-section);
  --workspace-card-border: 1px solid var(--color-border);
  --workspace-card-radius: var(--radius-md);
  --workspace-card-shadow: var(--shadow-card);
  --workspace-command-icon-size: 2.25rem;
  --workspace-command-glyph-size: 1.05rem;
  --workspace-command-icon-radius: 0.5rem;
}

:root[data-layout-size="compact"] {
  --workspace-page-gutter: var(--space-6);
  --workspace-content-inset: var(--space-6);
}

:root[data-layout-size="medium"] {
  --workspace-page-gutter: var(--space-12);
  --workspace-content-inset: var(--space-12);
}

:root[data-theme="dark"] {
  --color-bg: #111827;
  --color-surface: #1f2937;
  --color-surface-muted: #18212f;
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-soft: rgb(59 130 246 / 18%);
  --color-success: #4ade80;
  --color-success-soft: rgb(34 197 94 / 16%);
  --color-warning: #fbbf24;
  --color-warning-soft: rgb(245 158 11 / 16%);
  --color-danger: #f87171;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #9ca3af;
  --color-text-tertiary: #6b7280;
  --color-text-muted: #6b7280;
  --color-border: #374151;
  --color-border-strong: #4b5563;
  --color-surface-subtle: #202b3a;
  --color-danger-soft: rgb(239 68 68 / 14%);
  --color-primary-pressed: #bfdbfe;
  --color-warning-strong: #fbbf24;
  --color-warning-text: #fde68a;
  --color-warning-deep: #fde68a;
  --color-icon-strong: #f9fafb;
  --color-badge-blue: #60a5fa;
  --color-hierarchy: #6c5a9b;
  --color-hierarchy-strong: #a78bfa;
  --color-backdrop-soft: rgb(0 0 0 / 38%);
  --color-backdrop: rgb(0 0 0 / 56%);
  --color-backdrop-strong: rgb(0 0 0 / 78%);
  --color-backdrop-solid: rgb(0 0 0 / 96%);
  --shadow-ink-04: rgb(0 0 0 / 12%);
  --shadow-ink-05: rgb(0 0 0 / 14%);
  --shadow-ink-06: rgb(0 0 0 / 18%);
  --shadow-ink-07: rgb(0 0 0 / 20%);
  --shadow-ink-08: rgb(0 0 0 / 22%);
  --shadow-ink-10: rgb(0 0 0 / 24%);
  --shadow-ink-11: rgb(0 0 0 / 26%);
  --shadow-ink-12: rgb(0 0 0 / 28%);
  --shadow-ink-14: rgb(0 0 0 / 30%);
  --shadow-ink-15: rgb(0 0 0 / 32%);
  --shadow-ink-16: rgb(0 0 0 / 34%);
  --shadow-ink-18: rgb(0 0 0 / 36%);
  --shadow-ink-24: rgb(0 0 0 / 42%);
  --shadow-ink-34: rgb(0 0 0 / 48%);
  --shadow-ink-42: rgb(0 0 0 / 56%);
  --color-focus: rgb(96 165 250 / 30%);
  --color-on-primary: #111827;
  --card-border: var(--color-border);
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 18%);
  --shadow-sm: 0 0.2rem 0.65rem rgb(0 0 0 / 20%);
  --shadow-card: 0 0.3rem 0.9rem rgb(0 0 0 / 22%);
  --shadow-md: 0 0.75rem 2rem rgb(0 0 0 / 28%);
  --shadow-lg: 0 1.25rem 3rem rgb(0 0 0 / 34%);
  --shadow-floating: 0 1rem 2.5rem rgb(0 0 0 / 34%);
  --shadow-modal: 0 1.5rem 4rem rgb(0 0 0 / 42%);
}

@media (min-width: 60rem) and (max-width: 74.99rem) {
  :root {
    --text-display: 2.25rem;
    --text-heading: 1.5rem;
    --text-section: 1.125rem;
    --text-title: 0.875rem;
    --text-body: 0.875rem;
    --text-caption: 0.75rem;
    --control-height-sm: 2.25rem;
    --control-height: 2.5rem;
    --control-height-lg: 2.75rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #111827;
    --color-surface: #1f2937;
    --color-surface-muted: #18212f;
    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-soft: rgb(59 130 246 / 18%);
    --color-success: #4ade80;
    --color-success-soft: rgb(34 197 94 / 16%);
    --color-warning: #fbbf24;
    --color-warning-soft: rgb(245 158 11 / 16%);
    --color-danger: #f87171;
    --color-text-primary: #f9fafb;
    --color-text-secondary: #9ca3af;
    --color-text-tertiary: #6b7280;
    --color-text-muted: #6b7280;
    --color-border: #374151;
    --color-border-strong: #4b5563;
    --color-surface-subtle: #202b3a;
    --color-danger-soft: rgb(239 68 68 / 14%);
    --color-primary-pressed: #bfdbfe;
    --color-warning-strong: #fbbf24;
    --color-warning-text: #fde68a;
    --color-warning-deep: #fde68a;
    --color-icon-strong: #f9fafb;
    --color-badge-blue: #60a5fa;
    --color-hierarchy: #6c5a9b;
    --color-hierarchy-strong: #a78bfa;
    --color-backdrop-soft: rgb(0 0 0 / 38%);
    --color-backdrop: rgb(0 0 0 / 56%);
    --color-backdrop-strong: rgb(0 0 0 / 78%);
    --color-backdrop-solid: rgb(0 0 0 / 96%);
    --shadow-ink-04: rgb(0 0 0 / 12%);
    --shadow-ink-05: rgb(0 0 0 / 14%);
    --shadow-ink-06: rgb(0 0 0 / 18%);
    --shadow-ink-07: rgb(0 0 0 / 20%);
    --shadow-ink-08: rgb(0 0 0 / 22%);
    --shadow-ink-10: rgb(0 0 0 / 24%);
    --shadow-ink-11: rgb(0 0 0 / 26%);
    --shadow-ink-12: rgb(0 0 0 / 28%);
    --shadow-ink-14: rgb(0 0 0 / 30%);
    --shadow-ink-15: rgb(0 0 0 / 32%);
    --shadow-ink-16: rgb(0 0 0 / 34%);
    --shadow-ink-18: rgb(0 0 0 / 36%);
    --shadow-ink-24: rgb(0 0 0 / 42%);
    --shadow-ink-34: rgb(0 0 0 / 48%);
    --shadow-ink-42: rgb(0 0 0 / 56%);
    --color-focus: rgb(96 165 250 / 30%);
    --color-on-primary: #111827;
    --card-border: var(--color-border);
    --shadow-subtle: 0 1px 2px rgb(0 0 0 / 18%);
    --shadow-sm: 0 0.2rem 0.65rem rgb(0 0 0 / 20%);
    --shadow-card: 0 0.3rem 0.9rem rgb(0 0 0 / 22%);
    --shadow-md: 0 0.75rem 2rem rgb(0 0 0 / 28%);
    --shadow-lg: 0 1.25rem 3rem rgb(0 0 0 / 34%);
    --shadow-floating: 0 1rem 2.5rem rgb(0 0 0 / 34%);
    --shadow-modal: 0 1.5rem 4rem rgb(0 0 0 / 42%);
  }
}


/* src/styles/base.css */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  color: var(--color-text-primary);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-base);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
}

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


/* src/styles/components.css */
.button {
  display: inline-grid;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  transition:
    background var(--duration-fast),
    border-color var(--duration-fast),
    color var(--duration-fast),
    transform var(--duration-fast);
}

.button:hover {
  color: var(--color-text-primary);
}

.button:active {
  transform: translateY(1px);
}

.button-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.button-primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.button-secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.button-danger {
  border-color: transparent;
  background: transparent;
  color: var(--color-danger);
}

.button-danger:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.button-text {
  min-height: auto;
  padding: var(--space-8);
}

.icon-button {
  display: inline-grid;
  width: var(--control-height);
  height: var(--control-height);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
  transition:
    background var(--duration-fast),
    border-color var(--duration-fast),
    color var(--duration-fast),
    transform var(--duration-fast);
}

.icon-button:hover {
  color: var(--color-text-primary);
}

.icon-button:active {
  transform: translateY(1px);
}

.icon-button-danger:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.text-field {
  min-width: 0;
  height: var(--control-height-lg);
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.text-field:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.field {
  display: grid;
  gap: var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.select-field {
  min-width: 0;
  height: var(--control-height-lg);
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.select-field:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.chip {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
}

.chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}


/* src/styles/app.css */
/* src/styles/appFoundation.css */
:root {
  --pwa-titlebar-height: 0px;
  --pwa-titlebar-x: 0px;
  --pwa-titlebar-y: 0px;
  --pwa-titlebar-width: 100%;
  --pwa-titlebar-left-inset: 0px;
  --pwa-titlebar-right-inset: 0px;
}

.shortcut-help-dialog {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100vh - 2rem));
  overflow: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 24px 64px var(--shadow-ink-24);
}

.shortcut-help-dialog::backdrop { background: var(--shadow-ink-42); }

.shortcut-help-dialog > header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-14) var(--space-16);
  border-bottom: 0;
  background: var(--color-surface);
}

:root.window-controls-overlay-active .pwa-titlebar-drag-region > * {
  display: none;
}

.shortcut-help-dialog > header small {
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.shortcut-help-dialog h2 { margin: 0.1rem 0 0; font-size: 1.2rem; }

.shortcut-help-dialog [data-shortcut-help-close] {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
}

.shortcut-help-dialog [data-shortcut-help-close]:hover { background: var(--color-surface-muted); }

.shortcut-help-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  padding: var(--space-16);
}

.shortcut-help-groups section:last-child { grid-column: 1 / -1; }
.shortcut-help-groups h3 { margin: 0 0 var(--space-8); font-size: 0.82rem; }
.shortcut-help-groups dl { display: grid; gap: 0; margin: 0; }
.shortcut-help-groups dl > div {
  display: flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  border-top: 1px solid var(--color-border);
}
.shortcut-help-groups dt { color: var(--color-text-secondary); font-size: 0.78rem; }
.shortcut-help-groups dd { display: flex; align-items: center; gap: var(--space-4); margin: 0; color: var(--color-text-tertiary); font-size: 0.68rem; }
.shortcut-help-groups kbd {
  min-width: 1.65rem;
  padding: 0.2rem 0.42rem;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 36rem) {
  .shortcut-help-groups { grid-template-columns: minmax(0, 1fr); }
  .shortcut-help-groups section:last-child { grid-column: auto; }
}

.pwa-titlebar-drag-region {
  display: none;
}

:root.window-controls-overlay-active .pwa-titlebar-drag-region {
  position: fixed;
  top: var(--pwa-titlebar-y);
  left: var(--pwa-titlebar-x);
  z-index: 10000;
  display: flex;
  width: var(--pwa-titlebar-width);
  height: var(--pwa-titlebar-height);
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.65rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.72rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  user-select: none;
  -webkit-app-region: drag;
  app-region: drag;
}

:root.window-controls-overlay-active .pwa-titlebar-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
}

:root.window-controls-overlay-active .app-shell,
:root.window-controls-overlay-active .auth-root {
  box-sizing: border-box;
  padding-top: var(--pwa-titlebar-height);
}

:root.window-controls-overlay-active .app-frame {
  height: calc(var(--doneit-viewport-height, 100dvh) - var(--pwa-titlebar-height));
}

.app-shell {
  height: 100vh;
  height: 100dvh;
  height: var(--doneit-viewport-height, 100dvh);
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}

.app-frame {
  --detail-pane-width: 23rem;
  --task-top-stack-height: 20rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100vh;
  height: var(--doneit-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

.app-frame:has(.workspace > section[data-screen="tasks"]:not([hidden])) {
  grid-template-columns: minmax(0, 1fr);
}

.app-frame.hierarchy-mode {
  grid-template-columns: minmax(0, 1fr);
}

.app-frame.hierarchy-mode .detail-pane {
  display: none;
}

.sidebar,
.detail-pane {
  background: var(--color-surface);
}

.sidebar {
  position: relative;
  z-index: 20;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 11.5rem minmax(8.5rem, 12rem) minmax(0, 1fr) minmax(9rem, 12rem) auto auto;
  gap: var(--space-10);
  align-items: center;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0 var(--space-16) 0 0;
  border-right: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.brand {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  align-self: stretch;
  min-width: 0;
  padding-left: var(--space-16);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-primary);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
  color: transparent;
  font-weight: var(--font-weight-strong);
  overflow: hidden;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 0.95rem;
  line-height: var(--line-tight);
}

.brand small {
  color: var(--color-text-secondary);
  font-size: 0.62rem;
}

.sidebar-nav {
  display: flex;
  align-content: start;
  align-items: center;
  gap: var(--space-10);
  min-width: max-content;
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-border);
  order: 4;
}

.today-progress {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  order: 4;
}

.today-progress-label {
  flex: none;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.today-progress-bar {
  flex: 1 1 auto;
  min-width: 2.5rem;
  height: 0.3125rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.today-progress-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-success);
  transition: width var(--duration-base) var(--ease-standard);
}

.today-progress-count {
  flex: none;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.today-progress-activity {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.2rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--color-border);
}

.today-progress-activity[hidden] { display: none; }

.today-progress-activity button {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 1.8rem;
  padding: 0.2rem 0.42rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.72rem;
  white-space: nowrap;
}

.today-progress-activity button:hover,
.today-progress-activity button.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.today-progress-activity button i {
  color: var(--color-primary);
  font-size: 0.78rem;
  font-style: normal;
}

.today-progress-activity button b {
  color: var(--color-text-primary);
  font-size: 0.75rem;
}


/* src/styles/appTriageBanner.css */
/* Aufräummodus (Triage) */

.triage-banner {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin: var(--space-16) var(--space-24);
  padding: var(--space-14) var(--space-16);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.triage-banner-icon {
  display: grid;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
}

.triage-banner-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.triage-banner-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.1rem;
}

.triage-banner-text strong {
  color: var(--color-text-primary);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
}

.triage-banner-text small {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.triage-banner-start {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.triage-banner-start:hover {
  text-decoration: underline;
}

.triage-banner-dismiss {
  flex: none;
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
}

.triage-banner-dismiss:hover {
  background: var(--shadow-ink-08);
  color: var(--color-text-primary);
}

/* Broom icon: the permanent entry point that survives the banner card being
   dismissed — "die Funktion geht nie verloren." */
.triage-quick-start {
  position: relative;
  display: grid;
  flex: none;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.triage-quick-start:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}

.triage-quick-start svg {
  width: 1.15rem;
  height: 1.15rem;
}

.triage-quick-start-count {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  display: grid;
  min-width: 1rem;
  height: 1rem;
  place-items: center;
  padding: 0 0.2rem;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-on-primary);
  font-size: 0.55rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

.triage-root {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
}

.triage-root[hidden] {
  display: none;
}

.cleanup-overview {
  display: grid;
  gap: var(--space-20);
  width: min(42rem, 100%);
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.cleanup-overview > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}

.cleanup-overview h2 { margin: 0; font-size: var(--text-title); }
.cleanup-overview header p { margin: var(--space-4) 0 0; color: var(--color-text-secondary); }
.cleanup-overview-actions { display: grid; gap: var(--space-10); }

.cleanup-overview-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  min-height: 6.5rem;
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.cleanup-overview-action:not(:disabled):hover,
.cleanup-overview-action:not(:disabled):focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: none;
}

.cleanup-overview-action:disabled { cursor: default; opacity: 0.58; }
.cleanup-overview-action > span:nth-child(2) { display: grid; gap: var(--space-4); }
.cleanup-overview-action b { color: var(--color-primary); font-size: var(--text-caption); }
.cleanup-overview-action small { color: var(--color-text-secondary); line-height: 1.35; }
.cleanup-overview-step {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}
.cleanup-overview-arrow { color: var(--color-primary); font-size: 1.5rem; }

.cleanup-future-shift-form {
  display: grid;
  gap: var(--space-16);
}

.cleanup-future-shift-form > label {
  display: grid;
  grid-template-columns: auto minmax(5rem, 8rem) auto;
  align-items: center;
  gap: var(--space-8);
}

.cleanup-future-shift-form > p { margin: 0; color: var(--color-text-secondary); }
.cleanup-future-shift-form > button { justify-self: end; }

@media (max-width: 37.4375rem) {
  .cleanup-overview { padding: var(--space-16); border-radius: var(--radius-lg); }
  .cleanup-overview-action { min-height: 7rem; padding: var(--space-12); }
  .cleanup-future-shift-form > label { grid-template-columns: 1fr; }
  .cleanup-future-shift-form > button { width: 100%; }
}

.triage-session {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: min(44rem, 100%);
  max-height: calc(100dvh - (2 * var(--space-24)));
}


/* src/styles/appTriageSession.css */
.triage-session-header {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.triage-close {
  position: relative;
  z-index: 3;
  flex: none;
  display: grid;
  width: var(--control-height-md);
  min-width: var(--control-height-md);
  height: var(--control-height-md);
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  pointer-events: auto;
}

.triage-close:hover,
.triage-close:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}

.triage-progress-bar {
  flex: 1 1 auto;
  height: 0.3rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}

.triage-progress-bar > i {
  display: block;
  min-width: 0.3rem;
  height: 100%;
  background: var(--color-primary);
  transition: width var(--duration-base) var(--ease-standard);
}

.triage-progress-count {
  flex: none;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.triage-card {
  display: grid;
  gap: var(--space-10);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.triage-card-overdue {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.triage-card-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.triage-card-title:hover {
  text-decoration: underline;
}

.triage-card-breadcrumb {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.triage-card-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.triage-card-details {
  display: grid;
  gap: var(--space-8);
  max-height: min(17rem, 34dvh);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

.triage-card-detail-section {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.28fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.triage-card-detail-section + .triage-card-detail-section {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.triage-card-detail-section > strong {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.triage-card-detail-values {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.triage-card-detail-values p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: var(--line-normal);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.triage-card-chip {
  padding: 0.2rem var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

@media (max-width: 37.4375rem) {
  .triage-root {
    align-items: flex-start;
    padding: var(--space-12);
  }

  .triage-session {
    max-height: calc(100dvh - (2 * var(--space-12)));
  }

  .triage-card {
    padding: var(--space-16);
  }

  .triage-card-details {
    max-height: min(14rem, 30dvh);
  }

  .triage-card-detail-section {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

.triage-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.triage-action {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
  touch-action: manipulation;
}

.triage-action svg {
  width: 1.3rem;
  height: 1.3rem;
}

.triage-action kbd {
  color: var(--color-text-secondary);
  font-size: 0.62rem;
}

.triage-action:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.triage-action:first-child {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.triage-action.danger:hover {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  color: var(--color-danger);
}

.triage-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-8);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.triage-undo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  cursor: pointer;
}

.triage-undo:disabled {
  opacity: 0.4;
  cursor: default;
}

.triage-undo kbd {
  padding: 0 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.6rem;
}

/* Erledigen is the most frequent decision in a session, so it gets the same
   filled-pill weight as a primary button instead of blending in as a plain
   secondary action next to "Letzte zurück". */
.triage-done {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-16);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
  touch-action: manipulation;
}

.triage-action:disabled,
.triage-done:disabled,
.triage-planning-option:disabled,
.triage-planning-date:disabled,
.triage-planning-back:disabled,
.triage-complete-start:disabled {
  opacity: 0.62;
  cursor: wait;
}

.triage-done:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, black);
}

.triage-done kbd {
  padding: 0 0.3rem;
  border: 1px solid color-mix(in srgb, var(--color-on-primary) 40%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-on-primary);
  font-size: 0.6rem;
}

.triage-planning-picker {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.triage-planning-instruction { color: var(--color-primary); font-size: var(--text-body-sm); }

.triage-planning-back,
.triage-planning-option {
  min-height: 2.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  cursor: pointer;
  touch-action: manipulation;
}

.triage-planning-back {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-6);
  justify-content: flex-start;
  padding: 0 var(--space-10);
  background: transparent;
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}

.triage-planning-back svg {
  width: 1.25rem;
  height: 1.25rem;
}

.triage-planning-back:hover,
.triage-planning-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.triage-planning-date {
  min-height: 2.2rem;
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.triage-complete {
  display: grid;
  justify-items: center;
  gap: var(--space-10);
  width: min(24rem, 100%);
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.triage-complete-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.triage-complete-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.triage-complete-heading {
  color: var(--color-text-primary);
  font-size: var(--text-section);
  font-weight: var(--font-weight-strong);
}

.triage-complete-lines {
  display: grid;
  gap: 0.2rem;
}

.triage-complete-lines p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

.triage-complete-start {
  width: 100%;
  min-height: 2.6rem;
  margin-top: var(--space-8);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  touch-action: manipulation;
}

.sidebar-board-section {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-8);
  padding-top: 0;
  border-top: 0;
  order: 2;
}

.header-view-nav {
  order: 3;
  display: flex;
  align-self: stretch;
  align-items: stretch;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.header-view-nav::-webkit-scrollbar {
  display: none;
}

.header-view-nav:has(.view-overflow[open]) {
  overflow: visible;
}

.header-view-nav:has(.workspace-global-tools .task-view-options[open]),
.header-view-nav:has(.workspace-global-tools .task-sort-trigger[aria-expanded="true"]) {
  overflow: visible;
}


/* src/styles/appNavigation.css */
/* Wissen sits on a different axis (not a time-based view like the others),
   so it stays permanently visible with a hairline divider instead of being
   tucked into the "⋯" overflow with Abhängigkeiten/Vorlagen — same treatment
   as the "Wissen" status segment's own divider. */
.view-button-wissen {
  margin-left: var(--space-4);
  padding-left: var(--space-16);
  border-left: 1px solid var(--color-border);
}

.header-view-nav .view-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.header-view-nav .view-button:is(.active, .view-pending) {
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
}

.header-view-nav .view-button:is(.active, .view-pending)::after {
  content: "";
  position: absolute;
  right: var(--space-8);
  bottom: 0;
  left: var(--space-8);
  height: 0.125rem;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  background: var(--color-primary);
}


.view-overflow {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}

/* Global navigation popovers must remain above sticky workspace chrome such
   as the Document rich-text toolbar. The header is its own stacking context. */
.sidebar:has(.view-overflow[open]) {
  z-index: 200;
}

.view-overflow-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-12);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
  list-style: none;
}

.view-overflow-trigger::-webkit-details-marker {
  display: none;
}

.view-overflow-trigger > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.view-overflow-trigger > span[aria-hidden="true"] { transform: translateY(-0.02em); }

.view-overflow-count {
  display: grid;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: 0.62rem;
  place-items: center;
}

.view-overflow[open] .view-overflow-trigger,
.view-overflow:has(.view-button.active) .view-overflow-trigger {
  color: var(--color-primary);
}

.view-overflow[open] .view-overflow-trigger .view-overflow-count,
.view-overflow:has(.view-button.active) .view-overflow-trigger .view-overflow-count {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.view-overflow-menu {
  position: absolute;
  top: calc(100% + var(--space-5));
  left: 0;
  z-index: 50;
  display: grid;
  min-width: 9.5rem;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.view-overflow-menu .view-button {
  justify-content: flex-start;
  min-height: 2.1rem;
  padding: 0 var(--space-10);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
}

.view-overflow-menu .view-button:is(.active, .view-pending) {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.view-overflow-menu .view-button:is(.active, .view-pending)::after {
  content: none;
}

.sidebar-section-title {
  display: none;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.nav-button {
  display: inline-grid;
  grid-template-columns: var(--space-20, 1.25rem) auto auto;
  gap: var(--space-8);
  align-items: center;
  min-height: var(--space-40);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1rem;
  font-weight: var(--font-weight-strong);
  text-align: left;
}

.sidebar-nav .nav-button span:nth-child(2),
.sidebar-nav .nav-button .nav-count {
  display: none;
}

.nav-button.icon-only {
  grid-template-columns: 1fr;
  width: var(--space-44);
  min-width: var(--space-44);
  padding: 0;
  place-items: center;
}

.nav-button.icon-only span {
  font-size: 1.25rem;
  line-height: 1;
}

.header-icon {
  width: 1.45rem;
  height: 1.45rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button.icon-only {
  color: var(--color-icon-strong);
}

.nav-button.icon-only:hover,
.nav-button.icon-only:focus-visible,
.nav-button.icon-only.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

#admin-users-nav {
  color: var(--color-primary-hover);
}

#admin-users-nav .users-icon {
  stroke-width: 1.65;
}

.notification-button {
  position: relative;
}

.notification-count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: grid;
  min-width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  padding: 0 0.2rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  background: var(--color-warning);
  color: var(--color-icon-strong);
  font-size: 0.65rem;
}
.notification-count[hidden] { display: none; }

.notification-panel {
  position: fixed;
  top: 4.5rem;
  right: 4.5rem;
  z-index: 1000;
  display: grid;
  gap: var(--space-8);
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(36rem, calc(100vh - 6rem));
  padding: var(--space-12);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.notification-panel[hidden] { display: none; }
.notification-panel header { padding: var(--space-4); }
.notification-panel > p { margin: 0; color: var(--color-text-secondary); }
.notification-item {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
}
.notification-item.unread { border-color: var(--color-primary); background: var(--color-primary-soft); }
.notification-item span, .notification-item small { color: var(--color-text-secondary); }

.nav-button.history-button {
  width: var(--space-36);
  min-width: var(--space-36);
  height: var(--space-36);
  min-height: var(--space-36);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-subtle);
}

.nav-button.history-button span {
  color: currentColor;
  font-size: 1.08rem;
  font-weight: 800;
}

.nav-button.history-button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.nav-button.history-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.nav-button.active {
  background: transparent;
  color: var(--color-text-primary);
}

.sidebar-nav .nav-button.icon-only.active {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  background: var(--color-primary-soft);
  color: var(--color-primary);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.nav-count {
  display: inline-grid;
  min-width: var(--space-20, 1.25rem);
  min-height: var(--space-20, 1.25rem);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}


/* src/styles/appAccountMenu.css */
.session-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  padding-top: 0;
  border-top: 0;
  order: 5;
}

.session-card > span {
  display: none;
  max-width: 8rem;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

.session-card button {
  display: grid;
  min-height: var(--space-44);
  width: var(--space-44);
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 1.2rem;
  font-weight: var(--font-weight-strong);
}

.session-card button:hover {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
  color: var(--color-danger);
}

.session-card .account-menu-button {
  border-color: color-mix(in srgb, var(--color-border-strong) 76%, white);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface-muted) 94%, var(--color-primary-soft));
  color: var(--color-icon-strong);
  box-shadow: 0 0.2rem 0.65rem var(--shadow-ink-08);
}

.session-card .account-menu-button:hover,
.session-card .account-menu-button:focus-visible,
.session-card .account-menu-button[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.session-card .account-menu-button .account-icon {
  width: 1.6rem;
  height: 1.6rem;
  opacity: 1;
}

.account-menu {
  position: absolute;
  top: calc(100% + var(--space-8));
  right: 0;
  z-index: 1001;
  display: grid;
  gap: var(--space-8);
  width: min(18rem, calc(100vw - 2rem));
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.shared-workspace-header:has(.account-menu:not([hidden])) {
  position: relative;
  z-index: 11000;
}

.account-menu[hidden] {
  display: none;
}

.session-card .account-menu > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-switcher {
  display: grid;
  gap: 0.35rem;
  padding-block: 0.15rem 0.45rem;
  border-bottom: 1px solid var(--color-border);
}

.workspace-switcher > small {
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: 650;
}

.workspace-switcher > div {
  display: grid;
  gap: 0.2rem;
  max-height: 12rem;
  overflow-y: auto;
}

.workspace-switcher-option {
  display: flex;
  min-width: 0;
  min-height: 2.35rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
}

.workspace-switcher-option strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-switcher-option span {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: 0.68rem;
}

.workspace-switcher-option:not(:disabled) {
  cursor: pointer;
}

.workspace-switcher-option:not(:disabled):hover,
.workspace-switcher-option:not(:disabled):focus-visible,
.workspace-switcher-option.active {
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
  background: var(--color-primary-soft);
  outline: none;
}

.workspace-switcher.loading {
  opacity: 0.65;
  pointer-events: none;
}

.session-card .account-menu #auth-logout {
  display: flex;
  width: 100%;
  min-height: 2.25rem;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  padding: 0 var(--space-10);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
}

.session-card .account-menu .session-logout-label {
  display: inline;
}

.session-card .account-menu .account-menu-route {
  display: flex;
  width: 100%;
  min-height: 2.25rem;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  padding: 0 var(--space-10);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
}

.session-card .account-menu .mobile-account-route {
  display: none;
}

.session-card .account-menu .account-menu-route:hover,
.session-card .account-menu .account-menu-route:focus-visible,
.session-card .account-menu .account-menu-route.active {
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}


/* src/styles/appAuth.css */
.auth-root:empty {
  display: none;
}

.auth-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--space-24);
  background: var(--color-bg);
}


.auth-panel,
.admin-panel {
  display: grid;
  gap: var(--space-24);
  width: min(100%, 28rem);
  padding: var(--space-32);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.admin-panel {
  width: min(100%, 58rem);
}

.auth-brand {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.auth-brand span {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-radius: var(--radius-lg);
  background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
  color: transparent;
  font-weight: var(--font-weight-strong);
  overflow: hidden;
}

.auth-brand strong {
  font-size: var(--text-heading);
}

.auth-brand small,
.auth-status {
  color: var(--color-text-secondary);
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.auth-tab {
  min-height: var(--control-height-sm);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.auth-tab.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.auth-form,
.admin-user-form {
  display: grid;
  gap: var(--space-16);
}

.auth-field {
  display: grid;
  gap: var(--space-8);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
}

.auth-field input {
  min-height: var(--control-height);
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font: inherit;
}

.auth-field input:focus {
  outline: var(--focus-ring);
}

.auth-check {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  color: var(--color-text-secondary);
}

.auth-error {
  margin: 0;
  color: var(--color-danger);
  font-weight: var(--font-weight-strong);
}


/* src/styles/appAdmin.css */
.admin-header,
.admin-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.admin-tabs {
  display: flex;
  gap: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.admin-tab {
  padding: 0.7rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  cursor: pointer;
}

.admin-tab.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.admin-management-section,
.admin-team-detail,
.admin-team-sidebar {
  min-width: 0;
}

.admin-management-grid,
.admin-team-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(22rem, 1.2fr);
  gap: var(--space-16);
  align-items: start;
}

.admin-access-grants {
  grid-column: 1 / -1;
}

.admin-team-layout {
  grid-template-columns: minmax(15rem, 20rem) minmax(24rem, 1fr);
}

.admin-section-header {
  margin-bottom: var(--space-12);
}

.admin-section-header h3,
.admin-section-header p {
  margin: 0;
}

.admin-section-header p {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
}

.admin-entity-list {
  display: grid;
  gap: var(--space-8);
}

.admin-entity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.admin-entity-row.is-inactive { opacity: 0.62; }

.admin-entity-identity {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.admin-entity-identity span,
.admin-entity-identity small {
  overflow: hidden;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-invite-form,
.admin-team-form {
  display: grid;
  gap: var(--space-12);
}

.admin-team-form { grid-template-columns: 1fr 1.4fr auto auto; align-items: end; }
.admin-team-sidebar .admin-team-form { grid-template-columns: 1fr; }

.admin-field {
  display: grid;
  gap: var(--space-4);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.admin-field input,
.admin-field select,
.admin-entity-row select,
.admin-add-member-form select {
  min-width: 0;
  height: 2.5rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.admin-team-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-team-checklist label { display: inline-flex; gap: var(--space-4); align-items: center; }

.admin-row-actions,
.admin-add-member-form,
.admin-invite-link {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.admin-invite-link { margin-bottom: var(--space-12); }
.admin-invite-link input { min-width: 0; flex: 1; }

.admin-team-card {
  display: grid;
  width: 100%;
  gap: 0.2rem;
  margin-top: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--team-color, var(--color-primary));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.admin-team-card.active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.admin-team-card small { color: var(--color-text-secondary); }

.admin-add-member-form { margin-block: var(--space-12); }
.admin-add-member-form select { flex: 1; }

@media (max-width: 860px) {
  .admin-management-grid,
  .admin-team-layout { grid-template-columns: 1fr; }
  .admin-team-form { grid-template-columns: 1fr; }
  .admin-entity-row { grid-template-columns: minmax(0, 1fr); }
}

.admin-header span,
.admin-user-row span {
  color: var(--color-text-secondary);
}

.admin-user-list {
  display: grid;
  gap: var(--space-12);
}

.admin-user-list h2,
.admin-user-form h2 {
  margin: 0;
  font-size: var(--text-title);
}

.admin-user-row {
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}


/* src/styles/appWorkspace.css */
.workspace {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: var(--color-bg);
  overflow: hidden;
}

.workspace > .app-status {
  min-width: 0;
  margin: 0;
}

.workspace > section[data-screen] {
  grid-row: 1;
  min-width: 0;
  min-height: 0;
}

.app-frame:has(.workspace > section[data-screen="tasks"]:not([hidden])) .workspace {
  overflow: hidden;
}

/* Settings are document-like content; scroll the whole workspace, not an inner review pane. */
.workspace:has(> section[data-screen="settings"]:not([hidden])),
.workspace:has(> section[data-screen="users"]:not([hidden])) {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.workspace > section[data-screen="settings"]:not([hidden]),
.workspace > section[data-screen="users"]:not([hidden]) {
  min-height: 100%;
  padding: var(--space-20);
  padding-bottom: var(--space-40);
}

.workspace > section[data-screen="tasks"]:not([hidden]),
.workspace > section[data-screen="ai"]:not([hidden]) {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.workspace-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-12, 0.75rem);
}

.task-workspace-header {
  display: none;
}

.eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
}

h1 {
  margin-bottom: 0;
  font-size: var(--text-section);
  line-height: var(--line-tight);
  letter-spacing: 0;
}

.progress {
  display: grid;
  min-width: 6rem;
  min-height: var(--space-48);
  align-content: center;
  justify-items: end;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.progress strong {
  color: var(--color-primary);
  font-size: var(--text-heading);
  line-height: var(--line-tight);
}

.toolbar {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--space-8);
  grid-template-areas:
    "primary"
    "views"
    "tags"
    "quick-create";
  margin: 0;
  padding: var(--space-8) var(--space-24) var(--space-10);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface-muted) 92%, transparent));
  overflow: visible;
}

.overview-quick-create-host {
  grid-area: quick-create;
  min-width: 0;
}

.overview-quick-create-host[hidden] {
  display: none;
}

.app-frame:has(.workspace > section[data-screen="tasks"]:not([hidden])) .home-overview,
.app-frame:has(.workspace > section[data-screen="tasks"]:not([hidden])) .home-tag-quick-filters,
.app-frame:has(.workspace > section[data-screen="tasks"]:not([hidden])) .toolbar {
  width: 100%;
}

.home-summary-counter.danger,
.home-insight-card .danger,
.home-deadline-card .danger {
  color: var(--color-danger);
}

.home-insight-card .warning,
.home-deadline-card .warning {
  color: var(--color-warning);
}

.home-insight-card .success,
.home-deadline-card .success {
  color: var(--color-success);
}

.home-summary-counter.purple {
  color: var(--color-accent-purple);
}

.home-summary-counter.success {
  color: var(--color-success);
}

.home-overview {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(26rem, 1fr) minmax(12rem, 14rem) minmax(11rem, 13rem);
  gap: var(--space-8);
  min-width: 0;
  height: 7rem;
  padding: var(--space-10) var(--space-24);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.home-overview.single-insight {
  grid-template-columns: minmax(26rem, 1fr) minmax(22rem, 28rem);
}


/* src/styles/appHome.css */
.home-daily-summary,
.home-insight-card,
.home-deadline-card,
.home-ai-suggestions-card {
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px var(--shadow-ink-04);
}

.home-daily-summary {
  display: grid;
  grid-template-columns: minmax(9.5rem, 12rem) minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  overflow: hidden;
}

.home-ai-suggestions-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-12);
  overflow: hidden;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.home-ai-suggestions-card > span {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  font-size: var(--text-caption);
}

.home-ai-suggestions-card > span small,
.home-ai-suggestions-card em {
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-style: normal;
}

.home-ai-suggestions-card p {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-ai-suggestions-card p b {
  flex: 0 0 0.42rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.home-ai-suggestions-card p b.danger { background: var(--color-danger); }
.home-ai-suggestions-card p b.success { background: var(--color-success); }

.home-ai-suggestions-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.home-progress-card {
  display: grid;
  grid-template-columns: var(--space-48, 3rem) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-12);
  border-right: 1px solid var(--color-border);
}

.home-progress-ring {
  display: grid;
  width: var(--space-48, 3rem);
  height: var(--space-48, 3rem);
  place-items: center;
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle at center, var(--color-surface) 58%, transparent 60%),
    conic-gradient(var(--color-primary) var(--home-progress), var(--color-border) 0);
  color: var(--color-text-primary);
}

.home-progress-ring strong {
  font-size: var(--text-caption);
  line-height: 1;
}

.home-progress-copy {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.home-progress-copy strong {
  color: var(--color-text-primary);
  font-size: var(--text-title);
  line-height: var(--line-tight);
}

.home-progress-copy span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.home-progress-activity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.12rem 0.45rem;
  min-width: 0;
}

.home-progress-activity span {
  display: flex;
  gap: 0.22rem;
  align-items: baseline;
  min-width: 0;
  font-size: 0.58rem;
  line-height: 1.15;
  white-space: nowrap;
}

.home-progress-activity span b {
  display: inline;
  height: auto;
  color: var(--color-text-primary);
  background: none;
  font-size: 0.64rem;
  font-style: normal;
}

.home-progress-copy i {
  display: block;
  height: 0.25rem;
  margin-top: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}

.home-progress-copy b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.home-summary-counters {
  display: grid;
  grid-template-columns: repeat(var(--home-summary-columns, 6), minmax(0, 1fr));
  min-width: 0;
  height: 100%;
}

.home-summary-counter {
  display: grid;
  gap: var(--space-2);
  place-content: center;
  min-width: 0;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.home-summary-counter:hover,
.home-summary-counter.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.home-summary-counter.danger.active {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  color: var(--color-danger);
}

.home-summary-counter.purple.active {
  background: color-mix(in srgb, var(--color-accent-purple) 8%, transparent);
  color: var(--color-accent-purple);
}

.home-summary-counter strong {
  font-size: 0.95rem;
  line-height: 1;
}

.home-summary-counter span {
  font-size: 0.58rem;
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-summary-counter small {
  color: var(--color-danger);
  font-size: 0.5rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;
}

.home-insight-card,
.home-deadline-card,
.home-ai-suggestions-card {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-8);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  overflow: hidden;
}

.home-insight-card p:nth-of-type(n + 3),
.home-deadline-card p:nth-of-type(n + 3),
.home-ai-suggestions-card p:nth-of-type(n + 3) {
  display: none;
}

.home-insight-card.expanded {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr 1fr auto;
}

.home-insight-card.expanded > span,
.home-insight-card.expanded > em {
  grid-column: 1 / -1;
}

.home-insight-card.expanded p:nth-of-type(n) {
  display: flex;
}

.home-insight-card > span,
.home-deadline-card > span,
.home-ai-suggestions-card > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.home-insight-card strong,
.home-deadline-card strong,
.home-ai-suggestions-card strong {
  font-size: var(--text-caption);
}

.home-insight-card small {
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: 0.65rem;
  font-weight: var(--font-weight-strong);
}

.home-insight-card p,
.home-deadline-card p,
.home-ai-suggestions-card p {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  line-height: 1.15;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-insight-card b,
.home-deadline-card b,
.home-ai-suggestions-card b {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: currentColor;
}

.home-insight-card em,
.home-deadline-card em,
.home-ai-suggestions-card em {
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-insight-card em {
  max-width: 100%;
}

.home-tag-quick-filters {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: start;
  min-width: 0;
  padding: var(--space-6) var(--space-24);
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border));
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary-soft) 78%, var(--color-surface-muted)) 0, color-mix(in srgb, var(--color-surface) 86%, var(--color-primary-soft)) 100%),
    color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface));
  overflow: hidden;
}

.home-tag-quick-filters.expanded {
  align-items: start;
  overflow: visible;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.home-tag-quick-filters .tag-filter-label {
  display: none;
}

.tag-context-line[hidden] {
  display: none;
}

.tag-context-line {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-24);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
  cursor: pointer;
}

.tag-context-line:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.home-tag-quick-filters.expanded .tag-filter-chips {
  flex-wrap: wrap;
  max-height: 8.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.home-tag-quick-filters .tag-filter-chips {
  padding-right: 0;
}

.home-tag-quick-filters.expanded .tag-filter-actions {
  align-self: start;
}

.tag-filter-empty {
  display: inline-grid;
  min-height: var(--control-height-sm);
  align-items: center;
  padding: 0 var(--space-10);
  border: 1px dashed color-mix(in srgb, var(--color-border) 82%, var(--color-text-secondary));
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  font-size: var(--text-caption);
  white-space: nowrap;
}


/* src/styles/appTaskToolbar.css */
.toolbar-primary,
.toolbar-secondary {
  display: grid;
  gap: var(--space-10);
  align-items: end;
}

.toolbar-primary {
  grid-area: primary;
  grid-template-columns: minmax(10rem, 1.2fr) minmax(9rem, 0.95fr) minmax(10.5rem, auto) minmax(8rem, 0.65fr) minmax(5.6rem, auto) minmax(4.5rem, auto) minmax(7rem, auto) minmax(2.5rem, auto);
}

.toolbar-secondary {
  display: contents;
}

.filters {
  grid-area: views;
  min-width: 0;
  padding-right: 0;
  overflow: hidden;
}

.done-column-field {
  grid-area: views;
  justify-self: end;
  align-self: center;
  min-width: max-content;
}

.blocked-tasks-field {
  min-width: max-content;
}

.toolbar-primary .done-column-field {
  grid-area: auto;
  justify-self: start;
  align-self: end;
  min-width: 5.6rem;
}

.toolbar-primary .blocked-tasks-field {
  align-self: end;
  min-width: 7.5rem;
}

.overview-columns-field,
.overview-card-size-field {
  min-width: 5rem;
}

.overview-card-size-field {
  min-width: 7rem;
}

.overview-columns-field[hidden],
.overview-card-size-field[hidden] {
  display: none;
}

.project-view-field {
  min-width: 10.5rem;
}

.project-view-field[hidden] {
  display: none;
}

.project-view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(3.45rem, auto));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}


.project-view-button {
  display: inline-grid;
  height: var(--space-44);
  min-width: 3.45rem;
  padding: 0 var(--space-10);
  place-items: center;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.project-view-button:first-child {
  border-left: 0;
}

.project-view-button:hover,
.project-view-button[aria-pressed="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.overview-columns-field select,
.overview-card-size-field select {
  width: 100%;
  min-height: var(--space-44);
  padding: 0 var(--space-28) 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.tag-filter {
  grid-area: tags;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: start;
  min-width: 0;
  overflow: hidden;
}

.toolbar-field {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.control-label {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
}

.toolbar .control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.toolbar .task-sort .control-label,
.toolbar .done-column-field .control-label,
.tag-filter .tag-filter-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

.tag-filter[hidden] {
  display: none;
}

.tag-filter:empty {
  display: none;
}

.tag-filter-label {
  align-self: start;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  line-height: var(--space-32);
  white-space: nowrap;
}

.tag-filter-chips {
  display: flex;
  gap: var(--space-6);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-1) var(--space-8) var(--space-1) 0;
  scrollbar-width: none;
}

.tag-filter-chips::-webkit-scrollbar {
  display: none;
}

.tag-filter-chip,
.tag-filter-reset,
.tag-filter-expand {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: var(--space-30, 1.875rem);
  max-width: 14rem;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.tag-filter-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--space-6);
  min-width: max-content;
  height: var(--space-32);
}

.tag-filter-expand {
  width: var(--space-32);
  height: var(--space-32);
  min-width: var(--space-32);
  min-height: var(--space-32);
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: var(--shadow-subtle);
}

.tag-filter-chip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-filter-chip span {
  display: inline-grid;
  min-width: var(--space-20);
  height: var(--space-20);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.tag-filter-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.tag-filter-chip.active span {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.tag-filter-reset {
  width: var(--space-32);
  height: var(--space-32);
  min-width: var(--space-32);
  min-height: var(--space-32);
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
  border-color: color-mix(in srgb, var(--color-danger) 24%, var(--color-border));
  background: var(--color-surface);
  color: var(--color-danger);
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: var(--shadow-subtle);
}


/* src/styles/appFeedback.css */
.app-status {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  z-index: 1750;
  display: flex;
  width: max-content;
  max-width: min(24rem, calc(100vw - 1.5rem));
  align-items: center;
  min-height: 1.75rem;
  margin: 0;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-warning-soft);
  box-shadow: 0 0.35rem 1rem var(--shadow-ink-14);
  font-size: 0.7rem;
  line-height: 1.25;
  opacity: 0.94;
  pointer-events: none;
  animation: app-status-enter 160ms ease-out both;
}

.app-status[hidden] {
  display: none;
}

.app-status[data-tone="syncing"] {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-text-secondary);
}

.app-status[data-tone="success"] {
  border-color: color-mix(in srgb, var(--color-success) 38%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
}

.app-status[data-tone="offline"] {
  border-color: color-mix(in srgb, var(--color-text-secondary) 25%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-warning-soft));
  color: var(--color-text-secondary);
}

@keyframes app-status-enter {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }

  to {
    opacity: 0.94;
    transform: translateY(0);
  }
}

.app-undo-toast {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 1600;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.65rem 0.8rem;
  align-items: center;
  width: min(26rem, calc(100vw - 2rem));
  padding: 0.82rem 0.9rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--color-success) 24%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}

.app-undo-toast-message {
  min-width: 0;
  overflow: hidden;
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-undo-toast-countdown {
  color: var(--color-success);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

.app-undo-toast-button {
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--color-success) 34%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
  color: var(--color-success);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.app-undo-toast-button:hover {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
}

.app-undo-toast-progress {
  grid-column: 1 / -1;
  display: block;
  height: 0.2rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-border));
}

.app-undo-toast-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-success);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 100ms linear;
}
.system-back-exit-hint {
  position: fixed;
  z-index: 12000;
  right: 50%;
  bottom: max(var(--space-24), calc(env(safe-area-inset-bottom, 0px) + var(--space-16)));
  max-width: calc(100vw - (2 * var(--space-16)));
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text-primary) 90%, transparent);
  color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-align: center;
  transform: translateX(50%);
}


/* src/styles/appDetailPane.css */
.detail-pane {
  display: none;
  position: relative;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  padding: var(--space-24);
  padding-bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px));
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow-x: hidden;
  overflow-y: auto;
}

.app-frame:has(.workspace > section[data-screen="tasks"]:not([hidden])) .detail-pane {
  display: none;
}

.detail-pane-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.25rem;
  z-index: 6;
  width: 0.875rem;
  cursor: col-resize;
  touch-action: none;
}

.app-frame:has(.workspace > section[data-screen="tasks"]:not([hidden])) .detail-pane-resize {
  top: var(--task-top-stack-height);
}

.detail-pane-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.375rem;
  width: 0.125rem;
  background: transparent;
  transition: background var(--duration-fast);
}

.detail-pane-resize:hover::after,
.app-frame.resizing-detail-pane .detail-pane-resize::after {
  background: var(--color-primary);
}

.detail-pane-toggle {
  position: absolute;
  top: var(--space-16);
  left: var(--space-8);
  z-index: 7;
  display: grid;
  width: var(--space-28, 1.75rem);
  height: var(--space-32);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: 0 6px 18px var(--shadow-ink-12);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.detail-pane-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.app-frame.detail-pane-collapsed .detail-pane {
  padding: 0;
  overflow: visible;
}

.app-frame.detail-pane-collapsed .task-detail,
.app-frame.detail-pane-collapsed .detail-pane-resize {
  display: none;
}

.app-frame.detail-pane-collapsed .detail-pane-toggle {
  top: var(--space-16);
  left: 50%;
  transform: translateX(-50%);
}

.app-frame:not(:has(.workspace > section[data-screen="tasks"]:not([hidden]))) .detail-pane-toggle,
.app-frame:not(:has(.workspace > section[data-screen="tasks"]:not([hidden]))) .detail-pane-resize {
  display: none;
}

.app-frame.resizing-detail-pane,
.app-frame.resizing-detail-pane * {
  cursor: col-resize;
  user-select: none;
}


/* src/styles/appDetailCollaboration.css */
.task-detail {
  min-height: 100%;
}

.detail-empty {
  display: grid;
  min-height: 18rem;
  align-content: center;
  gap: var(--space-8);
  color: var(--color-text-secondary);
}

.detail-project-collaborators {
  display: grid;
  gap: var(--space-4);
}

.detail-project-collaborator {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-xs);
  background: var(--color-surface-muted);
}

.detail-project-collaborator.editable {
  align-items: center;
}

.detail-project-collaborator.editable > span:first-child {
  display: grid;
  min-width: 0;
}

.detail-collaborator-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-4);
}


.detail-collaborator-access {
  width: auto;
  min-height: 1.8rem;
  padding-inline: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.detail-collaborator-remove {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 1.1rem;
}

.detail-collaborator-remove:hover,
.detail-collaborator-remove:focus-visible {
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  color: var(--color-danger);
}

.detail-project-collaborator.nested {
  margin-left: 0.55rem;
  padding-left: 0.55rem;
  border-left: 2px solid var(--color-primary-soft);
}

.detail-project-collaborator strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-project-collaborator small,
.detail-project-collaborators .empty {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.detail-project-team-select {
  width: 100%;
}

.detail-manage-shares {
  justify-self: start;
  min-height: 2rem;
  margin-top: var(--space-4);
  padding-inline: var(--space-10);
  font-size: var(--text-caption);
}


/* src/styles/appDetailCard.css */
.detail-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--space-32);
  gap: var(--space-12);
  padding-left: var(--space-28);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border);
  container-type: inline-size;
}

.detail-header-actions {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: start;
  justify-content: flex-end;
}

.detail-title-row {
  display: grid;
  grid-template-columns: var(--space-20, 1.25rem) minmax(0, 1fr);
  gap: var(--space-10, 0.625rem);
  align-items: start;
  grid-column: 1;
  grid-row: 1;
}

.detail-project-marker {
  width: var(--space-12);
  height: var(--space-12);
  margin-top: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-warning);
}

.detail-project-marker.high {
  background: var(--color-danger);
}

.detail-project-marker.low,
.detail-project-marker.done {
  background: var(--color-success);
}

.detail-badges,
.detail-main-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

.detail-badges,
.detail-main-tabs {
  grid-column: 1 / -1;
}

.detail-close {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  width: var(--space-32);
  height: var(--space-32);
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-section);
}

.detail-close:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
}

.detail-complete-button {
  display: inline-flex;
  min-height: var(--space-32);
  align-items: center;
  justify-content: center;
  gap: var(--space-6, 0.375rem);
  align-self: start;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.detail-complete-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.detail-complete-button.done {
  border-color: color-mix(in srgb, var(--color-success) 28%, var(--color-border));
  background: var(--color-success-soft);
  color: var(--color-success);
}

.detail-complete-button.icon-only {
  width: var(--space-32);
  min-width: var(--space-32);
  height: var(--space-32);
  min-height: var(--space-32);
  padding: 0;
}

.detail-complete-icon {
  display: grid;
  width: var(--space-18, 1.125rem);
  height: var(--space-18, 1.125rem);
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  font-size: var(--text-caption);
  line-height: 1;
}

.detail-badge {
  display: inline-flex;
  min-height: var(--space-24);
  align-items: center;
  padding: 0 var(--space-10, 0.625rem);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.detail-badge-outline {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.detail-main-tabs {
  gap: var(--space-18, 1.125rem);
  margin-top: var(--space-8);
}

.detail-main-tab {
  display: inline-flex;
  width: auto;
  min-height: var(--control-height-sm);
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  align-items: center;
  justify-content: center;
}

.detail-main-tab-icon {
  display: none;
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 1.125rem;
  pointer-events: none;
}

.detail-main-tab.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.detail-main-tabs.icon-only {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.detail-main-tabs.icon-only .detail-main-tab {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 0;
  place-items: center;
}

.detail-main-tabs.icon-only .detail-main-tab-icon {
  display: block;
}

.detail-main-tabs.icon-only .detail-main-tab-label {
  display: none;
}

@container (max-width: 25rem) {
  .detail-main-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .detail-main-tab {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 0;
    place-items: center;
  }

  .detail-main-tab-icon {
    display: block;
  }

  .detail-main-tab-label {
    display: none;
  }
}

.detail-empty h2 {
  margin-bottom: 0;
  font-size: var(--text-section);
}

.detail-empty p {
  margin-bottom: 0;
}

.detail-card {
  display: grid;
  gap: var(--space-16);
  min-height: 100%;
  min-width: 0;
  overflow: hidden;
}

.detail-card-layout {
  --detail-action-rail-offset: 3.5rem;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-10, 0.625rem);
  min-width: 0;
  min-height: 100%;
  align-items: start;
}

.detail-action-rail {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
  padding: 0.22rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-soft));
  box-shadow: 0 0.5rem 1.5rem var(--shadow-ink-07);
}

.detail-action-rail-button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  gap: 0.18rem;
  padding: 0.2rem 0.08rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, var(--color-primary));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 0.18rem 0.55rem var(--shadow-ink-05);
  font: inherit;
}

.detail-action-rail-button > span {
  max-width: 100%;
  color: var(--color-text-primary);
  font-size: 0.44rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.detail-action-rail-button:hover,
.detail-action-rail-button:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 64%, var(--color-border));
  background: var(--color-primary-soft);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.detail-action-rail-icon {
  width: 0.875rem;
  height: 0.875rem;
  overflow: visible;
}

.detail-share-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

@media (max-width: 37.4375rem) {
  .detail-card-layout {
    --detail-action-rail-offset: 3.25rem;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-8);
  }

  .detail-action-rail {
    gap: 0.3rem;
    padding: 0.3rem 0.22rem;
  }

  .detail-action-rail-button {
    min-height: 0;
    border-radius: var(--radius-sm);
  }

  .detail-action-rail-button > span {
    font-size: 0.42rem;
  }

  .detail-action-rail-icon {
    width: 0.825rem;
    height: 0.825rem;
  }
}

.detail-title {
  width: 100%;
  min-height: var(--space-48);
  padding: var(--space-8) var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-section);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  resize: none;
  overflow-wrap: anywhere;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.detail-title:hover {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 97%, var(--color-primary-soft));
}

.detail-title:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 16%, transparent);
  outline: none;
}

.detail-meta {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-10) var(--space-12);
  min-width: 0;
  margin: 0;
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.detail-meta dt,
.detail-meta dd {
  margin: 0;
}

.detail-meta dt.detail-meta-control-term {
  align-self: start;
  padding-top: var(--space-8);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-meta dt.detail-meta-control-term {
  align-self: start;
}

.detail-meta dd {
  color: var(--color-text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.status-pill {
  display: inline-grid;
  min-height: var(--space-24);
  align-items: center;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-strong);
}

.status-pill.open {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.status-pill.done {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.detail-input,
.detail-notes {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font: inherit;
}

.detail-input {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-8);
}

.detail-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-height-sm);
  color: var(--color-text-primary);
}

.detail-header-actions .detail-checkbox {
  min-height: var(--space-32);
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.detail-header-actions .detail-checkbox:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-warning) 42%, var(--color-border));
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.detail-checkbox input {
  width: var(--space-16);
  height: var(--space-16);
  accent-color: var(--color-primary);
}


/* src/styles/appDetailFields.css */
.schedule-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--color-warning) 38%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-weight: var(--font-weight-strong);
}


.detail-section {
  display: grid;
  gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.detail-section > input,
.detail-section > textarea {
  margin-top: var(--space-6, 0.375rem);
}

.detail-color-input {
  max-width: var(--space-64, 4rem);
  min-height: var(--space-40);
  padding: var(--space-4);
}

.detail-actions {
  display: flex;
  position: sticky;
  bottom: 0;
  justify-content: space-between;
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.detail-actions .button {
  min-height: var(--space-40);
  border-radius: var(--radius-control);
}

.detail-actions .danger {
  min-width: var(--space-56, 3.5rem);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 28%, transparent);
  background: color-mix(in srgb, var(--color-danger) 4%, transparent);
}

.detail-notes {
  min-height: 7rem;
  padding: var(--space-16);
  line-height: var(--line-base);
  overflow-wrap: anywhere;
  resize: vertical;
}


/* src/styles/appRichTextToolbar.css */
.rich-notes {
  position: relative;
  container: rich-notes / inline-size;
  display: grid;
  gap: 0;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 0.35rem 1rem var(--shadow-ink-05);
}

.rich-notes-with-image-controls {
  position: relative;
  overflow: visible;
}

.rich-notes-header {
  display: flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 0.3rem 0.55rem;
}

.rich-notes-header .detail-section-title {
  font-size: 0.78rem;
  font-weight: 700;
}

.rich-notes-header-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.rich-notes-header-actions .rich-notes-tool {
  min-width: 1.9rem;
  min-height: 1.9rem;
  padding: 0;
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.rich-notes-toggle {
  min-height: var(--space-28);
  padding: 0 var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.rich-notes-toggle:hover,
.rich-notes-toggle:focus-visible {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.rich-notes.collapsed .rich-notes-toolbar,
.rich-notes.collapsed .rich-notes-editor {
  display: none;
}

.rich-notes-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 2.3rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 97%, var(--color-surface-muted));
  overflow: visible;
}

.rich-notes-tool-group {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.1rem;
  padding: 0.2rem 0.28rem;
  border-right: 1px solid var(--color-border);
}

.rich-notes-tool-group.colors {
  display: inline-flex !important;
  flex: 0 0 auto;
  visibility: visible;
}

.rich-notes-tool-group.colors .rich-text-color {
  display: inline-grid !important;
  opacity: 1;
}

.rich-notes-tool-group.insert {
  margin-left: auto;
  border-right: 0;
}

.rich-notes-tool {
  display: inline-grid;
  flex: 0 0 auto;
  min-width: 1.9rem;
  min-height: 1.9rem;
  place-items: center;
  padding: 0 0.28rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

/* Use two deliberate rows before browser zoom can squeeze labels and SVGs
   into neighbouring controls. The editor itself is the responsive boundary. */
@container rich-notes (max-width: 56rem) {
  .rich-notes-toolbar {
    flex-wrap: wrap;
  }

  .rich-notes-toolbar::before {
    content: "";
    flex: 0 0 100%;
    width: 0;
    height: 0;
    order: 2;
  }

  .rich-notes-tool-group.structure,
  .rich-notes-tool-group.emphasis,
  .rich-notes-tool-group.colors {
    flex-shrink: 0;
    order: 1;
  }

  .rich-notes-tool-group.structure {
    flex: 0 0 auto;
  }

  .rich-notes-tool-group.alignment,
  .rich-notes-tool-group.lists,
  .rich-notes-tool-group.indentation,
  .rich-notes-tool-group.insert {
    flex-shrink: 0;
    order: 3;
  }

  .rich-notes-tool-group.insert {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.rich-notes-icon {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rich-notes-tool:hover,
.rich-notes-tool:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.rich-notes-tool:active,
.rich-notes-tool.active,
.rich-notes-tool[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 82%, var(--color-primary) 18%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.rich-text-color-picker {
  position: relative;
  flex: 0 0 auto;
}

.rich-text-color {
  grid-template-columns: 1fr 0.55rem;
  width: 2.15rem;
  min-width: 2.15rem;
  padding: 0 0.12rem 0 0.28rem;
  border-bottom: 0.18rem solid var(--rich-color-preview, var(--color-primary));
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
}

.rich-text-color-symbol {
  line-height: 1;
}

.rich-text-color.highlight .rich-text-color-symbol {
  color: var(--color-highlight-orange);
}

.rich-text-color-chevron {
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
}

.rich-text-color-chevron .rich-notes-icon {
  width: 0.55rem;
  height: 0.55rem;
}

.rich-text-color-menu {
  position: fixed;
  z-index: 1000;
  inset: auto;
  display: grid;
  width: 12.5rem;
  margin: 0;
  gap: var(--space-8);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.rich-text-color-menu[popover]:not(:popover-open) {
  display: none;
}

.rich-text-color-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.rich-text-color-swatch {
  width: 2.25rem;
  height: 2rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--swatch-color) 68%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--swatch-color);
  cursor: pointer;
}

.rich-text-color-swatch:hover,
.rich-text-color-swatch:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.rich-text-color-clear {
  width: 100%;
  min-height: 2rem;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, transparent 46%, var(--color-danger) 47%, var(--color-danger) 53%, transparent 54%),
    color-mix(in srgb, var(--color-surface-muted) 72%, var(--color-surface));
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.rich-text-color-clear:hover,
.rich-text-color-clear:focus-visible {
  border-color: var(--color-primary);
  outline: 2px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  outline-offset: 1px;
}

.rich-text-custom-color {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--space-8);
}

.rich-text-custom-color input[type="color"] {
  width: 2.4rem;
  min-width: 0;
  height: 2rem;
  padding: 0.12rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

.rich-text-custom-color .button {
  min-height: 2rem;
  padding: 0 var(--space-8);
  font-size: var(--text-caption);
}

.rich-notes-select {
  display: block;
  width: auto;
  min-width: 4rem;
  max-width: 8rem;
  padding: 0 1.2rem 0 0.42rem;
  border: 0;
  background-color: transparent;
  font-weight: 500;
}

.rich-notes-select.paragraph {
  min-width: 5.2rem;
}

.rich-notes-select.font {
  min-width: 6rem;
}

.rich-notes-select.size {
  min-width: 3rem;
}

.rich-notes-tool.italic {
  font-style: italic;
}

.rich-notes-tool.underline {
  text-decoration: underline;
}

.rich-notes-tool.strike {
  text-decoration: line-through;
}

.rich-notes-more {
  position: relative;
  display: grid;
  place-items: center;
}

.rich-notes-more > summary {
  list-style: none;
}

.rich-notes-more > summary::-webkit-details-marker {
  display: none;
}

.rich-notes-more-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 180;
  display: grid;
  width: max-content;
  min-width: 12rem;
  max-height: min(24rem, calc(100vh - 5rem));
  gap: 0.12rem;
  padding: 0.42rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  overflow-y: auto;
}

.rich-notes-more:not([open]) .rich-notes-more-menu {
  display: none;
}

.rich-notes-more-menu .menu-item,
.rich-notes-more-menu .menu-color {
  display: flex;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  gap: 0.55rem;
  padding-inline: 0.6rem;
  border-bottom: 0;
}

.rich-notes-more-menu .menu-item::after {
  content: attr(title);
  font-weight: 500;
}

.rich-notes-more-menu .menu-color::after {
  content: attr(aria-label);
  font-weight: 500;
}

.rich-notes-more-menu .responsive-extra {
  display: none;
}

.rich-table-column-picker {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}

.rich-table-column-picker > summary {
  display: inline-flex;
  list-style: none;
  gap: 0.08rem;
}


/* src/styles/appRichTextMenus.css */
.rich-table-column-picker > summary::-webkit-details-marker {
  display: none;
}

.rich-table-column-picker > summary .rich-notes-icon:last-child {
  width: 0.5rem;
  height: 0.5rem;
}

.rich-table-column-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 195;
  display: grid;
  width: 13rem;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
}

.rich-table-column-picker:not([open]) .rich-table-column-menu {
  display: none;
}

.rich-table-column-menu > strong {
  font-size: 0.72rem;
  font-weight: 650;
}

.rich-table-column-choices {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
}

.rich-table-column-choices button,
.rich-table-column-custom button,
.rich-table-column-custom input {
  min-width: 0;
  min-height: 1.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.72rem;
}

.rich-table-column-choices button:hover,
.rich-table-column-choices button:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.rich-table-column-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem;
}

.rich-table-column-custom input {
  width: 100%;
  padding-inline: 0.4rem;
}

.rich-table-column-custom button {
  padding-inline: 0.55rem;
  border-color: var(--color-primary);
  color: var(--color-primary);
  cursor: pointer;
}

.rich-notes-compact-dropdown {
  position: relative;
  display: none;
  flex: 0 0 auto;
}

.rich-notes-compact-dropdown > summary {
  list-style: none;
}

.rich-notes-compact-dropdown > summary::-webkit-details-marker {
  display: none;
}

.rich-notes-compact-dropdown .compact-dropdown-trigger {
  display: inline-flex;
  width: auto;
  min-width: 1.95rem;
  gap: 0.12rem;
  padding: 0 0.2rem 0 0.3rem;
}

.rich-notes-compact-dropdown .compact-dropdown-symbol {
  display: inline-grid;
  min-width: 1rem;
  place-items: center;
  font-weight: 600;
}

.rich-notes-compact-dropdown .compact-dropdown-symbol .rich-notes-icon {
  width: 0.88rem;
  height: 0.88rem;
}

.rich-notes-compact-dropdown .compact-dropdown-trigger > .rich-notes-icon {
  width: 0.56rem;
  height: 0.56rem;
}

.rich-notes-compact-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: 190;
  display: grid;
  min-width: 10.5rem;
  padding: 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 0.65rem 1.5rem var(--shadow-ink-16);
}

.rich-notes-compact-dropdown:not([open]) .rich-notes-compact-menu {
  display: none;
}

.rich-notes-compact-menu .compact-menu-item {
  width: 100%;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  justify-content: start;
  justify-items: start;
  gap: 0.55rem;
  border-color: transparent;
  white-space: nowrap;
}

.rich-notes-compact-menu .compact-menu-item::after {
  content: attr(aria-label);
  font-size: 0.72rem;
  font-weight: 500;
}

@container rich-notes (max-width: 56rem) {
  .rich-notes-compact-dropdown {
    display: grid;
  }
}


/* src/styles/appRichTextEditor.css */
.rich-notes-editor hr {
  margin: var(--space-12) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.rich-notes-editor {
  min-height: 12rem;
  max-height: 32rem;
  padding: 1rem;
  overflow: auto;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-regular);
  outline: none;
  resize: none;
}

.rich-notes-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-tertiary);
}

.rich-notes-editor h2,
.rich-notes-editor h3,
.rich-notes-editor p,
.rich-notes-editor ul,
.rich-notes-editor ol {
  margin: 0 0 var(--space-8);
}

.rich-notes-editor h2 {
  font-size: var(--text-section);
  line-height: var(--line-tight);
}

.rich-notes-editor h3 {
  font-size: var(--text-title);
  line-height: var(--line-tight);
}

.rich-notes-editor ul,
.rich-notes-editor ol {
  padding-left: var(--space-24);
}

/* Nested lists must communicate their hierarchy without relying on indentation
   alone. The first level is deliberately strongest; every deeper level becomes
   smaller and quieter while still keeping a distinct marker. */
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul { list-style-type: disc; }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul ul { list-style-type: circle; }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul ul ul { list-style-type: square; }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul ul ul ul { list-style-type: "–  "; }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul ul ul ul ul { list-style-type: "·  "; }

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul > li::marker {
  color: var(--color-primary);
  font-size: 1.08em;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul ul > li::marker {
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text-secondary));
  font-size: 0.96em;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul ul ul > li::marker {
  color: var(--color-text-secondary);
  font-size: 0.82em;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul ul ul ul > li::marker {
  color: color-mix(in srgb, var(--color-text-secondary) 78%, var(--color-text-tertiary));
  font-size: 0.76em;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ul ul ul ul ul > li::marker {
  color: var(--color-text-tertiary);
  font-size: 0.68em;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol { list-style-type: decimal; }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol ol { list-style-type: upper-alpha; }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol ol ol { list-style-type: lower-alpha; }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol ol ol ol { list-style-type: upper-roman; }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol ol ol ol ol { list-style-type: lower-roman; }

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol > li::marker {
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol ol > li::marker {
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text-secondary));
  font-size: 0.94em;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol ol ol > li::marker {
  color: var(--color-text-secondary);
  font-size: 0.86em;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol ol ol ol > li::marker {
  color: color-mix(in srgb, var(--color-text-secondary) 78%, var(--color-text-tertiary));
  font-size: 0.78em;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) ol ol ol ol ol > li::marker {
  color: var(--color-text-tertiary);
  font-size: 0.7em;
}

.rich-notes-editor a {
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}

.rich-notes-editor blockquote {
  margin: 0 0 var(--space-8);
  padding-left: 0.8rem;
  border-left: 0.2rem solid var(--color-primary);
  color: var(--color-text-secondary);
}

.rich-notes-editor pre,
.rich-notes-editor code {
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-family: monospace;
}

.rich-notes-editor pre {
  padding: 0.65rem;
  white-space: pre-wrap;
}

.rich-notes-editor img,
.overview-modal-notes-editor img,
.task-inline-notes-editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.rich-notes-editor img[data-rte-width],
.overview-modal-notes-editor img[data-rte-width],
.task-inline-notes-editor img[data-rte-width] {
  display: block;
}

.rich-notes-editor img.rich-image-active,
.overview-modal-notes-editor img.rich-image-active,
.task-inline-notes-editor img.rich-image-active {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.rich-image-controls {
  position: absolute;
  z-index: 24;
  display: flex;
  max-width: calc(100% - 0.5rem);
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.rich-image-controls[hidden],
.rich-image-resize-handle[hidden],
.rich-image-crop-overlay[hidden],
.rich-image-controls button[hidden],
.rich-image-controls select[hidden] {
  display: none !important;
}

.rich-image-controls button,
.rich-image-controls select {
  min-height: 1.85rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.72rem;
}

.rich-image-controls button {
  min-width: 1.85rem;
  cursor: pointer;
}

.rich-image-controls button:hover,
.rich-image-controls button:focus-visible,
.rich-image-controls select:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}

.rich-image-resize-handle {
  position: absolute;
  z-index: 25;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  cursor: nwse-resize;
  touch-action: none;
}

.rich-image-crop-overlay {
  position: absolute;
  z-index: 26;
  overflow: hidden;
  touch-action: none;
  pointer-events: none;
}

.rich-image-crop-frame {
  position: absolute;
  border: 2px solid var(--color-surface);
  outline: 1px solid var(--color-primary);
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--color-text-primary) 46%, transparent);
  pointer-events: none;
}

.rich-image-crop-frame::before,
.rich-image-crop-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.rich-image-crop-frame::before {
  inset: 33.333% 0;
  border-block: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent);
}

.rich-image-crop-frame::after {
  inset: 0 33.333%;
  border-inline: 1px solid color-mix(in srgb, var(--color-surface) 65%, transparent);
}

.rich-image-crop-handle {
  position: absolute;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
  pointer-events: auto;
  touch-action: none;
}

.rich-image-crop-handle.nw { left: 0; top: 0; cursor: nwse-resize; transform: translate(-50%, -50%); }
.rich-image-crop-handle.n { left: 50%; top: 0; cursor: ns-resize; transform: translate(-50%, -50%); }
.rich-image-crop-handle.ne { right: 0; top: 0; cursor: nesw-resize; transform: translate(50%, -50%); }
.rich-image-crop-handle.e { right: 0; top: 50%; cursor: ew-resize; transform: translate(50%, -50%); }
.rich-image-crop-handle.se { right: 0; bottom: 0; cursor: nwse-resize; transform: translate(50%, 50%); }
.rich-image-crop-handle.s { left: 50%; bottom: 0; cursor: ns-resize; transform: translate(-50%, 50%); }
.rich-image-crop-handle.sw { left: 0; bottom: 0; cursor: nesw-resize; transform: translate(-50%, 50%); }
.rich-image-crop-handle.w { left: 0; top: 50%; cursor: ew-resize; transform: translate(-50%, -50%); }

.rich-image-controls .rich-image-crop-apply {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

@container rich-notes (max-width: 30rem) {
  .rich-image-controls {
    flex-wrap: wrap;
  }
}

.rich-notes-footer {
  display: flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.72rem;
}

.rich-notes-save-state {
  text-align: right;
}

.rich-notes.rich-notes-expanded {
  position: fixed;
  z-index: 120;
  inset: max(5vh, var(--space-24)) max(5vw, var(--space-24));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  padding: var(--space-16);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
  -webkit-app-region: no-drag;
}

.rich-notes.rich-notes-expanded .rich-notes-header,
.rich-notes.rich-notes-expanded .rich-notes-header-actions,
.rich-notes.rich-notes-expanded .rich-text-expand {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.rich-notes.rich-notes-expanded .rich-notes-editor {
  min-height: 0;
  max-height: none;
  height: 100%;
}


/* src/styles/appRichTextCategories.css */
.rich-text-category-picker {
  position: relative;
  flex: 0 0 auto;
}

.rich-text-category-picker > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  list-style: none;
}

.rich-text-category-picker > summary::-webkit-details-marker {
  display: none;
}

.rich-text-category-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: 190;
  display: grid;
  width: max-content;
  min-width: 12.5rem;
  padding: 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 0.65rem 1.5rem var(--shadow-ink-16);
}

.rich-text-category-picker:not([open]) .rich-text-category-menu {
  display: none;
}

.rich-text-category-choice {
  display: grid;
  min-height: 2.2rem;
  grid-template-columns: 1.6rem minmax(5rem, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rich-text-category-choice:hover,
.rich-text-category-choice:focus-visible {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
  outline: none;
}

.rich-text-category-choice kbd {
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: var(--text-caption);
}

.rich-text-category-symbol,
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) [data-rte-category]::before {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  box-sizing: border-box;
  place-items: center;
  margin-right: 0.32rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  vertical-align: -0.12rem;
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) [data-rte-category]::before {
  content: "";
}

:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) [data-rte-category="1"]::before { content: "✓"; color: var(--color-success); }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) [data-rte-category="2"]::before { content: "!"; color: var(--color-danger); }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) [data-rte-category="3"]::before { content: "?"; color: var(--color-warning); }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) [data-rte-category="4"]::before { content: "★"; color: var(--color-warning); }
:is(.rich-notes-editor, .overview-modal-notes-editor, .task-inline-notes-editor) [data-rte-category="5"]::before { content: "◆"; color: var(--color-accent-purple); }

.rich-text-category-symbol[data-category="1"] { color: var(--color-success); }
.rich-text-category-symbol[data-category="2"] { color: var(--color-danger); }
.rich-text-category-symbol[data-category="3"],
.rich-text-category-symbol[data-category="4"] { color: var(--color-warning); }
.rich-text-category-symbol[data-category="5"] { color: var(--color-accent-purple); }


/* src/styles/appRichTextTables.css */
.rich-notes-editor table { width: 100%; margin-block: 0.5rem; border-collapse: collapse; }
.rich-table-overlay {
  position: absolute;
  z-index: 16;
  inset: 0;
  pointer-events: none;
}
.rich-table-overlay > * { pointer-events: auto; }
.rich-notes-editor td,
.rich-notes-editor th {
  min-width: 3rem;
  min-height: 20px;
  padding: 1px 0.35rem;
  border: 1px solid var(--color-border);
  line-height: 1.15;
}
.rich-notes-editor th { background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface-muted)); font-weight: 650; }
.rich-notes-editor .rich-table-active-cell {
  position: relative;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.rich-table-controls {
  position: absolute;
  z-index: 18;
  display: flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.rich-table-controls[hidden],
.rich-table-handle[hidden],
.rich-table-resize-handle[hidden] { display: none !important; }
.rich-table-controls button,
.rich-table-handle {
  min-width: 1.75rem;
  min-height: 1.65rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
}
.rich-table-controls button:hover,
.rich-table-controls button:focus-visible,
.rich-table-handle:hover,
.rich-table-handle:focus-visible { border-color: var(--color-primary); color: var(--color-primary); outline: none; }
.rich-table-controls button.danger { color: var(--color-danger); }
.rich-table-handle {
  position: absolute;
  z-index: 17;
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.rich-table-resize-handle { position: absolute; z-index: 19; touch-action: none; }
.rich-table-resize-handle.column {
  width: 12px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: col-resize;
}
.rich-table-resize-handle.row { height: 8px; cursor: row-resize; }
.rich-table-resize-handle.table-width,
.rich-table-resize-handle.table-height {
  border: 1px solid color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.rich-table-resize-handle.table-width { width: 12px; height: 32px; cursor: ew-resize; }
.rich-table-resize-handle.table-height { width: 32px; height: 12px; cursor: ns-resize; }
.rich-table-resize-handle.table-width::after,
.rich-table-resize-handle.table-height::after { background: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.rich-table-resize-handle.table-width::after { inset: 4px 3px; }
.rich-table-resize-handle.table-height::after { inset: 3px 4px; }
.rich-table-resize-handle::after {
  position: absolute;
  content: "";
  background: transparent;
  transition: background-color 120ms ease;
}
.rich-table-resize-handle.column::after { inset: 3px 4px; background: color-mix(in srgb, var(--color-primary) 32%, transparent); }
.rich-table-resize-handle.row::after { inset: 3px 0; }
.rich-table-resize-handle:hover::after,
.rich-table-resize-handle:active::after { background: var(--color-primary); }
.rich-table-context-menu {
  position: fixed;
  z-index: 260;
  display: grid;
  width: min(18rem, calc(100vw - 1rem));
  gap: 0.35rem;
  padding: 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
}
.rich-table-context-menu[hidden] { display: none; }
.rich-table-context-title { padding: 0.25rem 0.35rem; font-size: var(--text-caption); }
.rich-table-context-width { display: grid; grid-template-columns: minmax(0, 5rem) 1fr; gap: 0.35rem; }
.rich-table-context-width input,
.rich-table-context-width button,
.rich-table-context-actions button,
.rich-table-context-presets button {
  min-height: 2.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}
.rich-table-context-width input { min-width: 0; padding-inline: 0.5rem; }
.rich-table-context-width button,
.rich-table-context-actions button,
.rich-table-context-presets button { padding: 0.35rem 0.55rem; cursor: pointer; }
.rich-table-context-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; }
.rich-table-context-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
.rich-table-context-menu button:hover,
.rich-table-context-menu button:focus-visible { border-color: var(--color-primary); color: var(--color-primary); outline: none; }
.rich-table-context-menu button.danger { color: var(--color-danger); }


/* src/styles/appDetailResources.css */
.detail-input:focus,
.detail-notes:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.detail-subtasks {
  display: grid;
  gap: var(--space-16);
}

.detail-template-tools,
.detail-dependencies,
.detail-attachments {
  display: grid;
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.detail-template-tools h2,
.detail-dependencies h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-title);
}

.detail-template-row,
.detail-dependency-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
}

.detail-dependency-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.detail-template-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.detail-dependency-list {
  display: grid;
  gap: var(--space-8);
}

.detail-dependency-explanation {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.35;
}

.detail-dependency-list p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.detail-dependency-item {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr) auto var(--space-28);
  gap: var(--space-8);
  align-items: center;
  min-height: var(--space-40);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.dependency-marker {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.detail-dependency-item.blocking .dependency-marker {
  background: var(--color-danger);
}

.detail-dependency-item.sequence .dependency-marker {
  background: var(--color-primary);
}

.detail-dependency-item.done .dependency-marker {
  background: var(--color-success);
}

.detail-dependency-type,
.detail-dependency-item-type {
  min-width: 0;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
}

.detail-dependency-item button {
  min-width: 0;
}

.detail-dependency-item button:first-of-type {
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-dependency-item small {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.detail-dependency-item button:last-of-type {
  display: grid;
  width: var(--space-28);
  height: var(--space-28);
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
}

.detail-dependency-item button:last-of-type:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.attachment-picker {
  display: inline-grid;
  width: fit-content;
  min-height: var(--control-height-sm);
  align-items: center;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.attachment-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.attachment-drop-hint {
  margin: 0;
  padding: var(--space-8);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-align: center;
}

.detail-attachments.attachment-drop-active {
  outline: 2px solid var(--color-primary);
  outline-offset: var(--space-4);
}

.detail-attachments.attachment-drop-active .attachment-drop-hint {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.attachment-image-panel {
  display: grid;
  gap: var(--space-8);
}

.attachment-image-panel summary {
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.attachment-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.attachment-image-tile {
  position: relative;
  display: grid;
  gap: var(--space-6);
  min-width: 0;
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.attachment-image-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 2px);
  background: var(--color-surface-muted);
}

.attachment-image-tile figcaption {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-image-tile button,
.attachment-file button {
  display: grid;
  width: var(--space-24);
  height: var(--space-24);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-danger);
  font: inherit;
  line-height: 1;
}

.attachment-image-tile button {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
}

.attachment-file-list {
  display: grid;
  gap: var(--space-8);
}

.attachment-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--space-24);
  gap: var(--space-8);
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.attachment-file a {
  min-width: 0;
  overflow: hidden;
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-file span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}


/* src/styles/appDetailAiLock.css */
.detail-ai-lock-control {
  display: block;
  min-width: 0;
}

.detail-ai-lock-control .detail-input {
  width: 100%;
  min-width: 0;
}

.detail-ai-lock-status {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
}

.detail-ai-lock-status[hidden] {
  display: none;
}


/* src/styles/attachmentDropTargets.css */
.attachment-card-drop-active {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.attachment-card-drop-active:is(.detail-card, .knowledge-topic-root) {
  outline-offset: -4px;
}


/* src/styles/appDetailSubtasks.css */
.detail-subtasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  color: var(--color-text-secondary);
}

.detail-subtasks-header h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-title);
}

.detail-subtasks-header span {
  display: inline-grid;
  min-width: var(--space-32);
  min-height: var(--space-24);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.subtask-list {
  display: grid;
  gap: var(--space-8);
}

.subtask-item,
.subtask-form {
  display: grid;
  grid-template-columns: var(--space-24) minmax(0, 1fr) var(--space-32);
  gap: var(--space-8);
  align-items: center;
  min-height: var(--control-height);
}

.subtask-item {
  position: relative;
  grid-template-columns: var(--space-24) var(--space-24) minmax(0, 1fr) var(--space-32);
  padding: 0 var(--space-8);
  border-radius: var(--radius-sm);
}

.subtask-item:hover {
  background: var(--color-surface-muted);
}

.subtask-drag-handle {
  display: grid;
  width: var(--space-24);
  height: var(--space-32);
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: grab;
  touch-action: none;
}

.subtask-drag-handle:active { cursor: grabbing; }
.subtask-item.dragging { opacity: 0.48; }

.subtask-item.drag-over::before,
.subtask-item.drag-over::after {
  position: absolute;
  z-index: 2;
  right: var(--space-4);
  left: var(--space-4);
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  content: "";
  pointer-events: none;
}

.subtask-item.drag-over.drop-before::before { top: -5px; }
.subtask-item.drag-over.drop-after::after { bottom: -5px; }

.subtask-marker {
  color: var(--color-success);
  font-weight: var(--font-weight-strong);
}

.subtask-marker.info-card-marker {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: var(--color-primary);
}

.subtask-marker.info-card-marker svg,
.project-row-type-icon.info-card-marker svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.subtask-item.done span:last-child {
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.detail-outline-button {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-12);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
  text-align: left;
}

.detail-outline-button:hover {
  background: var(--color-primary-soft);
}

.subtask-item input[type="checkbox"] {
  width: var(--space-16);
  height: var(--space-16);
  accent-color: var(--color-primary);
}

.subtask-item input[type="text"],
.subtask-form input {
  min-width: 0;
  height: var(--control-height-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: transparent;
  font: inherit;
}

.subtask-form input {
  grid-column: 1 / 3;
  padding: 0 var(--space-8);
  border-color: var(--color-border);
  background: var(--color-surface);
}

.subtask-item input[type="text"]:focus,
.subtask-form input:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.subtask-item.done input[type="text"] {
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.subtask-delete {
  display: grid;
  width: var(--space-32);
  height: var(--space-32);
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-title);
  line-height: 1;
}

.subtask-delete:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}


/* src/styles/appDetailDiscussion.css */
.detail-discussion {
  display: none;
  gap: var(--space-16);
}

.detail-tabs {
  display: flex;
  gap: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.detail-tab {
  min-height: var(--control-height-sm);
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}


.detail-tab.active {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.comment-stack {
  display: grid;
  gap: var(--space-16);
}

.comment-list,
.activity-list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}

.comment-empty {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.comment-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--space-32);
  gap: var(--space-8);
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.comment-item p,
.comment-item .comment-body {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.comment-markdown-line {
  display: block;
  min-height: 1.35em;
}

.comment-markdown-heading {
  margin-top: var(--space-6);
  font-weight: var(--font-weight-strong);
}

.comment-markdown-h1,
.comment-markdown-h2 {
  font-size: 1.08em;
}

.comment-markdown-list-item {
  padding-left: var(--space-12);
}

.comment-body code {
  padding: 0 0.25em;
  border-radius: var(--radius-xs);
  background: var(--color-surface-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.92em;
}

.comment-item time,
.activity-list time {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.comment-delete {
  display: grid;
  width: var(--space-32);
  height: var(--space-32);
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-title);
  line-height: 1;
}

.comment-delete:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--control-height-sm);
  gap: var(--space-8);
}

.comment-form input {
  min-width: 0;
  height: var(--control-height-sm);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font: inherit;
}

.comment-form input:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.detail-annotations {
  display: grid;
  gap: var(--space-8);
}

.annotation-list {
  display: grid;
  gap: var(--space-6);
}

.annotation-empty {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.annotation-item {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) var(--space-32);
  gap: var(--space-8);
  align-items: center;
  min-height: var(--control-height-sm);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.annotation-item time {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.annotation-item input,
.annotation-form input {
  min-width: 0;
  height: var(--control-height-sm);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.annotation-item input:focus,
.annotation-form input:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.annotation-delete {
  display: grid;
  width: var(--space-32);
  height: var(--space-32);
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-title);
  line-height: 1;
}

.annotation-delete:hover,
.annotation-delete:focus-visible {
  border-color: var(--color-danger);
  color: var(--color-danger);
  outline: none;
}

.annotation-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--control-height-sm);
  gap: var(--space-8);
}

.annotation-time-hint {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.2;
}

.activity-list {
  list-style: none;
}

.activity-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
  min-height: var(--control-height-sm);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.danger {
  color: var(--color-danger);
}


/* src/styles/appAiFoundation.css */
.foundation-panel {
  min-height: 18rem;
  color: var(--color-text-secondary);
}

#ai-root {
  min-height: 0;
  overflow: hidden;
}

.ai-workbench {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--space-12);
  height: 100%;
  min-height: 0;
  padding: var(--space-20);
}

.ai-workbench-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-width: 0;
}

.ai-workbench-header h1 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-section);
}

.ai-workbench-header p:not(.eyebrow) {
  max-width: 36rem;
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.ai-workbench-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: end;
  gap: var(--space-8);
  min-width: 0;
}

.ai-compact-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.ai-view-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.ai-view-tab {
  min-height: var(--space-36);
  padding: 0 var(--space-14);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.ai-view-tab:hover {
  color: var(--color-primary);
}

.ai-view-tab.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.ai-settings-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  min-height: 0;
}

.ai-settings-area[hidden] {
  display: none;
}

.ai-configuration {
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-12);
}

.ai-stat,
.ai-provider-card,
.ai-preferences-card,
.ai-panel,
.ai-suggestion,
.ai-empty,
.ai-error {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.ai-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-10);
  box-shadow: none;
}

.ai-provider-card,
.ai-preferences-card {
  display: grid;
  gap: var(--space-10);
  padding: var(--space-16);
}

.ai-provider-card h2,
.ai-preferences-card h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-title);
}

.ai-provider-card strong {
  width: fit-content;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.ai-provider-card.missing strong {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.ai-provider-card span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.ai-preferences-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-preferences-card > header span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.ai-number-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  gap: var(--space-8);
  align-items: center;
}

.ai-number-field span {
  color: var(--color-text-secondary);
}

.ai-number-field input {
  min-height: var(--space-40);
  min-width: 0;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.ai-number-field input:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.ai-memory-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.ai-memory-toggle,
.ai-rule-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.ai-memory-rule-list {
  display: grid;
  gap: var(--space-8);
}

.ai-memory-rule {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 8%, transparent), var(--color-surface) 44%);
}

.ai-memory-rule.disabled {
  opacity: 0.62;
}

.ai-memory-rule h3 {
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
  font-size: var(--text-title);
}

.ai-memory-rule p {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
}

.ai-memory-rule small {
  color: var(--color-text-tertiary);
}


/* src/styles/appAiWorkflows.css */
.ai-stat strong {
  color: var(--color-primary);
  font-size: var(--text-title);
  line-height: var(--line-tight);
}

.ai-stat span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.ai-panel {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-16);
  min-height: 0;
}

.ai-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.ai-panel h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-title);
}

.ai-panel > header span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.ai-suggestion-list {
  display: grid;
  gap: var(--space-10);
  min-height: 0;
}

.ai-suggestion {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr) auto;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-14);
  cursor: pointer;
}

.ai-suggestion.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 50%, transparent), var(--shadow-card);
}

.ai-suggestion-marker {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.ai-suggestion.reschedule .ai-suggestion-marker {
  background: var(--color-warning);
}

.ai-suggestion-content {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.ai-suggestion-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
}

.ai-suggestion-type {
  width: fit-content;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.ai-suggestion-urgency {
  width: fit-content;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.ai-suggestion-urgency.high {
  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
  color: var(--color-warning);
}

.ai-suggestion-urgency.critical {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}

.ai-suggestion-urgency.medium {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

.ai-suggestion h2 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-suggestion p,
.ai-suggestion small {
  margin: 0;
  color: var(--color-text-secondary);
}

.ai-suggestion-signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.ai-suggestion-signals:empty {
  display: none;
}

.ai-suggestion-signals li {
  padding: var(--space-2) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.ai-date-rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-4);
}

.ai-date-rail span {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.ai-date-rail button,
.workday-button {
  display: inline-grid;
  min-height: 1.75rem;
  place-items: center;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.ai-date-rail button:hover,
.workday-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.ai-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: var(--space-8);
}

.ai-suggestions-panel {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.ai-suggestions-panel .ai-suggestion-list {
  overflow-y: auto;
  padding-right: var(--space-4);
  scrollbar-width: thin;
}

.ai-handoff-panel {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.ai-handoff-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
  gap: var(--space-12);
  height: 100%;
  min-height: 0;
}

.ai-handoff-picker,
.ai-handoff-transfer {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
  min-height: 0;
}

.ai-handoff-picker {
  grid-template-rows: auto minmax(0, 1fr);
}

.ai-handoff-transfer {
  grid-template-rows: auto minmax(12rem, 1.1fr) minmax(9rem, 0.9fr);
}

.ai-handoff-toolbar,
.ai-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

.ai-handoff-task-list {
  display: grid;
  gap: var(--space-6);
  max-height: none;
  overflow-y: auto;
  padding-right: var(--space-4);
  scrollbar-width: thin;
}

.ai-handoff-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  cursor: pointer;
}

.ai-handoff-task input {
  margin-top: var(--space-2);
}

.ai-handoff-task span {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ai-handoff-task strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-handoff-task small {
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-handoff-prompt,
.ai-handoff-response {
  min-height: 0;
  min-width: 0;
  resize: vertical;
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  line-height: var(--line-normal);
}

.ai-handoff-prompt {
  min-height: 14rem;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
}

.ai-handoff-response {
  min-height: 10rem;
}

.ai-handoff-prompt:focus,
.ai-handoff-response:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

@media (max-width: 68rem) {
  .ai-handoff-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ai-log-list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-log-list li {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.ai-log-list strong {
  color: var(--color-text-primary);
}

.ai-log-list span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.ai-empty,
.ai-error {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-20);
}

.ai-empty strong {
  color: var(--color-text-primary);
}

.ai-error {
  color: var(--color-danger);
}


/* src/styles/conversation.css */
.conversation-screen {
  min-height: 0;
  padding: var(--workspace-inset);
}

.conversation-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, 62rem);
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.conversation-header,
.conversation-header-actions,
.conversation-compose,
.conversation-prompts {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.conversation-header {
  justify-content: space-between;
}

.conversation-title,
.conversation-subtitle,
.conversation-message-author,
.conversation-bubble,
.conversation-privacy-note {
  margin: 0;
}

.conversation-title {
  color: var(--color-text-primary);
  font-size: var(--text-section);
}

.conversation-subtitle,
.conversation-privacy-note {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.conversation-header-actions {
  flex-wrap: wrap;
  justify-content: end;
}

.conversation-availability {
  padding: var(--space-4) var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.conversation-availability.available {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.conversation-content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: var(--space-12);
  min-height: 0;
}

.conversation-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-height: 0;
  margin: 0;
  padding: var(--space-4);
  overflow-y: auto;
  list-style: none;
}

.conversation-message {
  display: grid;
  gap: var(--space-4);
  width: min(82%, 42rem);
}

.conversation-message.user {
  align-self: end;
}

.conversation-message-author {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.conversation-message.user .conversation-message-author {
  text-align: right;
}

.conversation-bubble,
.conversation-result {
  padding: var(--space-12) var(--space-14);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  line-height: var(--line-relaxed);
}

.conversation-message.user .conversation-bubble {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  background: var(--color-primary-soft);
}

.conversation-message.error .conversation-bubble {
  color: var(--color-danger);
}

.conversation-result {
  display: grid;
  gap: var(--space-6);
  background: var(--color-surface-muted);
}

.conversation-result ul {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-20);
}

.conversation-prompts {
  flex-wrap: wrap;
}

.conversation-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.conversation-input {
  min-height: 3.25rem;
  max-height: 10rem;
  resize: vertical;
}

.conversation-privacy-note {
  grid-column: 1 / -1;
}

@media (max-width: 37.4375rem) {
  .conversation-screen {
    padding: var(--space-8);
  }

  .conversation-header {
    align-items: start;
  }

  .conversation-subtitle {
    display: none;
  }

  .conversation-message {
    width: 92%;
  }

  .conversation-compose {
    grid-template-columns: minmax(0, 1fr);
  }

  .conversation-compose .button {
    width: 100%;
  }
}


/* src/styles/appSettingsLayout.css */
.settings-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
  align-items: start;
}

.settings-group {
  display: grid;
  gap: var(--space-16);
  min-width: 0;
  padding: var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.settings-group-wide {
  grid-column: 1 / -1;
}

.settings-group-header {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}

.settings-group-header h2,
.settings-subsection h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-title);
}

.settings-group-header p,
.settings-subsection p {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
}

.settings-group-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: var(--font-weight-strong);
}

.settings-group-content {
  display: grid;
  gap: var(--space-20);
}

.settings-theme-field {
  max-width: 22rem;
}

.settings-subsection {
  display: grid;
  gap: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.account-storage-settings {
  display: grid;
  gap: var(--space-16);
}

.account-storage-summary {
  display: grid;
  gap: var(--space-8);
}

.account-storage-summary > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
}

.account-storage-summary progress {
  width: 100%;
  height: var(--space-8);
  accent-color: var(--color-accent);
}

.account-storage-summary small[data-level="warning"] {
  color: var(--color-warning-text);
}

.account-storage-summary small[data-level="danger"] {
  color: var(--color-danger);
}


.account-storage-breakdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8) var(--space-16);
  margin: 0;
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.account-storage-breakdown dt,
.account-storage-breakdown dd {
  margin: 0;
}

.account-storage-breakdown dd {
  color: var(--color-text-muted);
  text-align: right;
}

.card-width-settings {
  display: grid;
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  gap: var(--space-20);
  align-items: stretch;
}

.card-width-controls {
  display: grid;
  gap: var(--space-12);
  align-content: start;
}

.card-width-setting {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.card-width-setting.active {
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  background: var(--color-primary-soft);
}

.card-width-setting > span {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  color: var(--color-text-secondary);
}

.card-width-setting output {
  min-width: 4.5rem;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.card-width-setting input[type="range"] {
  width: 100%;
  accent-color: var(--color-primary);
}

.card-width-reset {
  justify-self: start;
  white-space: nowrap;
}

.card-width-preview {
  --card-width-preview-min: 340px;
  --card-width-preview-source: 1200px;
  --card-width-preview-scale: 0.5;
  display: grid;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.card-width-preview > header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  align-items: start;
}

.card-width-preview > header div {
  display: grid;
  gap: 0.125rem;
}

.card-width-preview > header span,
.card-width-preview > header output {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.card-width-preview > header output {
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card-width-preview-viewport {
  position: relative;
  height: 12.5rem;
  min-width: 0;
  overflow: hidden;
}

.card-width-preview-canvas {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--card-width-preview-source);
  transform: scale(var(--card-width-preview-scale));
  transform-origin: top left;
}

.card-width-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-width-preview-min)), 1fr));
  gap: var(--space-12);
  width: 100%;
  min-width: 0;
  align-content: start;
}

.card-width-preview-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4) var(--space-12);
  min-width: 0;
  min-height: 5rem;
  padding: var(--space-10) var(--space-16) var(--space-10) 2.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.card-width-preview-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.2rem;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-primary);
  content: "";
}

.card-width-preview-card::after {
  position: absolute;
  top: var(--space-12);
  left: var(--space-16);
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  content: "";
}

.card-width-preview-card small,
.card-width-preview-card span {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-width-preview-card small,
.card-width-preview-card strong {
  grid-column: 1 / -1;
}

.card-width-preview-card small::before { content: attr(data-medium); }
.card-width-preview-card span::before { content: attr(data-medium); }

.card-width-preview-card strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-width-preview-card i {
  align-self: center;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-style: normal;
  white-space: nowrap;
}

.card-width-preview-card i::before { content: attr(data-content); }

.card-width-preview[data-card-size="minimal"] .card-width-preview-card {
  min-height: 4.25rem;
  padding-block: var(--space-6);
}

.card-width-preview[data-card-size="minimal"] .card-width-preview-card small::before { content: attr(data-narrow); }
.card-width-preview[data-card-size="minimal"] .card-width-preview-card span::before { content: attr(data-narrow); }
.card-width-preview[data-card-size="minimal"] .card-width-preview-card i { max-width: 3.5rem; overflow: hidden; }

.card-width-preview[data-card-size="full"] .card-width-preview-card {
  min-height: 12.5rem;
}

.card-width-preview[data-card-size="full"] .card-width-preview-card span::before { content: attr(data-full); }

@media (max-width: 70rem) {
  .settings-stack {
    grid-template-columns: 1fr;
  }

  .settings-group-wide {
    grid-column: auto;
  }

}

@media (max-width: 52rem) {
  .card-width-settings {
    grid-template-columns: 1fr;
  }

  .card-width-controls {
    max-width: 22rem;
  }

  .card-width-preview-viewport {
    height: 10.5rem;
  }
}


/* src/styles/appSettingsPreferences.css */
.workday-settings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.workday-settings-panel {
  display: grid;
  gap: 0.75rem;
  min-width: min(100%, 28rem);
}

.workday-board-field {
  max-width: 22rem;
}

.workday-button.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.calendar-capacity-setting {
  display: grid;
  gap: var(--space-8);
  width: min(100%, 24rem);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.calendar-capacity-setting > span {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
}

.calendar-capacity-setting output {
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.calendar-capacity-setting input[type="range"] {
  width: min(100%, 18rem);
  accent-color: var(--color-primary);
}

.calendar-capacity-setting small {
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.rich-text-format-settings {
  display: grid;
  gap: var(--space-8);
}

.rich-text-format-setting {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.rich-text-format-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-12);
  align-items: center;
  min-height: 3.5rem;
  padding: var(--space-10) var(--space-12);
  cursor: pointer;
  list-style: none;
}

.rich-text-format-summary::-webkit-details-marker { display: none; }

.rich-text-format-summary::after {
  grid-column: 3;
  grid-row: 1;
  color: var(--color-text-secondary);
  content: "⌄";
  transition: transform var(--transition-fast);
}

.rich-text-format-setting[open] .rich-text-format-summary::after { transform: rotate(180deg); }
.rich-text-format-setting[open] .rich-text-format-summary { background: var(--color-surface-muted); }

.rich-text-format-summary > span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.rich-text-format-summary strong,
.rich-text-format-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rich-text-format-summary small { color: var(--color-text-secondary); }

.rich-text-format-summary-color {
  grid-column: 2;
  grid-row: 1;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
}

.rich-text-format-summary-color:not(.active) { opacity: 0.35; }

.rich-text-format-editor {
  display: grid;
  grid-template-columns: minmax(13rem, 0.8fr) minmax(20rem, 1.5fr);
  gap: var(--space-16);
  padding: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.rich-text-format-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  align-items: end;
  min-width: 0;
}

.rich-text-format-fields h4 {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rich-text-format-type-fields {
  grid-template-columns: repeat(4, minmax(6rem, 1fr));
}

.rich-text-format-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.rich-text-format-field {
  min-width: 0;
}

.rich-text-format-color {
  width: 3rem;
  height: var(--control-height);
  padding: 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.rich-text-format-color-toggle.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.rich-text-format-add {
  justify-self: start;
}

.planning-ai-locks {
  display: grid;
  gap: var(--space-8);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}

.planning-ai-locks h3 { margin: 0; font-size: var(--text-title); }

.settings-inline-list { display: grid; gap: var(--space-6); }

.settings-inline-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

@media (max-width: 70rem) {
  .rich-text-format-editor { grid-template-columns: 1fr; }
  .rich-text-format-type-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
  .rich-text-format-fields,
  .rich-text-format-type-fields { grid-template-columns: 1fr; }
}


/* src/styles/appBackup.css */
.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: end;
}

.backup-strategy {
  min-width: 12rem;
}
.backup-distribute { flex: 1 0 100%; }

.backup-strategy .select-field {
  height: var(--control-height);
  border-radius: var(--radius-md);
}

.backup-preview {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.backup-preview[hidden] {
  display: none;
}

.backup-preview strong {
  color: var(--color-text-primary);
}

.backup-preview dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-8);
  margin: 0;
}

.backup-preview dt,
.backup-preview dd {
  margin: 0;
}

.backup-preview dt {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}


.backup-preview dd {
  color: var(--color-text-primary);
  font-size: var(--text-title);
  font-weight: var(--font-weight-strong);
}

.backup-status {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}


/* src/styles/appHierarchyMigration.css */
.hierarchy-migration-review {
  display: grid;
  min-width: 0;
  gap: var(--space-16);
}

.migration-review-header,
.migration-detail-heading,
.migration-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.migration-review-header h3,
.migration-detail-heading h4,
.migration-child-section h5,
.migration-warning-list h5 {
  margin: 0;
}

.migration-review-header p,
.migration-detail-heading p {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.migration-review-actions,
.migration-review-filters,
.migration-group-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: center;
}

.migration-review-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.migration-review-summary > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: var(--space-12) var(--space-16);
  border-right: 1px solid var(--color-border);
}

.migration-review-summary > div:last-child {
  border-right: 0;
}

.migration-review-summary strong {
  color: var(--color-text-primary);
  font-size: var(--text-title);
}

.migration-review-summary span {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.migration-review-filters {
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.migration-filter {
  min-height: 2rem;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.migration-filter:hover,
.migration-filter.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.migration-review-workspace {
  display: grid;
  min-width: 0;
  min-height: 34rem;
  grid-template-columns: minmax(15rem, 0.34fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.migration-group-list,
.migration-group-detail {
  min-width: 0;
  max-height: min(62vh, 48rem);
  overflow: auto;
}

.migration-group-list {
  display: grid;
  align-content: start;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.migration-group-item {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.migration-group-item:hover {
  background: var(--color-surface);
}

.migration-group-item.active {
  box-shadow: inset 3px 0 0 var(--color-primary);
  background: var(--color-primary-soft);
}

.migration-group-title {
  overflow: hidden;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.migration-group-meta,
.migration-detail-kicker,
.migration-form-footer > span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.migration-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.migration-badge.convertToGate {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.migration-badge.conflict {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.migration-badge.reviewed,
.migration-badge.keepProject,
.migration-badge.keepInfo {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.migration-group-detail {
  display: grid;
  align-content: start;
  gap: var(--space-20);
  padding: var(--space-20);
}

.migration-detail-heading {
  align-items: start;
}

.migration-detail-heading h4 {
  margin-top: var(--space-4);
  color: var(--color-text-primary);
  font-size: var(--text-section);
}

.migration-detail-facts {
  display: grid;
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
  gap: var(--space-8) var(--space-16);
  margin: 0;
  padding: var(--space-16);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.migration-detail-facts dt,
.migration-detail-facts dd {
  min-width: 0;
  margin: 0;
  font-size: var(--text-caption);
}

.migration-detail-facts dt {
  color: var(--color-text-secondary);
}

.migration-detail-facts dd {
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
}

.migration-child-section,
.migration-warning-list,
.migration-review-form {
  display: grid;
  gap: var(--space-12);
}

.migration-child-section ul,
.migration-warning-list ul {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.migration-child-section li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.migration-child-section li span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.migration-warning-list {
  padding: var(--space-12);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.migration-review-form {
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

.migration-gate-fields {
  display: grid;
  grid-template-columns: minmax(12rem, 1.5fr) minmax(10rem, 1fr) minmax(7rem, 0.5fr);
  gap: var(--space-12);
  align-items: end;
}

.migration-gate-fields[hidden],
.migration-required-count[hidden] {
  display: none;
}

.migration-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-height);
}

.migration-review-note textarea {
  resize: vertical;
}

.migration-review-empty,
.migration-review-error,
.migration-list-empty {
  display: grid;
  place-items: center;
  gap: var(--space-8);
  min-height: 10rem;
  padding: var(--space-24);
  color: var(--color-text-secondary);
  text-align: center;
}

.migration-review-error {
  min-height: auto;
  color: var(--color-danger);
}

@media (max-width: 900px) {
  .migration-review-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .migration-review-summary > div:nth-child(3) {
    border-right: 0;
  }

  .migration-review-workspace {
    grid-template-columns: 1fr;
  }

  .migration-group-list {
    max-height: 18rem;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .migration-gate-fields {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .migration-review-header,
  .migration-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .migration-review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .migration-review-summary > div:nth-child(2n) {
    border-right: 0;
  }

  .migration-gate-fields {
    grid-template-columns: 1fr;
  }
}


/* src/styles/appEmptyStates.css */
.empty-state {
  display: grid;
  min-height: 18rem;
  place-items: center;
  align-content: center;
  padding: var(--space-24);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-align: center;
}

.empty-state h2 {
  margin-bottom: var(--space-8);
  font-size: var(--text-section);
}

.empty-state p {
  margin-bottom: 0;
}

@media (min-width: 60rem) {
  .app-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}


/* src/styles/appResponsive.css */
@media (max-width: 64rem) {
  .app-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-width: 0;
  }

  .sidebar {
    grid-template-columns: minmax(7.5rem, auto) minmax(10rem, 17rem) minmax(0, 1fr) auto auto;
    grid-template-rows: 2.65rem 2.35rem;
    gap: 0 var(--space-8);
    align-items: center;
    padding: 0 var(--space-12);
  }

  .brand span:last-child {
    display: block;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    padding-left: 0;
    border-right: 0;
  }

  .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    min-width: 0;
  }

  .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: 0;
    align-self: stretch;
    justify-self: center;
    max-width: 100%;
  }

  .today-progress {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    max-width: 100%;
  }

  .sidebar-nav {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    gap: var(--space-4);
    min-width: 0;
    overflow: visible;
  }

  .session-card {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
  }

  .sidebar .board-menu-trigger {
    min-height: 2.1rem;
    padding: 0 var(--space-8);
  }

  .sidebar .board-menu-trigger strong {
    font-size: 0.78rem;
  }

  .sidebar .board-menu-count {
    height: 1.15rem;
    min-width: 1.15rem;
    font-size: 0.62rem;
  }

  .sidebar .board-menu-trigger small {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.78rem;
  }

  .sidebar-nav .nav-button,
  .session-card button {
    min-height: 2rem;
    width: 2rem;
    min-width: 2rem;
  }

  .nav-button.icon-only span {
    font-size: 1.02rem;
  }

  .detail-pane {
    grid-column: 1;
    grid-row: 3;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .toolbar {
    align-items: stretch;
    overflow: visible;
  }

  .toolbar-primary,
  .toolbar-secondary {
    grid-template-columns: 1fr;
  }

  .toolbar-secondary {
    display: grid;
  }

  .filters,
  .done-column-field,
  .tag-filter {
    grid-area: auto;
    justify-self: stretch;
    padding-right: 0;
  }
}

/* Compact shell boundary; medium/Fold starts at 600px. */
@media (max-width: 37.4375rem) {
  .app-shell {
    min-width: 0;
    padding: 0;
  }

  .app-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    min-height: var(--doneit-viewport-height, 100dvh);
    border: 0;
    border-radius: 0;
  }

  .sidebar {
    display: grid;
    grid-template-columns: minmax(6rem, auto) minmax(8rem, 1fr) auto auto;
    grid-template-rows: 2.55rem 2.25rem;
    padding: 0 var(--space-10);
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .brand small {
    display: none;
  }

  .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
  }

  .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .today-progress {
    display: none;
  }

  .sidebar-nav {
    grid-column: 3;
    grid-row: 1;
    order: 0;
  }

  .session-card {
    grid-column: 4;
    grid-row: 1;
    justify-content: end;
  }

  .session-card span {
    display: none;
  }

  .nav-button {
    grid-template-columns: var(--space-20, 1.25rem) auto auto;
  }

  .workspace {
    padding: var(--space-16);
  }

  .detail-pane {
    grid-column: 1;
    padding: var(--space-16);
  }

  .toolbar,
  .workspace-header {
    align-items: stretch;
  }

  .toolbar-primary,
  .toolbar-secondary {
    grid-template-columns: 1fr;
  }

  .toolbar-secondary {
    display: grid;
  }

  .filters,
  .done-column-field,
  .tag-filter {
    grid-area: auto;
    justify-self: stretch;
    padding-right: 0;
  }
}

@media (max-width: 37.4375rem) {
  .session-card .account-menu:not([hidden]) #auth-logout {
    position: static;
    display: flex;
    width: 100%;
  }
}


/* src/styles/appDenseLayout.css */
/* doneIt dense top stack: preserve controls, return vertical space to cards. */
.app-frame {
  --task-top-stack-height: 14.5rem;
}

.sidebar {
  min-height: 2.85rem;
}

.brand-mark {
  width: 1.65rem;
  height: 1.65rem;
}

.brand strong {
  font-size: 0.86rem;
}

.brand small {
  font-size: 0.58rem;
}

.header-view-nav .view-button {
  padding: 0 var(--space-10);
  font-size: 0.72rem;
}

.session-card button,
.nav-button.icon-only {
  width: 2.2rem;
  min-width: 2.2rem;
  min-height: 2.2rem;
}

.home-overview {
  height: 5.15rem;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-16);
}

.home-daily-summary {
  grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr);
}

.home-progress-card {
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-8);
}

.home-progress-ring {
  width: 2.35rem;
  height: 2.35rem;
}

.home-progress-copy {
  gap: var(--space-2);
}

.home-progress-copy strong {
  font-size: 0.8rem;
}

.home-progress-copy span,
.home-summary-counter span {
  font-size: 0.64rem;
}

.home-summary-counter small {
  font-size: 0.56rem;
}

.home-progress-copy .home-progress-activity span {
  font-size: 0.5rem;
}

.home-progress-copy .home-progress-activity b {
  font-size: 0.56rem;
}

.home-progress-copy i {
  height: 0.2rem;
  margin-top: var(--space-2);
}

.home-summary-counter strong {
  font-size: 0.9rem;
}

.home-insight-card,
.home-deadline-card,
.home-ai-suggestions-card {
  gap: var(--space-2);
  padding: var(--space-6) var(--space-8);
}

.home-insight-card p,
.home-deadline-card p,
.home-insight-card em,
.home-deadline-card em,
.home-ai-suggestions-card p,
.home-ai-suggestions-card em {
  font-size: 0.62rem;
}

.home-tag-quick-filters {
  min-height: 2.25rem;
  padding: var(--space-4) var(--space-16);
}

.home-tag-quick-filters.expanded .tag-filter-chips {
  max-height: 5.6rem;
}

.toolbar {
  gap: var(--space-4);
  padding: var(--space-5) var(--space-16) var(--space-6);
}

.toolbar-primary,
.toolbar-secondary {
  gap: var(--space-6);
}

.toolbar-field {
  gap: var(--space-2);
}

.task-search-control,
.sort-menu-trigger,
.overview-columns-field select,
.overview-card-size-field select,
.project-filter select,
.project-view-button,
.toolbar-icon-button {
  height: 2.1rem;
  min-height: 2.1rem;
}

.task-search-control {
  min-height: 2.1rem;
}

.task-search-control input {
  height: 1.9rem;
}

.done-switch-label {
  min-height: 2.1rem;
}

.filter-group {
  min-height: 2rem;
  padding: 0.125rem;
}

.filter-button {
  min-height: 1.7rem;
  padding: 0 var(--space-10);
  font-size: 0.72rem;
}

.filter-count,
.tag-filter-chip span {
  min-width: 1.05rem;
  height: 1.05rem;
  font-size: 0.64rem;
}

.tag-filter-label {
  line-height: 1.65rem;
}

.tag-filter-chips {
  gap: var(--space-4);
  padding: 0;
}

.tag-filter-chip,
.tag-filter-reset,
.tag-filter-expand,
.tag-filter-empty {
  min-height: 1.6rem;
  padding: 0 var(--space-8);
  font-size: 0.7rem;
}

.tag-filter-actions,
.tag-filter-expand,
.tag-filter-reset {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
}


/* src/styles/adaptiveCompactShell.css */
/* Compact adaptive shell. Keep this feature module after the expanded shell
   so compact geometry wins without a parallel device-specific layout. */
/* Keep this boundary aligned with adaptiveLayoutBreakpoints.compactMax. */
@media (max-width: 37.4375rem) {
  .app-frame {
    --task-top-stack-height: auto;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sidebar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 2.75rem 2.45rem 2.55rem;
    gap: 0 var(--space-6);
    min-width: 0;
    padding-right: max(var(--space-8), env(safe-area-inset-right, 0px));
    padding-left: max(var(--space-8), env(safe-area-inset-left, 0px));
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .brand span:last-child,
  .brand small {
    display: none;
  }

  .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
  }

  .session-card {
    grid-column: 3;
    grid-row: 1;
  }

  .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .header-view-nav::-webkit-scrollbar,
  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }

  .sidebar-nav {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    justify-content: start;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .sidebar-nav .nav-button,
  .session-card button {
    width: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
  }

  .sidebar-nav .history-button:disabled {
    display: none;
  }

  .workspace {
    padding: 0;
  }

  .home-overview {
    grid-template-columns: minmax(32rem, 1fr) 12rem 11rem;
    gap: var(--space-6);
    height: 5.35rem;
    padding: var(--space-6) var(--space-10);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .home-daily-summary,
  .home-insight-card,
  .home-deadline-card,
  .home-ai-suggestions-card {
    scroll-snap-align: start;
  }

  .home-tag-quick-filters {
    padding: var(--space-4) var(--space-10);
  }

  .toolbar {
    gap: var(--space-5);
    padding: var(--space-6) var(--space-10);
  }

  .toolbar-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .toolbar-primary .task-search,
  .toolbar-primary .project-control,
  .toolbar-primary .team-filter-field,
  .toolbar-primary .project-view-field {
    grid-column: 1 / -1;
  }

  .overview-columns-field {
    display: none !important;
  }

  .toolbar-primary .done-column-field,
  .toolbar-primary .blocked-tasks-field,
  .overview-card-size-field,
  .task-sort {
    min-width: 0;
  }

  .toolbar-result-count {
    align-self: center;
    justify-self: end;
  }

  .filters {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .filter-group {
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
  }

  .task-search-control,
  .sort-menu-trigger,
  .overview-card-size-field select,
  .project-filter select,
  .project-view-button,
  .toolbar-icon-button,
  .done-switch-label {
    min-height: 2.6rem;
  }

  .workspace > section[data-screen="settings"]:not([hidden]),
  .workspace > section[data-screen="users"]:not([hidden]) {
    padding: var(--space-12) var(--space-10) calc(var(--space-32) + env(safe-area-inset-bottom, 0px));
  }
}

/* A phone requesting the browser's desktop site uses a wide CSS viewport and
   therefore keeps the desktop layout. Explicitly allow native page pinch zoom
   on touch hardware without changing mouse/desktop geometry. */
@media (hover: none) and (pointer: coarse) {
  html,
  body,
  .app-shell,
  .app-frame,
  .workspace,
  .task-work-area,
  .task-panel {
    touch-action: pan-x pan-y pinch-zoom;
  }
}

.mobile-workspace-controls {
  display: none;
}

.mobile-card-count,
.mobile-active-selection,
.session-card .mobile-global-search-button,
.session-card .mobile-header-menu-button,
.session-card .mobile-dependency-finder-button,
.mobile-sidebar-back-button,
.mobile-sidebar-logout-button,
.session-logout-label {
  display: none;
}

@media (max-width: 37.4375rem) {
  .session-card .mobile-global-search-button {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--color-text-primary);
  }

  .session-card .mobile-global-search-button[aria-expanded="true"] {
    border-color: var(--color-border);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .session-card .mobile-global-search-button svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
}

@media (hover: none), (pointer: coarse) {
  .header-search-launch {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
  }
}


/* src/styles/adaptiveCompactCommandBar.css */
/* Compact adaptive command bar. The optional panels float above the workspace,
   so opening a tool never permanently consumes the card canvas. */
/* 599px is the compact shell boundary from adaptiveLayoutState.js. */
@media (max-width: 37.4375rem) {
  .app-frame {
    grid-template-rows: 2.75rem minmax(0, 1fr);
  }

  .sidebar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 2.75rem;
    min-height: 2.75rem;
  }

  .header-view-nav,
  .sidebar-nav {
    display: none;
  }

  .workspace > section[data-screen="tasks"]:not([hidden]) {
    position: relative;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .mobile-workspace-controls {
    position: relative;
    z-index: 32;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 3rem;
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0.25rem max(var(--space-8), env(safe-area-inset-right, 0px)) 0.25rem max(var(--space-8), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 0.2rem 0.7rem var(--shadow-ink-05);
  }

  .app-frame[data-mobile-panel="search"] .mobile-card-count,
  .app-frame[data-mobile-panel="search"] .mobile-active-selection {
    display: none;
  }

  .app-frame[data-mobile-panel="search"] .mobile-workspace-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .app-frame[data-mobile-panel="search"] .mobile-workspace-controls > button {
    display: none;
  }

  .app-frame[data-mobile-panel="search"] #task-toolbar { display: none; }

  .app-frame[data-mobile-panel="search"] .task-command-tools {
    display: block;
    width: 100%;
    min-width: 0;
    grid-column: 1;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-frame[data-mobile-panel="search"] .task-command-tools > :not(.task-search) {
    display: none;
  }

  .app-frame[data-mobile-panel="search"] .task-command-tools .task-search {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .app-frame:not([data-mobile-panel="search"]) :is(.task-command-primary, .mobile-workspace-controls) > .task-command-tools {
    display: none;
  }

  .mobile-task-filter-panel {
    position: relative;
    z-index: 31;
    display: grid;
    gap: var(--space-8);
    padding: var(--space-10) max(var(--space-12), env(safe-area-inset-right, 0px)) var(--space-12) max(var(--space-12), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 0.35rem 0.8rem var(--shadow-ink-10);
  }

  .mobile-task-filter-panel[hidden] { display: none; }

  .mobile-task-filter-field {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
  }

  .mobile-task-filter-field + .mobile-task-filter-field {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-8);
  }

  .mobile-task-filter-field select {
    min-width: 0;
    max-width: 68%;
    min-height: 2.5rem;
    padding: 0 var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
    font: inherit;
  }

  .mobile-task-filter-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
  }

  .mobile-task-filter-action small { color: var(--color-text-tertiary); }
  .mobile-task-filter-action strong { min-width: 1.6rem; color: var(--color-text-primary); }

  .app-frame[data-mobile-panel="filters"] #task-toolbar { display: none; }

  .mobile-workspace-controls .mobile-workspace-menu-button {
    display: none;
  }

  .mobile-card-count {
    display: flex;
    flex: 0 0 1.5rem;
    min-height: 1.5rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0 max(var(--space-10), env(safe-area-inset-right, 0px));
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
    background: color-mix(in srgb, var(--color-bg) 72%, var(--color-surface));
    color: var(--color-text-secondary);
    font-size: 0.66rem;
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }

  .mobile-active-selection {
    display: flex;
    flex: 0 0 auto;
    min-height: 1.65rem;
    align-items: center;
    padding: 0 max(var(--space-10), env(safe-area-inset-right, 0px));
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
    background: color-mix(in srgb, var(--color-primary-soft) 56%, var(--color-surface));
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .session-card #auth-logout {
    display: none;
  }

  .session-card .mobile-header-menu-button {
    display: grid;
    width: 2.45rem;
    min-height: 2.45rem;
    border-color: transparent;
    background: transparent;
    color: var(--color-text-primary);
  }

  .session-card .mobile-dependency-finder-button {
    display: grid;
    width: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    align-self: center;
    padding: 0;
    border-color: transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text-primary);
  }

  .session-card .mobile-dependency-finder-button svg {
    width: 1.5rem;
    height: 1.12rem;
  }

  .session-card .mobile-header-menu-button > span {
    display: block;
    font-size: 1.15rem;
    line-height: 1;
  }

  .session-card .mobile-header-menu-button:hover,
  .session-card .mobile-header-menu-button[aria-pressed="true"],
  .session-card .mobile-dependency-finder-button:hover,
  .session-card .mobile-dependency-finder-button[aria-pressed="true"] {
    border-color: var(--color-border);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .mobile-workspace-controls button {
    display: inline-flex;
    min-width: 0;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.35rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
  }

  .mobile-workspace-controls button[aria-pressed="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .mobile-workspace-controls button > span {
    font-size: 1.15rem;
    line-height: 1;
  }

  .mobile-workspace-controls button > small {
    font-size: 0.68rem;
    font-weight: var(--font-weight-strong);
  }

  .home-overview,
  .home-tag-quick-filters,
  .toolbar {
    display: none;
  }

  .task-work-area {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }

  .app-frame[data-mobile-panel="status"] .home-overview {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 auto;
    box-shadow: 0 0.8rem 1.8rem var(--shadow-ink-18);
  }

  .app-frame[data-mobile-panel="search"] .toolbar,
  .app-frame[data-mobile-panel="filters"] .toolbar {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 auto;
    max-height: min(48dvh, 24rem);
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 0.8rem 1.8rem var(--shadow-ink-18);
  }

  .app-frame[data-mobile-panel="search"] .toolbar-primary > :not(.task-search),
  .app-frame[data-mobile-panel="search"] .toolbar-secondary,
  .app-frame[data-mobile-panel="search"] .overview-quick-create-host {
    display: none !important;
  }

  .app-frame[data-mobile-panel="search"] .toolbar-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .app-frame[data-mobile-panel="filters"] .toolbar-primary .task-search {
    display: none;
  }

  .app-frame[data-mobile-panel="filters"] .home-tag-quick-filters {
    position: relative;
    z-index: 2;
    display: grid;
    flex: 0 0 auto;
    box-shadow: 0 0.35rem 0.8rem var(--shadow-ink-10);
  }

  .app-frame[data-mobile-panel="filters"] .toolbar {
    max-height: none;
    overflow: visible;
  }

  .app-frame[data-mobile-panel="menu"] .header-view-nav,
  .app-frame[data-mobile-panel="menu"] .sidebar-nav {
    display: flex;
    width: 100%;
    max-width: none;
    padding: 0.25rem max(var(--space-8), env(safe-area-inset-right, 0px)) 0.25rem max(var(--space-8), env(safe-area-inset-left, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: none;
  }

  .app-frame[data-mobile-panel="menu"] .workspace {
    visibility: hidden;
  }

  .app-frame[data-mobile-panel="menu"] .sidebar {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 2.9rem auto auto auto;
    gap: 0;
    align-content: start;
    align-items: stretch;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--color-surface);
  }

  .app-frame[data-mobile-panel="menu"] .brand {
    grid-column: 1;
    grid-row: 1;
    min-height: 2.9rem;
    padding-left: max(var(--space-12), env(safe-area-inset-left, 0px));
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .app-frame[data-mobile-panel="menu"] .mobile-sidebar-back-button {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 max(var(--space-12), env(safe-area-inset-right, 0px));
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: var(--font-weight-strong);
  }

  .app-frame[data-mobile-panel="menu"] .mobile-sidebar-back-button > span:first-child {
    font-size: 1.2rem;
    line-height: 1;
  }

  .app-frame[data-mobile-panel="menu"] .sidebar-board-section {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    gap: var(--space-8);
    padding: var(--space-12) max(var(--space-12), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--color-border);
  }

  .app-frame[data-mobile-panel="menu"] .sidebar-section-title {
    display: flex;
  }

  .app-frame[data-mobile-panel="menu"] .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 3;
    height: auto;
    justify-content: start;
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--color-border);
  }

  .app-frame[data-mobile-panel="menu"] .sidebar-nav {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: 3rem;
    justify-content: center;
    padding-block: var(--space-8);
    border-bottom: 1px solid var(--color-border);
  }

  .app-frame[data-mobile-panel="menu"] .mobile-sidebar-logout-button {
    grid-column: 1 / -1;
    grid-row: 5;
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-8);
    margin-top: var(--space-16);
    padding: 0 max(var(--space-16), env(safe-area-inset-left, 0px));
    border: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.78rem;
  }

  .app-frame[data-mobile-panel="menu"] .session-card {
    display: none;
  }

  .app-frame[data-mobile-panel="menu"] .session-card #auth-logout {
    display: none;
  }

  .app-frame[data-mobile-panel="menu"] .session-card #auth-logout > span:first-child {
    font-size: 1rem;
  }

  .app-frame[data-mobile-panel="menu"] .session-card .session-logout-label {
    display: inline;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
  }
}


/* src/styles/adaptiveWorkspaceSearch.css */
/* One mobile search surface for every workspace. The persistent header search
   opens here and replaces the two command buttons; view-owned search fields
   remain as state/event sources but never create a second visual row. */
.mobile-view-search { display: none; }

@media (max-width: 52.4375rem) {
  :root:is([data-layout-size="compact"], [data-layout-size="medium"])
  .workspace > section[data-screen="tasks"]:not([hidden]) > .mobile-workspace-controls {
    position: relative;
    z-index: 32;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0.25rem max(var(--space-8), env(safe-area-inset-right, 0px)) 0.25rem max(var(--space-8), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .mobile-workspace-controls .mobile-workspace-menu-button { display: none; }

  .mobile-workspace-controls > button {
    display: inline-flex;
    min-width: 0;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.35rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
  }

  .mobile-workspace-controls > button[aria-pressed="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .app-frame[data-mobile-panel="search"] .mobile-workspace-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-frame[data-mobile-panel="search"] .mobile-workspace-controls > button {
    display: none;
  }

  .app-frame[data-mobile-panel="search"] .mobile-view-search:not([hidden]) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    align-items: center;
    gap: var(--space-8);
    padding: 0 var(--space-12);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
    color: var(--color-primary);
  }

  .mobile-view-search svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .mobile-view-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
  }

  .mobile-view-search input::-webkit-search-cancel-button { opacity: 1; }

  .app-frame[data-mobile-panel="search"] .task-command-tools { display: none; }

  .app-shell[data-active-view="projects"] .planning-workspace-search,
  .app-shell[data-active-view="calendar"] .calendar-search,
  .app-shell[data-active-view="infos"] .knowledge-search {
    display: none;
  }

  :root:not(.has-unified-search) .app-shell[data-active-view="projects"] .planning-workspace-toolbar:not(:has(.bulk-toolbar:not([hidden]))) {
    display: none;
  }
}

/* The phone overview is one document scroll surface. This lets the board and
   command header scroll away with the cards and return naturally at page top. */
@media (max-width: 37.4375rem) {
  html:has(:is(#task-list, .unified-search-cards).overview-list),
  body:has(:is(#task-list, .unified-search-cards).overview-list) {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .app-shell,
  body:has(:is(#task-list, .unified-search-cards).overview-list) .app-frame {
    height: auto;
    min-height: var(--doneit-viewport-height, 100dvh);
    overflow: visible;
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .app-frame {
    grid-template-rows: 2.75rem auto;
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .workspace,
  body:has(:is(#task-list, .unified-search-cards).overview-list) .workspace > section[data-screen="tasks"]:not([hidden]),
  body:has(:is(#task-list, .unified-search-cards).overview-list) .task-work-area,
  body:has(:is(#task-list, .unified-search-cards).overview-list) .task-panel {
    height: auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior-y: auto;
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .workspace > section[data-screen="tasks"]:not([hidden]) {
    min-height: calc(var(--doneit-viewport-height, 100dvh) - 2.75rem);
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .task-work-area {
    flex: 1 0 auto;
    min-height: calc(var(--doneit-viewport-height, 100dvh) - 5.75rem);
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .task-panel {
    min-height: inherit;
  }
}

/* Fold follows the same mobile command-row contract as Phone: the search
   replaces Status and Filter in their stable row instead of opening another. */
@media (min-width: 37.5rem) and (max-width: 52.4375rem) {
  :root[data-layout-size="medium"] .app-shell[data-active-view="tasks"]
  .workspace > section[data-screen="tasks"] > .mobile-workspace-controls {
    position: relative;
    z-index: 32;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0.25rem var(--workspace-content-inset);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .app-shell[data-active-view="tasks"] .mobile-workspace-controls .mobile-workspace-menu-button { display: none; }

  .app-shell[data-active-view="tasks"] .mobile-workspace-controls > button {
    display: inline-flex;
    min-width: 0;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.35rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
  }

  .app-shell[data-active-view="tasks"] .mobile-workspace-controls > button[aria-pressed="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .app-shell[data-active-view="tasks"] .mobile-workspace-controls > button > span {
    font-size: 1.15rem;
    line-height: 1;
  }

  .app-shell[data-active-view="tasks"] .mobile-workspace-controls > button > small {
    font-size: 0.68rem;
    font-weight: var(--font-weight-strong);
  }

  .app-shell[data-active-view="tasks"] .app-frame[data-mobile-panel="search"] .mobile-workspace-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell[data-active-view="tasks"] .app-frame[data-mobile-panel="search"] .mobile-workspace-controls > button {
    display: none;
  }

  .app-shell[data-active-view="tasks"] .app-frame[data-mobile-panel="search"] .task-command-tools {
    display: block;
    width: 100%;
    min-width: 0;
    grid-column: 1;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell[data-active-view="tasks"] .app-frame[data-mobile-panel="search"] .task-command-tools > :not(.task-search) {
    display: none;
  }

  .app-shell[data-active-view="tasks"] .app-frame[data-mobile-panel="search"] .task-command-tools .task-search {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .app-shell[data-active-view="tasks"] .app-frame:not([data-mobile-panel="search"])
  :is(.task-command-primary, .mobile-workspace-controls) > .task-command-tools {
    display: none;
  }

  .app-shell[data-active-view="tasks"] .mobile-task-filter-panel {
    position: relative;
    z-index: 31;
    display: grid;
    gap: var(--space-8);
    padding: var(--space-10) var(--workspace-content-inset) var(--space-12);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .app-shell[data-active-view="tasks"] .mobile-task-filter-panel[hidden] { display: none; }

  .app-shell[data-active-view="tasks"] .mobile-task-filter-field {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
  }

  .app-shell[data-active-view="tasks"] .mobile-task-filter-field + .mobile-task-filter-field {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-8);
  }

  .app-shell[data-active-view="tasks"] .mobile-task-filter-field select {
    min-width: 0;
    max-width: 68%;
    min-height: 2.5rem;
    padding: 0 var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
    font: inherit;
  }

  .app-shell[data-active-view="tasks"] .app-frame[data-mobile-panel="status"] .home-overview { display: grid; }
}

/* Phone status: use the viewport width and vertical grouping instead of a
   very wide horizontal status rail. */
@media (max-width: 37.4375rem) {
  .app-frame[data-mobile-panel="status"] .home-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    height: auto;
    max-height: min(58dvh, 28rem);
    padding: var(--space-8);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: none;
  }

  .app-frame[data-mobile-panel="status"] .home-daily-summary {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-width: 0;
  }

  .app-frame[data-mobile-panel="status"] .home-progress-card {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .app-frame[data-mobile-panel="status"] .home-summary-counters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
  }

  .app-frame[data-mobile-panel="status"] .home-summary-counter {
    min-height: 2.8rem;
    border-top: 1px solid var(--color-border);
  }

  .app-frame[data-mobile-panel="status"] .home-summary-counter:nth-child(-n + 3) {
    border-top: 0;
  }

  .app-frame[data-mobile-panel="status"] .home-insight-card,
  .app-frame[data-mobile-panel="status"] .home-deadline-card,
  .app-frame[data-mobile-panel="status"] .home-ai-suggestions-card {
    height: auto;
    min-height: 4.5rem;
  }

  .app-frame[data-mobile-panel="filters"] .home-tag-quick-filters {
    grid-template-columns: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .app-frame[data-mobile-panel="filters"] .home-tag-quick-filters .tag-filter-chips {
    flex-wrap: nowrap !important;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
}


/* src/styles/pwaInstall.css */
.pwa-install-guide {
  width: min(28rem, calc(100vw - (2 * var(--workspace-content-inset))));
  padding: var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

.pwa-install-guide::backdrop {
  background: color-mix(in srgb, var(--color-text-primary) 32%, transparent);
  backdrop-filter: blur(0.2rem);
}

.pwa-install-guide[open] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-16);
  align-items: start;
}

.pwa-install-guide h2,
.pwa-install-guide p {
  margin: 0;
}

.pwa-install-guide p {
  margin-top: var(--space-8);
  line-height: 1.5;
}

.pwa-install-guide-icon {
  display: grid;
  width: var(--space-44);
  height: var(--space-44);
  border-radius: var(--radius-md);
  background: var(--color-warning);
  color: var(--color-icon-strong);
  font-size: 1.5rem;
  font-weight: var(--font-weight-strong);
  place-items: center;
}

.pwa-install-guide > .button {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: var(--space-44);
}

@media (max-width: 37.4375rem) {
  .pwa-install-guide {
    align-self: end;
    width: calc(100vw - (2 * var(--workspace-content-inset)));
    margin-bottom: max(var(--workspace-content-inset), env(safe-area-inset-bottom));
  }
}


/* src/styles/mainTopicColors.css */
.knowledge-root-card.main-topic-colored,
.knowledge-topic-item.main-topic-colored,
.knowledge-document-card.main-topic-colored,
.knowledge-task-row.main-topic-colored,
.planning-workspace .project-hierarchy-row.main-topic-colored {
  border-left-color: var(--main-topic-color);
  background: color-mix(in srgb, var(--main-topic-color) 7%, var(--color-surface));
}

.knowledge-root-card.main-topic-colored h2,
.knowledge-topic-item.main-topic-colored .knowledge-navigation-label,
.knowledge-document-card.main-topic-colored h3,
.knowledge-task-row.main-topic-colored .knowledge-task-title,
.planning-workspace .project-hierarchy-row.main-topic-colored .project-row-title {
  color: var(--main-topic-color);
}

.main-topic-color-submenu { position: relative; }
.knowledge-type-menu .main-topic-color-trigger { grid-template-columns: 1rem minmax(0, 1fr) auto; width: 100%; }
.main-topic-color-palette {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: calc(100% + var(--space-4));
  z-index: 2;
  display: none;
  width: 7.8rem;
  grid-template-columns: repeat(4, 1.35rem);
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.main-topic-color-submenu:hover .main-topic-color-palette,
.main-topic-color-submenu:focus-within .main-topic-color-palette,
.main-topic-color-submenu.open .main-topic-color-palette { display: grid; }
.knowledge-type-menu .main-topic-color-swatch {
  display: block;
  width: 1.35rem;
  min-width: 1.35rem;
  height: 1.35rem;
  min-height: 1.35rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--main-topic-color);
}
.knowledge-type-menu .main-topic-color-swatch.clear {
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, transparent 44%, var(--color-danger) 46% 54%, transparent 56%);
}
.knowledge-type-menu .main-topic-color-swatch.active { border-color: var(--color-text-primary); }
.planning-row-context-menu { position: fixed; z-index: 260; inset: auto; }
.planning-row-context-menu .knowledge-type-menu { width: max-content; min-width: 11.5rem; }


/* src/styles/mobileProjectPicker.css */
.mobile-project-picker { display: none; }

.mobile-project-dialog {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-modal);
}

.mobile-project-dialog[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.mobile-project-dialog::backdrop {
  background: var(--color-backdrop);
  backdrop-filter: blur(2px);
}

.mobile-project-dialog > header {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  padding: max(var(--space-6), env(safe-area-inset-top, 0px)) var(--space-12) 0 var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.mobile-project-dialog-close {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 1.5rem;
}

.mobile-project-dialog-search {
  width: calc(100% - 1.5rem);
  min-height: 2.75rem;
  margin: var(--space-10) var(--space-12) var(--space-6);
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font: inherit;
}

.mobile-project-dialog-search:focus { border-color: var(--color-primary); }

.mobile-project-dialog-list {
  display: grid;
  max-height: none;
  align-content: start;
  gap: var(--space-8);
  padding: var(--space-4) 0 var(--space-8);
  overflow-y: auto;
}

.mobile-project-dialog-group { display: grid; gap: var(--space-2); }
.mobile-project-dialog-group > header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-8) var(--space-16) var(--space-4); }
.mobile-project-dialog-group > header strong { color: var(--color-text-secondary); font-size: var(--text-caption); }
.mobile-project-dialog-group > header small { color: var(--color-text-tertiary); font-size: var(--text-caption); }

.mobile-project-dialog-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) 1.5rem;
  min-height: 3.6rem;
  gap: var(--space-8);
  align-items: center;
  margin: 0 var(--space-8);
  padding: var(--space-6) var(--space-10);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
}

.mobile-project-dialog-row:hover,
.mobile-project-dialog-row.active {
  background: var(--color-primary-soft);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.mobile-project-dialog-row .project-list-copy { gap: 0.2rem; }
.mobile-project-dialog-row .project-list-title-line > strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-project-dialog-row .project-list-progress { min-width: 0; }
.mobile-project-dialog-row .project-list-progress small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-project-dialog-selected { color: var(--color-primary); font-weight: var(--font-weight-strong); text-align: center; }

.mobile-project-dialog-create {
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

@media (max-width: 52rem) {
  .mobile-project-picker {
    display: flex;
    min-width: 0;
    padding: 0 var(--workspace-content-inset);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .mobile-project-picker-trigger {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto 1.25rem;
    gap: var(--space-8);
    align-items: center;
    padding: 0 var(--space-8);
    border: 0;
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
  }

  .mobile-project-picker-icon { width: 1.75rem; height: 1.75rem; }
  .mobile-project-picker-copy { display: grid; min-width: 0; }
  .mobile-project-picker-copy small { color: var(--color-text-tertiary); font-size: 0.62rem; }
  .mobile-project-picker-copy strong { overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-project-picker-count { color: var(--color-text-tertiary); font-size: var(--text-caption); }
  .mobile-project-picker-chevron { color: var(--color-text-secondary); font-size: 1rem; text-align: center; }
}


/* src/styles/itemCreationAndLinks.css */
.item-create-dialog {
  width: min(42rem, calc(100vw - var(--space-32)));
  max-height: calc(100dvh - var(--space-32));
  padding: var(--space-24);
  overflow: auto;
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.item-create-dialog::backdrop { background: var(--shadow-ink-42); }
.item-create-dialog form,
.item-create-dialog label,
.rich-link-dialog label { display: grid; gap: var(--space-8); min-width: 0; }
.item-create-dialog form { gap: var(--space-16); }
.item-create-dialog h2 { margin: 0; }
.item-create-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.item-create-context select { max-width: 100%; }
.item-create-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.item-create-hint { color: var(--color-text-secondary); }
.quick-create-form:not(.editing) > :is(.item-create-hint, .item-create-target) { display: none; }
.quick-create-form.editing .quick-create-controls { display: flex; flex-wrap: wrap; }
.quick-create-controls > * { flex: 1 1 auto; }
.item-create-target { grid-column: 1 / -1; justify-self: start; max-width: 100%; white-space: normal; text-align: start; }
.planning-create-central > .item-create-target { grid-column: 1 / -1; }
.knowledge-create-form { flex-wrap: wrap; }
.knowledge-create-form > input { flex: 1 1 100%; }
.knowledge-create-form > .item-create-target,
.knowledge-create-form > .item-create-hint { flex: 1 1 100%; }
.global-item-create { flex: 0 0 auto; white-space: nowrap; }
.search-result-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-8) var(--workspace-content-inset); }
.search-result-actions:empty { display: none; }
.search-result-actions button { max-width: 100%; white-space: normal; line-height: var(--line-normal); text-align: start; }
.knowledge-search-snippet { grid-column: 2 / -1; white-space: normal; }
.rich-notes-toolbar { position: relative; }
.rich-notes-toolbar:has(.rich-link-dialog) { flex-wrap: wrap; }
.rich-link-dialog { display: grid; flex: 0 0 100%; grid-column: 1 / -1; order: 4; gap: var(--space-12); width: 100%; padding: var(--space-12); }
.rich-link-dialog input { width: 100%; }
.file-path-feedback { display: grid; gap: var(--space-8); padding: var(--space-12); }
.rich-notes a[href^="file:"] { cursor: copy; }
.rich-notes a[href^="file:"]::before { content: ""; display: inline-block; width: var(--space-12); height: var(--space-12); margin-inline-end: var(--space-4); background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l4 4v16H6V2zm2 2v16h8V8h-4V4H8zm6 0v2h2l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.search-match-target { outline: var(--focus-ring); outline-offset: var(--space-4); }
::highlight(doneit-search) { background: var(--color-primary-soft); color: var(--color-text-primary); }

@media (max-width: 52.4375rem) {
  .item-create-dialog { padding: var(--space-16); }
  .item-create-context { grid-template-columns: minmax(0, 1fr); }
  .item-create-actions .button,
  .rich-link-dialog .button { min-height: var(--control-height-lg); }
  :root:is([data-layout-size="compact"], [data-layout-size="medium"])
  .workspace > section[data-screen="tasks"]:not([hidden]) > .mobile-workspace-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: calc(var(--control-height-lg) + var(--space-8)); }
  .mobile-workspace-controls > .global-item-create { min-height: var(--control-height-lg); color: var(--color-primary); }
  .app-frame[data-mobile-panel="search"] .mobile-workspace-controls > .global-item-create { display: none; }
  .global-item-create { min-height: var(--control-height-lg); }
}


/* src/styles/cardHistory.css */
.card-history {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.card-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.card-history-descendants {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-body-small);
}

.card-history-day {
  display: grid;
  gap: var(--space-4);
}

.card-history-day > h3 {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-small);
  font-weight: var(--font-weight-strong);
}

.card-history-list,
.card-history-group-events {
  display: grid;
  gap: var(--space-4);
}

.card-history-event,
.card-history-group > summary {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.card-history-group > summary {
  cursor: pointer;
  list-style: none;
}

.card-history-group > summary::-webkit-details-marker { display: none; }

.card-history-group[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.card-history-group-events {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-surface-subtle);
}

.card-history-event.nested {
  border: 0;
  background: transparent;
}

.card-history-event.pending { border-style: dashed; }

.card-history-time {
  color: var(--color-text-muted);
  font-size: var(--text-body-small);
}

.card-history-main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.card-history-main > span,
.card-history-card,
.card-history-diff,
.card-history-state {
  color: var(--color-text-muted);
  font-size: var(--text-body-small);
}

.card-history-diff { overflow-wrap: anywhere; }

.card-history-state {
  margin: 0;
  padding: var(--space-4);
  text-align: center;
}

.card-history-state.error { color: var(--color-danger); }
.card-history-more { justify-self: center; }


/* src/styles/tasks.css */
/* src/styles/tasksOverviewForms.css */
.task-form {
  width: min(100%, 22rem);
  min-width: min(100%, 17rem);
  justify-self: end;
}

.header-task-form {
  display: none;
}

.task-form-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) auto;
  gap: var(--space-8);
}

.task-form input,
.task-search-control input,
.project-filter select,
.template-control select {
  min-width: 0;
  height: var(--space-40);
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background: var(--color-surface);
  text-overflow: ellipsis;
  }

.task-search {
  min-width: min(100%, 18rem);
}

.task-search-control {
  display: grid;
  grid-template-columns: var(--space-24) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: var(--space-40);
  padding-left: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.task-sort,
.template-control,
.project-filter {
  display: grid;
}

.sort-menu-control {
  position: relative;
  min-width: 0;
}

.sort-menu-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
  width: 100%;
  min-width: 0;
  height: var(--space-40);
  padding: 0 var(--space-12) 0 var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
  text-align: left;
}

.sort-menu-trigger:hover,
.sort-menu-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.sort-menu-trigger:focus {
  outline: var(--focus-ring);
}

.sort-menu-trigger span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sort-menu-trigger span:last-child {
  color: var(--color-primary);
  font-size: var(--text-title);
  line-height: 1;
}

.sort-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--space-4));
  right: 0;
  left: auto;
  width: min(13rem, calc(100vw - 2rem));
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.sort-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-32) var(--space-32);
  gap: var(--space-4);
  align-items: center;
  min-height: var(--space-36);
  padding: var(--space-2);
}

.sort-menu-label {
  min-width: 0;
  padding: 0 var(--space-8);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sort-direction-button {
  display: inline-grid;
  width: var(--space-32);
  height: var(--space-32);
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-title);
  font-weight: var(--font-weight-strong);
}

.sort-direction-button:hover,
.sort-direction-button.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.template-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-32);
  gap: var(--space-8);
  align-items: center;
}

.project-control-row {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.project-control-row .project-add-button {
  display: none;
}

.project-control-row .project-filter {
  flex: 1 1 auto;
}

.task-search-control input {
  height: calc(var(--control-height-sm) - 2px);
  padding: 0 var(--space-8) 0 0;
  border: 0;
}

.task-search-control input::-webkit-search-cancel-button {
  cursor: pointer;
}

.task-form input:focus,
.task-search-control input:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.task-search-control input:focus {
  outline: 0;
}

.task-search-control:focus-within {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.template-control select,
.project-filter select {
  min-width: 0;
  padding-right: var(--space-32);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.project-filter select {
  width: 100%;
  min-width: 14rem;
}

.template-control select {
  width: 100%;
  min-width: 10rem;
}

.project-filter.is-empty {
  display: none;
}

.project-dialog[hidden] {
  display: none;
}

.project-dialog {
  width: min(28rem, calc(100vw - var(--space-32)));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-floating, 0 24px 64px var(--shadow-ink-18));
}

.project-dialog::backdrop {
  background: var(--color-backdrop-soft);
}

.overview-card-dialog {
  width: min(1180px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 24px 70px var(--shadow-ink-24);
}

.overview-card-dialog::backdrop {
  background: var(--color-backdrop-soft);
  backdrop-filter: blur(1px);
}

.overview-card-modal {
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.overview-card-modal-pending {
  display: grid;
  min-height: min(26rem, 70vh);
  place-content: center;
  gap: 0.6rem;
  padding: var(--space-32);
  color: var(--color-text-secondary);
  text-align: center;
}

.overview-card-modal-pending strong {
  color: var(--color-text-primary);
  font-size: 1.15rem;
}

.overview-card-modal-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  max-height: calc(100vh - 48px);
  min-height: min(44rem, calc(100vh - 48px));
}

.overview-card-modal-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.overview-card-modal-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-12);
  align-items: start;
  padding: var(--space-16) var(--space-20) var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.overview-card-modal-header-nav,
.overview-card-modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.overview-card-modal-header-actions {
  justify-content: flex-end;
}

.overview-card-modal-icon-button {
  display: grid;
  width: var(--space-32);
  height: var(--space-32);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 1rem;
}

.overview-card-modal-icon-button:hover:not(:disabled),
.overview-card-modal-icon-button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.overview-card-modal-icon-button:disabled {
  opacity: 0.45;
}

.overview-card-modal-position {
  display: inline-flex;
  min-height: var(--space-32);
  align-items: center;
  padding: 0 var(--space-8);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.overview-card-modal-title-block {
  min-width: 0;
}

.overview-card-modal-title-block h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  line-height: var(--line-tight);
}

.overview-card-modal-title-block p {
  margin: var(--space-4) 0 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-card-modal-detail {
  min-height: 0;
  overflow: auto;
  padding: var(--space-16) var(--space-20) var(--space-20);
}

.overview-card-modal-detail .detail-card {
  display: grid;
  gap: var(--space-14);
  padding: 0;
  border: 0;
  box-shadow: none;
}

.overview-card-modal-detail .detail-main-panel.details {
  display: grid;
  grid-template-columns: minmax(14rem, 0.85fr) minmax(18rem, 1.15fr);
  gap: var(--space-16);
  align-items: start;
}

.overview-card-modal-detail .detail-meta {
  margin: 0;
}

.overview-card-modal-detail .tag-editor,
.overview-card-modal-detail .rich-notes,
.overview-card-modal-detail .detail-dependencies,
.overview-card-modal-detail .detail-template-tools,
.overview-card-modal-detail .detail-discussion {
  margin: 0;
}

.overview-card-modal-detail .rich-notes {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.overview-card-modal-detail .detail-actions.overview-card-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

.overview-card-modal-navigator {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  border-left: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-muted) 46%, var(--color-surface));
}

.overview-card-modal-navigator > header {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.overview-card-modal-navigator h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.overview-card-modal-navigator header span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.overview-card-modal-nav-list {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  min-height: 0;
  overflow: auto;
  padding: var(--space-12);
}

.overview-card-modal-nav-card {
  display: grid;
  grid-template-columns: var(--space-20) minmax(0, 1fr) var(--space-20);
  gap: var(--space-8);
  align-items: start;
  min-width: 0;
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
  text-align: left;
}

.overview-card-modal-nav-card.active {
  border-color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface));
}


/* src/styles/overviewModalCore.css */
.overview-card-modal-nav-marker {
  display: grid;
  width: var(--space-16);
  height: var(--space-16);
  margin-top: var(--space-2);
  place-items: center;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-success);
  font-size: var(--text-caption);
  line-height: 1;
}

.overview-card-modal-nav-marker.high {
  border-color: var(--color-danger);
}

.overview-card-modal-nav-marker.medium {
  border-color: var(--color-warning);
}

.overview-card-modal-nav-marker.low,
.overview-card-modal-nav-marker.done {
  border-color: var(--color-success);
}

.overview-card-modal-nav-card-body {
  display: grid;
  gap: var(--space-3, 0.1875rem);
  min-width: 0;
}

.overview-card-modal-nav-card-body strong,
.overview-card-modal-nav-card-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-card-modal-nav-card-body strong {
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.overview-card-modal-nav-card-body small {
  color: var(--color-text-secondary);
  font-size: 0.68rem;
}

.overview-card-modal-nav-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--color-text-secondary);
}

.overview-card-modal-nav-status {
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-strong);
}

.overview-card-modal-nav-status.waiting {
  color: var(--color-accent-purple) !important;
}

.overview-card-modal-nav-status.done {
  color: var(--color-success) !important;
}

.overview-card-modal-nav-comments {
  margin-left: auto;
}

.overview-card-modal-nav-menu {
  color: var(--color-text-secondary);
}

.overview-card-modal-nav-end {
  margin: var(--space-8) 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-align: center;
}

.overview-modal-subcards {
  display: grid;
  gap: var(--space-10);
}

.overview-modal-subcards-header,
.overview-modal-subcard-row {
  display: grid;
  grid-template-columns: var(--space-24) minmax(12rem, 1fr) minmax(6rem, auto) minmax(7rem, auto) minmax(7rem, auto) minmax(6rem, auto) minmax(7rem, auto) var(--space-28);
  gap: var(--space-8);
  align-items: center;
}

.overview-modal-subcards-header {
  grid-template-columns: minmax(0, 1fr) auto;
}

.overview-modal-subcards-header h3 {
  margin: 0;
  font-size: 0.95rem;
}

.overview-modal-subcards-header span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.overview-modal-subcard-list {
  display: grid;
  gap: var(--space-6);
  position: relative;
}

.overview-modal-subcard-row {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition:
    margin-block 180ms var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.overview-modal-subcard-done {
  width: var(--space-20);
  height: var(--space-20);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-success);
}

.overview-modal-subcard-type {
  display: grid;
  width: var(--space-20);
  height: var(--space-20);
  place-items: center;
  color: var(--color-primary);
}

.overview-modal-subcard-title {
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-subcard-title-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.28rem;
  align-items: center;
  min-width: 0;
  padding-inline-start: 0;
}

.overview-modal-subcard-branch {
  width: 1rem;
  color: var(--color-text-tertiary);
  font-size: 0.66rem;
  text-align: center;
}

.overview-modal-subcard-child-count,
.subtask-child-count {
  display: inline-grid;
  min-width: 1rem;
  height: 1rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.56rem;
  font-weight: var(--font-weight-strong);
}

.subtask-item {
  padding-inline-start: calc(var(--subtask-depth, 0) * 0.8rem);
}

.overview-modal-inline-input {
  width: 100%;
  min-height: var(--space-28);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
}

.overview-modal-subcard-tags {
  overflow: hidden;
  color: var(--color-primary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-subcard-menu {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
}

.overview-modal-subcard-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-36);
  gap: var(--space-8);
}

.overview-modal-subcard-form input {
  min-height: var(--space-36);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
}

.overview-modal-subcard-form button {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.overview-card-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 54px var(--shadow-ink-18);
}

.overview-card-modal,
.overview-card-modal-shell {
  max-height: calc(100vh - 32px);
}

.overview-card-modal-shell {
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  height: min(43.5rem, calc(100vh - 32px));
  min-height: min(43.5rem, calc(100vh - 32px));
  overflow: hidden;
}

.overview-card-modal-main {
  grid-template-rows: auto auto minmax(0, 1fr);
  position: relative;
  height: min(43.5rem, calc(100vh - 32px));
  min-height: 0;
  max-height: min(43.5rem, calc(100vh - 32px));
}

.overview-card-modal-header {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-12) var(--space-14) var(--space-8);
  border-bottom: 0;
}

.overview-card-modal-header-nav {
  gap: var(--space-6);
}

.overview-card-modal-header-actions {
  gap: var(--space-6);
}

.overview-card-modal-icon-button {
  width: var(--space-28);
  height: var(--space-28);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
}

.overview-card-modal-position {
  min-height: var(--space-28);
  padding: 0 var(--space-10);
  font-size: 0.72rem;
}

.overview-card-modal-title-block {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--space-3, 0.1875rem) var(--space-8);
  align-items: center;
  padding: 0 var(--space-18, 1.125rem) var(--space-8);
}

.overview-card-modal-title {
  width: min(100%, 42rem);
  min-height: 1.85rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 1.05rem;
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  resize: none;
}

.overview-card-modal-title:focus {
  border-radius: var(--radius-sm);
  outline: var(--focus-ring);
}

.overview-card-modal-title-block button {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
}

.overview-card-modal-title-block p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.72rem;
}

.overview-card-modal-detail {
  min-height: 0;
  padding: 0 var(--space-18, 1.125rem) var(--space-12);
  padding-bottom: var(--space-56);
  overflow: auto;
}

.overview-card-modal-detail .detail-card {
  gap: var(--space-10);
}

.overview-card-modal-detail .detail-main-panel.details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

.overview-card-modal-detail .detail-meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-8);
  padding: 0;
  border: 0;
}

.overview-card-modal-detail .overview-modal-field {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.overview-card-modal-detail .overview-modal-field-label {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-card-modal-detail .overview-modal-field-value {
  min-width: 0;
}

.overview-card-modal-detail .detail-input {
  min-height: 2rem;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
}

.overview-card-modal-detail .detail-checkbox {
  min-height: 2rem;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  line-height: 1.15;
}

.overview-card-modal-detail .tag-editor {
  display: block;
  gap: var(--space-8);
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--color-border);
}

.overview-card-modal-detail .tag-editor .detail-section-title {
  margin: 0;
}

.overview-card-modal-detail .tag-editor-input {
  max-width: 18rem;
  min-height: 2rem;
  margin-top: var(--space-8);
}

.overview-card-modal-detail .rich-notes {
  display: grid;
  gap: 0;
  padding-top: 0;
  border: 1px solid var(--color-border);
}

.overview-card-modal-detail .rich-notes .detail-section-title {
  margin: 0;
}

.overview-card-modal-detail .rich-notes-editor {
  min-height: 10.25rem;
  max-height: 15rem;
  overflow: auto;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  line-height: 1.45;
}

.overview-card-modal-detail .detail-dependencies,
.overview-card-modal-detail .detail-template-tools,
.overview-card-modal-detail .detail-discussion {
  display: none;
}

.overview-card-modal-detail .detail-actions.overview-card-modal-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-10) var(--space-18, 1.125rem);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.overview-card-modal-detail .detail-actions.overview-card-modal-actions .button {
  min-height: 2rem;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
}

.overview-card-modal-detail .detail-actions.overview-card-modal-actions .button:nth-child(2) {
  display: none;
}

.overview-card-modal-detail .detail-actions.overview-card-modal-actions::before {
  display: none;
}

.overview-card-modal-detail .detail-actions.overview-card-modal-actions .danger {
  grid-column: 1;
}

.overview-card-modal-detail .detail-actions.overview-card-modal-actions .overview-card-modal-cancel {
  grid-column: 3;
}

.overview-card-modal-detail .detail-actions.overview-card-modal-actions .button-primary {
  grid-column: 4;
  grid-row: 1;
}


/* src/styles/overviewModalSubcards.css */
.overview-modal-subcard-empty {
  margin: 0;
  padding: var(--space-10);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.overview-card-modal-navigator {
  border-left: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-muted) 40%, var(--color-surface));
}

.overview-card-modal-navigator > header {
  padding: var(--space-14) var(--space-12) var(--space-8);
}

.overview-card-modal-navigator h3 {
  font-size: 0.78rem;
}

.overview-card-modal-nav-list {
  gap: var(--space-6);
  padding: var(--space-8);
}

.overview-card-modal-nav-card {
  grid-template-columns: var(--space-16) minmax(0, 1fr) var(--space-16);
  gap: var(--space-6);
  min-height: 4.8rem;
  padding: var(--space-8);
  border-radius: var(--radius-sm);
}

.overview-card-modal-nav-card-body strong {
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: normal;
}

.overview-card-modal-nav-card-body small {
  font-size: 0.64rem;
}

.overview-modal-subcards {
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.overview-modal-subcards-header {
  grid-template-columns: auto auto minmax(4rem, 8rem) 1fr auto;
  gap: var(--space-10);
  align-items: center;
}

.overview-modal-subcards-header h3 {
  font-size: 0.8rem;
}

.overview-modal-subcards-header span {
  font-size: 0.72rem;
}

.overview-modal-subcard-list {
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.overview-modal-subcard-row {
  grid-template-columns: var(--space-20) minmax(12rem, 1fr) minmax(5.2rem, auto) minmax(6rem, auto) minmax(6rem, auto) minmax(5.2rem, auto) minmax(6rem, auto) var(--space-24);
  padding: var(--space-7, 0.4375rem) var(--space-8);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

.overview-modal-subcard-row:last-child {
  border-bottom: 0;
}

.overview-modal-inline-input {
  min-height: 1.75rem;
  padding: 0 var(--space-6);
  font-size: 0.68rem;
}

.overview-modal-subcard-form {
  grid-template-columns: minmax(0, 1fr) var(--space-32);
}

.overview-modal-subcard-form input,
.overview-modal-subcard-form button {
  min-height: 2rem;
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  .overview-card-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .overview-card-modal,
  .overview-card-modal-shell {
    max-height: 100vh;
    height: 100vh;
  }

  .overview-card-modal-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-card-modal-navigator {
    display: none;
  }

  .overview-card-modal-header {
    grid-template-columns: 1fr auto;
  }

  .overview-card-modal-title-block {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .overview-card-modal-detail .detail-main-panel.details {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-card-modal-detail .rich-notes {
    grid-column: auto;
    grid-row: auto;
  }
}

.project-form {
  display: grid;
  gap: var(--space-16);
  padding: var(--space-20);
}

.project-dialog-header,
.project-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.project-dialog,
.project-dialog-header { -webkit-app-region: no-drag; app-region: no-drag; }

.project-dialog-header h2 {
  margin: 0;
  font-size: var(--text-heading);
  line-height: var(--line-tight);
}

.project-dialog-close {
  display: inline-grid;
  width: var(--control-height-sm);
  min-width: var(--control-height-sm);
  height: var(--control-height-sm);
  flex: 0 0 var(--control-height-sm);
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  cursor: pointer;
  position: relative;
  z-index: 2;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

.project-dialog-action-group { display: flex; gap: var(--space-8); align-items: center; }
.project-delete { margin-right: auto; }

.project-field {
  display: grid;
  gap: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.project-field input,
.project-field select {
  min-width: 0;
  height: var(--control-height-sm);
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.project-field small {
  color: var(--color-text-tertiary);
  font-size: 0.68rem;
  font-weight: 400;
}

.project-convert-summary,
.project-convert-empty {
  margin: 0;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.45;
}

.project-convert-empty {
  color: var(--color-danger);
}

.project-icon-picker {
  display: grid;
  grid-template-columns: repeat(8, var(--space-36));
  gap: var(--space-8);
}

.project-icon-option {
  display: grid;
  width: var(--space-36);
  height: var(--space-36);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--task-project-accent, var(--color-primary));
}

.project-icon-option::before {
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  content: "";
  mask: var(--project-icon-url) center / contain no-repeat;
  -webkit-mask: var(--project-icon-url) center / contain no-repeat;
}

.project-icon-option:hover,
.project-icon-option[aria-pressed="true"] {
  border-color: var(--task-project-accent, var(--color-primary));
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 10%, var(--color-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 28%, transparent);
}

.project-color-field {
  grid-template-columns: minmax(0, 1fr) var(--space-44, 2.75rem);
  align-items: center;
}

.project-color-field span {
  grid-column: 1 / -1;
}

.project-form input[type="color"] {
  width: var(--space-44, 2.75rem);
  height: var(--space-44, 2.75rem);
  padding: var(--space-4);
  cursor: pointer;
}

.project-form input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.project-form input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: var(--radius-full);
}

.template-control select:focus,
.project-filter select:focus {
  outline: var(--focus-ring);
}

.task-form button,
.project-add-button,
.template-action-button,
.task-button {
  display: inline-grid;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-title);
  font-weight: var(--font-weight-strong);
  transition: background var(--duration-fast), transform var(--duration-fast);
}

.header-task-form .control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.header-task-form button {
  grid-auto-flow: column;
  gap: var(--space-8);
  width: auto;
  height: var(--space-40);
  padding: 0 var(--space-16);
  border-radius: var(--radius-control);
  white-space: nowrap;
}

.header-task-form .task-form-row {
  display: block;
}

.header-task-form input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.task-form button:hover,
.project-add-button:hover,
.template-action-button:hover,
.task-button:hover {
  background: var(--color-primary-hover);
}

.project-add-button:disabled,
.template-action-button:disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

.task-form button:active,
.project-add-button:active,
.template-action-button:active,
.task-button:active {
  transform: translateY(1px);
}

.done-column-toggle {
  position: relative;
  display: inline-flex;
  width: 3.25rem;
  min-width: 3.25rem;
  height: 1.5rem;
  min-height: 1.5rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-6) 0 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
  overflow: hidden;
}

.done-column-toggle::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: 0 1px 2px var(--shadow-ink-18);
  transition:
    left var(--duration-fast),
    background var(--duration-fast);
}

.toolbar-icon-button {
  display: inline-grid;
  width: var(--space-44);
  height: var(--space-44);
  justify-self: end;
  align-self: end;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 1.25rem;
}

.toolbar-icon-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.toolbar-icon-button.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.done-column-toggle:hover,
.done-column-toggle[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  background: var(--color-primary);
}

.done-column-toggle[aria-pressed="true"]::after {
  left: 1.375rem;
}

.done-column-toggle[aria-pressed="true"] {
  justify-content: flex-start;
  padding: 0 1.5rem 0 var(--space-6);
}

.done-column-toggle:disabled {
  cursor: not-allowed;
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-surface-muted) 82%, var(--color-border));
  color: var(--color-text-secondary);
  opacity: 0.62;
}

.done-column-toggle:disabled::after {
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-border));
}

.done-column-toggle[hidden] {
  display: none;
}

.done-switch-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--space-40);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.done-switch-label:has(.done-column-toggle[hidden]) {
  display: none;
}

.blocked-tasks-field[hidden] {
  display: none !important;
}

/* Compact C2 search and filter toolbar. */
.c2-toolbar {
  --c2-accent: var(--color-accent-purple);
  --c2-accent-soft: color-mix(in srgb, var(--color-accent-purple) 7%, transparent);
  --c2-accent-faint: color-mix(in srgb, var(--color-accent-purple) 4%, transparent);
  --c2-line: color-mix(in srgb, var(--color-border) 78%, white);
  z-index: 5;
  display: block;
  margin: 0;
  padding: var(--space-6) var(--space-14);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: color-mix(in srgb, var(--color-bg) 86%, white);
  overflow: visible;
}


/* src/styles/tasksToolbarSearch.css */
.c2-toolbar .toolbar-primary {
  display: flex;
  min-height: 2.35rem;
  align-items: center;
  gap: 0;
  padding: 0 var(--space-10);
  border: 1px solid var(--c2-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: 0 0.35rem 0.9rem var(--shadow-ink-04);
}

.c2-toolbar .toolbar-control-group {
  display: flex;
  min-width: 0;
  align-items: center;
}

.c2-toolbar .toolbar-control-group-find {
  flex: 1 1 auto;
}

.c2-toolbar .toolbar-control-group-status,
.c2-toolbar .toolbar-control-group-view {
  flex: 0 0 auto;
  margin-left: var(--space-10);
  padding-left: var(--space-10);
  border-left: 1px solid var(--c2-line);
}

.c2-toolbar .toolbar-control-group-status > :first-child,
.c2-toolbar .toolbar-control-group-view > :first-child {
  margin-left: 0;
  padding-left: 0;
}

.c2-toolbar .toolbar-control-group-status > :first-child::before,
.c2-toolbar .toolbar-control-group-view > :first-child::before {
  display: none;
}

.c2-toolbar .toolbar-secondary,
.c2-toolbar .project-add-button,
.c2-toolbar .c2-more-filters,
.c2-toolbar .control-label {
  display: none;
}

.c2-toolbar .toolbar-field {
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: center;
  gap: var(--space-6);
}

.c2-toolbar .project-control,
.c2-toolbar .task-sort,
.c2-toolbar .done-column-field,
.c2-toolbar .blocked-tasks-field,
.c2-toolbar .overview-columns-field,
.c2-toolbar .overview-card-size-field,
.c2-toolbar .project-view-field {
  position: relative;
  padding-left: var(--space-16);
  margin-left: var(--space-16);
}

.c2-toolbar .project-control::before,
.c2-toolbar .task-sort::before,
.c2-toolbar .done-column-field::before,
.c2-toolbar .blocked-tasks-field::before,
.c2-toolbar .overview-columns-field::before,
.c2-toolbar .overview-card-size-field::before,
.c2-toolbar .project-view-field::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 1.85rem;
  background: var(--c2-line);
  transform: translateY(-50%);
}

.c2-toolbar .task-search {
  flex: 1 1 17rem;
  max-width: 26rem;
}

.c2-toolbar .task-search-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  min-height: 2.05rem;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
}

.c2-toolbar .task-search-control:focus-within {
  background: var(--c2-accent-faint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2-accent) 24%, transparent);
}

.c2-toolbar .task-search-control input {
  width: 100%;
  min-width: 0;
  height: 1.9rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 0.84rem;
}

.c2-toolbar .task-search-control input::placeholder {
  color: var(--color-text-secondary);
}

.c2-toolbar .task-search-control kbd {
  display: inline-grid;
  min-width: 2.45rem;
  min-height: 1.28rem;
  place-items: center;
  padding: 0 var(--space-6);
  border: 1px solid color-mix(in srgb, var(--c2-accent) 12%, var(--color-border));
  border-radius: var(--radius-control);
  background: var(--c2-accent-faint);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.66rem;
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.c2-toolbar .toolbar-result-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 1.28rem;
  margin-left: var(--space-10);
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--c2-accent-soft);
  color: color-mix(in srgb, var(--c2-accent) 70%, var(--color-text-primary));
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

/* While a search is active the pill becomes the "✕/Escape" close affordance
   the spec calls for, not just a passive count. */
.c2-toolbar .toolbar-result-count-search {
  cursor: pointer;
}

.c2-toolbar .toolbar-result-count-search:hover {
  background: color-mix(in srgb, var(--c2-accent) 22%, var(--c2-accent-soft));
}

.c2-control-icon {
  display: inline-grid;
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  place-items: center;
  color: color-mix(in srgb, var(--c2-accent) 78%, var(--color-text-secondary));
}

.c2-search-icon::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.8-3.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c2-project-icon::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6V5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M4 7h16v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6V5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M4 7h16v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c2-sort-icon::before {
  content: "";
  width: 0.94rem;
  height: 0.94rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v16'/%3E%3Cpath d='m4 8 4-4 4 4'/%3E%3Cpath d='m4 16 4 4 4-4'/%3E%3Cpath d='M16 4v16'/%3E%3Cpath d='m12 16 4 4 4-4'/%3E%3Cpath d='m12 8 4-4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v16'/%3E%3Cpath d='m4 8 4-4 4 4'/%3E%3Cpath d='m4 16 4 4 4-4'/%3E%3Cpath d='M16 4v16'/%3E%3Cpath d='m12 16 4 4 4-4'/%3E%3Cpath d='m12 8 4-4 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c2-columns-icon::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='4' height='16' rx='1'/%3E%3Crect x='10' y='4' width='4' height='16' rx='1'/%3E%3Crect x='16' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='4' height='16' rx='1'/%3E%3Crect x='10' y='4' width='4' height='16' rx='1'/%3E%3Crect x='16' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c2-view-icon::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='5' r='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='5' r='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c2-view-icon[data-card-size="minimal"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c2-view-icon[data-card-size="compact"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='4' width='8' height='7' rx='1'/%3E%3Crect x='13' y='4' width='8' height='7' rx='1'/%3E%3Crect x='3' y='13' width='8' height='7' rx='1'/%3E%3Crect x='13' y='13' width='8' height='7' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='4' width='8' height='7' rx='1'/%3E%3Crect x='13' y='4' width='8' height='7' rx='1'/%3E%3Crect x='3' y='13' width='8' height='7' rx='1'/%3E%3Crect x='13' y='13' width='8' height='7' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c2-view-icon[data-card-size="full"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M7 8h10M7 12h10M7 16h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.c2-toolbar .toolbar-action-value { display: none; }

.c2-toolbar .project-control {
  flex: 0 1 14.5rem;
  min-width: 10.5rem;
}

.c2-toolbar .project-control-row,
.c2-toolbar .project-filter,
.c2-toolbar .sort-menu-control {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}

.c2-toolbar .project-filter {
  gap: var(--space-8);
}

.c2-toolbar .project-filter select,
.c2-toolbar .sort-menu-trigger {
  width: 100%;
  min-width: 0;
  min-height: 2.05rem;
  height: 2.05rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.84rem;
  font-weight: var(--font-weight-strong);
}

.c2-toolbar .project-filter select {
  padding: 0 var(--space-8);
}

.c2-toolbar .project-filter:focus-within,
.c2-toolbar .sort-menu-trigger:focus-visible,
.c2-toolbar .toolbar-select-shell:focus-within {
  outline: 0;
  background: var(--c2-accent-faint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2-accent) 20%, transparent);
}

.c2-toolbar .task-sort {
  flex: 0 1 10.5rem;
  min-width: 8rem;
}

.c2-toolbar .sort-menu-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-6);
  text-align: left;
}

.c2-toolbar #task-sort-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c2-toolbar #task-sort-arrow {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
}

.c2-toolbar .done-column-field {
  flex: 0 0 auto;
  min-width: 7.6rem;
}

.c2-toolbar .blocked-tasks-field {
  flex: 0 0 auto;
  min-width: 8.2rem;
}

.c2-toolbar .blocked-tasks-field .control-label {
  display: inline;
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  white-space: nowrap;
}

@media (max-width: 72rem) {
  .c2-toolbar .blocked-tasks-field .control-label {
    display: none;
  }
}

@media (max-width: 48rem) {
  .task-work-area:has(.dependency-project-tree:not([hidden])),
  .task-work-area:has(.dependency-project-tree:not([hidden])):has(.dependency-finder:not([hidden])) {
    grid-template-columns: 13rem minmax(30rem, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .task-work-area:has(.dependency-project-tree:not([hidden])):has(.dependency-finder:not([hidden])) {
    grid-template-columns: 13rem minmax(30rem, 1fr) minmax(16rem, var(--dependency-finder-width, 18rem));
  }

  .dependency-project-tree,
  .task-work-area:has(.dependency-project-tree:not([hidden])) .dependency-finder {
    grid-column: auto;
    min-height: 0;
    max-height: none;
  }

  .dependency-project-tree {
    border-right: 1px solid var(--color-border);
    border-bottom: 0;
  }

  .dependency-finder {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .dependency-project-tree-row,
  .dependency-finder-item,
  .dependency-finder-item-focus {
    min-height: 2.75rem;
  }
}

.c2-toolbar .done-switch-label {
  gap: var(--space-6);
  min-height: 2.05rem;
  font-size: 0.8rem;
}

.c2-toolbar .done-column-toggle {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 1.18rem;
  min-height: 1.18rem;
  align-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, white);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface-muted) 86%, white);
  color: transparent;
  box-shadow: inset 0 1px 2px var(--shadow-ink-07);
  overflow: visible;
  transition:
    background var(--duration-fast),
    border-color var(--duration-fast),
    box-shadow var(--duration-fast);
}

.c2-toolbar .done-column-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.13rem;
  width: 0.88rem;
  height: 0.88rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: 0 1px 3px var(--shadow-ink-18);
  transform: translateY(-50%);
  transition:
    transform var(--duration-fast),
    background var(--duration-fast);
}

.c2-toolbar .done-column-toggle::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 0.13rem;
  display: grid;
  width: 0.88rem;
  height: 0.88rem;
  place-items: center;
  color: color-mix(in srgb, var(--color-text-secondary) 70%, transparent);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  transition:
    transform var(--duration-fast),
    color var(--duration-fast);
  pointer-events: none;
}

.c2-toolbar .blocked-tasks-field .done-column-toggle::after {
  content: "";
  width: 0.42rem;
  height: 0.48rem;
  margin-left: 0.23rem;
  background:
    linear-gradient(to right,
      currentColor 0 0.11rem,
      transparent 0.11rem 0.31rem,
      currentColor 0.31rem 0.42rem);
}

.c2-toolbar .done-column-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--c2-accent) 54%, var(--color-border));
  background: color-mix(in srgb, var(--c2-accent) 72%, white);
  box-shadow: 0 0.22rem 0.6rem color-mix(in srgb, var(--color-accent-purple) 15%, transparent);
}

.c2-toolbar .done-column-toggle[aria-pressed="true"]::before {
  transform: translate(1.12rem, -50%);
}

.c2-toolbar .done-column-toggle[aria-pressed="true"]::after {
  color: var(--c2-accent);
  transform: translate(1.12rem, -50%);
}

/* Search keeps only workspace scope and done visibility. Other toolbar
   controls retain their state and return when the query is cleared. Scoped
   to #task-toolbar specifically (not the bare .c2-toolbar class) because
   #task-command-tools — search's new home next to the status segments —
   also carries .c2-toolbar for its descendant styling and gets its own
   .search-active toggle; settings and the right-column toggle live there
   now and must stay reachable while searching, unlike this list. */
#task-toolbar.search-active .project-control,
#task-toolbar.search-active .project-view-field,
#task-toolbar.search-active .task-sort,
#task-toolbar.search-active .blocked-tasks-field,
#task-toolbar.search-active .overview-columns-field,
#task-toolbar.search-active .overview-card-size-field,
#task-toolbar.search-active .c2-more-filters,
#task-toolbar.search-active .dependency-finder-toggle,
#task-toolbar.search-active .toolbar-secondary {
  display: none !important;
}

#task-toolbar.search-active .toolbar-primary {
  display: flex;
}


/* src/styles/tasksToolbarResponsive.css */
.c2-toolbar.search-active .done-column-field {
  flex: 0 0 auto;
}

.c2-toolbar .done-column-toggle:disabled {
  opacity: 0.5;
}

.c2-toolbar .c2-done-count {
  display: inline-grid;
  min-width: 1.85rem;
  min-height: 1.28rem;
  place-items: center;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--c2-accent-soft);
  color: color-mix(in srgb, var(--c2-accent) 72%, var(--color-text-primary));
  font-size: 0.72rem;
  font-weight: 750;
}

.c2-toolbar .done-switch-state {
  color: var(--color-text-secondary);
  font-size: 0.74rem;
  font-weight: var(--font-weight-strong);
}

.c2-toolbar .overview-columns-field,
.c2-toolbar .overview-card-size-field {
  flex: 0 0 auto;
  min-width: 5.5rem;
}

.c2-toolbar .overview-card-size-field {
  min-width: 8.4rem;
}

.c2-toolbar .toolbar-select-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  min-height: 2.05rem;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-8);
  border: 1px solid var(--c2-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.c2-toolbar .toolbar-select-shell select {
  width: 100%;
  min-width: 0;
  height: 1.9rem;
  min-height: 1.9rem;
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.84rem;
  font-weight: var(--font-weight-strong);
}

/* Desktop overview toolbar: compact text and quieter dividers keep the
   controls scannable without changing the phone layout. */
@media (min-width: 37.5rem) {
  .c2-toolbar {
    padding-block: var(--space-4);
  }

  .c2-toolbar .toolbar-primary {
    min-height: 2.15rem;
    padding-inline: var(--space-6);
  }

  .c2-toolbar .project-control,
  .c2-toolbar .task-sort,
  .c2-toolbar .done-column-field,
  .c2-toolbar .blocked-tasks-field,
  .c2-toolbar .overview-columns-field,
  .c2-toolbar .overview-card-size-field,
  .c2-toolbar .project-view-field {
    margin-left: var(--space-10);
    padding-left: var(--space-10);
  }

  .c2-toolbar .project-control::before,
  .c2-toolbar .task-sort::before,
  .c2-toolbar .done-column-field::before,
  .c2-toolbar .blocked-tasks-field::before,
  .c2-toolbar .overview-columns-field::before,
  .c2-toolbar .overview-card-size-field::before,
  .c2-toolbar .project-view-field::before {
    height: 1.55rem;
  }

  .c2-toolbar .task-search-control,
  .c2-toolbar .project-filter select,
  .c2-toolbar .sort-menu-trigger,
  .c2-toolbar .toolbar-select-shell {
    min-height: 1.85rem;
    height: 1.85rem;
  }

  .c2-toolbar .task-search-control input,
  .c2-toolbar .project-filter select,
  .c2-toolbar .sort-menu-trigger,
  .c2-toolbar .toolbar-select-shell select {
    font-size: 0.76rem;
    font-weight: 650;
  }

  .c2-toolbar .done-switch-label,
  .c2-toolbar .done-switch-state {
    font-size: 0.7rem;
  }

  .c2-toolbar .project-control { min-width: 9rem; }
  .c2-toolbar .task-sort { min-width: 6.8rem; }
  .c2-toolbar .overview-card-size-field { min-width: 7.3rem; }
}

/* At tablet and phone widths the existing grid owns the individual controls.
   The desktop-only groups must not become three oversized grid cells. */
@media (max-width: 76rem) {
  .c2-toolbar .toolbar-control-group {
    display: contents;
  }

  .c2-toolbar .toolbar-control-group-status,
  .c2-toolbar .toolbar-control-group-view {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}

.c2-toolbar .project-view-field {
  flex: 0 0 auto;
}

.c2-toolbar .project-view-toggle {
  border-radius: var(--radius-sm);
}

.c2-toolbar .project-view-button {
  min-height: 2.35rem;
  height: 2.35rem;
}

@media (max-width: 76rem) {
  .c2-toolbar .toolbar-primary {
    display: grid;
    grid-template-columns:
      minmax(8.5rem, 1fr)
      minmax(9.5rem, 1.15fr)
      minmax(7rem, 0.8fr)
      minmax(6.6rem, auto)
      minmax(4.8rem, auto)
      minmax(7.2rem, auto);
    row-gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .c2-toolbar .task-search {
    max-width: none;
  }

  .c2-toolbar .project-control,
  .c2-toolbar .task-sort,
  .c2-toolbar .done-column-field,
  .c2-toolbar .blocked-tasks-field,
  .c2-toolbar .overview-columns-field,
  .c2-toolbar .overview-card-size-field,
  .c2-toolbar .project-view-field {
    flex: initial;
    min-width: 0;
    margin-left: var(--space-10);
    padding-left: var(--space-10);
  }

  .c2-toolbar .done-column-field,
  .c2-toolbar .blocked-tasks-field,
  .c2-toolbar .overview-columns-field,
  .c2-toolbar .overview-card-size-field {
    min-width: 0;
  }

  .c2-toolbar .done-switch-state {
    display: none;
  }
}

@media (max-width: 37.4375rem) {
  .c2-toolbar {
    padding: var(--space-8);
  }

  .c2-toolbar .toolbar-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    row-gap: var(--space-6);
    padding: var(--space-6);
  }

  .c2-toolbar .task-search {
    grid-column: 1 / -1;
  }

  .c2-toolbar .project-control {
    grid-column: 1;
  }

  .c2-toolbar .task-sort,
  .c2-toolbar .done-column-field,
  .c2-toolbar .blocked-tasks-field,
  .c2-toolbar .overview-columns-field,
  .c2-toolbar .overview-card-size-field {
    grid-column: auto;
  }

  .c2-toolbar .project-control,
  .c2-toolbar .task-sort,
  .c2-toolbar .done-column-field,
  .c2-toolbar .blocked-tasks-field,
  .c2-toolbar .overview-columns-field,
  .c2-toolbar .overview-card-size-field,
  .c2-toolbar .project-view-field {
    margin-left: 0;
    padding-left: 0;
  }

  .c2-toolbar .project-control::before,
  .c2-toolbar .task-sort::before,
  .c2-toolbar .done-column-field::before,
  .c2-toolbar .blocked-tasks-field::before,
  .c2-toolbar .overview-columns-field::before,
  .c2-toolbar .overview-card-size-field::before,
  .c2-toolbar .project-view-field::before {
    display: none;
  }
}

.overview-modal-autosave-status[data-state="pending"],
.overview-modal-autosave-status[data-state="saving"] {
  color: var(--color-primary);
}

.overview-modal-autosave-status[data-state="saved"] {
  color: var(--color-success);
}

.filter-group {
  display: inline-flex;
  gap: var(--space-4);
  max-width: 100%;
  min-height: var(--space-40);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-bg);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: calc(var(--space-40) - var(--space-8));
  padding: 0 var(--space-14);
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.filter-count {
  display: inline-grid;
  min-width: var(--space-20);
  height: var(--space-20);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1;
}

.filter-button.active .filter-count {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.filter-button.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-subtle, 0 1px 2px var(--shadow-ink-08));
}

.filter-button.danger {
  color: var(--color-danger);
}

.filter-button.waiting {
  color: var(--color-accent-purple);
}

.filter-button.danger.active .filter-count {
  background: var(--color-danger);
}

.filter-button.waiting.active .filter-count {
  background: var(--color-accent-purple);
}

.task-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  padding: var(--space-14) var(--space-20) calc(var(--space-20) + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom-reserve, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg);
}

.task-work-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-bg);
}

.task-work-area:has(.dependency-finder:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) var(--dependency-finder-width, 22rem);
}

.task-work-area:has(.dependency-project-tree:not([hidden])) {
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
}

.task-work-area:has(.dependency-project-tree:not([hidden])):has(.dependency-finder:not([hidden])) {
  grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr) var(--dependency-finder-width, 22rem);
}

.dependency-project-tree {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  overflow: hidden;
}

.dependency-project-tree[hidden] { display: none; }

.dependency-project-tree > header {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.dependency-project-tree > header strong { color: var(--color-text-primary); font-size: var(--text-body); }
.dependency-project-tree > header span { color: var(--color-text-secondary); font-size: var(--text-caption); }

.dependency-project-tree-list {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-height: 0;
  padding: var(--space-8);
  overflow: auto;
}

.dependency-project-tree-branch { min-width: 0; }

.dependency-project-tree-branch > summary {
  list-style: none;
  cursor: pointer;
}

.dependency-project-tree-branch > summary::-webkit-details-marker { display: none; }

.dependency-project-tree-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid transparent;
  border-left: 3px solid var(--task-project-accent, var(--color-primary));
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
}

.dependency-project-tree-row:hover,
.dependency-project-tree-row:focus-visible,
.dependency-project-tree-row.dependency-drop-active,
.dependency-project-tree-row.selected {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 45%, var(--color-border));
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 8%, var(--color-surface));
  outline: none;
}

.dependency-project-tree-row.selected strong { color: var(--color-primary); }

.dependency-project-tree-row.is-container { border-left-style: dashed; color: var(--color-text-secondary); }
.dependency-project-tree-row > span:first-child { color: var(--color-text-secondary); transition: transform 120ms ease; }
.dependency-project-tree-branch[open] > .dependency-project-tree-row > span:first-child { transform: rotate(90deg); }
.dependency-project-tree-copy { display: flex; min-width: 0; align-items: center; gap: var(--space-6); }
.dependency-project-tree-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dependency-project-tree-row small { color: var(--color-primary); font-size: 0.68rem; }

.dependency-project-tree-open {
  min-height: var(--space-24);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}

.dependency-project-tree-open:hover,
.dependency-project-tree-open:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: none;
}

.dependency-project-tree-children {
  display: grid;
  gap: 0.2rem;
  margin-left: 0.8rem;
  padding-left: 0.45rem;
  border-left: 1px dashed color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.dependency-project-tree-target-picker {
  display: grid;
  gap: 0.35rem;
  margin: 0.3rem 0 0.45rem 0.8rem;
  padding: 0.5rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.dependency-project-tree-target-picker > span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.dependency-project-tree-target-picker button { padding: 0.35rem 0.45rem; border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: var(--text-caption); text-align: left; }
.dependency-project-tree-target-picker button:hover,
.dependency-project-tree-target-picker button:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); outline: none; }

.task-work-area .task-panel {
  min-width: 0;
}


/* src/styles/dependencyFinderLayout.css */
.dependency-finder {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: var(--space-12);
  border-left: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  /* Only the inner views scroll. A hidden-overflow scroll container can be
     moved by focus/scrollIntoView and clip its own persistent navigation. */
  overflow: clip;
}

.dependency-finder-view-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.2rem;
  margin: 0 0 var(--space-8) var(--space-4);
  padding: 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.dependency-finder-view-tabs button {
  min-height: 1.9rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.dependency-finder-view-tabs button:hover,
.dependency-finder-view-tabs button:focus-visible,
.dependency-finder-view-tabs button.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.dependency-finder-view[hidden] {
  display: none !important;
}

.dependency-finder-search-view {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}

.dependency-finder-graph-view {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-8);
  min-height: 0;
  overflow: hidden;
}

.dependency-finder-ai-view {
  display: grid;
  grid-column: 1;
  grid-row: 3;
  align-content: start;
  gap: var(--space-8);
  min-height: 0;
  overflow: auto;
  position: relative;
  z-index: 2;
  padding: var(--space-4);
  background: var(--color-surface);
  pointer-events: auto;
}

.dependency-finder-ai-view[hidden] {
  display: none !important;
  pointer-events: none;
}

.dependency-finder-details-view {
  min-height: 0;
  overflow: auto;
  padding: var(--space-4);
  background: var(--color-surface);
  container-type: inline-size;
}

.dependency-finder-details-view .detail-card {
  min-height: 0;
  overflow: visible;
}

.dependency-finder-details-view .detail-card-header {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-left: 0;
}

.dependency-finder-details-view .detail-title-row {
  grid-column: 1;
  grid-row: 1;
}

.dependency-finder-details-view .detail-title {
  min-height: 2.75rem;
  font-size: var(--text-body);
}

.dependency-finder-details-view .detail-close {
  display: none;
}

.dependency-finder-details-view .detail-header-actions {
  grid-column: 1;
  grid-row: 2;
  justify-content: flex-start;
}

.dependency-finder-details-view .detail-main-panel,
.dependency-finder-details-view .detail-meta {
  min-width: 0;
}

.dependency-finder-details-view .detail-actions {
  z-index: 3;
}

.dependency-finder-details-view .compact-sidebar-detail {
  align-content: start;
  gap: var(--space-8);
}

.dependency-finder-details-view .detail-card-layout > .compact-sidebar-detail {
  display: contents;
}

.dependency-finder-details-view .detail-card-layout > .compact-sidebar-detail .rich-notes:not(.rich-notes-expanded) {
  width: 100%;
  margin-left: 0;
}

.dependency-finder-details-view .detail-card-layout {
  min-height: 0;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}

.dependency-finder-details-view .detail-action-rail {
  grid-column: 1;
  grid-row: 1;
  height: auto;
  align-self: start;
}

.dependency-finder-details-view .detail-card-layout > .compact-sidebar-detail > .detail-card-header {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.dependency-finder-details-view .detail-card-layout > .compact-sidebar-detail > .detail-intelligence-panel,
.dependency-finder-details-view .detail-card-layout > .compact-sidebar-detail > .detail-main-panel,
.dependency-finder-details-view .detail-card-layout > .compact-sidebar-detail > .detail-actions {
  grid-column: 1 / -1;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-card-header {
  gap: var(--space-4) var(--space-8);
  padding: 0 0 var(--space-8);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-title-row {
  align-items: center;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-title {
  min-height: 2rem;
  height: 2rem;
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.86rem;
  line-height: 1.2;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-title:hover {
  background: transparent;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-title:focus {
  background: transparent;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-primary) 72%, transparent);
  outline: none;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-project-marker {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-header-actions {
  gap: var(--space-4);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-header-actions > button {
  min-height: 1.9rem;
  padding: 0 var(--space-8);
  font-size: 0.7rem;
}

.dependency-finder-details-view .compact-sidebar-detail :is(.detail-header-delete, .detail-header-archive) {
  display: grid;
  width: 1.9rem;
  min-width: 1.9rem;
  padding: 0;
  place-items: center;
  border-color: transparent;
  background: transparent;
  color: var(--color-text-secondary);
}

.dependency-finder-details-view .compact-sidebar-detail :is(.detail-header-delete, .detail-header-archive) svg {
  width: 1rem;
  height: 1rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-header-delete:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-header-archive:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-dependency-item {
  grid-template-columns: 0.7rem minmax(0, 1fr) 1.75rem;
  grid-template-rows: auto auto;
  gap: 0.1rem var(--space-6);
  min-height: 3rem;
  padding: var(--space-4) var(--space-6);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-dependency-item .dependency-marker {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-dependency-item > button:first-of-type {
  grid-column: 2;
  grid-row: 1;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-dependency-item > small {
  grid-column: 2;
  grid-row: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-dependency-item > button:last-of-type {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-badges {
  gap: var(--space-4);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-badge {
  min-height: 1.35rem;
  padding: 0 var(--space-6);
  font-size: 0.65rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-created-at {
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-regular);
}

.dependency-finder-details-view .compact-sidebar-detail .compact-icon-actions > .detail-header-destructive-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: 1.85rem;
  min-height: 1.85rem;
  align-items: center;
  align-self: center;
  margin-left: 0;
  padding-left: var(--space-8);
  border: 0;
  border-left: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.dependency-finder-details-view .compact-sidebar-detail .compact-icon-actions > .detail-header-destructive-actions:is(:hover, :focus-within) {
  border-color: var(--color-border);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  background: transparent;
  outline: none;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-header-destructive-actions .detail-header-delete {
  display: grid;
  width: 1.85rem;
  min-width: 1.85rem;
  height: 1.85rem;
  min-height: 1.85rem;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface));
  color: var(--color-danger);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-header-destructive-actions .detail-header-delete:is(:hover, :focus-visible) {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 13%, var(--color-surface));
  outline: none;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-header-destructive-actions .detail-header-delete svg {
  width: 1rem;
  height: 1rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-main-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-main-tab {
  display: grid;
  min-width: 0;
  min-height: 2.4rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  place-items: center;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-main-tab-icon {
  width: 1.05rem;
  height: 1.05rem;
  pointer-events: none;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-main-tab.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-main-panel {
  display: grid;
  align-content: start;
  gap: var(--space-8);
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes {
  display: grid;
  gap: 0;
  padding-top: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-header {
  min-height: 2.1rem;
  padding: 0.22rem 0.38rem;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  min-height: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool {
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0 var(--space-4);
  font-size: 0.68rem;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool-group {
  min-height: 2.25rem;
  padding: 0.2rem 0.26rem;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool-group.structure {
  flex: 1 0 calc(100% - 6.2rem);
  order: 1;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool-group.emphasis {
  flex: 0 0 auto;
  order: 2;
  border-right: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool-group.colors {
  display: none;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool-group.alignment {
  order: 3;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool-group.lists {
  order: 4;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool-group.indentation {
  order: 5;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool-group.insert {
  flex: 1 0 auto;
  order: 6;
  justify-content: flex-end;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-select.font,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool.underline,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool.strike,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool.align-center,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool.align-right,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool.align-justify,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes-tool.ordered {
  display: none;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-select.paragraph {
  min-width: 4.5rem;
  max-width: 5rem;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-select.size {
  min-width: 2.75rem;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-more-menu .responsive-extra {
  display: flex;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes.rich-notes-expanded .rich-notes-toolbar {
  flex-wrap: nowrap;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes.rich-notes-expanded .rich-notes-tool-group {
  flex: 0 1 auto;
  order: initial;
  min-height: 2.3rem;
  padding: 0.18rem 0.26rem;
  border-right: 1px solid var(--color-border);
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes.rich-notes-expanded .rich-notes-tool-group.insert {
  margin-left: auto;
  border-right: 0;
}

/* The detail sidebar can itself be expanded. Toolbar density therefore follows
   the actual editor width instead of the persistent compact-sidebar class. */
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-toolbar {
  flex-wrap: nowrap;
}


/* src/styles/dependencyFinderDetails.css */
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool {
  min-width: 1.9rem;
  min-height: 1.9rem;
  padding-inline: 0.28rem;
  font-size: 0.76rem;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.structure,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.emphasis,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.alignment,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.lists,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.indentation,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.insert {
  flex: 0 1 auto;
  order: initial;
  min-height: 2.3rem;
  padding: 0.18rem 0.26rem;
  border-right: 1px solid var(--color-border);
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.insert {
  margin-left: auto;
  justify-content: flex-start;
  border-right: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.colors {
  display: inline-flex;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-select.font {
  display: block;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.underline,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.strike,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.align-center,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.align-right,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.align-justify,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.ordered {
  display: inline-grid;
}

@container rich-notes (max-width: 56rem) {
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-toolbar,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes.rich-notes-expanded .rich-notes-toolbar {
    flex-wrap: wrap;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.structure,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.emphasis,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.colors {
    flex-shrink: 0;
    order: 1;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.structure {
    flex: 0 0 auto;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.alignment,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.lists,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.indentation,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.insert {
    flex-shrink: 0;
    order: 3;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.insert {
    flex: 0 0 auto;
    justify-content: space-between;
    margin-left: 0;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes.rich-notes-expanded .rich-notes-tool-group.insert {
    flex: 0 0 auto;
    justify-content: flex-start;
    margin-left: 0;
  }
}

@container rich-notes (max-width: 56rem) {
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-toolbar {
    flex-wrap: wrap;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool {
    min-width: 1.8rem;
    min-height: 1.8rem;
    padding-inline: 0.24rem;
    font-size: 0.72rem;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group {
    min-height: 2.1rem;
    padding: 0.14rem 0.2rem;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-icon {
    width: 0.9rem;
    height: 0.9rem;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.structure {
    flex: 0 0 auto;
    order: 1;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.emphasis {
    flex: 0 0 auto;
    order: 1;
    border-right: 0;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.alignment { order: 3; }
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.lists { order: 3; }
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.indentation { order: 3; }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool-group.insert {
    flex: 0 0 auto;
    order: 3;
    justify-content: flex-end;
    margin-left: 0;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.underline,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.strike,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.align-left,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.align-center,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.align-right,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.align-justify,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.unordered,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-tool.ordered {
    display: none;
  }
}

@container rich-notes (max-width: 24rem) {
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-select.font {
    display: none;
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-more-menu {
    right: 0;
    left: auto;
  }
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-editor {
  min-height: 7rem;
  height: 10rem;
  max-height: none;
  padding: 0.75rem;
  overflow: auto;
  resize: vertical;
  font-size: 0.72rem;
}

.dependency-finder-details-view .compact-sidebar-detail .rich-notes-footer {
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-meta {
  grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem minmax(0, 1fr);
  gap: 0.35rem 0.45rem;
  padding: var(--space-8) 0;
  font-size: 0.68rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-meta dt {
  align-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-input,
.dependency-finder-details-view .compact-sidebar-detail input,
.dependency-finder-details-view .compact-sidebar-detail select {
  min-height: 1.9rem;
  padding: 0 var(--space-6);
  font-size: 0.7rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-team-meta {
  grid-template-columns: 5.5rem minmax(0, 1fr);
  margin-top: 0;
  border-top: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-template-tools {
  display: grid;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-template-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dependency-finder-details-view .compact-sidebar-detail .detail-template-row select {
  grid-column: 1 / -1;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-template-row .button {
  min-width: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-dependencies,
.dependency-finder-details-view .compact-sidebar-detail .detail-subtasks,
.dependency-finder-details-view .compact-sidebar-detail .detail-attachments,
.dependency-finder-details-view .compact-sidebar-detail .detail-annotations,
.dependency-finder-details-view .compact-sidebar-detail .detail-discussion,
.dependency-finder-details-view .compact-sidebar-detail .tag-editor {
  gap: var(--space-6);
  margin: 0;
  padding-top: var(--space-8);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-actions {
  position: static;
  gap: var(--space-6);
  padding-top: var(--space-8);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-actions .button {
  min-height: 2rem;
  font-size: 0.7rem;
}

.dependency-finder.details-mode {
  grid-template-rows: auto minmax(0, 1fr);
}

.dependency-finder.details-mode .dependency-finder-view-tabs {
  margin-right: 4.25rem;
}

.dependency-finder.details-mode .dependency-finder-header {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 8;
  display: flex;
  gap: var(--space-4);
  padding: 0;
  border: 0;
}

.dependency-finder.details-mode .dependency-finder-header > div {
  display: none;
}

.dependency-finder.details-mode .dependency-finder-header button {
  width: 1.9rem;
  height: 1.9rem;
  min-width: 1.9rem;
  min-height: 1.9rem;
  padding: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.dependency-finder.details-mode .dependency-finder-header .dependency-finder-calendar-back {
  width: auto;
  min-width: 3.6rem;
  padding-inline: 0.45rem;
  color: var(--color-primary);
  font-size: 0.7rem;
}

.dependency-finder.details-mode .dependency-finder-details-view {
  grid-row: 2;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-card-header {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)), var(--color-surface) 58%);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-parent-breadcrumbs {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.2rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 0.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
  scrollbar-width: thin;
  white-space: nowrap;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-parent-breadcrumbs-icon {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 800;
  transform: rotate(180deg);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-parent-breadcrumb {
  max-width: calc(100% - 2rem);
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  padding: 0.15rem 0.3rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-parent-breadcrumb:hover,
.dependency-finder-details-view .compact-sidebar-detail .detail-parent-breadcrumb:focus-visible {
  background: var(--color-primary-soft);
  outline: none;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-parent-breadcrumb-separator {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-title-row {
  grid-column: 1 / -1;
  grid-row: 3;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-header-actions {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  padding-right: calc(1.85rem + var(--space-12));
  align-self: start;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.dependency-finder-details-view .compact-sidebar-detail .compact-icon-actions > *,
.dependency-finder-details-view .compact-sidebar-detail .compact-icon-actions .detail-share {
  display: inline-grid;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-soft));
  color: var(--color-primary);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
}

.dependency-finder-details-view .compact-sidebar-detail .compact-icon-actions > *:hover,
.dependency-finder-details-view .compact-sidebar-detail .compact-icon-actions > *:focus-within {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: none;
}

.dependency-finder-details-view .compact-sidebar-detail .compact-icon-actions .detail-complete-button.done {
  border-color: color-mix(in srgb, var(--color-success) 42%, var(--color-border));
  background: var(--color-success-soft);
  color: var(--color-success);
}

.dependency-finder-details-view .compact-sidebar-detail .compact-icon-actions .detail-complete-button {
  display: inline-grid;
  width: 1.85rem;
  min-width: 1.85rem;
  padding: 0;
  gap: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-share-icon {
  width: 1rem;
  height: 1rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-important-icon input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-important-icon:not(:has(input:checked)) {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-important-icon:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-warning) 60%, var(--color-border));
  background: var(--color-warning-soft);
  color: color-mix(in srgb, var(--color-warning) 78%, var(--color-warning-deep));
}

.dependency-finder-details-view .compact-sidebar-detail .detail-complete-icon {
  width: 1rem;
  height: 1rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-badges {
  grid-column: 1 / -1;
  grid-row: 4;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-main-tabs {
  grid-column: 1 / -1;
  grid-row: 5;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-main-panel.details > .detail-meta,
.dependency-finder-details-view .compact-sidebar-detail .rich-notes,
.dependency-finder-details-view .compact-sidebar-detail .tag-editor,
.dependency-finder-details-view .compact-sidebar-detail .detail-subtasks,
.dependency-finder-details-view .compact-sidebar-detail .detail-attachments,
.dependency-finder-details-view .compact-sidebar-detail .detail-annotations,
.dependency-finder-details-view .compact-sidebar-detail .detail-discussion,
.dependency-finder-details-view .compact-sidebar-detail .detail-main-panel.collaboration > *,
.dependency-finder-details-view .compact-sidebar-detail .detail-main-panel.dependencies > * {
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 62%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-main-panel.details > .detail-meta {
  margin: 0;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-subtasks {
  display: grid;
  gap: var(--space-6);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-subtasks-header {
  display: grid;
  grid-template-columns: auto auto minmax(2.5rem, 1fr) auto;
  gap: var(--space-6);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-subtasks-header h2 {
  font-size: 0.76rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-subtasks-header > span {
  min-width: 1.9rem;
  min-height: 1.25rem;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.64rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-subtasks-progress {
  align-self: center;
  height: 0.3rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-subtasks-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
}


/* src/styles/dependencyFinderSidebar.css */
.dependency-finder-details-view .compact-sidebar-detail .detail-subtask-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: var(--space-4);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-subtask-add-form input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.dependency-finder-details-view .compact-sidebar-detail .detail-subtask-add-form button {
  display: grid;
  min-height: 1.9rem;
  place-items: center;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font: inherit;
  font-weight: 800;
}

.dependency-finder-details-view .compact-sidebar-detail .subtask-list {
  max-height: 14rem;
  overflow: auto;
}

.dependency-finder-details-view .compact-sidebar-detail .subtask-item {
  grid-template-columns: 1.2rem 1.45rem minmax(0, 1fr) auto;
  min-height: 2.35rem;
  margin-left: min(calc(var(--subtask-depth, 0) * 0.75rem), 3rem);
  padding: 0.3rem 0.4rem;
  border: 1px solid transparent;
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
  background: var(--color-surface);
}

.dependency-finder-details-view .compact-sidebar-detail .subtask-item:hover {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: var(--color-primary-soft);
}

.dependency-finder-details-view .compact-sidebar-detail button.subtask-marker {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.7rem;
}

.dependency-finder-details-view .compact-sidebar-detail .subtask-item.done button.subtask-marker {
  border-color: var(--color-success);
  background: var(--color-success);
  color: white;
}

.dependency-finder-details-view .compact-sidebar-detail .subtask-child-count {
  grid-column: 4;
  grid-row: 1;
  min-width: 1.2rem;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  text-align: center;
}

.dependency-finder-details-view .compact-sidebar-detail .subtask-dates {
  grid-column: 3 / -1;
  grid-row: 2;
  color: var(--color-text-secondary);
  font-size: 0.62rem;
}

.dependency-finder-details-view .compact-sidebar-detail .detail-outline-button {
  min-height: 1.75rem;
  padding: 0 var(--space-6);
  font-size: 0.68rem;
}

@container (max-width: 18rem) {
  .dependency-finder-details-view .compact-sidebar-detail .detail-meta {
    grid-template-columns: 4.6rem minmax(0, 1fr);
  }
}

@container (max-width: 25rem) {
  .dependency-finder-details-view { padding: var(--space-6); }

  .dependency-finder-details-view .compact-sidebar-detail { gap: var(--space-6); }

  .dependency-finder-details-view .compact-sidebar-detail .detail-card-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-10);
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-parent-breadcrumbs {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-parent-breadcrumb {
    max-width: 100%;
    flex: 0 1 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-title-row {
    grid-column: 1;
    grid-row: 3;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-title {
    height: 2rem;
    min-height: 2rem;
    font-size: 0.86rem;
    overflow-wrap: anywhere;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-header-actions {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-badges {
    grid-column: 1;
    grid-row: 4;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-main-tabs {
    grid-column: 1;
    grid-row: 5;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-meta,
  .dependency-finder-details-view .compact-sidebar-detail .detail-team-meta {
    grid-template-columns: 5.25rem minmax(0, 1fr);
    gap: var(--space-6) var(--space-8);
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-meta dt {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-main-panel.details > .detail-meta,
  .dependency-finder-details-view .compact-sidebar-detail .rich-notes,
  .dependency-finder-details-view .compact-sidebar-detail .tag-editor,
  .dependency-finder-details-view .compact-sidebar-detail .detail-subtasks,
  .dependency-finder-details-view .compact-sidebar-detail .detail-attachments,
  .dependency-finder-details-view .compact-sidebar-detail .detail-annotations,
  .dependency-finder-details-view .compact-sidebar-detail .detail-discussion,
  .dependency-finder-details-view .compact-sidebar-detail .detail-main-panel.collaboration > *,
  .dependency-finder-details-view .compact-sidebar-detail .detail-main-panel.dependencies > * {
    border-left: 3px solid color-mix(in srgb, var(--color-primary) 62%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes-header {
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  }

  .dependency-finder-details-view .compact-sidebar-detail .rich-notes .rich-notes-toolbar {
    flex-wrap: wrap;
    background: var(--color-surface);
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-actions > * { min-width: 0; }

  .dependency-finder-details-view .compact-sidebar-detail .detail-dependency-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-dependency-row > * {
    width: 100%;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-dependency-item {
    grid-template-columns: 0.7rem minmax(0, 1fr) 1.75rem;
    grid-template-rows: auto auto auto;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-dependency-item > button:last-of-type {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

.dependency-ai-card {
  display: grid;
  width: 100%;
  gap: var(--space-4);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dependency-ai-card:hover:not(:disabled),
.dependency-ai-card:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

.dependency-ai-card:disabled {
  cursor: default;
  opacity: 0.7;
}

.dependency-ai-card.primary {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: var(--color-primary-soft);
}

.dependency-ai-group {
  display: grid;
  gap: var(--space-4);
}

.dependency-ai-group > strong {
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dependency-ai-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.dependency-ai-group-grid .dependency-ai-card {
  min-height: 6.2rem;
  padding: var(--space-8);
}

.dependency-ai-group-grid .dependency-ai-card strong {
  font-size: 1.15rem;
}

.dependency-ai-card > span,
.dependency-ai-card p {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-ai-card strong { color: var(--color-text-primary); }
.dependency-ai-card p { margin: 0; line-height: 1.35; }
.dependency-ai-refresh { width: 100%; }

.dependency-ai-list-panel {
  display: grid;
  gap: var(--space-8);
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.dependency-ai-list-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.dependency-ai-list-header strong {
  font-size: var(--text-caption);
  color: var(--color-text-primary);
}

.dependency-ai-list-back {
  display: grid;
  place-items: center;
  width: var(--space-24);
  height: var(--space-24);
  min-width: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.dependency-ai-list-back:hover,
.dependency-ai-list-back:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}

.dependency-ai-list {
  display: grid;
  gap: var(--space-6);
  align-content: start;
  overflow: auto;
  min-height: 0;
}

.dependency-ai-list-empty {
  margin: 0;
  padding: var(--space-12);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-ai-list-item {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--task-project-accent, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dependency-ai-list-item:hover,
.dependency-ai-list-item:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

.dependency-ai-list-item strong {
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.dependency-ai-list-item small {
  color: var(--color-text-secondary);
  font-size: 0.7rem;
}

.dependency-ai-selected-task {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.dependency-ai-selected-task > span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-ai-selected-task > strong {
  color: var(--color-text-primary);
  font-size: var(--text-body);
}

.dependency-ai-selected-task > p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.4;
}

.dependency-finder-scroll-top {
  display: none;
}

.dependency-sidebar-graph-context {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.dependency-sidebar-graph-context strong,
.dependency-sidebar-graph-context span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-sidebar-graph-context strong {
  color: var(--color-text-primary);
  font-size: var(--text-body);
}

.dependency-sidebar-graph-context span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-sidebar-graph-controls {
  display: grid;
  grid-template-columns: 2rem minmax(2.8rem, auto) 2rem 2rem 2rem;
  justify-content: start;
}

.dependency-sidebar-graph-controls button,
.dependency-sidebar-graph-controls span {
  display: grid;
  min-height: 2rem;
  place-items: center;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
}

.dependency-sidebar-graph-controls button:hover,
.dependency-sidebar-graph-controls button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}

.dependency-sidebar-graph-controls .dependency-sidebar-graph-delete {
  border-color: color-mix(in srgb, var(--color-danger) 38%, var(--color-border));
  color: var(--color-danger);
}

.dependency-sidebar-graph-controls .dependency-sidebar-graph-delete:hover,
.dependency-sidebar-graph-controls .dependency-sidebar-graph-delete:focus-visible {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  color: var(--color-danger);
}

.dependency-sidebar-graph-viewport {
  height: 100%;
  min-height: 18rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.dependency-sidebar-graph-viewport .dependency-focus-graph {
  min-width: 42rem;
}


/* src/styles/dependencyFinderResize.css */
.dependency-finder-resize {
  position: absolute;
  z-index: 30;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1.35rem;
  cursor: col-resize;
  touch-action: none;
  pointer-events: auto;
}

.dependency-finder-resize::after {
  position: absolute;
  top: 50%;
  left: 0.18rem;
  display: grid;
  width: 0.9rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
  content: "⋮";
  font-size: 0.8rem;
  line-height: 1;
  transform: translateY(-50%);
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.dependency-finder-resize:hover::after,
.resizing-dependency-finder .dependency-finder-resize::after {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.resizing-dependency-finder {
  cursor: col-resize;
  user-select: none;
}

.dependency-finder[hidden] {
  display: none;
}

.dependency-finder-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.dependency-finder-header div {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.dependency-finder-header strong {
  color: var(--color-text-primary);
  font-size: var(--text-body);
}

.dependency-finder-header span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-finder-header button {
  display: grid;
  width: var(--space-28);
  height: var(--space-28);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.dependency-finder.calendar-day-mode {
  grid-template-rows: auto minmax(0, 1fr);
}
.dependency-finder.calendar-day-mode .dependency-finder-header { grid-row: 1; }
.dependency-finder.calendar-day-mode .dependency-finder-details-view { grid-row: 2; padding: 0; }
.calendar-sidebar-day { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 100%; }
.calendar-sidebar-day-list { display: grid; align-content: start; gap: 0.4rem; min-height: 0; padding: 0.15rem; overflow-y: auto; }
.calendar-sidebar-day-list > p { margin: 0; padding: 0.75rem; color: var(--color-text-secondary); font-size: 0.8rem; }
.calendar-sidebar-card {
  position: relative;
  display: grid;
  gap: 0.16rem;
  width: 100%;
  min-width: 0;
  padding: 0.65rem 0.65rem 0.65rem 0.85rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
  cursor: grab;
}
.calendar-sidebar-card::before { position: absolute; inset: 0 auto 0 0; width: 0.22rem; background: var(--task-project-accent, var(--color-primary)); content: ""; }
.calendar-sidebar-card:hover { border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 52%, var(--color-border)); background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 6%, var(--color-surface)); }
.calendar-sidebar-card.dragging { opacity: 0.42; transform: rotate(1deg) scale(0.99); cursor: grabbing; }
.calendar-sidebar-card :is(strong, span, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-sidebar-card strong { font-size: 0.82rem; }
.calendar-sidebar-card span { color: var(--color-text-secondary); font-size: 0.7rem; }
.calendar-sidebar-card small { color: var(--color-text-tertiary); font-size: 0.67rem; }
.calendar-sidebar-card.done { opacity: 0.58; }
.calendar-sidebar-card.done strong { text-decoration: line-through; }
.calendar-sidebar-drag-image {
  position: fixed;
  z-index: 9999;
  top: -10rem;
  left: -10rem;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  width: min(16rem, 60vw);
  padding: 0.48rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 45%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.calendar-sidebar-drag-image span { flex: 0 0 0.25rem; align-self: stretch; border-radius: var(--radius-full); background: var(--task-project-accent, var(--color-primary)); }
.calendar-sidebar-drag-image strong { overflow: hidden; color: var(--color-text-primary); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-sidebar-deadlines { display: grid; gap: 0.2rem; padding: 0.65rem 0.15rem 0.1rem; border-top: 1px solid var(--color-border); }
.calendar-sidebar-deadlines h3 { margin: 0 0 0.15rem; color: var(--color-danger); font-size: 0.74rem; }
.calendar-sidebar-deadlines button { overflow: hidden; padding: 0.3rem 0; border: 0; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 0.73rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }

.dependency-finder-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: var(--space-8);
}

.dependency-finder-scopes button {
  min-height: 1.8rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
}

.dependency-finder-scopes button.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dependency-finder-search input {
  width: 100%;
  height: 2.35rem;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.dependency-finder-list {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  min-height: 0;
  margin-top: var(--space-12);
  overflow: auto;
}

.dependency-finder-item {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--task-project-accent, var(--color-primary));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  cursor: grab;
}

.dependency-finder-item:active,
.dependency-finder-item.dependency-drag-source {
  cursor: grabbing;
}

.dependency-finder-item.dependency-drag-source {
  opacity: 0.48;
}

.dependency-drag-overlay {
  position: fixed;
  z-index: 10000;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  transform: translateY(-100%);
}

.dependency-drag-overlay.target-active {
  border-color: var(--color-danger);
  color: var(--color-danger);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--color-danger) 12%, transparent), var(--shadow-md);
}

.dependency-finder-item:hover,
.dependency-finder-item.selected {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 45%, var(--color-border));
}

.dependency-finder-item.dependency-drop-active {
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-teal) 16%, transparent), var(--shadow-sm);
  transform: translateY(-1px);
}

.dependency-finder-item.dependency-connection-source-active {
  border-color: var(--color-accent-orange);
  background: var(--color-warning-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-orange) 14%, transparent);
}

.dependency-finder-item.dependency-connection-target {
  cursor: crosshair;
}

.dependency-finder-item.dependency-connection-target:hover,
.dependency-finder-item.dependency-connection-target:focus-within {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.dependency-finder-item-header {
  display: flex;
  min-width: 0;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-8);
}

.dependency-finder-item-header strong {
  flex: 1 1 auto;
}

.dependency-finder-item-focus {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 1.7rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-hairline);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1;
}

.dependency-finder-item-focus:hover,
.dependency-finder-item-focus:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: none;
}

.dependency-finder-item strong,
.dependency-finder-item span,
.dependency-finder-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-finder-item span,
.dependency-finder-item small,
.dependency-finder-empty {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-finder-empty {
  padding: var(--space-12);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.dependency-finder-toggle.active {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.c2-toolbar .dependency-finder-toggle {
  width: 1.95rem;
  min-width: 1.95rem;
  height: 1.95rem;
  min-height: 1.95rem;
  align-self: center;
  padding: 0;
  border-radius: var(--radius-control);
}

.dependency-finder-toggle-icon {
  width: 1.45rem;
  height: 1.1rem;
  fill: none;
}

.dependency-finder-toggle-icon .sidebar-toggle-outline,
.dependency-finder-toggle-icon .sidebar-toggle-left-lines {
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dependency-finder-toggle-icon .sidebar-toggle-panel {
  fill: var(--color-primary);
  stroke: var(--color-primary);
  stroke-width: 1;
}

.dependency-finder-toggle-icon .sidebar-toggle-panel-mark {
  fill: var(--color-on-primary);
}

.dependency-finder-toggle-icon .sidebar-toggle-panel-lines {
  fill: none;
  stroke: var(--color-on-primary);
  stroke-width: 1.35;
  stroke-linecap: round;
}

.task-panel:has(.board-list) {
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

@media (max-width: 72rem) {
  .task-work-area:has(.dependency-project-tree:not([hidden])) {
    position: relative;
    grid-template-columns: clamp(10rem, 22vw, 13rem) minmax(0, 1fr);
    overflow: hidden;
  }

  .task-work-area:has(.dependency-project-tree:not([hidden])) .dependency-finder {
    max-height: none;
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .task-work-area:has(.dependency-project-tree:not([hidden])),
  .task-work-area:has(.dependency-project-tree:not([hidden])):has(.dependency-finder:not([hidden])) {
    grid-template-columns: clamp(10rem, 22vw, 13rem) minmax(0, 1fr);
  }

  .task-work-area:has(.dependency-project-tree:not([hidden])) > .dependency-finder:not([hidden]) {
    position: absolute;
    z-index: 30;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--dependency-finder-width, 18rem), calc(100% - 2rem));
    box-shadow: var(--shadow-floating, -8px 0 24px var(--shadow-ink-12));
  }

  .task-work-area:has(.dependency-project-tree:not([hidden])) .dependency-finder {
    grid-column: auto;
  }

  .task-work-area:has(.dependency-project-tree:not([hidden])) .dependency-finder-resize {
    display: block;
  }

  .dependency-workspace-toolbar {
    flex-wrap: wrap;
  }
}

.task-panel:has(.outline-list) {
  overflow: hidden;
}

.board-switcher {
  display: flex;
  align-items: start;
  gap: var(--space-4);
  margin: 0 0 var(--space-16);
  padding-bottom: var(--space-4);
  overflow-x: auto;
}

.sidebar .board-switcher {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.board-menu {
  position: relative;
  width: min(28rem, 100%);
}

.board-menu-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  gap: 0 var(--space-8);
  align-items: center;
  width: 100%;
  min-height: var(--space-44, 2.75rem);
  padding: var(--space-4) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
  text-align: left;
  box-shadow: 0 1px 2px var(--shadow-ink-04);
}

.sidebar .board-menu {
  width: 100%;
}

.sidebar .board-menu-trigger {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: 1fr;
  min-height: var(--space-32);
  padding: 0 var(--space-8);
  border-radius: var(--radius-sm);
}

.sidebar .board-menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.sidebar .board-menu-trigger strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  max-height: 1.2em;
  overflow: hidden;
  font-size: var(--text-caption);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* src/styles/cardMoveMenu.css */
.card-move-menu {
  position: relative;
  min-width: 0;
}

.card-move-menu-trigger {
  display: inline-flex;
  min-height: var(--control-height-sm);
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0 var(--space-10, 0.625rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-align: left;
  cursor: pointer;
}

.card-move-menu-trigger::after {
  content: "›";
  margin-left: auto;
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1;
}

.card-move-menu-trigger.icon-only {
  justify-content: center;
  width: var(--space-24);
  min-width: var(--space-24);
  height: var(--space-24);
  min-height: var(--space-24);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

.card-move-menu-trigger.icon-only::after {
  display: none;
}

.card-move-menu-trigger:hover,
.card-move-menu.open .card-move-menu-trigger {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.card-move-menu-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.card-move-menu-panel {
  position: absolute;
  z-index: 130;
  top: calc(100% + 0.35rem);
  left: 0;
  display: grid;
  /* The panel is anchored to a compact icon button.  Its own width must not
     inherit that button's width, otherwise Board/Projekt choices collapse to
     a single narrow character column. */
  width: min(20rem, calc(100vw - 2rem));
  max-height: min(24rem, 55dvh);
  gap: 0.45rem;
  overflow: auto;
  padding: 0.6rem;
  border: 1px solid var(--color-border-strong, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.card-move-menu-panel[hidden] {
  display: none !important;
}

.card-move-menu-panel > strong {
  font-size: var(--text-caption);
}

.card-move-menu-header {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.card-move-menu-header > strong { font-size: var(--text-caption); }

.card-move-menu-hint,
.card-move-menu-empty {
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  line-height: 1.25;
}

.card-move-menu-board {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--color-border);
}

.card-move-menu-board-name {
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: var(--font-weight-strong);
}

.card-move-menu-projects {
  display: grid;
  gap: var(--space-4);
}

.card-move-menu-project {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.72rem;
  font-weight: var(--font-weight-strong);
  text-align: left;
  cursor: pointer;
}

.card-move-menu-project:hover,
.card-move-menu-project:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: none;
}

.card-move-menu-back {
  min-height: 2rem;
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
  cursor: pointer;
}

.move-target-tree {
  display: grid;
  min-height: 0;
  gap: var(--space-2);
  overflow: auto;
}

.move-target-tree-row {
  display: grid;
  min-height: 2.25rem;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-8) 0 calc(var(--space-8) + var(--move-target-depth, 0) * 0.9rem);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
  cursor: pointer;
}

.move-target-tree-row:hover,
.move-target-tree-row:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: 0;
}

.move-target-tree-root {
  margin-bottom: var(--space-4);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}

.move-target-tree-symbol {
  color: var(--color-text-tertiary);
  text-align: center;
}

@media (pointer: coarse) {
  .card-move-menu-project,
  .card-move-menu-back,
  .move-target-tree-row { min-height: var(--control-height-lg); }
}

.overview-modal-card-move-menu .card-move-menu-panel {
  width: min(20rem, calc(100vw - 3rem));
}

.task-card-actions .task-card-move-menu {
  position: relative;
  flex: 0 0 var(--overview-toolbar-control, var(--space-24));
  order: 4;
}

.task-card-actions .task-card-move-menu .card-move-menu-panel {
  right: 0;
  left: auto;
}

.task-card-actions .task-card-move-menu .card-move-menu-trigger {
  width: var(--overview-toolbar-control, var(--space-24));
  min-width: var(--overview-toolbar-control, var(--space-24));
  height: var(--overview-toolbar-control, var(--space-24));
  min-height: var(--overview-toolbar-control, var(--space-24));
  opacity: 0.76;
}

.task-card-actions .task-card-move-menu .card-move-menu-trigger:hover,
.task-card-actions .task-card-move-menu.open .card-move-menu-trigger {
  opacity: 1;
}

.task-assignee,
.task-teamwork {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-caption);
}

.task-teamwork {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.detail-collaborators,
.overview-modal-collaborators {
  min-height: 4.5rem;
}

.board-switch {
  display: inline-flex;
  min-width: 0;
  max-width: 13rem;
  min-height: var(--space-32);
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-10, 0.625rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
  font: inherit;
}

.sidebar .board-switch {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  max-width: none;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-12);
  border-color: transparent;
  background: transparent;
}

.sidebar .board-switch.active {
  background: var(--color-primary-soft);
}

.board-switch.all {
  min-width: 0;
}

.board-switch.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.board-switch strong,
.board-switch span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-switch span {
  display: inline-grid;
  min-width: var(--space-24);
  height: var(--space-24);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.task-list {
  display: grid;
  gap: var(--space-16);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.task-list.overview-list {
  --overview-card-min-width: 26rem;
  align-content: start;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--overview-card-min-width)), 1fr));
  grid-auto-flow: row;
  gap: var(--space-12);
  width: 100%;
}

.task-list.overview-list[data-column-mode="1"],
.task-list.overview-list[data-column-mode="2"],
.task-list.overview-list[data-column-mode="3"],
.task-list.overview-list[data-column-mode="4"],
.task-list.overview-list[data-column-mode="5"],
.task-list.overview-list[data-column-mode="6"],
.task-list.overview-list[data-column-mode="7"],
.task-list.overview-list[data-column-mode="8"] {
  grid-template-columns: repeat(var(--overview-column-count), minmax(0, 1fr));
}

.task-list.overview-list > .bulk-toolbar,
.task-list.overview-list > .column-add-form {
  grid-column: 1 / -1;
}

.task-list.overview-list > .task-item.expanded {
  grid-column: 1 / -1;
}

.task-list:not(.board-list):not(.outline-list) > .column-add-form {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: var(--space-4);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-primary-soft));
  box-shadow: 0 -10px 24px var(--shadow-ink-08);
}


/* src/styles/boardContextMenu.css */
.board-attention-summary {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
  cursor: pointer;
}

.board-time-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--control-height-sm);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.board-time-suggestion button {
  min-height: var(--control-height-sm);
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  cursor: pointer;
}

.board-time-suggestion-open { padding: var(--space-6) var(--space-8); text-align: left; font-size: var(--text-caption); }
.board-time-suggestion-dismiss { border-left: 1px solid var(--color-border) !important; font-size: var(--text-title) !important; }

.board-selector-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  border: 0;
  background: transparent;
}

.board-selector-backdrop[hidden],
.board-menu-list[hidden] { display: none; }

.board-menu-list.board-selector-sheet,
.sidebar .board-menu-list.board-selector-sheet {
  position: fixed;
  top: 5rem;
  left: 2.75rem;
  z-index: 100;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  width: min(26.25rem, calc(100vw - var(--space-32)));
  max-height: min(42.5rem, calc(100dvh - 4.5rem));
  margin: 0;
  gap: var(--space-8);
  padding: var(--space-10);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-surface) 98.5%, transparent);
  box-shadow: var(--shadow-lg);
  transform: none;
  backdrop-filter: saturate(140%) blur(10px);
}

.board-selector-sheet-header { display: none; }

.board-menu-search {
  width: 100%;
  min-height: 2.65rem;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-md);
  outline: 0;
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font: inherit;
}

.board-menu-search:focus {
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.board-menu-items {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.board-menu-aggregate {
  display: flex;
  width: 100%;
  min-height: 2.7rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
  text-align: left;
  cursor: pointer;
}

.board-menu-aggregate small { color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }

.board-menu-group-title {
  display: flex;
  justify-content: space-between;
  margin: var(--space-12) var(--space-8) var(--space-4);
  color: var(--color-text-tertiary);
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.board-menu-group-title small { font-size: inherit; font-weight: var(--font-weight-regular); letter-spacing: 0; text-transform: none; }
.board-menu-group { display: grid; }

.board-menu-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}

.board-menu-row:hover { background: var(--color-surface-muted); }
.board-menu-row.active { background: color-mix(in srgb, var(--color-primary-soft) 64%, transparent); }

.board-selection-check {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.board-selection-mark {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  border: 1.5px solid var(--color-border-strong, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: transparent;
  font-size: 0.78rem;
  font-weight: var(--font-weight-strong);
}

.board-menu-row.active .board-selection-mark {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.board-menu-row > .board-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "dot title"
    ". metrics";
  min-width: 0;
  min-height: 2.75rem;
  gap: var(--space-2) var(--space-8);
  align-items: center;
  padding: 0 var(--space-6);
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.board-menu-row > .board-switch > .board-menu-dot { grid-area: dot; }

.board-menu-row > .board-switch strong {
  grid-area: title;
  overflow: hidden;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-menu-numbers {
  grid-area: metrics;
  display: flex;
  min-width: 0;
  gap: var(--space-8);
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-menu-numbers > * { overflow: hidden; text-overflow: ellipsis; }

.board-menu-numbers b { color: var(--color-danger); font-weight: var(--font-weight-medium); }

.board-menu-row-settings { display: flex; gap: var(--space-2); align-items: center; }

.board-preference-toggle {
  display: grid;
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  min-height: 1.8rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.board-preference-toggle:hover { background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); }
.board-preference-toggle[aria-pressed="true"] { background: transparent; color: var(--color-primary); }
.board-preference-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.board-row-management-actions {
  grid-column: 2 / -1;
  display: none;
  gap: var(--space-4);
  padding: 0 var(--space-6) var(--space-4);
}

.board-selector-sheet.manage-mode .board-row-management-actions { display: flex; }

.board-row-management-action {
  min-height: 1.8rem;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}

.board-row-management-action:hover { background: var(--color-primary-soft); }
.board-row-management-action.danger { color: var(--color-danger); }

.board-time-window-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-8);
  padding: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.board-time-window-editor[hidden] { display: none; }
.board-time-window-days, .board-time-window-controls, .board-time-window-times { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.board-time-window-days button,
.board-time-window-action {
  min-width: var(--control-height-sm);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}

.board-time-window-days button[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-primary); }
.board-time-window-times { gap: var(--space-8); }
.board-time-window-times label { display: grid; grid-template-columns: auto minmax(6.5rem, 1fr); gap: var(--space-6); align-items: center; color: var(--color-text-secondary); font-size: var(--text-caption); }
.board-time-window-times input { min-height: var(--control-height-sm); padding: 0 var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-primary); font: inherit; }
.board-time-window-editor small { color: var(--color-text-secondary); font-size: var(--text-caption); }
.board-time-window-controls { justify-content: flex-end; }
.board-time-window-action { color: var(--color-primary); }
.board-time-window-action.danger { color: var(--color-danger); }

.board-menu-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-14, 0.875rem);
  padding: var(--space-2) var(--space-8);
  color: var(--color-text-tertiary);
  font-size: 0.7rem;
}

.board-menu-legend span { display: inline-flex; gap: var(--space-4); align-items: center; }
.board-menu-legend svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }

.board-menu-actions {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.board-menu-list .board-share-action {
  min-height: 2rem;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.board-menu-list .board-share-action:hover { background: var(--color-primary-soft); }
.board-menu-list .board-share-action.danger { color: var(--color-danger); }

@media (max-width: 47.99rem) {
  .board-selector-backdrop { background: color-mix(in srgb, var(--color-text-primary) 20%, transparent); backdrop-filter: blur(2px); }
  .board-menu-list.board-selector-sheet,
  .sidebar .board-menu-list.board-selector-sheet {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(82dvh, 42rem);
    margin: 0;
    padding: var(--space-14, 0.875rem) var(--space-12) max(var(--space-16), env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .board-selector-sheet-header { display: flex; align-items: center; justify-content: space-between; }
  .board-selector-sheet-close { min-width: var(--control-height-lg); min-height: var(--control-height-lg); }
  .board-menu-search { min-height: var(--control-height-lg); }
  .board-menu-row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .board-menu-row-settings { grid-column: 2; justify-content: flex-start; }
  .board-selection-check, .board-menu-row > .board-switch { min-height: var(--control-height-lg); }
}


/* src/styles/boardScopeQuickFilters.css */
.board-scope-quick-filters {
  display: flex;
  min-width: 0;
  max-width: 100%;
  gap: var(--space-2);
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.board-scope-quick-filters[hidden] { display: none; }

.board-scope-chip,
.board-scope-overflow {
  display: inline-flex;
  min-width: 0;
  min-height: 1.875rem;
  gap: var(--space-6);
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-10);
  flex: 0 1 auto;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
  white-space: nowrap;
}

.board-scope-chip:hover,
.board-scope-overflow:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

.board-scope-chip > span:nth-child(2) {
  min-width: 0;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-scope-chip-check,
.board-menu-dot {
  display: block;
  width: 0.56rem;
  height: 0.56rem;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--color-accent-blue);
}

:is(.board-scope-chip-check, .board-menu-dot)[data-tone="1"] { background: var(--color-accent-teal); }
:is(.board-scope-chip-check, .board-menu-dot)[data-tone="2"] { background: var(--color-accent-orange); }
:is(.board-scope-chip-check, .board-menu-dot)[data-tone="3"] { background: var(--color-accent-purple); }
:is(.board-scope-chip-check, .board-menu-dot)[data-tone="4"] { background: var(--color-accent-green); }
:is(.board-scope-chip-check, .board-menu-dot)[data-tone="5"] { background: var(--color-text-tertiary); }

.board-scope-chip small {
  color: var(--color-text-tertiary);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-scope-chip small.danger { color: var(--color-danger); }

.board-scope-chip.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 38%, transparent);
  background: color-mix(in srgb, var(--color-primary-soft) 82%, var(--color-surface));
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}

.board-scope-chip.primary {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 62%, transparent);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.board-scope-chip.active small { color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text-secondary)); }

.board-scope-overflow {
  flex: 0 0 auto;
  font-weight: var(--font-weight-medium);
}

.board-attention-host {
  display: flex;
  min-width: 0;
  align-items: center;
}

.board-attention-host[hidden] { display: none; }

.board-attention-host .board-attention-summary {
  width: auto;
  max-width: 100%;
  min-height: 1.875rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-attention-summary strong { color: var(--color-danger); font-weight: var(--font-weight-strong); }

@media (max-width: 74.99rem) {
  .board-scope-quick-filters,
  .board-attention-host { display: none; }
}


/* src/styles/taskListLayouts.css */
.task-list:not(.board-list):not(.outline-list) > .quick-create-form,
.project-content-list > .quick-create-form {
  position: sticky;
  top: 0;
  bottom: auto;
  z-index: 5;
  display: grid;
  gap: var(--space-8);
  margin: 0 0 var(--space-10);
  padding: var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 97%, var(--color-primary-soft));
  box-shadow: 0 10px 24px var(--shadow-ink-06);
}

.task-list.board-list {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr);
  align-items: stretch;
  height: 100%;
  min-width: 18rem;
  gap: var(--space-10);
}

.task-list.board-list.show-done-column {
  grid-template-columns: repeat(2, minmax(18rem, 1fr));
  min-width: calc(2 * 18rem + var(--space-12));
}

.task-list.board-list:not(.show-done-column) .task-item {
  min-height: 5.75rem;
  padding: var(--space-12);
}

.task-list.board-list:not(.show-done-column) .task-card-header,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-card-header {
  grid-template-columns: var(--space-32) minmax(0, 1fr) minmax(7.5rem, auto);
  gap: var(--space-8) var(--space-12);
  align-items: center;
}

.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-item {
  min-height: 6.75rem;
  padding: var(--space-10) var(--space-12) var(--space-16);
}

.task-list.board-list:not(.show-done-column) .task-content,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-content {
  grid-template-columns: minmax(10rem, 0.9fr) minmax(12rem, 1.15fr);
  gap: var(--space-6) var(--space-12);
  align-items: center;
}

.task-list.board-list:not(.show-done-column) .task-title,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-title {
  grid-column: 1;
  grid-row: 1;
  -webkit-line-clamp: 2;
}

.task-list.board-list:not(.show-done-column) .task-project-badge,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-project-badge {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.task-list.board-list:not(.show-done-column) .task-parent-context,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-parent-context {
  grid-column: 1;
}

.task-list.board-list:not(.show-done-column) .task-date-chips,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-date-chips {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.task-list.board-list:not(.show-done-column) .task-metadata,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-metadata {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
}

.task-list.board-list:not(.show-done-column) .task-card-actions,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-card-actions {
  align-items: center;
  min-width: 7.5rem;
}

.task-list.board-list:not(.show-done-column) .task-date-chip-list,
.task-list:not(.board-list):not(.outline-list):not(.calendar-list):not(.timeline-list):not(.dependency-list):not(.project-list):not(.template-list) .task-date-chip-list {
  max-width: 100%;
}

.task-list.calendar-list,
.task-list.timeline-list,
.task-list.dependency-list,
.task-list.project-list {
  align-content: start;
  gap: var(--space-12);
}

.task-list.project-list {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

.task-list.project-list > .bulk-toolbar {
  grid-row: 1;
}

.task-list.project-list > .project-overview {
  grid-row: 1;
}

/* The dependency graph is a workspace, not a document section. Its canvas
 * must keep the full available height even when its drawing is zoomed out. */
.task-list.dependency-list {
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

.calendar-view,
.timeline-view,
.dependency-timeline,
.project-overview {
  display: grid;
  gap: var(--space-12);
  min-width: 0;
}

.project-overview {
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.project-sidebar,
.project-content {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.project-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-12);
  padding: var(--space-16);
  overflow: hidden;
}

.project-sidebar > header,
.project-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: 0;
}

.project-content-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: 0 0 auto;
}

.project-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(4.4rem, auto));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.project-view-switch button {
  min-height: var(--space-36);
  padding: 0 var(--space-12);
  border: 0;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.project-view-switch button:first-child {
  border-left: 0;
}

.project-view-switch button[aria-pressed="true"],
.project-view-switch button:hover {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 24%, transparent);
}

.project-sidebar h2,
.project-content-header h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-title);
  line-height: var(--line-tight);
}

.project-sidebar-add {
  display: grid;
  width: var(--space-36);
  height: var(--space-36);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-heading);
  line-height: 1;
  box-shadow: 0 2px 8px var(--shadow-ink-05);
}

.project-sidebar-add:disabled,
.project-sidebar-new:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.project-sidebar-list {
  display: grid;
  align-content: start;
  gap: var(--space-10);
  min-height: 0;
  overflow: auto;
  padding-right: var(--space-2);
}

.planning-tree-node {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  min-width: 0;
  min-height: 2.35rem;
  margin-left: min(calc((var(--planning-tree-depth, 0) + 1) * 1rem), 8rem);
  padding: var(--space-6) var(--space-10);
  border: 1px solid transparent;
  border-left-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.planning-tree-node strong {
  overflow: hidden;
  color: inherit;
  font-size: var(--text-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-tree-node:hover,
.planning-tree-node.active {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.planning-add-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.planning-add-form input {
  min-width: 0;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.planning-add-form button,
.planning-row-actions button {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 36%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.planning-add-form button:hover,
.planning-row-actions button:hover {
  background: var(--color-primary-soft);
}

.planning-outdent-zone {
  display: grid;
  grid-template-columns: 2rem auto minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  min-height: 2.4rem;
  padding: var(--space-6) var(--space-10);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
  color: var(--color-text-secondary);
  transition: min-height 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.planning-outdent-zone > span {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.15rem;
  font-weight: var(--font-weight-strong);
}

.planning-outdent-zone strong {
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.planning-outdent-zone small {
  overflow: hidden;
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-outdent-zone.drag-over {
  min-height: 3.5rem;
  border-color: var(--color-primary);
  border-style: solid;
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-primary), 0 8px 20px color-mix(in srgb, var(--color-primary-hover) 12%, transparent);
}

.planning-root-drop-zone {
  height: 0;
  min-height: 0;
  margin: 0;
  padding-block: 0;
  overflow: hidden;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: height 160ms ease, min-height 160ms ease, padding 160ms ease, border-width 160ms ease, opacity 120ms ease, background 160ms ease;
}

.task-list.task-drag-active .planning-root-drop-zone {
  height: 2.7rem;
  min-height: 2.7rem;
  padding-block: var(--space-6);
  border-width: 1px;
  opacity: 1;
  pointer-events: auto;
}

.task-list.task-drag-active .planning-root-drop-zone.drag-over {
  height: 3.5rem;
  min-height: 3.5rem;
}

.project-list-item {
  display: grid;
  grid-template-columns: var(--space-36) var(--space-10) minmax(0, 1fr) var(--space-24);
  gap: var(--space-10);
  align-items: center;
  min-width: 0;
  min-height: 5rem;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  box-shadow: 0 8px 20px var(--shadow-ink-04);
  cursor: pointer;
}

.project-list-item:focus-visible,
.project-list-item:hover,
.project-list-item.active,
.project-list-item.drop-target {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.0625rem var(--color-primary), 0 14px 30px color-mix(in srgb, var(--color-primary-hover) 10%, transparent);
}

.project-list-item.drop-target {
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 12%, var(--color-surface));
  transform: translateY(-1px);
}

.planning-project-hover-panel {
  position: fixed;
  z-index: 120;
  display: grid;
  gap: var(--space-6);
  max-height: min(27rem, calc(100dvh - 1.5rem));
  padding: var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
}

.planning-project-hover-panel > small,
.planning-project-hover-empty {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.planning-project-hover-root,
.planning-project-hover-target {
  position: relative;
  min-height: 2.35rem;
  padding: 0.48rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.planning-project-hover-root {
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}

.planning-project-hover-list {
  display: grid;
  gap: var(--space-4);
  min-height: 0;
  overflow: auto;
}

.planning-project-hover-target {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding-left: calc(0.65rem + (var(--planning-hover-depth, 0) * 0.9rem));
}


/* src/styles/planningViewsCore.css */
.planning-project-hover-branch {
  color: var(--color-text-tertiary);
  text-align: center;
}

.planning-project-hover-target .project-row-title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.planning-project-hover-root.drag-over,
.planning-project-hover-target.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.planning-project-hover-target.drop-before::before,
.planning-project-hover-target.drop-after::after {
  position: absolute;
  right: var(--space-4);
  left: var(--space-4);
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  content: "";
}

.planning-project-hover-target.drop-before::before { top: -3px; }
.planning-project-hover-target.drop-after::after { bottom: -3px; }

.project-list-icon {
  position: relative;
  display: grid;
  width: var(--space-36);
  height: var(--space-36);
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 10%, var(--color-surface));
  color: var(--task-project-accent, var(--color-primary));
  font-size: 1.25rem;
  line-height: 1;
}

.project-list-item.knowledge-project .project-list-icon::after,
.knowledge-navigation-item.knowledge-project .knowledge-navigation-icon::after {
  position: absolute;
  right: -0.22rem;
  bottom: -0.18rem;
  display: grid;
  width: 0.82rem;
  height: 0.82rem;
  place-items: center;
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-xs);
  background: var(--color-primary);
  color: var(--color-on-primary);
  content: "≡";
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
}

.project-list-icon::before {
  content: "▦";
}

.project-list-icon.has-project-icon::before {
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  content: "";
  mask: var(--task-project-icon-url) center / contain no-repeat;
  -webkit-mask: var(--task-project-icon-url) center / contain no-repeat;
}

.project-list-marker {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--task-project-accent, var(--color-primary));
}

.project-list-copy {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.project-list-title-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
}

.project-list-title-line > strong { min-width: 0; }

.project-collaboration-badge {
  display: inline-flex;
  min-width: 1.65rem;
  height: 1.35rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding-inline: 0.24rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.project-collaboration-badge svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.project-collaboration-badge small { color: inherit; font-size: 0.62rem; line-height: 1; }

.project-list-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--text-title);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-list-copy small {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: var(--line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-list-favorite {
  justify-self: end;
  color: var(--color-text-tertiary);
  font-size: var(--text-title);
  line-height: 1;
}

.project-sidebar-new {
  justify-self: start;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.project-sidebar-new:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.project-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.project-content-header {
  min-height: var(--space-56);
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.project-content-header span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.project-content-list {
  display: grid;
  align-content: start;
  gap: var(--space-10);
  min-height: 0;
  overflow: auto;
  padding: var(--space-16);
}

.project-content-list.project-view-structure {
  gap: var(--space-6);
}

.project-content-list.project-view-list,
.project-content-list.project-view-diagram {
  gap: 0;
}

.project-content-list .task-item {
  min-height: 6.75rem;
  padding: var(--space-10) var(--space-12) var(--space-16);
}

.project-content-list .task-card-header {
  grid-template-columns: var(--space-32) minmax(0, 1fr) minmax(7.5rem, auto);
  gap: var(--space-8) var(--space-12);
  align-items: center;
}

.project-content-list .task-content {
  grid-template-columns: minmax(10rem, 0.9fr) minmax(12rem, 1.15fr);
  gap: var(--space-6);
  align-items: center;
}

.project-content-list .task-title {
  grid-column: 1;
  grid-row: 1;
  -webkit-line-clamp: 2;
}

.project-content-list .task-project-badge {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.project-content-list .task-parent-context {
  grid-column: 1;
}

.project-content-list .task-date-chips {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.project-content-list .task-metadata {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
}

.project-content-list .task-card-actions {
  align-items: center;
  min-width: 7.5rem;
}

.project-content-list .task-date-chip-list {
  max-width: 100%;
}

.project-content-list .task-hierarchy:disabled {
  cursor: default;
  opacity: 0.35;
}

.project-table-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.project-table-header,
.project-table-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(13rem, 1.15fr) minmax(12rem, 1fr) 5.2rem 6.5rem 6.5rem 6rem 6.2rem 7.5rem 6.8rem;
  gap: var(--space-8);
  align-items: center;
  min-width: 68rem;
}

.project-table-header {
  min-height: 2.45rem;
  padding: 0 var(--space-12);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-muted) 58%, var(--color-surface));
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.project-table-body {
  min-height: 0;
  overflow: auto;
}

.project-table-row {
  min-height: 2.65rem;
  padding: 0 var(--space-12);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.project-table-row:hover,
.project-table-row.selected {
  background: var(--color-primary-soft);
}

.project-table-row strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-table-row.done strong,
.project-hierarchy-row.done .project-row-title,
.project-diagram-node.done strong {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--color-text-secondary) 62%, transparent);
}

.project-table-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-table-done {
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 38%, var(--color-border));
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
}

.project-table-type-icon {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: var(--color-primary);
}

.project-table-done[aria-pressed="true"] {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-on-primary);
}

.task-dependency-action {
  display: inline-grid;
  width: var(--space-28);
  height: var(--space-28);
  min-width: var(--space-28);
  min-height: var(--space-28);
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-accent-teal);
  font-size: 0;
  line-height: 1;
  cursor: alias;
}

.task-dependency-action:hover {
  border-color: color-mix(in srgb, var(--color-accent-teal) 32%, transparent);
  background: color-mix(in srgb, var(--color-accent-teal) 8%, transparent);
}

.task-dependency-action:active {
  cursor: alias;
}

.task-dependency-action::before {
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' d='M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 1 0-7.07-7.07L11.5 4.43M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 1 0 7.07 7.07l1.33-1.33'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' d='M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 1 0-7.07-7.07L11.5 4.43M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 1 0 7.07 7.07l1.33-1.33'/%3E%3C/svg%3E") center / contain no-repeat;
}

.project-table-actions .task-dependency-action,
.project-row-dependency-action,
.project-diagram-dependency-action,
.planning-card-dependency-action,
.task-child-dependency-action {
  color: var(--color-accent-teal);
}

.project-table-progress {
  display: grid;
  grid-template-columns: 2.4rem minmax(2.5rem, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.project-table-progress i {
  display: block;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.project-table-actions {
  display: inline-flex;
  gap: var(--space-4);
  justify-content: end;
}

.project-table-actions button {
  min-height: 1.5rem;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.project-table-footer {
  min-height: 2.45rem;
  padding: var(--space-8) var(--space-12);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.project-diagram-view {
  position: relative;
  min-height: 31rem;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface-muted) 38%, var(--color-surface));
}

.project-diagram-canvas {
  display: grid;
  gap: var(--space-20);
  justify-items: center;
  min-width: 54rem;
  padding: var(--space-20);
}

.project-diagram-children,
.project-diagram-branch-children {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: center;
}

.project-diagram-children::before,
.project-diagram-branch-children::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 12%;
  right: 12%;
  height: 1px;
  background: color-mix(in srgb, var(--color-primary) 48%, transparent);
}

.project-diagram-branch {
  display: grid;
  gap: var(--space-12);
  justify-items: center;
}


/* src/styles/planningTreeRows.css */
.project-diagram-node {
  position: relative;
  display: grid;
  gap: var(--space-4);
  min-width: 8.8rem;
  max-width: 10.7rem;
  min-height: 4rem;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-left: 0.24rem solid var(--task-project-accent, var(--color-primary));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
  box-shadow: 0 8px 22px var(--shadow-ink-07);
}

.project-diagram-node:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.project-diagram-done {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  min-height: 1.2rem;
}

.project-diagram-node.root {
  min-width: 12rem;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent), 0 12px 28px color-mix(in srgb, var(--color-primary-hover) 10%, transparent);
}

.project-diagram-node.selected {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.project-diagram-node strong {
  font-size: 0.78rem;
  line-height: var(--line-tight);
}

.project-diagram-node span,
.project-diagram-node small {
  color: var(--color-text-secondary);
  font-size: 0.66rem;
}

.project-diagram-legend {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-16);
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  box-shadow: var(--shadow-card);
}

.project-diagram-legend span {
  display: inline-flex;
  gap: var(--space-8);
  align-items: center;
}

.project-diagram-legend i {
  display: inline-block;
  width: 1.5rem;
  height: 0;
  border-top: 2px solid var(--color-primary);
}

.project-diagram-legend .dependency {
  border-top-style: dashed;
}

.project-diagram-legend .critical {
  border-top-color: var(--color-danger);
}

.project-diagram-legend .waiting {
  border-top-color: var(--color-accent-purple);
  border-top-style: dashed;
}

.project-hierarchy-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.65rem 1.45rem minmax(13rem, 1fr) 7.8rem 7.8rem 4.8rem 7.4rem 1.85rem;
  gap: var(--space-8);
  align-items: center;
  min-width: 48rem;
  min-height: 2.3rem;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface-muted) 60%, var(--color-surface));
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.project-hierarchy-header.planning-browser-header {
  grid-template-columns: minmax(22rem, 1fr) 11rem 7.8rem 7.5rem 5.25rem;
  min-width: 55rem;
  min-height: 3.25rem;
  padding: 0 var(--space-16);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface-muted) 48%, var(--color-surface));
  box-shadow: 0 4px 14px var(--shadow-ink-04);
}

.project-hierarchy-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.65rem 1.45rem minmax(13rem, 1fr) 7.8rem 7.8rem 4.8rem 7.4rem 1.85rem 1.85rem;
  gap: var(--space-8);
  align-items: center;
  min-width: 50rem;
  min-height: 2.25rem;
  margin-left: min(calc(var(--project-hierarchy-depth, 0) * 1.45rem), 8rem);
  padding: 0.22rem var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 1px 2px var(--shadow-ink-04);
}

.project-hierarchy-row.planning-browser-row {
  grid-template-columns: minmax(22rem, 1fr) 11rem 7.8rem 7.5rem 5.25rem;
  min-width: 55rem;
  min-height: 2.8rem;
  margin-left: 0;
  padding: var(--space-6) var(--space-16);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.planning-browser-row:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 3.5%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.planning-browser-row.top-level,
.planning-browser-row.has-children {
  margin-block: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-border));
  border-left: 0.24rem solid var(--task-project-accent, var(--color-primary));
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 7%, var(--color-surface)), var(--color-surface) 42%);
  box-shadow: 0 4px 14px var(--shadow-ink-05);
}

.planning-browser-row.has-children {
  min-height: 3.3rem;
}

.planning-browser-row.top-level {
  min-height: 3.7rem;
}

.planning-row-topic {
  position: relative;
  display: grid;
  grid-template-columns: 1.35rem 1.65rem 1.55rem 1.45rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  min-width: 0;
  padding-left: min(calc(var(--project-hierarchy-depth, 0) * 2.65rem), 13.25rem);
}

.planning-row-focus {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: color-mix(in srgb, var(--color-primary) 68%, var(--color-text-secondary));
  cursor: pointer;
}

.planning-row-focus svg {
  width: 1.1rem;
  height: 1.1rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.planning-row-focus svg circle:last-child {
  fill: currentColor;
  stroke: none;
}

.planning-row-focus:hover,
.planning-row-focus:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.planning-row-topic > .task-title-editor {
  min-height: 2rem;
  font-size: 0.82rem;
  font-weight: 400;
}

.planning-browser-row.has-children .planning-row-topic > .task-title-editor {
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
}

.planning-browser-row.top-level .planning-row-topic > .task-title-editor {
  font-size: 1rem;
}

.planning-browser-row.nested::before,
.planning-browser-row.nested::after {
  display: none;
}

.planning-browser-row.nested .planning-row-topic::before {
  position: absolute;
  top: -0.7rem;
  bottom: -0.7rem;
  left: calc(min(calc(var(--project-hierarchy-depth, 0) * 2.65rem), 13.25rem) - 1.25rem);
  border-left: 2px solid color-mix(in srgb, var(--color-text-secondary) 48%, var(--color-border));
  content: "";
  pointer-events: none;
}

.planning-browser-row.nested.last-sibling .planning-row-topic::before {
  bottom: 50%;
}

.planning-browser-row.nested .planning-row-topic::after {
  position: absolute;
  top: 50%;
  left: calc(min(calc(var(--project-hierarchy-depth, 0) * 2.65rem), 13.25rem) - 1.25rem);
  width: 1.05rem;
  border-top: 2px solid color-mix(in srgb, var(--color-text-secondary) 48%, var(--color-border));
  content: "";
  pointer-events: none;
}

.planning-browser-row .project-row-title {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  font-size: 0.82rem;
  font-weight: 400;
}

.planning-browser-row.has-children .project-row-title {
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
}

.planning-browser-row.top-level .project-row-title {
  font-size: 1rem;
}

.project-row-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-row-folder {
  display: grid;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  color: var(--color-primary);
}

.planning-browser-row.nested .planning-row-folder {
  width: 1.4rem;
  height: 1.4rem;
}

.planning-browser-row.top-level .planning-row-folder {
  width: 1.7rem;
  height: 1.7rem;
}

.planning-row-folder svg {
  width: 100%;
  height: 100%;
  fill: color-mix(in srgb, var(--color-primary) 8%, transparent);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.planning-drag-icon {
  width: 0.9rem;
  height: 1.3rem;
  fill: currentColor;
}

.planning-row-expand {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  box-sizing: border-box;
  align-self: center;
  justify-self: center;
  place-items: center;
  margin: 0;
  padding: 0;
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 180ms ease;
}

.planning-row-topic .project-row-done {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: var(--radius-xs);
}

.planning-row-topic .project-row-done svg {
  width: 1.08rem;
  height: 1.08rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.planning-row-expand svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  margin: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
  transition: transform 180ms ease;
}

.planning-row-expand[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.planning-row-expand:not(:disabled):hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.planning-row-expand:disabled {
  border-color: transparent;
  background: transparent;
}

.planning-browser-row .project-row-planned,
.planning-browser-row .project-row-deadline,
.planning-browser-row .project-row-progress {
  width: fit-content;
  max-width: 100%;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.planning-date-chip {
  position: relative;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.planning-date-chip:hover,
.planning-date-chip:focus-visible,
.planning-date-chip.editing {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.planning-date-chip.editing {
  z-index: 25;
  width: min(100%, 9rem);
  min-height: 2rem;
  padding: 0;
  border-radius: var(--radius-sm);
}

.planning-date-editor {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 0;
  display: grid;
  gap: var(--space-8);
  width: 15.5rem;
  padding: var(--space-8);
  border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 14px 32px var(--shadow-ink-18);
  transform: translateY(-50%);
}

.planning-row-date-input {
  width: 100%;
  min-width: 0;
  height: 2rem;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  outline: none;
}

.planning-date-apply-children {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: normal;
  cursor: pointer;
}

.planning-date-apply-children-checkbox {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
}


/* src/styles/planningCardForms.css */
.planning-date-apply {
  justify-self: end;
  min-height: 1.9rem;
  padding: 0 var(--space-10);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.planning-browser-row .project-row-planned {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.planning-date-inherited {
  display: inline-flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 0.67rem;
  font-weight: var(--font-weight-strong);
}

.planning-date-inherited svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.planning-browser-row .project-row-progress:not(:empty) {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}

.planning-browser-row.drop-before,
.planning-browser-row.drop-after,
.planning-browser-row.drop-inside {
  transform: none;
}

.planning-browser-row.drop-before::before,
.planning-browser-row.drop-after::after {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  height: 0.2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--color-primary) 16%, transparent);
  content: "";
}

.planning-browser-row.drop-before::before {
  top: -0.22rem;
}

.planning-browser-row.drop-after::after {
  bottom: -0.22rem;
}

.planning-browser-row.drop-inside {
  min-height: 5.2rem;
  border-color: var(--color-primary);
  background: linear-gradient(90deg, var(--color-surface) 0 18%, var(--color-primary-soft) 18% 68%, var(--color-surface) 68% 100%);
  box-shadow: inset 0 0 0 2px var(--color-primary), 0 12px 28px color-mix(in srgb, var(--color-primary-hover) 18%, transparent);
  transform: scale(1.006);
}

.planning-browser-row.drop-inside::after {
  position: absolute;
  bottom: var(--space-4);
  left: 7rem;
  padding: 0.12rem var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  content: "Hier als Unterkarte ablegen";
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  pointer-events: none;
}

.planning-row-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: flex-end;
}

.planning-row-actions button {
  display: grid;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  place-items: center;
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 2px 8px var(--shadow-ink-05);
}

.planning-row-actions button svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.planning-row-actions .planning-add-child svg {
  width: 1.6rem;
  height: 1.25rem;
}

.planning-add-child .planning-child-arrow,
.planning-add-child .planning-child-plus {
  vector-effect: non-scaling-stroke;
}

.planning-add-child .planning-child-plus {
  stroke-width: 2.2;
}

.planning-row-actions .planning-add-child {
  color: var(--color-primary);
}

.planning-row-actions .planning-add-sibling {
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text-secondary));
}

.project-hierarchy-row.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 8px 18px color-mix(in srgb, var(--color-primary-hover) 8%, transparent);
}

.project-hierarchy-row.nested::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  bottom: 50%;
  left: -0.86rem;
  width: 0.75rem;
  border-left: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 34%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 34%, transparent);
  border-bottom-left-radius: 0;
  pointer-events: none;
}

.project-row-expand,
.project-row-done {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  line-height: 1;
}

.project-row-type-icon {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: var(--color-primary);
}

.project-row-expand:not(:disabled):hover,
.project-row-done:not(:disabled):hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.project-row-expand:disabled {
  border-color: transparent;
  background: transparent;
  opacity: 0.35;
}

.project-row-done[aria-pressed="true"] {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-on-primary);
}

.project-row-title,
.project-row-planned,
.project-row-deadline,
.project-row-editor input,
.project-row-editor textarea,
.project-row-editor select {
  min-width: 0;
  min-height: 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
}

.project-row-title {
  display: block;
  overflow: hidden;
  padding: 0 var(--space-4);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-strong);
}

.project-row-title:focus,
.project-row-editor input:focus,
.project-row-editor textarea:focus,
.project-row-editor select:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  outline: var(--focus-ring);
}

.project-row-progress,
.project-row-dependency,
.project-row-planned,
.project-row-deadline {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1;
  white-space: nowrap;
}

.project-row-dependency {
  display: inline-grid;
  place-items: center;
  justify-self: start;
  min-height: 1.35rem;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
}

.project-row-deadline {
  color: var(--color-danger);
}

.project-row-drag {
  justify-self: end;
}

.project-row-editor {
  display: grid;
  grid-column: 3 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  padding: var(--space-8) 0 var(--space-2);
  border-top: 1px solid var(--color-border);
}

.project-row-editor-field,
.project-row-waiting {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.project-row-waiting {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: end;
  align-items: center;
}

.project-row-editor-field > span {
  font-weight: var(--font-weight-strong);
}

.project-row-editor textarea {
  min-height: var(--space-56);
  resize: vertical;
}

.project-row-child-form input {
  width: 100%;
}

.project-content-list .project-hierarchy-card {
  margin-left: min(calc(var(--project-hierarchy-depth, 0) * 1.5rem), 6rem);
  width: auto;
}

.project-content-list .nested-project-card {
  position: relative;
}

.project-content-list .nested-project-card::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  bottom: 50%;
  left: -0.86rem;
  width: 0.75rem;
  border-left: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 34%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 34%, transparent);
  border-bottom-left-radius: 0.45rem;
  pointer-events: none;
}

.project-hierarchy-children {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-8);
  margin-top: var(--space-10);
  margin-left: min(calc(var(--project-hierarchy-depth, 1) * 1.25rem), 5rem);
  padding-left: var(--space-12);
  border-left: 2px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 28%, transparent);
}

.project-hierarchy-children > .task-item {
  min-height: 6.25rem;
  margin: 0;
}

.project-hierarchy-children .project-hierarchy-children {
  margin-top: var(--space-8);
}

.project-hierarchy-empty {
  margin: 0;
  padding: var(--space-8) var(--space-10);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

@media (max-width: 920px) {
  .project-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sidebar {
    max-height: 18rem;
  }

  .planning-add-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.project-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-12);
}

.project-card {
  display: grid;
  gap: var(--space-14);
  min-width: 0;
  padding: var(--space-16);
  border: 1px solid var(--task-project-border, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.project-card header {
  display: grid;
  grid-template-columns: var(--space-14) minmax(0, 1fr) auto;
  gap: var(--space-10);
  align-items: start;
}

.project-card-marker {
  width: var(--space-10);
  height: var(--space-10);
  margin-top: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--task-project-accent, var(--color-primary));
}

.project-card h3 {
  min-width: 0;
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-title);
  line-height: var(--line-tight);
}

.project-card-actions {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.project-card-action {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.project-card-action.primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.project-card-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.project-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.project-card-stats span {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 58%, transparent);
}

.project-card-stats strong {
  color: var(--color-text-primary);
  font-size: var(--text-title);
  line-height: 1;
}

.project-card-stats small,
.project-progress small,
.project-card-preview span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.project-progress {
  display: grid;
  gap: var(--space-6);
}

.project-progress::before {
  content: "";
  grid-row: 1;
  min-height: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.project-progress > span {
  grid-row: 1;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--task-project-accent, var(--color-primary));
}


/* src/styles/auxiliaryViews.css */
.project-card-preview {
  display: grid;
  gap: var(--space-6);
}

.project-card-preview button {
  overflow: hidden;
  min-height: var(--space-32);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-group-header span {
  display: inline-grid;
  min-width: var(--space-24);
  min-height: var(--space-24);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
  gap: var(--space-8);
  min-width: 64rem;
}

.calendar-weekday {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-align: center;
}

.calendar-day {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-height: 9rem;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
}

.calendar-day.outside {
  opacity: 0.45;
}

.calendar-day.today {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.calendar-day-header,
.timeline-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.calendar-day .task-item {
  min-height: 3.75rem;
  padding: var(--space-8);
}

.calendar-day .task-card-header {
  grid-template-columns: var(--space-16) minmax(0, 1fr) var(--space-20);
  gap: var(--space-6);
}

.calendar-day .task-controls,
.calendar-day .task-drag-handle,
.calendar-day .task-menu,
.calendar-day .task-metadata .task-tag,
.calendar-day .task-metadata .task-date,
.calendar-day .task-metadata .task-subtask-count,
.calendar-day .task-metadata .task-notes-preview {
  display: none;
}

.calendar-day .task-content {
  grid-column: 2 / -1;
  grid-row: 1;
  min-height: 0;
  gap: var(--space-4);
}

.calendar-day .task-project-icon {
  grid-column: 1;
}

.calendar-day .task-title {
  font-size: var(--text-caption);
  -webkit-line-clamp: 2;
}

.calendar-more {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.timeline-groups {
  display: grid;
  gap: var(--space-10);
}

.timeline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.timeline-toolbar-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-8);
}

@media (min-width: 48rem) {
  .timeline-view > .timeline-toolbar {
    height: 2.35rem;
    min-height: 2.35rem;
    gap: var(--space-8);
    padding-inline: var(--space-12);
  }

  .timeline-view > .timeline-toolbar .workspace-title {
    font-size: 0.84rem;
    line-height: 1.1;
  }

  .timeline-view > .timeline-toolbar .workspace-meta { font-size: 0.68rem; }

  .timeline-view > .timeline-toolbar .calendar-mode-switch button {
    min-height: 1.75rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
  }
}

.timeline-group {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
}

.timeline-group.today {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.timeline-group-header {
  position: sticky;
  top: 0;
  align-self: start;
}

.timeline-group > .task-item {
  grid-column: 2;
}

.dependency-timeline-viewport,
.timeline-grid-viewport {
  min-width: 0;
  overflow-x: auto;
  padding-bottom: var(--space-4);
}

.dependency-grid,
.timeline-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) repeat(var(--dependency-days, var(--timeline-days)), minmax(3.25rem, 1fr));
  gap: var(--space-6) 0;
  min-width: max-content;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
}

.dependency-grid-corner,
.dependency-day,
.timeline-grid-corner,
.timeline-day {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: var(--space-32);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.dependency-grid-corner,
.timeline-grid-corner {
  left: 0;
  z-index: 3;
}

.dependency-day,
.timeline-day {
  display: grid;
  place-items: center;
}

.dependency-day.today,
.timeline-day.today {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dependency-label,
.timeline-label {
  position: sticky;
  left: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--space-48);
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--task-project-border, var(--color-border));
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
}

.timeline-label .board-context-badge { justify-self: start; }

.dependency-label.selected,
.timeline-label.selected {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.dependency-label strong,
.dependency-label span,
.timeline-label strong,
.timeline-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-label span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-bar-cell,
.timeline-bar-cell {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--dependency-days, var(--timeline-days)), minmax(3.25rem, 1fr));
  align-items: center;
  min-height: var(--space-48);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-border) 54%, transparent) 1px, transparent 1px);
  background-size: calc(100% / var(--dependency-days, var(--timeline-days))) 100%;
}

.dependency-bar,
.timeline-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
  min-height: var(--space-32);
  margin: 0 var(--space-4);
  padding: 0 var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 74%, white));
  color: var(--color-on-primary);
  font: inherit;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.timeline-bar {
  justify-content: center;
  border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary-soft) 72%, var(--color-surface));
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.timeline-bar.overdue {
  border-color: color-mix(in srgb, var(--color-danger) 48%, transparent);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.dependency-bar.done {
  border-color: color-mix(in srgb, var(--color-success) 42%, transparent);
  background: linear-gradient(90deg, var(--color-success), color-mix(in srgb, var(--color-success) 74%, white));
}

.dependency-bar.selected,
.dependency-bar.dependency-drop-active,
.timeline-bar.selected {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dependency-bar strong,
.dependency-bar span,
.timeline-bar {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-bar span {
  font-size: var(--text-caption);
  opacity: 0.88;
}

.dependency-chips {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--space-4);
  padding: var(--space-4);
}

.dependency-chip {
  min-height: var(--space-24);
  max-width: 18rem;
  overflow: hidden;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-empty {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-24);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-surface) 56%, transparent);
}

.planning-empty strong {
  color: var(--color-text-primary);
}

.bulk-toolbar {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  min-height: var(--space-48);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.bulk-toolbar[hidden] {
  display: none;
}

.bulk-selection-summary {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  margin-right: auto;
}

.bulk-selection-summary strong {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
}

.bulk-selection-summary span {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.bulk-toolbar strong {
  flex: 0 0 auto;
  color: var(--color-text-primary);
  white-space: nowrap;
}


/* src/styles/templateWorkspace.css */
.template-library {
  display: grid;
  align-content: start;
  min-width: 0;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-12);
}

.template-card {
  display: grid;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.template-card header { display: grid; gap: var(--space-4); }
.template-card h3 { margin: 0; color: var(--color-text-primary); font-size: var(--text-title); line-height: var(--line-tight); }
.template-card header span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.template-card-badges { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }

.template-preview-tree {
  display: grid;
  gap: var(--space-6);
  max-height: 28rem;
  margin: 0;
  overflow: auto;
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  list-style: none;
}

.template-preview-tree ol { display: grid; gap: var(--space-6); margin: 0; padding-left: var(--space-18); list-style: none; }
.template-preview-node { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-8); padding: var(--space-8); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-surface); }
.template-preview-node strong { min-width: 0; overflow-wrap: anywhere; }
.template-preview-node > span { color: var(--color-primary); font-size: var(--text-caption); font-weight: var(--font-weight-strong); }
.template-preview-node p { grid-column: 1 / -1; max-height: 3rem; margin: 0; overflow: hidden; color: var(--color-text-secondary); font-size: var(--text-caption); }
.template-preview-node small { grid-column: 1 / -1; color: var(--color-warning-strong); }
.template-preview-tags { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: var(--space-4); }
.template-preview-tags .chip { min-height: var(--space-24); padding: 0 var(--space-8); font-size: var(--text-caption); }
.template-preview-stages { display: grid; gap: var(--space-8); margin-top: var(--space-8); padding-left: var(--space-12); }
.template-preview-stage { display: grid; gap: var(--space-4); }
.template-preview-stage > span { color: var(--color-text-secondary); font-size: var(--text-caption); font-weight: var(--font-weight-strong); }
.template-card footer { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: flex-end; }
.template-card footer .button-danger { margin-left: auto; }

.template-editor-dialog { width: min(58rem, calc(100vw - (2 * var(--workspace-page-gutter)))); max-height: calc(100dvh - (2 * var(--space-20))); padding: 0; overflow: hidden; border: var(--workspace-panel-border); border-radius: var(--workspace-panel-radius); background: var(--workspace-surface); box-shadow: var(--shadow-modal); }
.template-editor-dialog::backdrop { background: var(--color-backdrop); }
.template-editor { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: inherit; }
.template-editor > header { display: flex; align-items: start; gap: var(--space-12); padding: var(--space-16); border-bottom: 1px solid var(--color-border); }
.template-editor > header > div { flex: 1; }
.template-editor h2 { margin: 0; font-size: var(--text-section); }
.template-editor header p { margin: var(--space-4) 0 0; color: var(--color-text-secondary); }
.template-editor header button { width: var(--adaptive-min-touch-target); height: var(--adaptive-min-touch-target); border: 0; border-radius: var(--radius-full); background: var(--color-surface-muted); font-size: var(--text-section); }
.template-editor-name { margin: var(--space-12) var(--space-16) 0; min-height: var(--control-height-lg); padding: 0 var(--space-12); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-weight: var(--font-weight-strong); }
.template-editor-content { display: grid; gap: var(--space-10); min-height: 0; overflow: auto; padding: var(--space-16); }
.template-editor-node { display: grid; grid-template-columns: minmax(0, 2fr) minmax(8rem, .7fr) minmax(0, 1fr); gap: var(--space-8); margin-left: min(calc(var(--template-depth) * var(--space-16)), 5rem); padding: var(--space-12); border: 1px solid var(--color-border); border-left: 3px solid color-mix(in srgb, var(--color-primary) 65%, var(--color-border)); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.template-editor-node > strong { grid-column: 1 / -1; color: var(--color-text-secondary); font-size: var(--text-caption); }
.template-editor-node input, .template-editor-node select, .template-editor-node textarea { min-width: 0; padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-primary); font: inherit; }
.template-editor-node textarea { grid-column: 1 / -1; min-height: 5rem; resize: vertical; }
.template-editor-node label { display: grid; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-caption); }
.template-flow-editor { display: grid; grid-column: 1 / -1; gap: var(--space-8); padding: var(--space-10); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.template-flow-editor > header > div { display: grid; gap: var(--space-2); }
.template-flow-editor > header span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.template-flow-board { gap: 0; }
.template-flow-board .dependency-stage { padding: var(--space-8); }
.template-editor > footer { display: flex; justify-content: flex-end; gap: var(--space-8); padding: var(--space-12) var(--space-16); border-top: 1px solid var(--color-border); background: var(--workspace-header-background); }

:root[data-layout-size="compact"] .template-editor-dialog { width: 100vw; max-height: var(--doneit-viewport-height, 100dvh); border-radius: 0; }
:root[data-layout-size="compact"] .template-editor-node { grid-template-columns: 1fr; margin-left: min(calc(var(--template-depth) * var(--space-8)), 2rem); }
:root[data-layout-size="compact"] .template-editor-node > strong,
:root[data-layout-size="compact"] .template-editor-node textarea { grid-column: 1; }


/* src/styles/templateSuggestions.css */
.template-suggestion {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.template-suggestion > .button {
  justify-self: start;
  min-height: 2.75rem;
}

.template-suggestion-status {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.template-suggestion-status:empty,
.template-suggestion-matches:empty {
  display: none;
}

.template-suggestion-matches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.template-suggestion-match {
  background: var(--surface-raised, var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: inherit;
  cursor: pointer;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  text-align: left;
}

.template-suggestion-match:hover,
.template-suggestion-match:focus-visible {
  border-color: var(--accent);
  outline: none;
}


/* src/styles/boardDragAndBulk.css */
.bulk-field {
  width: min(12rem, 18vw);
  min-width: 8rem;
  height: var(--control-height-sm);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
}

.bulk-field:focus {
  outline: var(--focus-ring);
}

.bulk-action {
  flex: 0 0 auto;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.bulk-action:hover,
.bulk-action:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.bulk-action.success {
  border-color: color-mix(in srgb, var(--color-success) 36%, var(--color-border));
  color: var(--color-success);
}

.bulk-action.danger {
  min-width: var(--control-height-sm);
  padding: 0;
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
  color: var(--color-danger);
  font-size: var(--text-title);
}

.bulk-edit-action {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

.bulk-edit-action:hover,
.bulk-edit-action:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 88%, black);
  color: white;
}

.bulk-edit-dialog {
  position: fixed;
  inset: 0;
  width: min(48rem, calc(100vw - 2rem));
  height: min(47rem, calc(100dvh - 2rem));
  max-height: min(47rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 24px 70px var(--shadow-ink-24);
  overflow: hidden;
}

.bulk-edit-dialog::backdrop {
  background: var(--color-backdrop-soft);
  backdrop-filter: blur(2px);
}

.bulk-edit-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  max-height: min(47rem, calc(100dvh - 2rem));
}

.bulk-edit-form > header,
.bulk-edit-form > footer {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  background: var(--color-surface);
}

.bulk-edit-form > header {
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}

.bulk-edit-form > header h2,
.bulk-edit-form > header p {
  margin: 0;
}

.bulk-edit-form > header h2 {
  font-size: var(--text-heading);
}

.bulk-edit-form > header p {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.bulk-edit-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.5rem;
}

.bulk-edit-close:hover,
.bulk-edit-close:focus-visible {
  background: var(--color-background);
  color: var(--color-text-primary);
  outline: none;
}

.bulk-edit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-12);
  padding: var(--space-16) var(--space-20);
  overflow-y: auto;
}

.bulk-edit-row {
  display: grid;
  grid-template-columns: auto 6.5rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  min-width: 0;
  min-height: 2.75rem;
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-background) 70%, var(--color-surface));
}

.bulk-edit-row.wide {
  grid-column: 1 / -1;
}

.bulk-edit-row.enabled {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  background: var(--color-primary-soft);
}

.bulk-edit-enabled {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
}

.bulk-edit-row > span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.bulk-edit-control {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height-sm);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.bulk-edit-control:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

textarea.bulk-edit-control {
  resize: vertical;
}

.bulk-edit-fields.needs-selection {
  animation: bulk-edit-attention 180ms ease-in-out 2 alternate;
}

.bulk-edit-form > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
}

.bulk-edit-cancel,
.bulk-edit-apply {
  min-height: var(--control-height-md);
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.bulk-edit-apply {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}

@keyframes bulk-edit-attention {
  to { background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
}

@media (max-width: 46rem) {
  .bulk-edit-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulk-edit-row.wide {
    grid-column: auto;
  }

  .bulk-edit-row {
    grid-template-columns: auto 5.25rem minmax(0, 1fr);
  }

  .bulk-toolbar {
    flex-wrap: wrap;
  }
}

.board-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-14, 0.875rem);
  min-width: 0;
  min-height: 0;
  padding: var(--space-14, 0.875rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 76%, transparent);
  overflow: hidden;
  transition:
    background 80ms ease,
    border-color 80ms ease,
    opacity var(--duration-fast);
}

.board-column.collapsed {
  min-width: 0;
}

.board-column.collapsed.drag-over,
.board-column.collapsed:has(.drag-over) {
  min-width: 0;
}

.board-column-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--space-32);
  gap: var(--space-6);
  align-items: center;
  color: var(--color-text-secondary);
}

.column-collapse-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-8);
  align-items: center;
  width: 100%;
  min-height: var(--control-height-sm);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.column-collapse-toggle:hover,
.column-collapse-toggle[aria-pressed="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.column-expand-toggle {
  display: inline-grid;
  width: var(--space-32);
  height: var(--space-32);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-title);
  line-height: 1;
}

.column-expand-toggle:hover,
.column-expand-toggle[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.board-column-header h2 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-column-header span,
.board-column-header small {
  display: inline-grid;
  min-width: var(--space-24);
  min-height: var(--space-24);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  font-size: var(--text-caption);
}

.board-column-header small {
  background: transparent;
  color: var(--color-text-secondary);
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .board-column-header {
  display: block;
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .column-collapse-toggle {
  display: block;
  min-width: 0;
  padding: var(--space-4) var(--space-6);
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .column-expand-toggle,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .board-column-header span,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .board-column-header small {
  display: none;
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .board-column-header h2 {
  max-width: 100%;
  font-size: var(--text-caption);
}

.board-column-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  min-height: 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom-reserve, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: auto;
}

.board-column.drag-over,
.board-column-list.drag-over,
.task-child-list.drag-over {
  outline: 0;
  outline-offset: 0;
}

.board-column.drag-over {
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary-soft) 42%, transparent);
}

.board-column-list.drag-over {
  padding-top: 0;
}

.board-column-list.drag-over::before {
  content: none;
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .column-add-form,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-date-chips,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-metadata,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-project-icon,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-project-badge,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-done-toggle,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-card-actions,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-controls,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-drag-handle,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-menu,
.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-delete {
  display: none;
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-card-header {
  display: block;
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-item {
  min-height: var(--space-40);
  padding: var(--space-8);
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-content {
  display: block;
  min-height: 0;
}

.board-column.collapsed:not(.drag-over):not(:has(.drag-over)) .task-title {
  display: block;
  overflow: hidden;
  font-size: var(--text-caption);
  line-height: var(--line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .board-column-header {
  display: block;
}

.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .column-collapse-toggle {
  display: block;
  min-width: 0;
  padding: var(--space-4) var(--space-6);
}

.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .column-expand-toggle,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .board-column-header span,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .board-column-header small,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .column-add-form,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-date-chips,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-metadata,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-project-icon,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-project-badge,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-done-toggle,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-card-actions,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-controls,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-drag-handle,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-menu,
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-delete {
  display: none;
}

.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-card-header {
  display: block;
}

.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-item {
  min-height: var(--space-40);
  padding: var(--space-8);
}


/* src/styles/quickCreate.css */
.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-content {
  display: block;
  min-height: 0;
}

.task-list.task-drag-active .board-column.collapsed:not(.drag-over) .task-title {
  display: block;
  overflow: hidden;
  font-size: var(--text-caption);
  line-height: var(--line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: unset;
}

.column-add-form {
  display: grid;
  gap: var(--space-8);
}

.column-add-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  width: fit-content;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
}

.column-add-trigger:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.column-add-form input {
  display: none;
  width: 100%;
  height: var(--control-height-sm);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-caption);
}

.column-add-planning {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  min-width: 0;
  padding: var(--space-4) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-soft));
}

.column-add-planning > span {
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

.column-add-planning-chips {
  display: flex;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.column-add-calendar-picker {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.column-add-calendar-picker .task-date-picker-input {
  inset: 0;
  width: 100%;
  height: 100%;
}

.column-add-planning-chips::-webkit-scrollbar {
  display: none;
}

.column-add-planning-chip {
  display: inline-grid;
  flex: 0 0 auto;
  min-height: 1.35rem;
  place-items: center;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;
}

.column-add-planning-chip:hover,
.column-add-planning-chip:focus-visible,
.column-add-planning-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.column-add-form.editing .column-add-trigger {
  display: none;
}

.column-add-form.editing input {
  display: block;
}

.column-add-form.editing .column-add-planning {
  display: grid;
}

.column-add-form input:focus {
  outline: var(--focus-ring);
}

.quick-create-form .column-add-trigger {
  display: inline-flex;
  justify-content: flex-start;
  width: 100%;
  min-height: 1.9rem;
  padding: 0 var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary-soft) 64%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: var(--font-weight-strong);
}

.overview-quick-create-host .quick-create-form {
  width: 100%;
  margin: 0;
}

.overview-quick-create-host .quick-create-form:not(.editing) {
  min-height: 1.85rem;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.overview-quick-create-host .quick-create-form .column-add-trigger {
  min-height: 1.85rem;
}

.overview-quick-create-host .quick-create-form.editing {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.overview-quick-create-host .quick-create-form.editing .quick-create-controls {
  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.4fr) auto;
}

.task-title-editor {
  width: 100%;
  min-width: 0;
  min-height: 1.7rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  outline: var(--focus-ring);
}

@media (max-width: 64rem) {
  .overview-quick-create-host .quick-create-form.editing {
    grid-template-columns: 1fr;
  }
}

.quick-create-form:not(.editing) {
  display: grid !important;
  align-items: stretch;
  justify-self: stretch;
  width: 100%;
  min-height: 1.95rem;
  margin-bottom: var(--space-8);
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border)) !important;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-primary-soft)) !important;
  box-shadow: none ;
}

:is(#task-list, .unified-search-cards).overview-list > .quick-create-form:not(.editing),
.project-content-list > .quick-create-form:not(.editing) {
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}

.quick-create-form:not(.editing) input,
.quick-create-form:not(.editing) .quick-create-controls {
  display: none !important;
}

.quick-create-form.editing .column-add-trigger {
  display: none;
}

.quick-create-form input {
  display: block;
  min-height: 2.15rem;
  padding: 0 var(--space-10);
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  font-weight: var(--font-weight-strong);
}

.quick-create-controls {
  display: grid;
  grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1.4fr) auto;
  gap: var(--space-6);
  align-items: stretch;
}

.quick-create-submit {
  min-width: 6.5rem;
  min-height: 2.1rem;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-size: 0.76rem;
  font-weight: var(--font-weight-strong);
}

.quick-create-submit:hover,
.quick-create-submit:focus-visible {
  background: var(--color-primary-pressed);
  outline: var(--focus-ring);
}

.quick-create-project-chip {
  --quick-create-project-color: var(--color-primary);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  min-width: 0;
  min-height: 2.1rem;
  padding: 0 var(--space-8);
  border: 1px solid color-mix(in srgb, var(--quick-create-project-color) 26%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--quick-create-project-color) 10%, var(--color-surface));
  color: var(--quick-create-project-color);
}

.quick-create-project-chip > span {
  color: color-mix(in srgb, currentColor 78%, var(--color-text-secondary));
  font-size: 0.72rem;
  font-weight: var(--font-weight-strong);
}

.quick-create-project-chip select {
  min-width: 0;
  height: 1.9rem;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.quick-create-project-chip select:focus {
  outline: none;
}

.quick-create-form .column-add-planning {
  display: grid;
  min-height: 2.1rem;
  padding: var(--space-3) var(--space-6);
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-background));
}

.quick-create-form .column-add-planning-chip {
  min-height: 1.55rem;
  padding: 0 var(--space-8);
  font-size: 0.7rem;
}

@media (max-width: 58rem) {
  .quick-create-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

.task-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 0 0 auto;
  gap: var(--space-8);
  align-items: start;
  min-width: 0;
  min-height: 7.75rem;
  padding: var(--space-16);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: none;
  overflow: hidden;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.task-item::after {
  content: none;
}

.task-item.expanded {
  display: block;
  border-color: var(--color-primary);
  overflow: visible;
}

.task-item.expanded .task-children {
  margin-top: var(--space-8);
}

.task-item.multi-selected,
.outline-row.multi-selected,
.project-hierarchy-row.multi-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent),
    0 10px 24px var(--shadow-ink-12);
}

.task-item.dragging,
.task-child.dragging {
  opacity: 0.28;
  box-shadow: none;
}

.task-exit-ghost {
  position: fixed !important;
  z-index: 120;
  margin: 0 !important;
  pointer-events: none !important;
  user-select: none;
  transform-origin: center top;
  will-change: opacity, transform;
}

.task-item.drop-committed,
.planning-card.drop-committed,
.task-child.drop-committed {
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
}

.task-item.drag-over,
.task-child.drag-over {
  border-color: var(--task-project-border, var(--color-border));
  box-shadow: var(--shadow-card);
}

.task-item.drop-before {
  overflow: visible;
}

.task-item.drop-after {
  overflow: visible;
}

.task-item.drop-inside {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 64%, var(--color-surface));
  box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow-card);
}

.task-item.drop-before::before,
.task-item.drop-after::after {
  content: none;
}

.task-item.drop-before::before {
  top: calc(var(--space-16) * -1);
}

.task-item.drop-after::after {
  bottom: calc(var(--space-16) * -1);
}

.task-item.drop-inside::before {
  content: "";
  position: absolute;
  right: var(--space-10);
  bottom: var(--space-10);
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  content: "Als Unterkarte";
}

.task-card-header {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: var(--space-32) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: var(--space-8);
  align-items: start;
  min-width: 0;
}

.task-sequence-number {
  display: none;
}

.overview-list .task-card-header {
  grid-template-columns: 2rem 2.75rem minmax(0, 1fr) auto;
  gap: var(--space-8) var(--space-10);
}

.overview-list .task-sequence-number {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
}


/* src/styles/taskCardDragDrop.css */
.overview-list .task-marker-column {
  grid-column: 2;
}

.overview-list .task-content {
  grid-column: 3;
}

.overview-list .task-card-actions {
  grid-column: 4;
}

.task-marker-column {
  display: grid;
  gap: var(--space-8);
  justify-items: center;
  align-content: start;
}

.task-item:hover {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 34%, var(--color-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 12%, transparent), 0 0.55rem 1.35rem var(--shadow-ink-07);
  transform: none;
}

.task-list.task-drag-active .task-item:hover,
.task-item.dragging {
  transform: none;
}

.task-drag-image {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 9999;
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  width: 13.5rem;
  max-width: 13.5rem;
  padding: var(--space-8) var(--space-10);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 12px 30px var(--shadow-ink-18);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  overflow: hidden;
}

.task-drag-image-multi {
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  overflow: visible;
}

.task-drag-image-multi::before,
.task-drag-image-multi::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--color-primary) 52%, var(--color-border));
  border-radius: inherit;
  background: var(--color-surface);
  content: "";
}

.task-drag-image-multi::before { transform: translate(0.3rem, 0.3rem); }
.task-drag-image-multi::after { transform: translate(0.6rem, 0.6rem); opacity: 0.72; }

.task-drag-image-touch {
  top: 0;
  left: 0;
  z-index: 12000;
  margin: 0;
  pointer-events: none;
  will-change: transform;
}

.task-drag-image .task-drag-image-mark {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.task-drag-image strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-drag-image .task-drag-image-count {
  display: grid;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.4rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.task-drop-preview {
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
  min-height: 3.4rem;
  padding: var(--space-10) var(--space-12);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-primary-soft) 56%, var(--color-surface));
  color: var(--color-text-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 72%, transparent);
  pointer-events: none;
  animation: drop-preview-open var(--duration-motion) var(--ease-standard);
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-motion) var(--ease-standard);
}

.task-drop-preview.drop-committed {
  border-style: solid;
  background: color-mix(in srgb, var(--color-primary-soft) 72%, var(--color-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 42%, transparent), 0 14px 34px color-mix(in srgb, var(--color-primary) 14%, transparent);
  transform: scale(0.99);
}

.task-drop-preview-marker {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.task-drop-preview strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-drop-preview small {
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.task-item.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 24%, transparent), 0 10px 24px var(--shadow-ink-05);
}

.task-item.done {
  background: var(--color-surface);
}

.task-item.sync-pending,
.planning-card.sync-pending {
  box-shadow: 0 1px 2px var(--shadow-ink-05), 0 8px 20px var(--shadow-ink-04), inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.task-sync-indicator {
  position: absolute;
  top: var(--space-12);
  right: var(--space-44);
  z-index: 3;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 32%, transparent);
  animation: sync-pulse 900ms var(--ease-standard) infinite;
}

.task-sync-indicator[hidden] {
  display: none;
}

.planning-card .task-sync-indicator {
  top: var(--space-16);
  right: var(--space-48);
}

.task-item.recently-moved,
.planning-card.recently-moved,
.calendar-entry.recently-moved {
  animation: card-land var(--duration-motion) var(--ease-standard);
  will-change: transform, opacity;
}

@keyframes card-land {
  0% {
    opacity: 0.18;
    transform: scale(0.996);
    box-shadow: 0 0 0 2px var(--color-primary), 0 12px 26px color-mix(in srgb, var(--color-primary) 14%, transparent);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes drop-preview-open {
  0% {
    min-height: 1.2rem;
    opacity: 0.35;
    transform: scaleY(0.72);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes sync-pulse {
  0% {
    opacity: 0.45;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 32%, transparent);
  }

  70% {
    opacity: 1;
    box-shadow: 0 0 0 var(--space-8) color-mix(in srgb, var(--color-primary) 0%, transparent);
  }

  100% {
    opacity: 0.45;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 0%, transparent);
  }
}

.task-card-actions {
  display: flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-items: flex-start;
  justify-self: end;
  gap: var(--space-4);
}

.overview-list .task-card-actions {
  grid-column: 4;
}

.task-controls {
  display: grid;
  align-items: start;
  justify-self: end;
}

.task-expand,
.task-hierarchy,
.task-menu,
.task-delete,
.task-drag-handle,
.task-done-toggle {
  display: grid;
  width: var(--space-24);
  height: var(--space-24);
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.task-done-toggle {
  position: static;
  z-index: 2;
  width: var(--space-32);
  height: var(--space-32);
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 38%, var(--color-border));
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-surface-muted) 46%, var(--color-surface));
  font-size: var(--text-title);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  touch-action: none;
  user-select: none;
  opacity: 1;
}

.task-done-toggle::before {
  content: none;
}

.task-done-toggle[aria-pressed="true"] {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-on-primary);
  opacity: 1;
}

.task-done-toggle[aria-pressed="true"]::before {
  content: none;
}

.task-done-toggle:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.task-editable-ack {
  border-radius: var(--radius-xs);
  animation: taskEditableAck 220ms ease-out;
}

@keyframes taskEditableAck {
  0% {
    background: transparent;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 0%, transparent);
  }

  45% {
    background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 8%, transparent);
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 18%, transparent);
  }

  100% {
    background: transparent;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 0%, transparent);
  }
}

.task-expand,
.task-hierarchy {
  font-size: var(--text-title);
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

.task-hierarchy {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.task-menu {
  width: 2.75rem;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-primary-soft));
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  opacity: 1;
}

.task-menu:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.task-menu[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.task-delete {
  border: 1px solid transparent;
  color: var(--color-danger);
  font-size: 0.95rem;
  font-weight: var(--font-weight-strong);
}

.task-delete:hover {
  border-color: color-mix(in srgb, var(--color-danger) 38%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  color: var(--color-danger);
}

.card-display-menu {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-4);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 64%, transparent);
}

/* The cards use fixed compact/minimal variants.  The field panel must be an
   explicit open state so it never gets clipped by those variants. */
:is(#task-list, .unified-search-cards).overview-list > .task-item.card-display-menu-open {
  z-index: 75;
  overflow: visible !important;
}

:is(#task-list, .unified-search-cards).overview-list > .task-item.card-display-menu-open .card-display-menu {
  display: grid !important;
}

.card-display-menu > strong {
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  line-height: var(--line-tight);
}

.card-display-required {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.card-display-menu fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6, 0.375rem) var(--space-8);
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

.card-display-menu label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6, 0.375rem);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: var(--line-tight);
}

.card-display-menu input {
  width: var(--space-14, 0.875rem);
  height: var(--space-14, 0.875rem);
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

.card-display-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6, 0.375rem);
}

.card-display-actions button {
  min-height: var(--space-28, 1.75rem);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.card-display-actions button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}


/* src/styles/taskCardFields.css */
.task-drag-handle {
  position: static;
  z-index: 2;
  justify-self: end;
  width: var(--space-24);
  height: var(--space-24);
  color: var(--color-text-secondary);
  cursor: grab;
  font-size: var(--text-caption);
  line-height: 1;
  opacity: 0.65;
}

.task-drag-handle:hover {
  opacity: 1;
  background: var(--color-surface-muted);
}

.task-drag-handle:active {
  cursor: grabbing;
}

.overview-task-drag-handle {
  align-self: start;
  justify-self: center;
  touch-action: none;
}

.knowledge-card-type-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.task-content {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  gap: var(--space-8);
  width: 100%;
  min-width: 0;
  min-height: var(--space-48);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: color 140ms ease;
}

.task-content:hover .task-title,
.task-content:focus-visible .task-title {
  color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 34%, var(--color-text-primary));
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 46%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.task-project-icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: var(--space-6, 0.375rem);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--task-project-accent, var(--color-primary));
  color: transparent;
  font-size: 0;
  font-weight: var(--font-weight-strong);
}

.task-project-icon.high {
  background: var(--task-project-accent, var(--color-danger));
  color: transparent;
}

.task-project-icon.medium {
  background: var(--task-project-accent, var(--color-warning));
  color: transparent;
}

.task-project-icon.low,
.task-project-icon.done {
  background: var(--color-success);
  color: var(--color-on-primary);
}

.task-project-icon.done {
  width: var(--space-16);
  height: var(--space-16);
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  line-height: 1;
}

.task-project-icon.info {
  width: var(--space-16);
  height: var(--space-16);
  margin-top: var(--space-4);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-primary);
  font-size: var(--text-caption);
  line-height: 1;
}

.task-title {
  min-width: 0;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.task-parent-context {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  overflow: hidden;
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.86rem;
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-parent-link {
  min-width: 0;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.task-parent-link:hover,
.task-parent-link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  outline: none;
}

.task-parent-separator {
  flex: 0 0 auto;
  color: color-mix(in srgb, currentColor 70%, var(--color-text-secondary));
}

.task-parent-context::before {
  content: "▦";
  display: inline-grid;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  place-items: center;
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.94rem;
  line-height: 1;
}

.task-parent-context.has-project-icon::before {
  background: currentColor;
  content: "";
  mask: var(--task-project-icon-url) center / contain no-repeat;
  -webkit-mask: var(--task-project-icon-url) center / contain no-repeat;
}

.task-date-chips {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  max-width: 100%;
  min-width: 0;
  padding: var(--space-4) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-primary-soft));
}

.task-date-chips-label {
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;
}

.task-date-chip-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.task-date-quick-list {
  display: flex;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.task-date-quick-list::-webkit-scrollbar {
  display: none;
}

.task-date-chip {
  display: inline-grid;
  flex: 0 0 auto;
  min-height: 1.35rem;
  place-items: center;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 86%, white);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.task-date-chip:hover,
.task-date-chip:focus-visible,
.task-date-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.task-date-chip-calendar {
  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  color: var(--color-primary);
}

.task-date-chip:active,
.task-overview-tag-add:active,
.task-overview-tag-remove:active,
.task-card-actions button:active,
.task-done-toggle:active {
  transform: translateY(1px) scale(0.98);
}

.task-date-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.task-item.expanded .task-title,
.task-item.child-card .task-title {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.task-item.done .task-title {
  color: var(--color-text-primary);
  text-decoration: none;
}

.task-project-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 1.25rem;
  align-items: center;
  padding: 0 var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-project-badge[hidden] {
  display: none;
}

.task-project-badge.green {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.task-project-badge.amber {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.task-project-badge.red {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
}

.task-project-badge.violet {
  background: color-mix(in srgb, var(--color-accent-purple) 10%, transparent);
  color: var(--color-accent-purple);
}

.task-project-badge.slate {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.tag-editor {
  display: grid;
  gap: var(--space-8);
}

.detail-section-title {
  color: var(--color-text-primary);
  font-size: var(--text-title);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
}

.tag-editor-selected,
.tag-editor-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  min-width: 0;
}

.tag-editor-empty {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.tag-editor-chip {
  display: inline-flex;
  min-height: var(--space-28);
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.tag-editor-chip.selected {
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.tag-editor-chip span {
  font-size: var(--text-caption);
  line-height: 1;
}

.tag-editor-input {
  max-width: 18rem;
}

.tag-autocomplete-host {
  position: relative;
}

.tag-autocomplete-menu {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 0;
  z-index: 30;
  display: grid;
  width: min(24rem, max(100%, 14rem));
  max-height: 12rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: 0 0.75rem 1.75rem var(--shadow-ink-14);
  overflow-y: auto;
}

.tag-autocomplete-menu[hidden] {
  display: none;
}

.tag-autocomplete-option {
  min-width: 0;
  min-height: var(--space-30);
  padding: 0 var(--space-10);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-autocomplete-option:hover,
.tag-autocomplete-option.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.task-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.task-metadata span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list .task-item {
  display: block;
  align-self: start;
  min-height: 0;
  padding: var(--space-10) var(--space-12) var(--space-12);
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-header {
  position: relative;
  grid-template-columns: 1.75rem 2.5rem minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
  align-items: start;
}

:is(#task-list, .unified-search-cards).overview-list .task-sequence-number {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-content: center;
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
  line-height: var(--space-24);
}

:is(#task-list, .unified-search-cards).overview-list .task-marker-column {
  grid-column: 2;
  grid-row: 1 / span 2;
}

:is(#task-list, .unified-search-cards).overview-list .task-content {
  grid-column: 3;
  grid-row: 1 / span 2;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-6);
  padding-right: 3.5rem;
}


/* src/styles/sharedAccess.css */
.shared-access-icon {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-primary);
  vertical-align: -0.12em;
}

.shared-access-icon svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--color-surface);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.task-title > .shared-access-icon { margin-right: var(--space-4); }


/* src/styles/taskCardDependencies.css */
:is(#task-list, .unified-search-cards).overview-list .task-card-actions {
  position: absolute;
  top: calc(var(--space-4) * -1);
  right: 0;
  grid-column: auto;
  grid-row: auto;
  align-items: center;
  min-width: 0;
  gap: var(--space-4);
  padding-left: var(--space-6);
  background: linear-gradient(90deg, transparent, var(--color-surface) 28%);
  z-index: 2;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete {
  width: var(--space-24);
  height: var(--space-24);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu {
  position: relative;
  width: var(--space-24);
  min-width: var(--space-24);
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu::before {
  display: grid;
  place-items: center;
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1;
  content: "▦";
}

:is(#task-list, .unified-search-cards).overview-list .task-title {
  grid-column: 1;
  grid-row: auto;
}

:is(#task-list, .unified-search-cards).overview-list .task-project-badge,
:is(#task-list, .unified-search-cards).overview-list .task-parent-context,
:is(#task-list, .unified-search-cards).overview-list .task-date-chips,
:is(#task-list, .unified-search-cards).overview-list .task-metadata {
  grid-column: auto;
  grid-row: auto;
}

:is(#task-list, .unified-search-cards).overview-list .task-date-chips {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 1.85rem;
  padding: var(--space-3, 0.1875rem) var(--space-4);
}

:is(#task-list, .unified-search-cards).overview-list .task-date-chip-list {
  flex: 1 1 auto;
  min-width: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-date-quick-list {
  min-width: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-metadata {
  row-gap: var(--space-4);
}

.task-dependency-drop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--space-24);
  padding: 0 var(--space-8);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 58%, transparent);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.task-dependency-drop.empty {
  opacity: 0.58;
}

.task-dependency-drop strong {
  display: inline-grid;
  min-width: var(--space-20);
  height: var(--space-20);
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.task-dependency-drop.dependency-drop-active {
  opacity: 1;
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.task-progress,
.task-date,
.task-deadline,
.task-completed-date,
.task-waiting,
.task-recurrence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.task-metadata .empty {
  color: color-mix(in srgb, var(--color-text-secondary) 72%, white);
  opacity: 0.82;
}

.task-deadline {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
}

.task-deadline.soon {
  color: var(--color-warning);
}

.task-deadline.today,
.task-deadline.overdue {
  color: var(--color-danger);
}

.task-completed-date {
  color: var(--color-success);
  font-weight: var(--font-weight-strong);
}

.task-date.done {
  color: var(--color-success);
  font-weight: var(--font-weight-strong);
}

.task-waiting {
  color: var(--color-warning);
  font-weight: var(--font-weight-strong);
}

.task-meta-icon {
  color: var(--color-text-secondary);
  line-height: 1;
}

.task-status {
  display: inline-grid;
  min-height: var(--space-24);
  align-items: center;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-strong);
}

.task-status.todo {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.task-status.in_progress {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.task-status.review {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.task-status.done {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.task-type-badge,
.task-tag {
  display: inline-grid;
  max-width: 100%;
  min-height: var(--space-24);
  align-items: center;
  padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-strong);
}

.task-type-badge {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.task-subtask-count {
  color: var(--color-text-secondary);
}

.task-created-date {
  color: color-mix(in srgb, var(--color-text-secondary) 84%, var(--color-text-primary));
}

.task-tag {
  max-width: min(100%, 9rem);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.board-list .task-tag,
.board-list .task-notes-preview {
  display: none;
}

.board-list .task-card-header {
  grid-template-columns: var(--space-16) minmax(0, 1fr) auto;
  padding-right: 0;
}

.board-list .task-controls {
  position: static;
}

.task-notes-preview {
  flex-basis: 100%;
  min-width: 0;
  color: var(--color-text-secondary);
  white-space: normal;
}

.outline-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.outline-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-10);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.outline-header {
  display: grid;
  grid-template-columns: var(--space-40) minmax(0, 1fr) auto;
  gap: var(--space-12);
  align-items: center;
  min-height: var(--space-64);
  padding: var(--space-10) var(--space-14, 0.875rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background:
    linear-gradient(90deg, var(--color-primary-soft), transparent 34%),
    var(--color-surface);
  box-shadow: var(--shadow-subtle, 0 1px 2px var(--shadow-ink-08));
}

.outline-title-group {
  min-width: 0;
}

.outline-view-name {
  display: block;
  margin: 0 0 var(--space-2, 0.125rem);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-transform: uppercase;
}

.outline-header h2 {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--text-title);
  line-height: var(--line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-header span {
  display: inline-block;
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.outline-back,
.outline-command,
.outline-row-action {
  display: inline-grid;
  min-height: var(--control-height-sm);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.outline-back {
  width: var(--space-40);
  padding: 0;
}

.outline-command {
  grid-auto-flow: column;
  gap: var(--space-8);
  padding: 0 var(--space-12);
}

.planning-board {
  display: grid;
  grid-template-columns: minmax(19rem, 0.8fr) minmax(21rem, 1fr) minmax(21rem, 1fr);
  gap: var(--space-10);
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-2, 0.125rem);
}

.planning-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 88%, var(--color-primary-soft)), var(--color-surface-muted) 58%),
    var(--color-surface-muted);
  overflow: hidden;
}

.planning-column.locked {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary-soft) 58%, var(--color-surface)), var(--color-surface) 60%),
    var(--color-surface);
}

.planning-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--space-40);
  padding: 0 var(--space-12);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.planning-column-header h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: var(--line-tight);
}

.planning-column-header span {
  min-width: var(--space-24);
  max-width: 12rem;
  overflow: hidden;
  padding: var(--space-2, 0.125rem) var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-column-list {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-10);
  padding-bottom: var(--space-16);
  overscroll-behavior: contain;
}

.planning-column-list.drag-over {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.planning-column-empty {
  display: grid;
  min-height: 10rem;
  place-items: center;
  padding: var(--space-16);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-align: center;
}

.planning-card {
  position: relative;
  display: grid;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-10);
  border: 1px solid var(--task-project-border, var(--color-border));
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  cursor: default;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.planning-column.locked .planning-card {
  min-height: 100%;
  align-content: start;
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent), var(--shadow-card);
}

.planning-card.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 70%, transparent), var(--shadow-card);
}

.planning-card.dragging {
  opacity: 0.28;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .task-item,
  .planning-card,
  .task-drop-preview,
  .task-sync-indicator,
  .task-item.recently-moved,
  .planning-card.recently-moved {
    animation: none;
    transition: none;
  }
}

.planning-card.drop-before::before,
.planning-card.drop-after::after {
  content: none;
}

.planning-card.drop-before::before {
  top: calc(var(--space-8) * -1);
}

.planning-card.drop-after::after {
  bottom: calc(var(--space-8) * -1);
}


/* src/styles/planningCards.css */
.planning-card.drop-inside {
  border-color: var(--color-primary);
  outline: 0;
  background: color-mix(in srgb, var(--color-primary-soft) 64%, var(--color-surface));
  box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow-card);
}

.planning-card.drop-inside::before {
  position: absolute;
  right: var(--space-10);
  bottom: var(--space-10);
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  content: "Als Unterkarte";
}

.planning-card-header {
  display: grid;
  grid-template-columns: var(--space-24) minmax(0, 1fr) var(--space-28) var(--space-28);
  gap: var(--space-8);
  align-items: start;
}

.planning-card .task-drag-handle[hidden] {
  display: none;
}

.planning-column.locked .planning-card-header {
  grid-template-columns: var(--space-24) minmax(0, 1fr) var(--space-28);
}

.planning-card-state {
  display: grid;
  width: var(--space-22, 1.375rem);
  height: var(--space-22, 1.375rem);
  min-width: var(--space-22, 1.375rem);
  min-height: var(--space-22, 1.375rem);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-success);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.planning-card-state[aria-pressed="true"] {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-on-primary);
}

.planning-card-title {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  resize: none;
}

.planning-column.locked .planning-card-title {
  font-size: var(--text-title);
}

.planning-card-title:focus {
  outline: var(--focus-ring);
}

.planning-card .task-drag-handle {
  position: static;
  width: var(--space-28);
  height: var(--space-28);
  min-width: var(--space-28);
  min-height: var(--space-28);
  border-color: transparent;
  background: transparent;
  color: var(--color-text-secondary);
  opacity: 1;
  transform: none;
}

.planning-card .task-dependency-action {
  position: static;
  width: var(--space-28);
  height: var(--space-28);
  min-width: var(--space-28);
  min-height: var(--space-28);
  align-self: start;
  border-color: transparent;
  background: transparent;
  transform: none;
}

.planning-card-meta,
.planning-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  min-width: 0;
}

.planning-card-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6, 0.375rem) var(--space-8);
}

.planning-column.locked .planning-card-fields {
  grid-template-columns: minmax(0, 1fr);
}

.planning-field {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.planning-field span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.planning-field input,
.planning-field select,
.planning-field textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
}

.planning-field textarea {
  min-height: 4.75rem;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  line-height: var(--line-normal);
  resize: vertical;
}

.planning-field input:focus,
.planning-field select:focus,
.planning-field textarea:focus {
  outline: var(--focus-ring);
}

.planning-card-actions {
  justify-content: space-between;
  padding-top: var(--space-2, 0.125rem);
}

.planning-card-actions button {
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--space-6);
  align-items: center;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.outline-table {
  display: grid;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.outline-row {
  display: grid;
  grid-template-columns: 1.25rem 1.75rem minmax(24rem, 2fr) 6.75rem 6.25rem 6.25rem 5rem 2rem;
  gap: var(--space-8);
  align-items: center;
  min-height: var(--space-44, 2.75rem);
  padding: 0 var(--space-12);
  border-bottom: 1px solid var(--color-border);
  min-width: 62rem;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  font-size: var(--text-caption);
}

.outline-row-header {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: var(--space-36, 2.25rem);
  color: var(--color-text-secondary);
  background: var(--color-surface-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.outline-parent-row,
.outline-child-row {
  background: var(--color-surface);
}

.outline-child-row {
  cursor: default;
}

.outline-parent-row {
  min-height: var(--space-56, 3.5rem);
  background: linear-gradient(90deg, var(--color-primary-soft), var(--color-surface) 55%);
}

.outline-child-row.selected,
.outline-parent-row.selected {
  background: var(--color-primary-soft);
}

.outline-child-row.drag-over,
.outline-child-list.drag-over,
.outline-detach-zone.drag-over {
  outline: 1px dashed var(--color-primary);
  outline-offset: -2px;
}

.outline-child-list {
  display: grid;
}

.outline-row .task-drag-handle,
.outline-row .task-child-toggle {
  position: static;
  grid-column: auto;
  grid-row: auto;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  opacity: 1;
  transform: none;
  justify-self: center;
}

.outline-row .task-drag-handle {
  border-color: transparent;
  color: var(--color-text-secondary);
  background: transparent;
  cursor: grab;
}

.outline-row .task-drag-handle:hover {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
}

.outline-row .task-project-icon {
  width: var(--space-28, 1.75rem);
  height: var(--space-28, 1.75rem);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  justify-self: center;
}

.outline-title-stack,
.outline-title-cell,
.outline-child-row input {
  min-width: 0;
}

.outline-title-stack {
  display: grid;
  gap: var(--space-2, 0.125rem);
}

.outline-title-cell,
.outline-child-row input {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-project-cell {
  min-width: 0;
  overflow: hidden;
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline-child-row input {
  width: 100%;
  height: var(--space-32);
  padding: 0 var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
}

.outline-child-row input:focus {
  border-color: var(--color-primary);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--color-surface);
}

.outline-progress-cell,
.outline-tree-cell {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.outline-child-form {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
  min-width: 0;
  padding: var(--space-10, 0.625rem) var(--space-12) var(--space-12);
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 88%, transparent), var(--color-surface)),
    var(--color-surface);
  box-shadow: 0 -8px 16px var(--shadow-ink-04);
  z-index: 1;
}

.outline-child-form span {
  color: var(--color-primary);
}

.outline-child-form input {
  height: var(--control-height-sm);
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font: inherit;
}

.outline-child-form input:focus {
  outline: var(--focus-ring);
}

.outline-detach-zone {
  min-width: 0;
  padding: var(--space-8) var(--space-12);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  font-size: var(--text-caption);
}

.outline-detach-zone.drag-over {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.task-children {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-8);
  padding: var(--space-12, 0.75rem) var(--space-12, 0.75rem) 0;
  border-top: 1px solid var(--color-border);
}

.task-inline-details {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}

.task-inline-detail {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.task-inline-detail span {
  min-width: 0;
}

.task-inline-detail strong {
  min-width: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-children-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.task-children-header span {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
}

.task-child-list {
  display: grid;
  gap: var(--space-6, 0.375rem);
}

.task-overview-full-children {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.task-overview-full-children > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.task-overview-full-children > header span {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-strong);
}


/* src/styles/overviewModalLayout.css */
.task-child {
  position: relative;
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr) 1.125rem 1.125rem;
  gap: var(--space-4);
  align-items: start;
  min-height: var(--space-24);
  margin-left: min(calc(var(--child-depth, 0) * 1.125rem), 4.5rem);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

.task-child.drop-inside {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.task-child.drop-before::before,
.task-child.drop-after::after {
  position: absolute;
  right: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  height: 0.16rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 0.12rem var(--color-primary-soft);
  content: "";
}

.task-child.drop-before::before { top: -0.16rem; }
.task-child.drop-after::after { bottom: -0.16rem; }

.task-child-nested-list {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-left: var(--space-12);
  border-left: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
}

.task-child .task-drag-handle {
  position: static;
  grid-column: 3;
  grid-row: 1;
  top: auto;
  left: auto;
  z-index: auto;
  justify-self: end;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.625rem;
  opacity: 0.65;
}

.task-child .task-dependency-action {
  grid-column: 4;
  grid-row: 1;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
}

.task-child:hover .task-drag-handle {
  opacity: 1;
}

.task-child-toggle {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  width: 1.125rem;
  height: 1.125rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-surface);
  font-size: var(--text-caption);
}

.task-child-toggle[aria-pressed="true"] {
  border-color: var(--color-success);
  background: var(--color-success);
}

.task-child textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: var(--space-24);
  height: auto;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: transparent;
  font: inherit;
  font-size: var(--text-caption);
  line-height: var(--line-base);
  overflow: hidden;
  resize: none;
}

.task-child textarea:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.task-child.done textarea {
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.task-child-date {
  grid-column: 2;
  grid-row: 2;
  max-width: 100%;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-align: left;
  white-space: nowrap;
}

.task-child-divider {
  display: none;
}

.task-child-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: var(--control-height-sm);
  color: var(--color-primary);
}

.task-child-form input {
  min-width: 0;
  height: var(--control-height-sm);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: transparent;
  font: inherit;
  font-size: var(--text-caption);
}

.task-child-form input:focus {
  border-color: var(--color-primary);
  outline: var(--focus-ring);
}

.task-child-help {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

@media (max-width: 59.99rem) {
  .task-list.board-list {
    grid-template-columns: minmax(18rem, 1fr);
  }

  .task-list.board-list.show-done-column {
    grid-template-columns: repeat(2, minmax(18rem, 1fr));
  }

  .task-form {
    grid-template-columns: minmax(0, 1fr) var(--control-height-sm);
  }

  .task-content {
    padding-right: 0;
  }
}

@media (max-width: 37.4375rem) {
  :root {
    --mobile-browser-bottom-reserve: var(--space-48);
  }

  .task-list.board-list {
    grid-template-columns: minmax(18rem, 1fr);
  }

  .task-list.board-list.show-done-column {
    grid-template-columns: repeat(2, minmax(18rem, 1fr));
  }

  .task-form {
    grid-template-columns: 1fr var(--control-height-sm);
  }

  .task-children {
    grid-column: 1 / -1;
  }
}

/* Overview modal v2: purpose-built editor, independent from the persistent detail panel. */
.overview-card-dialog {
  width: min(56rem, calc(100vw - 2rem));
  height: auto;
  max-width: calc(100vw - 2rem);
  max-height: min(40rem, calc(100dvh - 2rem));
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, var(--color-text-secondary));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 1.5rem 4.5rem var(--shadow-ink-24);
}

.overview-card-dialog::backdrop {
  background: var(--shadow-ink-34);
  backdrop-filter: blur(1px);
}

.overview-card-modal,
.overview-card-modal-shell {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
}

.overview-card-modal-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
}

.overview-card-modal-editor {
  display: grid;
  grid-template-rows: 2.25rem minmax(0, 1fr) 3rem;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(min(40rem, 100dvh - 2rem) - 2px) !important;
  overflow: hidden !important;
}

.overview-card-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.25rem;
  padding: 0.25rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
}

.overview-card-modal-header-nav,
.overview-card-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.overview-card-modal-icon-button {
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
}

.overview-card-modal-icon-button:hover:not(:disabled),
.overview-card-modal-icon-button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.overview-card-modal-icon-button:disabled {
  opacity: 0.42;
}

.overview-card-modal-position {
  order: 3;
  min-width: 3.8rem;
  color: var(--color-text-primary);
  font-size: 0.56rem;
  font-weight: var(--font-weight-strong);
  text-align: center;
  white-space: nowrap;
}

.overview-card-modal-header-nav .overview-modal-title-action {
  order: 4;
}

.overview-card-modal-body {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0.5rem 0.75rem 0.65rem;
}

/* The detail card has its own two-column workspace. The surrounding search /
   navigator column is intentionally untouched. */
.overview-modal-detail-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  min-width: 0;
}

.overview-modal-fields-column,
.overview-modal-notes-column {
  display: grid;
  align-content: start;
  min-width: 0;
}

.overview-modal-fields-column {
  gap: 0;
}

.overview-modal-notes-column .overview-modal-notes {
  margin-bottom: 0;
}

/* Keep the notes heading aligned with the fields while retaining a practical,
   directly usable formatting toolbar. */
.overview-modal-notes-column .overview-modal-notes {
  gap: 0.14rem;
}

.overview-modal-notes-column .overview-modal-notes > header {
  min-height: 1.65rem;
  align-items: center;
}

.overview-modal-notes-column .overview-modal-notes h3 {
  font-size: 0.62rem;
  line-height: 1;
}

.overview-modal-title-block {
  display: grid;
  gap: 0.0625rem;
  margin-bottom: 0.45rem;
}

.overview-modal-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.overview-modal-title-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.35rem;
  min-height: 1.35rem;
  padding: 0;
  resize: none;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 1.02rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.35rem;
}

.overview-modal-title-input:focus {
  outline: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 44%, transparent);
  text-underline-offset: 0.25rem;
}

.overview-modal-link-button {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-path {
  margin: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  align-items: end;
  margin-bottom: 0.5rem;
}

.overview-modal-field {
  display: grid;
  gap: 0.14rem;
  min-width: 0;
  padding: 0.3rem 0.36rem 0.34rem;
  border: 1px solid color-mix(in srgb, var(--modal-field-color, var(--color-border)) 24%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--modal-field-color, var(--color-primary)) 6%, var(--color-surface));
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.overview-modal-field:focus-within {
  border-color: color-mix(in srgb, var(--modal-field-color, var(--color-primary)) 58%, var(--color-border));
  background: color-mix(in srgb, var(--modal-field-color, var(--color-primary)) 11%, var(--color-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--modal-field-color, var(--color-primary)) 12%, transparent);
}

.overview-modal-field-planned { --modal-field-color: var(--color-accent-blue); }
.overview-modal-field-time { --modal-field-color: var(--color-accent-blue); }
.overview-modal-field-deadline { --modal-field-color: var(--color-danger); }
.overview-modal-field-done { --modal-field-color: var(--color-accent-green); }
.overview-modal-field-type { --modal-field-color: var(--color-primary); }
.overview-modal-field-waiting { --modal-field-color: var(--color-warning-strong); }
.overview-modal-field-project { --modal-field-color: var(--color-primary); }
.overview-modal-field-assignee { --modal-field-color: var(--color-accent-teal); }
.overview-modal-field-collaborators { --modal-field-color: var(--color-accent-teal); }

.overview-modal-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  min-width: 0;
  color: color-mix(in srgb, var(--modal-field-color, var(--color-text-secondary)) 78%, var(--color-text-secondary));
}

.overview-modal-field-label b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-field-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  place-items: center;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--modal-field-color, var(--color-primary)) 15%, transparent);
  color: var(--modal-field-color, var(--color-primary));
  font-size: 0.61rem;
  font-style: normal;
  line-height: 1;
}

.overview-modal-tags-field {
  --modal-field-color: var(--color-accent-purple);
  margin-bottom: 0.5rem;
}


/* src/styles/overviewModalFields.css */
.overview-modal-field > span,
.overview-modal-notes h3,
.overview-modal-subcards-header h3 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-input,
.overview-modal-inline-input {
  width: 100%;
  min-width: 0;
  height: 1.7rem;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-surface) 76%, transparent);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.7rem;
}

.overview-modal-field .overview-modal-input:focus,
.overview-modal-field .overview-modal-inline-input:focus {
  border-color: color-mix(in srgb, var(--modal-field-color, var(--color-primary)) 42%, transparent);
  outline: none;
}

.overview-modal-readonly {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.7rem;
  padding: 0.16rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.overview-modal-tag-chip {
  min-height: 1.16rem;
  padding: 0 0.4rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.58rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-tag-input {
  flex: 1 1 4rem;
  min-width: 3rem;
  height: 1.16rem;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.62rem;
  outline: none;
}

.overview-modal-notes {
  display: grid;
  gap: 0.22rem;
  margin-bottom: 0.5rem;
}

.overview-modal-notes-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.overview-modal-section-toggle {
  display: inline-flex;
  min-height: 1.35rem;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.58rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-section-toggle:hover,
.overview-modal-section-toggle:focus-visible {
  border-color: var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.overview-modal-notes.collapsed .overview-modal-notes-tools,
.overview-modal-notes.collapsed .overview-modal-notes-editor {
  display: none;
}

.overview-modal-notes-editor {
  width: 100%;
  min-height: 10.5rem;
  max-height: 10.5rem;
  overflow-y: auto;
  padding: 0.62rem 0.7rem;
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.42;
}

.overview-modal-attachments {
  --modal-section-color: var(--color-accent-purple);
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
  padding: 0.42rem;
  border: 1px solid color-mix(in srgb, var(--modal-section-color) 24%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--modal-section-color) 6%, var(--color-surface));
}

.overview-modal-annotations {
  --modal-section-color: var(--color-warning-strong);
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
  padding: 0.42rem;
  border: 1px solid color-mix(in srgb, var(--modal-section-color) 24%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--modal-section-color) 6%, var(--color-surface));
}

.overview-modal-notes-column .overview-modal-annotations {
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  max-height: 8rem;
  margin-bottom: 0;
  overflow: hidden;
}

.overview-modal-notes-column .overview-modal-annotation-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.overview-modal-annotations > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.overview-modal-annotations h3 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-annotation-list {
  display: grid;
  gap: 0.28rem;
}

.overview-modal-annotation-empty {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.58rem;
}

.overview-modal-annotation {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 1.35rem;
  gap: 0.3rem;
  align-items: center;
}

.overview-modal-annotation time {
  color: var(--color-text-secondary);
  font-size: 0.58rem;
  white-space: nowrap;
}

.overview-modal-annotation input,
.overview-modal-annotation-form input {
  min-width: 0;
  min-height: 1.6rem;
  padding: 0 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.62rem;
}

.overview-modal-annotation button,
.overview-modal-annotation-form button {
  display: grid;
  width: 1.35rem;
  min-height: 1.35rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-danger);
  font: inherit;
  line-height: 1;
}

.overview-modal-annotation-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.35rem;
  gap: 0.3rem;
}

.overview-modal-annotation-time-hint {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: 0.56rem;
  line-height: 1.2;
}

.overview-modal-annotation-form button {
  color: var(--color-primary);
}

.overview-modal-attachments > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.overview-modal-collaborator-picker {
  position: relative;
  min-width: 0;
}

.overview-modal-collaborator-picker > summary {
  display: flex;
  min-height: 1.7rem;
  align-items: center;
  padding: 0 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: 0.7rem;
  list-style: none;
}

.overview-modal-collaborator-picker > summary::-webkit-details-marker {
  display: none;
}

.overview-modal-collaborator-picker > summary::after {
  margin-left: auto;
  color: var(--color-primary);
  content: "▾";
}

.overview-modal-collaborator-picker[open] > summary::after {
  content: "▴";
}

.overview-modal-collaborator-picker > select {
  position: absolute;
  z-index: 12;
  top: calc(100% + 0.25rem);
  left: 0;
  width: 100%;
  max-height: 9rem;
  padding: 0.25rem;
  box-shadow: 0 0.75rem 1.5rem var(--shadow-ink-16);
}

.overview-card-modal-body > .overview-modal-subcards {
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: min(17rem, 34dvh);
  margin-top: 0.8rem;
  overflow: hidden;
}

.overview-card-modal-body > .overview-modal-subcards .overview-modal-subcard-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.overview-card-modal-body > .overview-modal-subcards.empty {
  grid-template-rows: auto auto;
  max-height: none;
}

.overview-card-modal-body > .overview-modal-subcards.empty .overview-modal-subcard-list {
  display: none;
}

.overview-modal-attachments h3 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-attachment-picker {
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 0.58rem;
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.overview-modal-attachment-picker:hover,
.overview-modal-attachment-picker:focus-within {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.overview-modal-attachment-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.overview-modal-attachment-drop-hint {
  margin: 0;
  padding: 0.34rem 0.45rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 0.62rem;
  text-align: center;
}

.overview-modal-attachments.attachment-drop-active {
  outline: 2px solid var(--color-primary);
  outline-offset: 0.2rem;
}

.overview-modal-attachments.attachment-drop-active .overview-modal-attachment-drop-hint {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.overview-modal-attachment-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 5.5rem));
  gap: 0.4rem;
}

.overview-modal-attachment-thumbnail {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 0.18rem;
  margin: 0;
  padding: 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.overview-modal-attachment-preview {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: var(--color-surface-muted);
  cursor: zoom-in;
}

.overview-modal-attachment-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.overview-modal-attachment-thumbnail figcaption {
  min-width: 0;
  overflow: hidden;
  padding: 0 0.12rem;
  color: var(--color-text-secondary);
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-attachment-delete {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-danger);
  font: inherit;
  line-height: 1;
}

.overview-modal-attachment-thumbnail > .overview-modal-attachment-delete {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
}

.overview-modal-attachment-files {
  display: grid;
  gap: 0.25rem;
}

.overview-modal-attachment-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.15rem;
  gap: 0.4rem;
  align-items: center;
  min-height: 1.65rem;
  padding: 0 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 0.58rem;
}

.overview-modal-attachment-file a {
  min-width: 0;
  overflow: hidden;
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-attachment-file > span,
.overview-modal-attachment-empty {
  color: var(--color-text-secondary);
  font-size: 0.56rem;
}

.overview-modal-attachment-empty {
  margin: 0;
}


/* src/styles/overviewModalAttachments.css */
.attachment-lightbox {
  width: min(68rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-backdrop-solid);
  color: white;
  box-shadow: 0 1.5rem 5rem var(--color-backdrop);
}

.attachment-lightbox::backdrop {
  background: var(--color-backdrop-strong);
  backdrop-filter: blur(3px);
}

.attachment-lightbox img {
  display: block;
  width: 100%;
  height: min(78dvh, 50rem);
  object-fit: contain;
}

.attachment-lightbox-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-surface) 36%, transparent);
  border-radius: var(--radius-full);
  background: var(--color-backdrop-strong);
  color: white;
  font: inherit;
  font-size: 1.25rem;
}

.attachment-lightbox-caption {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.35rem 0.1rem;
  font-size: 0.7rem;
}

.attachment-lightbox-caption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-lightbox-caption a {
  color: white;
  font-weight: var(--font-weight-strong);
}

.overview-modal-subcards {
  display: grid;
  gap: 0.28rem;
}

.overview-modal-subcards-header {
  display: grid;
  grid-template-columns: auto auto minmax(4rem, 6rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
}

.overview-modal-subcards-header h3 {
  color: var(--color-text-primary);
  font-size: 0.72rem;
}

.overview-modal-subcards-header > span {
  color: var(--color-text-primary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-subcards-progress {
  height: 0.18rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-border) 70%, transparent);
}

.overview-modal-subcards-progress[hidden] {
  display: none;
}

.overview-modal-subcards-progress span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--color-primary);
}

.overview-modal-subcards-header button {
  grid-column: 5;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-subcard-list {
  display: grid;
  gap: 0.2rem;
}

.overview-modal-subcard-columns {
  display: grid;
  grid-template-columns: 1rem 1.2rem minmax(10rem, 1.25fr) 5.1rem 5.1rem minmax(4rem, 0.7fr) 1.35rem 1.35rem;
  gap: 0.22rem;
  align-items: end;
  min-height: 1rem;
  padding: 0 0.4rem;
  color: var(--color-text-tertiary);
  font-size: 0.54rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

.overview-modal-subcard-row {
  display: grid;
  grid-template-columns: 1.55rem minmax(10rem, 1.1fr) 4.6rem 5rem 5rem 4.1rem minmax(3.5rem, 0.6fr) 1.2rem;
  gap: 0.22rem;
  align-items: center;
  min-height: 1.95rem;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.overview-modal-subcard-row.done {
  opacity: 0.72;
}

.overview-modal-subcard-done {
  display: grid;
  width: 1.18rem;
  height: 1.18rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-text-secondary) 38%, var(--color-border));
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-surface-muted) 46%, var(--color-surface));
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

.overview-modal-subcard-title {
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-subcard-tags {
  min-width: 0;
  overflow: hidden;
  color: var(--color-primary);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-subcard-menu {
  width: 1.1rem;
  height: 1.1rem;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
}

.overview-modal-subcard-empty {
  margin: 0;
  padding: 0.35rem;
  color: var(--color-text-secondary);
  font-size: 0.56rem;
}

.overview-modal-subcard-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.45rem;
  gap: 0.28rem;
  align-items: center;
  margin-top: 0.125rem;
}

.overview-modal-subcard-form input {
  height: 1.65rem;
  padding: 0 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: inherit;
  font-size: 0.66rem;
}

.overview-modal-subcard-form span {
  color: var(--color-text-secondary);
  font-size: 0.56rem;
  white-space: nowrap;
}

.overview-modal-subcard-form button {
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--font-weight-strong);
}

.overview-modal-footer {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
  gap: 0.625rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.overview-modal-footer .button {
  min-height: 1.8rem;
  padding: 0 0.75rem;
  font-size: 0.62rem;
}

.overview-modal-delete {
  color: var(--color-danger);
}

.overview-modal-created-at {
  color: var(--color-text-secondary);
  font-size: 0.62rem;
  white-space: nowrap;
}

@media (max-width: 36rem) {
  .overview-modal-created-at {
    display: none;
  }
}

.overview-card-modal-navigator {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  border-left: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-muted) 48%, var(--color-surface));
}

.overview-card-modal-navigator > header {
  display: grid;
  gap: 0.125rem;
  padding: 0.55rem 0.55rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

.overview-card-modal-navigator h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.72rem;
  font-weight: var(--font-weight-strong);
}

.overview-card-modal-navigator header span {
  color: var(--color-text-secondary);
  font-size: 0.64rem;
}

.overview-card-modal-nav-list {
  display: grid;
  align-content: start;
  gap: 0.28rem;
  min-height: 0;
  overflow: auto;
  padding: 0.5rem;
}

.overview-card-modal-nav-card {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr) 1rem;
  gap: 0.28rem;
  align-items: start;
  min-height: 3.3rem;
  padding: 0.42rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.overview-card-modal-nav-card.active {
  border-color: var(--color-primary);
  border-left-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 44%, var(--color-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.overview-card-modal-nav-marker {
  display: grid;
  width: 0.46rem;
  height: 0.46rem;
  margin-top: 0.125rem;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-success);
  font-size: 0;
  line-height: 1;
}

.overview-card-modal-nav-marker.high {
  border-color: var(--color-danger);
}

.overview-card-modal-nav-marker.medium {
  border-color: var(--color-warning);
}

.overview-card-modal-nav-marker.low,
.overview-card-modal-nav-marker.done {
  border-color: var(--color-success);
}

.overview-card-modal-nav-card-body {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.overview-card-modal-nav-card-body strong,
.overview-card-modal-nav-card-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-card-modal-nav-card-body strong {
  color: var(--color-text-primary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
}

.overview-card-modal-nav-card-body small {
  color: var(--color-text-secondary);
  font-size: 0.6rem;
}

.overview-card-modal-nav-meta {
  color: var(--color-primary);
}

.overview-card-modal-nav-menu {
  color: var(--color-text-secondary);
  text-align: right;
}

.overview-card-modal-nav-end {
  margin: 0.5rem 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-align: center;
}

.overview-card-modal-header-actions {
  margin-left: auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.overview-card-modal-header-actions .overview-card-modal-icon-button:last-child {
  width: 1.65rem;
  height: 1.65rem;
  border-color: transparent;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 1.05rem;
}

.overview-modal-title-row {
  gap: 0.45rem;
}

.overview-modal-quick-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: center;
  margin: 0 0.2rem 0 0;
}

.overview-modal-title-action {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 1.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0 0.45rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.overview-modal-title-action:hover,
.overview-modal-title-action:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.overview-modal-title-action-icon {
  display: grid;
  width: 0.78rem;
  height: 0.78rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  font-size: 0.58rem;
  line-height: 1;
}

.overview-modal-title-done.done {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  color: var(--color-success);
}

.overview-modal-important-action.active {
  border-color: color-mix(in srgb, var(--color-warning) 42%, var(--color-border));
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.overview-modal-important-action:not(.active) {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}


/* src/styles/overviewModalStates.css */
.overview-card-modal:has(.overview-modal-title-done.done) .overview-modal-title-input {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--color-text-secondary) 62%, transparent);
}

.overview-modal-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  margin-left: 1.6rem;
  white-space: normal;
}

.overview-modal-path-crumb {
  display: inline-flex;
  align-items: center;
  min-height: 1.05rem;
  padding: 0 0.2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
}

button.overview-modal-path-crumb {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

button.overview-modal-path-crumb:hover,
button.overview-modal-path-crumb:focus-visible {
  background: var(--color-primary-soft);
}

.overview-modal-path-separator {
  color: var(--color-text-tertiary);
}

.overview-modal-input,
.overview-modal-inline-input {
  background: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface-muted) 24%, var(--color-surface)));
}

.overview-modal-tags {
  background: color-mix(in srgb, var(--color-primary-soft) 18%, var(--color-surface));
}

.overview-modal-notes header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.overview-modal-notes-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.26rem;
  justify-content: flex-end;
}

.overview-modal-notes-tool {
  display: inline-grid;
  min-width: 1.7rem;
  height: 1.6rem;
  place-items: center;
  padding: 0 0.36rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.7rem;
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.overview-modal-notes-tool:hover,
.overview-modal-notes-tool:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.overview-modal-notes-tool.rich-text-color {
  width: 1.7rem;
  min-width: 1.7rem;
  padding: 0.12rem;
}

.overview-modal-notes-editor hr {
  margin: 0.65rem 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.overview-modal-notes-editor {
  overflow: auto;
}

.overview-modal-notes-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-tertiary);
}

.overview-modal-notes-editor h2,
.overview-modal-notes-editor h3,
.overview-modal-notes-editor p,
.overview-modal-notes-editor ul,
.overview-modal-notes-editor ol {
  margin: 0 0 0.45rem;
}

.overview-modal-notes.overview-modal-notes-expanded {
  position: fixed;
  z-index: 120;
  inset: max(5vh, 1rem) max(5vw, 1rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 1rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
}

.overview-modal-notes.overview-modal-notes-expanded .overview-modal-notes-editor {
  min-height: 0;
  max-height: none;
  height: 100%;
}

.overview-modal-notes-editor h2 {
  font-size: 0.92rem;
}

.overview-modal-notes-editor h3 {
  font-size: 0.82rem;
}

.overview-modal-notes-editor ul,
.overview-modal-notes-editor ol {
  padding-left: 1.1rem;
}

.overview-modal-subcard-done {
  border-color: color-mix(in srgb, var(--color-text-secondary) 38%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface-muted) 46%, var(--color-surface));
  color: var(--color-text-secondary);
}

.overview-modal-subcard-row.done .overview-modal-subcard-done {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-on-primary);
}

.overview-modal-subcard-row.done .overview-modal-subcard-title {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--color-text-secondary) 62%, transparent);
}

.overview-modal-subcard-title {
  height: 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.overview-modal-subcard-title:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  outline: none;
}

.overview-modal-subcard-menu {
  color: var(--color-primary);
  font-size: 0.72rem;
}

.overview-card-modal-navigator {
  background: color-mix(in srgb, var(--color-primary-soft) 12%, var(--color-surface));
}

.overview-card-modal-navigator > header {
  padding-inline: 0.45rem;
}

.overview-card-modal-nav-list {
  padding: 0.45rem 0.38rem;
}

.overview-card-modal-nav-card {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  grid-template-columns: 0.5rem minmax(0, 1fr) 0.9rem;
  gap: 0.18rem;
  padding: 0.42rem 0.35rem;
}

.overview-card-modal-nav-card.active {
  background: color-mix(in srgb, var(--color-primary-soft) 58%, var(--color-surface));
}

.overview-card-modal-nav-marker.high {
  background: var(--color-danger);
}

.overview-card-modal-nav-marker.medium {
  background: var(--color-primary);
}

.overview-card-modal-nav-marker.low,
.overview-card-modal-nav-marker.done {
  background: var(--color-success);
}

.overview-card-modal-nav-meta {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
  color: var(--color-text-secondary);
}

.overview-card-modal-nav-status {
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-strong);
}

.overview-card-modal-nav-status.waiting {
  color: var(--color-accent-purple) !important;
}

.overview-card-modal-nav-status.done {
  color: var(--color-success) !important;
}

.overview-card-modal-nav-comments {
  margin-left: auto;
}

.overview-modal-checkbox-field {
  min-width: 0;
}

.overview-modal-checkbox-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.7rem;
  padding: 0 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-surface-muted) 24%, var(--color-surface)));
  color: var(--color-text-secondary);
  font-size: 0.66rem;
}

.overview-modal-checkbox-control input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: var(--color-primary);
}

.overview-modal-checkbox-control b {
  overflow: hidden;
  font-weight: var(--font-weight-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-modal-checkbox-control:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-accent-purple) 44%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-surface));
  color: var(--color-accent-purple);
}

.overview-modal-checkbox-control:has(input:disabled) {
  opacity: 0.55;
}

.overview-modal-subcard-row {
  grid-template-columns: 1rem 1.2rem minmax(10rem, 1.25fr) 5.1rem 5.1rem minmax(4rem, 0.7fr) 1.35rem 1.35rem;
  position: relative;
  width: auto;
  margin-inline-start: min(calc(var(--modal-hierarchy-depth, 0) * 1.45rem), 5.8rem);
}

.overview-modal-subcard-row.nested::before {
  position: absolute;
  top: -0.5rem;
  bottom: 50%;
  left: -0.86rem;
  width: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
  border-bottom-left-radius: 0.45rem;
  border-left: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
  content: "";
  pointer-events: none;
}

.overview-modal-subcard-drag {
  display: grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
  cursor: grab;
}

.overview-modal-subcard-drag:active {
  cursor: grabbing;
}

.overview-modal-subcard-detach {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1;
}

.overview-modal-subcard-detach:hover,
.overview-modal-subcard-detach:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.overview-modal-subcard-row.dragging {
  opacity: 0.38;
  box-shadow: none;
}

.overview-modal-subcard-row.drop-inside {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 36%, var(--color-surface));
  box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 0.14rem var(--color-primary-soft);
}

.overview-modal-subcard-row.drop-before::before,
.overview-modal-subcard-row.drop-after::after {
  position: absolute;
  right: var(--space-8);
  left: var(--space-8);
  display: grid;
  height: 1.45rem;
  place-items: center;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-primary-soft) 66%, var(--color-surface));
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-size: 0.65rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
}

.overview-modal-subcard-row.drop-before::before {
  top: -1.62rem;
  content: "Hier einfügen";
}

.overview-modal-subcard-row.drop-after::after {
  bottom: -1.62rem;
  content: "Hier einfügen";
}

.overview-modal-subcard-row.drop-before {
  margin-top: 1.7rem;
}

.overview-modal-subcard-row.drop-after {
  margin-bottom: 1.7rem;
}

.overview-modal-subcard-row.drop-inside::after {
  position: absolute;
  right: var(--space-8);
  bottom: calc(var(--space-8) * -1);
  padding: 0.1rem 0.42rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  content: "Als Unterkarte";
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
}

.overview-modal-subcard-row.recently-moved {
  animation: modal-subcard-land 260ms var(--ease-standard);
}

@keyframes modal-subcard-land {
  from {
    opacity: 0.2;
    transform: translateY(-0.45rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.overview-modal-subcard-done {
  width: 1rem;
  height: 1rem;
  font-size: 0.68rem;
}

:is(#task-list, .unified-search-cards).overview-list > .task-item.done {
  opacity: 0.84;
  background: var(--color-surface) !important;
}

:is(#task-list, .unified-search-cards).overview-list > .task-item.done .task-title {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--color-text-secondary) 62%, transparent);
}

:is(#task-list, .unified-search-cards).overview-list > .task-item.done .task-done-toggle {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));
  color: var(--color-success);
}

:is(#task-list, .unified-search-cards).overview-list > .task-item.done .task-metadata::after {
  content: "Erledigt";
  display: inline-flex;
  align-items: center;
  min-height: 1.18rem;
  padding: 0 0.48rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
  color: var(--color-success);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
}


/* src/styles/overviewCardsFluid.css */
/* Overview cards must size from content. No fixed visual rows, no vertical clipping. */
:is(#task-list, .unified-search-cards).overview-list {
  --overview-toolbar-top: -0.58rem;
  --overview-toolbar-height: 2.05rem;
  --overview-toolbar-control: 1.08rem;
  --overview-toolbar-icon: 1rem;
  --overview-toolbar-action-gap: 0.36rem;
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-content: flex-start;
  align-items: start !important;
  grid-auto-rows: auto !important;
  touch-action: pan-y;
}

:is(#task-list, .unified-search-cards).overview-list > .task-item {
  flex: 0 0 calc((100% - 1.5rem) / 3);
  position: relative;
  container-type: inline-size;
  display: block;
  height: auto !important;
  min-height: 12.75rem !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 2.05rem 1.25rem 1.1rem 1.35rem !important;
  border-left: 0.42rem solid var(--task-project-accent, var(--color-primary)) !important;
  border-radius: var(--radius-sm) ;
  box-shadow: 0 1.25rem 2.75rem var(--shadow-ink-10), 0 0.125rem 0.5rem var(--shadow-ink-06) ;
  overflow: visible !important;
  touch-action: pan-y;
}

.task-touch-drag-active {
  cursor: grabbing;
  user-select: none;
}

.task-item.touch-dragging {
  opacity: 0.32;
}

.touch-task-drag-ghost {
  position: fixed;
  z-index: 10050;
  max-height: min(18rem, 42vh);
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
  opacity: 0.94;
  transform: scale(0.96);
  transform-origin: center;
  box-shadow: 0 1rem 2.4rem var(--shadow-ink-24);
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="1"] {
  --overview-resolved-columns: 1;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="1"] > .task-item {
  flex-basis: 100%;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="2"] {
  --overview-resolved-columns: 2;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="2"] > .task-item {
  flex-basis: calc((100% - var(--space-12)) / 2);
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="3"] {
  --overview-resolved-columns: 3;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="3"] > .task-item,
:is(#task-list, .unified-search-cards).overview-list[data-column-mode="auto"] > .task-item {
  flex-basis: calc((100% - 1.5rem) / 3);
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="4"] {
  --overview-resolved-columns: 4;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="4"] > .task-item {
  flex-basis: calc((100% - 2.25rem) / 4);
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="5"] {
  --overview-resolved-columns: 5;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="5"] > .task-item {
  flex-basis: calc((100% - 3rem) / 5);
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="6"] {
  --overview-resolved-columns: 6;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="6"] > .task-item {
  flex-basis: calc((100% - 3.75rem) / 6);
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="7"] {
  --overview-resolved-columns: 7;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="7"] > .task-item {
  flex-basis: calc((100% - 4.5rem) / 7);
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="8"] {
  --overview-resolved-columns: 8;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="8"] > .task-item {
  flex-basis: calc((100% - 5.25rem) / 8);
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="auto"] {
  --overview-resolved-columns: 3;
}

:is(#task-list, .unified-search-cards).overview-list > .bulk-toolbar,
:is(#task-list, .unified-search-cards).overview-list > .column-add-form {
  flex: 1 0 100%;
  display: block !important;
}

:is(#task-list, .unified-search-cards).overview-list > .quick-create-form {
  display: grid !important;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-header {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.375rem !important;
  align-items: start !important;
  min-height: 0 !important;
  padding-left: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-header::before {
  position: absolute;
  top: -0.62rem;
  left: 0.62rem;
  right: 0.62rem;
  z-index: 1;
  height: 2.05rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 96%, white);
  box-shadow: 0 0.75rem 1.75rem var(--shadow-ink-11), 0 0.125rem 0.25rem var(--shadow-ink-05);
  content: "";
  pointer-events: none;
}

:is(#task-list, .unified-search-cards).overview-list > .task-item.overdue-planned:not(.done) .task-card-header::before {
  border-color: color-mix(in srgb, var(--color-danger) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--color-danger) 10%, transparent), 0 0.125rem 0.25rem var(--shadow-ink-05);
}

:is(#task-list, .unified-search-cards).overview-list > .task-item.overdue-planned:not(.done) .task-sequence-number {
  color: var(--color-danger);
}

:is(#task-list, .unified-search-cards).overview-list > .task-item.done .task-card-header::before {
  border-color: color-mix(in srgb, var(--color-success) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--color-success) 10%, transparent), 0 0.125rem 0.25rem var(--shadow-ink-05);
}

:is(#task-list, .unified-search-cards).overview-list .task-sequence-number {
  position: absolute;
  top: var(--overview-toolbar-top);
  left: 0.62rem;
  z-index: 2;
  display: grid;
  width: 3.8rem;
  height: var(--overview-toolbar-height);
  place-items: center;
  padding-right: 1.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
  font-size: 0.92rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  pointer-events: none;
}

:is(#task-list, .unified-search-cards).overview-list .task-marker-column {
  position: absolute;
  top: var(--overview-toolbar-top);
  left: 3.08rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.34rem;
  width: min(8.5rem, calc(100% - 9.35rem));
  height: var(--overview-toolbar-height);
  padding: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-marker-column::before {
  content: none;
}

:is(#task-list, .unified-search-cards).overview-list .task-project-icon {
  display: none;
}

:is(#task-list, .unified-search-cards).overview-list .task-done-toggle {
  width: var(--overview-toolbar-control);
  height: var(--overview-toolbar-control);
  flex: 0 0 var(--overview-toolbar-control);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-surface) 96%, white);
  font-size: 0.66rem;
}

.task-annotation-indicator {
  display: inline-flex;
  min-height: 1.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0 0.28rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  color: var(--color-primary);
  font: inherit;
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;
}

.task-annotation-indicator:hover,
.task-annotation-indicator:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: none;
}

.task-detail-indicator {
  position: relative;
  display: inline-flex;
  min-width: 2rem;
  min-height: 1.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 0.32rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 52%, var(--color-border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-primary);
  font: inherit;
  font-size: 0.64rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  cursor: pointer;
  transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.task-detail-indicator-plus {
  display: inline-grid;
  width: 0.72rem;
  height: 0.72rem;
  place-items: center;
  margin-left: -0.18rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

.task-card-detail-triggers {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  min-width: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.task-card-detail-triggers.inline {
  grid-column: auto;
  justify-content: flex-start;
  padding-top: 0;
  border-top: 0;
}

.task-subtask-controls .task-card-detail-triggers {
  gap: 0.2rem;
}

.task-detail-indicator svg {
  width: 0.82rem;
  height: 0.82rem;
  flex: 0 0 auto;
}

.task-detail-indicator.empty {
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 52%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.task-detail-indicator:hover,
.task-detail-indicator:focus-visible {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 12%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.task-detail-indicator.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.task-detail-indicator.active:hover,
.task-detail-indicator.active:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 88%, var(--color-black));
  color: white;
}

.task-inline-card-detail {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-8);
  min-width: 0;
  margin-top: var(--space-8);
  padding: var(--space-12, 0.75rem) var(--space-12, 0.75rem) 0;
  border-top: 1px solid var(--color-border);
}

:is(#task-list, .unified-search-cards).overview-list .task-children {
  /* Child cards are part of the card's document flow. Clipping them into a
     nested scroller made deep search results and their breadcrumbs appear in
     the DOM while remaining unreachable. Let the parent card grow instead;
     this also prevents children from painting over the following card. */
  max-height: none;
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list .task-inline-card-detail {
  max-height: 32rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform-origin: top;
  transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease-out, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), margin 420ms cubic-bezier(0.22, 1, 0.36, 1), padding 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

:is(#task-list, .unified-search-cards).overview-list .task-detail-entering {
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  opacity: 0;
  transform: translateY(-0.35rem) scaleY(0.96);
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list .task-detail-leaving {
  max-height: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  opacity: 0;
  transform: translateY(-0.25rem) scaleY(0.96);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  :is(#task-list, .unified-search-cards).overview-list .task-children,
  :is(#task-list, .unified-search-cards).overview-list .task-inline-card-detail {
    transition: none;
  }
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-detail-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--color-border);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-preview {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.32rem 0.38rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface-muted) 48%, var(--color-surface));
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.62rem;
  text-align: left;
  cursor: pointer;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-preview:hover,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-preview:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border));
  background: var(--color-primary-soft);
  outline: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-preview-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-preview-header svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-primary);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-preview-header b {
  margin-left: auto;
  color: var(--color-primary);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-preview-content {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-preview.notes {
  grid-column: 1 / -1;
}

.task-inline-card-detail > header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.task-inline-card-detail > header svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
}

.task-inline-card-detail > header strong {
  font-weight: var(--font-weight-strong);
}

.task-inline-card-detail > header span {
  display: inline-flex;
  min-width: 1.25rem;
  min-height: 1.25rem;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
}


/* src/styles/overviewCardsInlineEditor.css */
.task-inline-detail-add-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.6rem;
  gap: var(--space-4);
}

.task-inline-annotation-time-hint {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: 0.62rem;
  line-height: 1.2;
}

.task-inline-detail-add-form input {
  min-width: 0;
  min-height: 1.65rem;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.68rem;
}

.task-inline-detail-add-form button,
.task-inline-detail-attachment-picker {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0 var(--space-8);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.task-inline-detail-add-form button {
  width: 1.6rem;
  padding: 0;
  font-size: 1rem;
}

.task-inline-detail-attachment-picker {
  justify-self: start;
}

.task-inline-detail-attachment-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.task-inline-detail-add-form button:hover,
.task-inline-detail-add-form button:focus-visible,
.task-inline-detail-attachment-picker:hover,
.task-inline-detail-attachment-picker:focus-within {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
  outline: none;
}

.task-inline-detail-list {
  display: grid;
  gap: var(--space-6);
}

.task-inline-annotation,
.task-inline-attachment {
  min-width: 0;
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-background));
}

.task-inline-annotation {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.task-inline-annotation time,
.task-inline-attachment-meta {
  color: var(--color-text-tertiary);
  font-size: 0.68rem;
}

.task-inline-annotation p,
.task-inline-detail-empty {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.task-inline-notes-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.task-inline-notes-tool {
  display: grid;
  min-width: 1.65rem;
  min-height: 1.65rem;
  place-items: center;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.68rem;
}

.task-inline-notes-tool:hover,
.task-inline-notes-tool:focus-visible,
.task-inline-notes-tool.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.task-inline-notes-tool.rich-text-color {
  width: 1.65rem;
  padding: 0.2rem;
}

.task-inline-notes-editor {
  min-height: 5rem;
  max-height: 12rem;
  padding: var(--space-10);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  line-height: 1.5;
  outline: none;
}

.task-inline-notes-editor:empty::before {
  color: var(--color-text-secondary);
  content: attr(data-placeholder);
  pointer-events: none;
}

.task-inline-notes-editor:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-focus);
}

.task-inline-card-detail-notes.notes-expanded {
  position: fixed;
  z-index: 80;
  inset: 5vh 5vw;
  max-height: 90vh;
  padding: var(--space-16);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.task-inline-card-detail-notes.notes-expanded .task-inline-notes-editor {
  min-height: 60vh;
  max-height: 70vh;
}

.task-inline-attachment {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
}

.task-inline-attachment > svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-primary);
}

.task-inline-attachment-link {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-inline-detail-empty {
  padding: var(--space-8) var(--space-10);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xs);
}

@media (max-width: 37.4375rem) {
  .task-inline-annotation {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .task-inline-attachment {
    grid-template-columns: 1rem minmax(0, 1fr);
  }

  .task-inline-attachment-meta {
    grid-column: 2;
  }
}

:is(#task-list, .unified-search-cards).overview-list .task-completed-inline-date {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  color: var(--color-success);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-card-size="full"]) .task-content {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  gap: 0.32rem !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions {
  position: absolute !important;
  top: var(--overview-toolbar-top);
  right: 0.8rem;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  align-self: start !important;
  gap: var(--overview-toolbar-action-gap);
  width: calc((var(--overview-toolbar-control) * 4) + (var(--overview-toolbar-action-gap) * 3));
  height: var(--overview-toolbar-height);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-xs);
  box-shadow: none;
  background: transparent !important;
  z-index: 3;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy {
  order: 1;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action {
  order: 1;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu {
  order: 2;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete {
  order: 4;
}

:is(#task-list, .unified-search-cards).overview-list .task-overview-body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.68rem;
  min-width: 0;
  padding-left: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-overview-body .task-project-badge {
  justify-self: start;
}

:is(#task-list, .unified-search-cards).overview-list .task-title,
:is(#task-list, .unified-search-cards).overview-list .task-project-badge,
:is(#task-list, .unified-search-cards).overview-list .task-parent-context,
:is(#task-list, .unified-search-cards).overview-list .task-date-chips,
:is(#task-list, .unified-search-cards).overview-list .task-metadata {
  max-width: 100%;
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list .task-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 1.1rem;
  font-weight: 750;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

:is(#task-list, .unified-search-cards).overview-list .task-parent-context {
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.94rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.25;
}

:is(#task-list, .unified-search-cards).overview-list .task-parent-context::before {
  width: 1.08rem;
  height: 1.08rem;
  font-size: 1.04rem;
}

:is(#task-list, .unified-search-cards).overview-list .task-date-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 1.9rem;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
}

:is(#task-list, .unified-search-cards).overview-list .task-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.85rem;
  align-items: center;
  margin-top: 0;
  overflow: visible;
  font-size: 0.86rem;
}

:is(#task-list, .unified-search-cards).overview-list .task-metadata > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 0.86rem;
  line-height: 1.2;
}

:is(#task-list, .unified-search-cards).overview-list .task-date-chip-list {
  display: block;
}

:is(#task-list, .unified-search-cards).overview-list .task-date-quick-list {
  display: contents;
}

:is(#task-list, .unified-search-cards).overview-list .task-date-chip:not(.task-date-chip-calendar):not(:first-child) {
  display: none;
}

:is(#task-list, .unified-search-cards).overview-list .task-date-chips-label,
:is(#task-list, .unified-search-cards).overview-list .task-date-chip,
:is(#task-list, .unified-search-cards).overview-list .task-project-badge,
:is(#task-list, .unified-search-cards).overview-list .task-tag,
:is(#task-list, .unified-search-cards).overview-list .task-dependency-drop {
  min-height: 1.7rem;
  padding: 0 0.72rem;
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  line-height: 1;
}

:is(#task-list, .unified-search-cards).overview-list .task-date-chips-label,
:is(#task-list, .unified-search-cards).overview-list .task-date-chip {
  display: inline-grid;
  place-items: center;
  margin-right: 0;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, white);
}

:is(#task-list, .unified-search-cards).overview-list .task-project-badge {
  font-weight: var(--font-weight-strong);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete {
  --overview-action-mask: none;
  display: grid;
  flex: 0 0 var(--overview-toolbar-control);
  place-items: center;
  width: var(--overview-toolbar-control);
  height: var(--overview-toolbar-control);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu {
  position: relative;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu::before {
  --overview-action-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M4 5h6v6H4zM14 5h6v6h-6zM4 15h6v4H4zM14 15h6v4h-6z'/%3E%3C/svg%3E");
  color: var(--color-text-secondary);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete {
  color: transparent;
  font-size: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete::before {
  --overview-action-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 5v5m4-5v5'/%3E%3C/svg%3E");
  color: var(--color-danger);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete:hover::before {
  color: var(--color-danger);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action {
  color: transparent;
  cursor: alias;
  font-size: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action:active {
  cursor: alias;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action::before {
  --overview-action-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 1 0-7.07-7.07L11.5 4.43M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 1 0 7.07 7.07l1.33-1.33'/%3E%3C/svg%3E");
  color: var(--color-accent-teal);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy {
  color: transparent;
  font-size: 0;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy::before {
  --overview-action-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 3v6a3 3 0 0 0 3 3h9m0 0-4-4m4 4-4 4M6 21v-6'/%3E%3C/svg%3E");
  color: var(--color-text-secondary);
}


/* src/styles/overviewCardsActions.css */
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy::before,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action::before,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu::before,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete::before {
  display: block;
  width: var(--overview-toolbar-icon);
  height: var(--overview-toolbar-icon);
  background-color: currentColor;
  content: "";
  -webkit-mask-image: var(--overview-action-mask);
  mask-image: var(--overview-action-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Action controls stay inside the shared top rail. Hover is deliberately visual only:
   it must not move the card or change the rail's measured layout. */
.task-card-actions button {
  transition: background-color 130ms ease, box-shadow 130ms ease, color 130ms ease;
}

.task-card-actions button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.task-card-actions button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 64%, white);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy:hover::before,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy:focus-visible::before {
  color: var(--color-primary);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action:hover::before,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action:focus-visible::before {
  color: var(--color-accent-teal);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu:hover::before,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu:focus-visible::before {
  color: var(--color-primary);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete:hover,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete:focus-visible {
  background: color-mix(in srgb, var(--color-danger) 11%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 30%, transparent);
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete:hover::before,
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete:focus-visible::before {
  color: var(--color-danger);
}

@container (max-width: 18rem) {
  :is(#task-list, .unified-search-cards).overview-list .task-card-actions {
    width: calc((var(--overview-toolbar-control) * 4) + (var(--overview-toolbar-action-gap) * 3));
    height: var(--overview-toolbar-height);
  }

  :is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-hierarchy,
  :is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-dependency-action,
  :is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-menu,
  :is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-delete {
    flex: 0 0 var(--overview-toolbar-control);
    width: var(--overview-toolbar-control);
    height: var(--overview-toolbar-control);
  }
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.28rem;
  align-content: start;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] > .task-item {
  flex-basis: auto !important;
  min-height: 3.85rem !important;
  padding: 0.48rem 0.7rem 0.48rem 0.85rem !important;
  border: 1px solid var(--color-border) !important;
  border-left: 0.24rem solid var(--task-project-accent, var(--color-primary)) !important;
  border-radius: var(--radius-control) ;
  box-shadow: 0 1px 2px var(--shadow-ink-04), 0 0.35rem 1rem var(--shadow-ink-04) ;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] > .task-item:hover,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] > .task-item.selected {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 28%, transparent), 0 0.45rem 1.2rem var(--shadow-ink-05) ;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-header {
  display: grid !important;
  grid-template-columns: 2.05rem 1.7rem minmax(13rem, 1.1fr) minmax(18rem, 1.5fr) auto;
  gap: 0.55rem;
  align-items: center !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-header::before {
  content: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] > .task-item.done .task-card-header::before {
  content: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-sequence-number,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-marker-column,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions {
  position: static !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-sequence-number {
  display: inline-grid;
  width: auto;
  height: auto;
  min-width: 1.35rem;
  padding: 0;
  color: var(--color-text-primary);
  font-size: 0.76rem;
  font-weight: var(--font-weight-strong);
  justify-self: start;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-marker-column {
  display: grid;
  width: auto;
  height: auto;
  place-items: center;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-done-toggle {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-content {
  display: grid !important;
  gap: 0.12rem !important;
  padding: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-title {
  display: block;
  font-size: 0.88rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-parent-context {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-overview-body {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(14rem, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: center;
  min-width: 0;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-date-chips {
  order: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  min-height: 1.45rem;
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-project-badge {
  order: 1;
  justify-self: start;
  min-height: 1.25rem;
  padding: 0 0.5rem;
  font-size: 0.68rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-metadata {
  order: 3;
  grid-column: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  min-width: 0;
  overflow: hidden;
  font-size: 0.72rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-metadata > span {
  flex: 0 0 auto;
  max-width: 12rem;
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-date-chips-label,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-date-chip,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-tag,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-dependency-drop {
  min-height: 1.25rem;
  padding: 0 0.48rem;
  font-size: 0.68rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions {
  display: grid;
  grid-template-columns: 1.7rem 1.7rem 2.4rem 1.7rem;
  grid-auto-rows: 1.7rem;
  align-self: center !important;
  justify-self: end;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions .task-hierarchy,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions .task-dependency-action,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions .task-menu,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions .task-delete {
  width: auto;
  height: 1.7rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions .task-menu::before {
  content: "Felder";
  font-size: 0.72rem;
  font-weight: var(--font-weight-strong);
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions .task-hierarchy::before {
  font-size: 0.92rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-actions .task-delete::before {
  content: "🗑";
  font-size: 0.86rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] > .bulk-toolbar,
:is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] > .column-add-form {
  width: 100%;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item {
  min-height: 15rem;
  padding: var(--space-14) var(--space-16) var(--space-16);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-card-header {
  gap: var(--space-8) var(--space-10);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-title {
  display: block;
  overflow: visible;
  font-size: 1.1rem;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-parent-context {
  display: block;
  max-height: none;
  overflow: visible;
  font-size: 1rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-parent-link {
  display: inline;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-parent-separator {
  display: inline;
  margin: 0 0.34rem;
  opacity: 0.75;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-overview-body {
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-date-chip:not(.task-date-chip-calendar):not(:first-child) {
  display: inline-grid;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-metadata {
  grid-template-columns: repeat(2, minmax(8rem, 1fr));
  align-items: start;
  font-size: 0.9rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-metadata > span {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: clip;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-project-badge {
  height: auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.18;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-tag,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-dependency-drop {
  box-sizing: border-box;
  max-width: 100%;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-metadata .task-notes-preview {
  grid-column: 1 / -1;
  display: block;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  line-height: 1.35;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"][data-column-mode="3"] .task-metadata,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"][data-column-mode="4"] .task-metadata,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"][data-column-mode="5"] .task-metadata,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"][data-column-mode="6"] .task-metadata,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"][data-column-mode="7"] .task-metadata,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"][data-column-mode="8"] .task-metadata,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"][data-column-mode="auto"] .task-metadata {
  grid-template-columns: minmax(0, 1fr);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-parent-context {
  display: flex;
  flex-wrap: wrap;
  max-height: 2.05rem;
  overflow: hidden;
  gap: 0.18rem 0.32rem;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-title {
  font-size: 1.1rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-parent-link {
  max-width: 100%;
  overflow-wrap: anywhere;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-body {
  gap: 0.42rem;
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-metadata {
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-metadata > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Overview card size: minimal.
   Keep toolbar geometry here so dense card tuning does not depend on
   browser text-glyph metrics or inherited overview-card overrides. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] {
  --minimal-card-height: 4.5rem;
  --minimal-title-lines: 2;
  --minimal-parent-lines: 1;
  --minimal-meta-lines: 1;
  --minimal-topbar-y: -0.5rem;
  --minimal-topbar-height: 1.08rem;
  --minimal-topbar-icon: 0.8rem;
  --minimal-topbar-action-gap: 0.42rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="1"],
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="2"],
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="3"],
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="auto"] {
  --minimal-card-height: 4.5rem;
  --minimal-title-lines: 2;
  --minimal-parent-lines: 1;
  --minimal-meta-lines: 1;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="4"] {
  --minimal-card-height: 4.5rem;
  --minimal-title-lines: 2;
  --minimal-parent-lines: 1;
  --minimal-meta-lines: 1;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="5"] {
  --minimal-card-height: 4.55rem;
  --minimal-title-lines: 2;
  --minimal-parent-lines: 1;
  --minimal-meta-lines: 1;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="6"] {
  --minimal-card-height: 4.65rem;
  --minimal-title-lines: 2;
  --minimal-parent-lines: 1;
  --minimal-meta-lines: 1;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="7"],
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"][data-column-mode="8"] {
  --minimal-card-height: 4.85rem;
  --minimal-title-lines: 2;
  --minimal-parent-lines: 2;
  --minimal-meta-lines: 1;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item {
  height: var(--minimal-card-height) !important;
  min-height: var(--minimal-card-height) !important;
  max-height: var(--minimal-card-height) !important;
  padding: 1rem 0.34rem 0.42rem !important;
  overflow: visible !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.selected,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.expanded,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.done {
  height: var(--minimal-card-height) !important;
  min-height: var(--minimal-card-height) !important;
  max-height: var(--minimal-card-height) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.expanded .task-inline-editor {
  display: none !important;
}


/* src/styles/overviewCardsVisibility.css */
/* Field visibility is an explicit card action and must remain available in
   the minimal layout as an overlay, not disappear with inline editors. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item:has(.card-display-menu) {
  z-index: 70;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item .card-display-menu {
  position: relative;
  z-index: 71;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-header {
  grid-template-columns: minmax(0, 1fr) !important;
  display: block !important;
  gap: 0.03rem !important;
  height: 100%;
  padding-top: 0;
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-header::before {
  top: var(--minimal-topbar-y);
  left: 0;
  right: 0;
  height: var(--minimal-topbar-height);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-sequence-number {
  top: var(--minimal-topbar-y);
  left: 0.24rem;
  width: 1.4rem;
  height: var(--minimal-topbar-height);
  padding-right: 0;
  font-size: 0.64rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-marker-column {
  position: absolute;
  top: var(--minimal-topbar-y);
  left: 1.58rem;
  z-index: 4;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.18rem;
  width: min(5.8rem, calc(100% - 5.2rem));
  height: var(--minimal-topbar-height);
  padding: 0;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-done-toggle {
  flex: 0 0 0.72rem !important;
  width: 0.72rem !important;
  height: 0.72rem !important;
  min-width: 0.72rem !important;
  min-height: 0.72rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-hairline);
  font-size: 0.5rem;
  line-height: 1;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-annotation-indicator {
  min-height: 0.76rem;
  padding: 0 0.18rem;
  font-size: 0.52rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-completed-inline-date {
  font-size: 0.58rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-content {
  gap: 0.07rem !important;
  align-self: start;
  min-height: 0;
  max-height: calc(var(--minimal-card-height) - var(--minimal-topbar-height) - 1.02rem);
  padding-right: 0 !important;
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-title {
  display: -webkit-box;
  min-height: 0;
  max-height: calc(var(--minimal-title-lines) * 0.82rem);
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 0.82rem;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--minimal-title-lines);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-parent-context + .task-title {
  margin-top: 2px;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-parent-context {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  margin-top: 0;
  max-height: calc(var(--minimal-parent-lines) * 0.72rem);
  overflow: hidden;
  gap: 0.03rem 0.2rem;
  font-size: 0.72rem;
  line-height: 0.72rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-parent-link {
  max-width: 100%;
  overflow-wrap: anywhere;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-parent-context::before {
  width: 0.72rem;
  height: 0.72rem;
  margin-top: 0;
  font-size: 0.72rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-overview-body {
  display: block;
  gap: 0.02rem !important;
  min-height: 0;
  margin: 0 !important;
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-date-chips {
  display: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-project-badge,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-tag,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-dependency-drop,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-subtask-count,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-notes-preview {
  display: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-metadata {
  display: flex;
  flex-wrap: wrap;
  max-height: calc(var(--minimal-meta-lines) * 0.94rem);
  overflow: hidden;
  gap: 0.04rem 0.26rem;
  font-size: 0.8rem;
  line-height: 0.94rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-created-date,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-progress {
  display: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-date,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-deadline {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 0.94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions {
  top: var(--minimal-topbar-y);
  right: 0.55rem;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--minimal-topbar-action-gap) !important;
  min-width: 0 !important;
  width: 4.55rem !important;
  max-width: 4.55rem !important;
  height: var(--minimal-topbar-height) !important;
  overflow: hidden !important;
  contain: paint;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-hierarchy,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-dependency-action,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-menu,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-delete {
  --minimal-action-mask: none;
  position: relative !important;
  display: inline-grid !important;
  flex: 0 0 var(--minimal-topbar-icon) !important;
  min-width: 0 !important;
  width: var(--minimal-topbar-icon) !important;
  height: var(--minimal-topbar-icon) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
  color: var(--color-text-secondary) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  place-items: center !important;
  contain: paint;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-hierarchy::before,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-dependency-action::before,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-menu::before,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-delete::before {
  display: block;
  width: var(--minimal-topbar-icon);
  height: var(--minimal-topbar-icon);
  margin: 0;
  overflow: hidden;
  background-color: currentColor;
  content: "";
  font-size: var(--minimal-topbar-icon);
  line-height: 1;
  -webkit-mask-image: var(--minimal-action-mask);
  mask-image: var(--minimal-action-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  text-indent: 0;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-hierarchy::before {
  --minimal-action-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 3v6a3 3 0 0 0 3 3h9m0 0-4-4m4 4-4 4M6 21v-6'/%3E%3C/svg%3E");
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-dependency-action {
  color: var(--color-accent-teal) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-dependency-action::before {
  --minimal-action-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 1 0-7.07-7.07L11.5 4.43M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 1 0 7.07 7.07l1.33-1.33'/%3E%3C/svg%3E");
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-menu::before {
  --minimal-action-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' d='M4 5h6v6H4zM14 5h6v6h-6zM4 15h6v4H4zM14 15h6v4h-6z'/%3E%3C/svg%3E");
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-delete {
  color: var(--color-danger) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-delete::before {
  --minimal-action-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 5v5m4-5v5'/%3E%3C/svg%3E");
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-delete::after {
  content: none;
}

/* Keep the destructive/navigation actions as a true right-hand cluster inside
   the minimal action rail, regardless of optional actions before them. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-menu {
  margin-left: auto !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-sequence-number,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-done-toggle {
  transform: none;
  transform-origin: top left;
}

@media (max-width: 82rem) {
  :is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-card-header {
    grid-template-columns: 1.8rem 1.6rem minmax(12rem, 1fr) minmax(12rem, 1fr) auto;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-overview-body {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(#task-list, .unified-search-cards).overview-list[data-overview-layout="list"] .task-metadata {
    grid-column: 1;
  }
}

@media (max-width: 64rem) {
  .overview-card-dialog {
    width: min(44rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    height: auto;
    max-height: min(38rem, calc(100dvh - 2rem));
  }

  .overview-card-modal-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-card-modal-navigator {
    display: none;
  }

  .overview-modal-field-grid {
    grid-template-columns: minmax(7rem, 1fr) minmax(5.6rem, 0.8fr) minmax(7rem, 1fr);
  }

  .overview-card-modal-editor {
    max-height: calc(min(38rem, 100dvh - 2rem) - 2px) !important;
  }

  .overview-modal-detail-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 38rem) {
  .overview-card-dialog {
    width: calc(100vw - 0.75rem);
    max-width: calc(100vw - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
  }

  .overview-card-modal-editor {
    max-height: calc(100dvh - 0.75rem - 2px) !important;
  }
}

/* doneIt Overview Card v2: compact first, fluid by actual card width. */
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) > .task-item {
  background: var(--color-surface) !important;
  container-name: overview-card;
  min-height: 14.5rem !important;
  padding: 2.2rem 1.15rem 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-card-header {
  height: 100%;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-title {
  font-size: 1.1rem;
  line-height: 1.16;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-parent-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.08rem 0.34rem;
  max-height: none;
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.22;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-parent-context::before {
  color: var(--task-project-accent, var(--color-primary));
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-body {
  display: grid;
  grid-template-rows: auto auto minmax(3.1rem, auto);
  gap: 0.72rem;
  margin: 0 -1.15rem;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-facts,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tags {
  margin-inline: 1.15rem;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem 0.7rem;
  padding-block: 0.72rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  gap: 0.08rem 0.42rem;
  justify-self: start;
  align-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  line-height: 1.15;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) button.task-fact {
  padding: 0.22rem 0.34rem;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 7%, var(--color-surface));
  font: inherit;
  text-align: left;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) button.task-fact-planned {
  border-color: color-mix(in srgb, var(--color-accent-blue) 20%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-blue) 8%, var(--color-surface));
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) button.task-fact-dependency {
  border-color: color-mix(in srgb, var(--color-accent-teal) 20%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-teal) 8%, var(--color-surface));
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) button.task-fact-subtasks {
  border-color: color-mix(in srgb, var(--color-accent-purple) 18%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-purple) 7%, var(--color-surface));
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-subtask-controls {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.28rem;
  align-items: center;
  justify-self: start;
  min-width: 0;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-subtask-add {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 32%, var(--color-border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent-purple) 8%, var(--color-surface));
  color: var(--color-accent-purple);
  font: inherit;
  font-size: 1rem;
  font-weight: 760;
  line-height: 1;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-subtask-add:hover,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-subtask-add:focus-visible {
  border-color: var(--color-accent-purple);
  background: color-mix(in srgb, var(--color-accent-purple) 15%, var(--color-surface));
  outline: none;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) button.task-fact:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 64%, white);
  outline-offset: 0.14rem;
}

.task-fact-date-picker {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0.4rem;
  border: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 58%, var(--color-border));
  border-radius: inherit;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  opacity: 1;
  pointer-events: auto;
}


/* src/styles/overviewCardsFacts.css */
:is(#task-list, .unified-search-cards).overview-list .task-fact:has(.task-fact-date-picker),
.task-minimal-focus-date:has(.task-fact-date-picker) {
  position: relative;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-drop-target {
  border-radius: var(--radius-sm);
  outline: 1px dashed transparent;
  outline-offset: 0.18rem;
  transition: background-color 140ms ease, outline-color 140ms ease, color 140ms ease;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-drop-target.dependency-drop-active {
  background: color-mix(in srgb, var(--color-accent-teal) 8%, transparent);
  color: var(--color-accent-teal);
  outline-color: color-mix(in srgb, var(--color-accent-teal) 55%, transparent);
}

.task-item.dependency-card-drop-active {
  border-color: var(--color-accent-teal) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-teal) 16%, transparent), var(--shadow-sm) ;
}

.project-table-row.dependency-card-drop-active,
.project-hierarchy-row.dependency-card-drop-active,
.planning-card.dependency-card-drop-active,
.project-diagram-node.dependency-card-drop-active,
.task-child.dependency-card-drop-active {
  border-color: var(--color-accent-teal) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-teal) 16%, transparent), var(--shadow-sm) ;
}

.project-table-row.dependency-card-drop-active,
.project-hierarchy-row.dependency-card-drop-active,
.planning-card.dependency-card-drop-active,
.task-child.dependency-card-drop-active {
  background: color-mix(in srgb, var(--color-accent-teal) 7%, var(--color-surface)) !important;
}

.task-item.dependency-card-drop-active .task-card-header {
  background: linear-gradient(0deg, color-mix(in srgb, var(--color-accent-teal) 5.5%, transparent), color-mix(in srgb, var(--color-accent-teal) 5.5%, transparent)), var(--color-surface);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-icon {
  grid-area: icon;
  align-self: center;
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: var(--task-fact-mask) center / contain no-repeat;
  mask: var(--task-fact-mask) center / contain no-repeat;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-icon.planned {
  --task-fact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 2v4m8-4v4M3 10h18M5 4h14a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  color: var(--color-primary);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-icon.deadline {
  --task-fact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 21V4m0 0h12l-2 4 2 4H5'/%3E%3C/svg%3E");
  color: var(--color-danger);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-icon.important {
  --task-fact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M14 14.76V5a2 2 0 1 0-4 0v9.76a4 4 0 1 0 4 0zM12 17v.01'/%3E%3C/svg%3E");
  color: var(--color-warning);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-icon.dependency {
  --task-fact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 1 0-7.07-7.07L11.5 4.43M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 1 0 7.07 7.07l1.33-1.33'/%3E%3C/svg%3E");
  color: var(--color-accent-teal);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-icon.waiting {
  --task-fact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 3h10M7 21h10M8 3c0 4 1.5 6 4 9-2.5 3-4 5-4 9m8-18c0 4-1.5 6-4 9 2.5 3 4 5 4 9'/%3E%3C/svg%3E");
  color: var(--color-warning);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-icon.subtasks {
  --task-fact-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 3v18m0-9h12m-6-6h6v12h-6'/%3E%3C/svg%3E");
  color: var(--color-text-secondary);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-label {
  grid-area: label;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-value {
  grid-area: value;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 0.86rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-deadline.overdue .task-fact-value,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-important .task-fact-value,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-planned.overdue .task-fact-value {
  color: var(--color-danger);
}

:is(#task-list, .unified-search-cards).overview-list .task-fact-planned.done :is(.task-fact-label, .task-fact-value, .task-fact-icon) {
  color: var(--color-success);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.34rem;
  min-height: 1.55rem;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-tag-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.45rem;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-tag-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.45rem;
  padding: 0.14rem 0.38rem;
  border: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 18%, var(--color-border));
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 7%, var(--color-surface));
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-tag-heading-icon {
  width: 0.9rem;
  height: 0.9rem;
  background: var(--task-project-accent, var(--color-primary));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='8' cy='8' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='8' cy='8' r='1.1' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-add {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.28rem;
  height: 1.28rem;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 32%, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-add:hover,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-add:focus-visible {
  border-color: var(--task-project-accent, var(--color-primary));
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 10%, var(--color-surface));
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 10%, transparent);
  outline: none;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  max-width: 100%;
  min-height: 1.45rem;
  padding: 0 0.34rem 0 0.62rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 13%, var(--color-surface));
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.76rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag:hover,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag:focus-within {
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 18%, var(--color-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 24%, transparent);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-label {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-label:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 64%, white);
  outline-offset: 0.12rem;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-remove {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag:hover .task-overview-tag-remove,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-remove:focus-visible {
  opacity: 1;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-remove:hover {
  background: color-mix(in srgb, var(--color-danger) 18%, transparent);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-input {
  width: min(13rem, 100%);
  min-height: 1.45rem;
  padding: 0 0.6rem;
  border: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 42%, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.78rem;
  font-weight: 650;
  outline: 0;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tags .tag-autocomplete-menu {
  top: calc(100% + 0.25rem);
  left: 1.55rem;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel {
  align-self: end;
  margin-top: auto;
  padding: 0.48rem 0.72rem;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--color-surface-muted);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chips {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.28rem;
  width: 100%;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-quick-list {
  display: contents;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chips-label {
  display: none;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip {
  display: inline-grid !important;
  width: 100%;
  min-width: 0;
  min-height: 1.38rem;
  place-items: center;
  padding: 0 0.22rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip.active,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip-calendar {
  border-color: color-mix(in srgb, var(--color-primary) 62%, var(--color-border));
  color: var(--color-primary);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-picker-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

@container overview-card (min-width: 32rem) {
  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) > .task-item {
    min-height: 13.1rem !important;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-content {
    min-height: 4.8rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-facts {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-facts {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-inline: 0 !important;
  height: 1rem;
  min-height: 1rem;
  max-height: 1rem;
  overflow: visible;
  padding: 0;
  border: 0;
  font-size: 0.72rem;
  line-height: 0.78rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact {
  display: inline-flex;
  gap: 0.18rem;
  font-size: 0.72rem;
  line-height: 0.78rem;
}

/* The planned-date chip is a button, so its border and hit area must fit in
   the same deliberate row as the add-subcard button.  Keeping this explicit
   avoids a child being taller than its clipped facts row on any viewport. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) button.task-fact {
  box-sizing: border-box;
  height: 1rem;
  min-height: 1rem;
  padding: 0.06rem 0.2rem;
  line-height: 0.78rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact:not(.task-fact-planned):not(.task-fact-subtasks):not(.task-fact-waiting),
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact-icon,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact-label,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact-dependency,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact-subtasks.empty,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-overview-tags,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-planning-panel {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact-subtasks {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact-subtasks .task-fact-value::before {
  content: "↳ ";
  color: var(--color-text-muted);
  font-weight: 400;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-fact-value {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) > .task-item {
  height: var(--minimal-card-height) !important;
  min-height: var(--minimal-card-height) !important;
  max-height: var(--minimal-card-height) !important;
  padding: 1rem 0.34rem 0.42rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-content {
  display: block !important;
  min-height: 0 !important;
  max-height: 2.05rem !important;
  overflow: hidden !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-title {
  display: block !important;
  max-height: 0.8rem !important;
  overflow: hidden !important;
  font-size: 0.72rem !important;
  line-height: 0.8rem !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  -webkit-line-clamp: unset;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-parent-context + .task-title {
  margin-top: 0.13rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-parent-context {
  display: flex !important;
  flex-wrap: nowrap !important;
  max-height: 0.7rem !important;
  margin-top: 0 !important;
  overflow: hidden !important;
  font-size: 0.68rem !important;
  line-height: 0.7rem !important;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-parent-context::before {
  flex: 0 0 0.72rem;
  width: 0.72rem;
  height: 0.72rem;
  font-size: 0.72rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-parent-link,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-parent-separator {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-overview-body {
  margin-top: 0.14rem !important;
  min-height: 1rem;
  padding-bottom: 0.12rem;
  overflow: visible !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-subtask-controls {
  grid-template-columns: auto auto;
  gap: 0.16rem;
  height: 0.82rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-subtask-add {
  width: 0.82rem;
  height: 0.82rem;
  min-height: 0.82rem;
  font-size: 0.72rem;
}


/* src/styles/taskBoardOrigin.css */
.board-context-badge,
.task-board-origin,
.my-day-board-origin {
  display: inline-flex;
  width: fit-content;
  min-height: var(--space-20);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  border: 1px solid hsl(var(--board-context-hue, 215) 62% 72% / 0.62);
  border-radius: var(--radius-full);
  background: hsl(var(--board-context-hue, 215) 72% 94%);
  color: hsl(var(--board-context-hue, 215) 58% 34%);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;
}

.board-context-badge-full {
  max-width: min(15rem, 100%);
  padding-inline: var(--space-8);
}

.board-context-badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-context-badge .shared-access-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: currentColor;
}

.board-context-badge .shared-access-icon svg {
  width: 0.72rem;
  height: 0.72rem;
  fill: transparent;
}

.task-card-context-line {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: var(--space-6);
  align-items: center;
  overflow: hidden;
}

.task-card-context-line .task-parent-context {
  width: 0;
  flex: 1 1 0;
}

.task-card-context-line .task-board-origin {
  max-width: min(8rem, 42%);
}

.task-card-context-line .task-board-origin .board-context-badge-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-card-context-line {
  padding-left: 1.75rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-board-origin {
  min-height: var(--space-16);
  padding-inline: var(--space-4);
  font-size: 0.62rem;
}


/* src/styles/boardProjectTree.css */
.board-project-tree {
  display: grid;
  align-content: start;
  min-height: 0;
}

.board-project-tree-group {
  display: grid;
  min-width: 0;
}

.board-project-tree-group + .board-project-tree-group {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.board-project-tree-header {
  display: grid;
  grid-template-columns: var(--space-20) minmax(0, 1fr) auto;
  min-width: 0;
  min-height: var(--control-height-sm);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.board-project-tree-header:hover {
  background: var(--color-surface-muted);
}

.board-project-tree-header .board-context-badge {
  max-width: 100%;
  min-height: var(--space-24);
  border: 0;
  background: transparent;
  font-size: var(--text-body-sm);
}

.board-project-tree-header .board-context-badge::before {
  width: var(--space-8);
  height: var(--space-8);
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: hsl(var(--board-context-hue, 215) 68% 52%);
  content: "";
}

.board-project-tree-header small {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.board-project-tree-chevron {
  display: grid;
  place-items: center;
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast);
}

.board-project-tree-group.collapsed .board-project-tree-chevron {
  transform: rotate(-90deg);
}

.board-project-tree-children {
  display: grid;
  min-width: 0;
  padding-left: var(--space-8);
}

.board-project-tree-group.collapsed .board-project-tree-children {
  display: none;
}


/* src/styles/dependencyFocus.css */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) > .task-item {
  min-height: 18rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-overview-body {
  gap: 0.86rem;
}

/* Full overview cards keep their work context visible while their detail area
   scrolls independently. This also keeps full child hierarchies inside the card. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) > .task-item {
  height: clamp(19rem, 46dvh, 34rem);
  min-height: 0 !important;
  max-height: clamp(19rem, 46dvh, 34rem);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) > .task-item.expanded {
  display: grid;
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-card-header {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-content {
  align-self: start;
  min-height: 0;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-overview-body-scrollable {
  grid-row: 2;
  align-content: start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: auto;
  padding-right: 0.45rem;
  scrollbar-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 44%, transparent) transparent;
  scrollbar-width: thin;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-overview-body-scrollable::-webkit-scrollbar {
  width: 0.38rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-overview-body-scrollable::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 42%, transparent);
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) > .task-item {
  padding: 1.9rem 1.15rem 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-sequence-number {
  left: 0.2rem;
  font-size: 0.8rem;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-title {
  font-size: 0.8rem;
  font-weight: 500;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-title-editor {
  font-size: 0.8rem;
  font-weight: 500;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) .task-title-editor {
  font-size: 0.78rem;
  line-height: 0.82rem;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-parent-context,
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-parent-link,
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-parent-separator {
  font-size: 0.75rem;
  font-weight: 400;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-overview-body {
  gap: 0.3rem;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-facts {
  padding-block: 0.2rem;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-fact-label {
  font-size: 0.65rem;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-fact-value,
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-fact {
  font-size: 0.7rem;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-overview-tag,
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-date-chip,
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-dependency-drop {
  font-size: 0.7rem;
  font-weight: 500;
}

#task-list .task-date-chip:hover,
#task-list .task-date-chip:focus-visible,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip:hover,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip:focus-visible {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 62%, var(--color-border)) !important;
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 12%, var(--color-surface)) !important;
  color: var(--task-project-accent, var(--color-primary)) !important;
  box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 12%, transparent) ;
  outline: none;
}

#task-list .task-date-chip.active:hover,
#task-list .task-date-chip.active:focus-visible {
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 18%, var(--color-surface)) !important;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact.is-interactive {
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact.is-interactive:hover,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact.is-interactive:focus-visible {
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 13%, var(--color-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 28%, transparent);
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag,
.overview-modal-tag-chip,
.detail-section.tag-editor .tag-chip,
.detail-section.tag-editor .tag-editor-chip {
  cursor: default;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag:hover,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag:focus-within,
.overview-modal-tag-chip:hover,
.overview-modal-tag-chip:focus-within,
.detail-section.tag-editor .tag-chip:hover,
.detail-section.tag-editor .tag-chip:focus-within,
.detail-section.tag-editor .tag-editor-chip:hover,
.detail-section.tag-editor .tag-editor-chip:focus-within {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 42%, var(--color-border)) !important;
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 16%, var(--color-surface)) !important;
  box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 10%, transparent) ;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-add:hover,
:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-add:focus-visible,
.overview-modal-tag-input:hover,
.overview-modal-tag-input:focus-visible,
.detail-section.tag-editor .tag-editor-input:hover,
.detail-section.tag-editor .tag-editor-input:focus-visible {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 56%, var(--color-border)) !important;
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 8%, var(--color-surface)) !important;
  box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 9%, transparent) ;
  outline: none;
}

#task-list .bulk-toolbar[hidden] {
  display: none !important;
}

/* Dependency focus graph: predecessors → selected card → successors. */
.dependency-focus-view,
.dependency-relation-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-12);
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.dependency-focus-view {
  container-type: inline-size;
  align-self: stretch;
}

.dependency-graph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.dependency-graph-delete-selection {
  min-height: 2rem;
  margin-left: auto;
  padding: 0 var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-danger) 38%, var(--color-border));
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-danger);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.dependency-graph-delete-selection:hover,
.dependency-graph-delete-selection:focus-visible {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  outline: none;
}

.dependency-graph-link-type {
  display: inline-grid;
  gap: 0.15rem;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.dependency-graph-link-type select {
  min-height: 2rem;
  padding: 0.2rem 1.8rem 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.dependency-connection-mode {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--space-32);
  margin-left: auto;
  padding: 0.2rem 0.25rem 0.2rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--color-accent-orange) 42%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  color: var(--color-warning-deep);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.dependency-connection-mode button {
  min-height: 2rem;
  padding: 0 var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-accent-orange) 35%, var(--color-border));
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-warning-deep);
  font: inherit;
}

.dependency-connection-mode button:hover,
.dependency-connection-mode button:focus-visible {
  border-color: var(--color-accent-orange);
  outline: none;
}

.dependency-view-mode,
.dependency-graph-controls {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: var(--space-32);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-muted);
}

.dependency-view-mode button,
.dependency-graph-controls button,
.dependency-graph-controls span,
.dependency-graph-details-toggle {
  min-height: var(--space-32);
  padding: 0 var(--space-10);
  border: 0;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.dependency-view-mode button:first-child,
.dependency-graph-controls button:first-child {
  border-left: 0;
}

.dependency-view-mode button.active,
.dependency-graph-details-toggle {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dependency-view-mode button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.dependency-graph-controls span {
  display: grid;
  place-items: center;
  min-width: 3.8rem;
}

.dependency-graph-label-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--space-32);
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.dependency-graph-label-toggle input {
  accent-color: var(--color-primary);
}

.dependency-graph-details-toggle,
.dependency-graph-finder-toggle {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.dependency-graph-finder-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dependency-focus-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(13rem, 21vw, 19rem);
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.dependency-focus-layout.details-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.dependency-focus-layout.arranging {
  grid-template-columns: minmax(0, 1fr);
}

.dependency-focus-graph-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  /* Keep the canvas visually continuous while the scaled drawing changes. */
  background-color: var(--color-surface);
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-border) 58%, transparent) 1px, transparent 1.1px);
  background-size: 1.5rem 1.5rem;
  cursor: grab;
  overscroll-behavior: contain;
  touch-action: none;
}

.dependency-focus-graph-viewport.panning {
  cursor: grabbing;
  user-select: none;
}

.dependency-focus-graph-viewport.marquee-selecting {
  cursor: crosshair;
  user-select: none;
}

.dependency-graph-marquee {
  position: absolute;
  z-index: 20;
  min-width: 1px;
  min-height: 1px;
  border: 1px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent);
  pointer-events: none;
}

.dependency-focus-graph-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  overflow: visible;
  background-color: var(--color-surface);
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-border) 58%, transparent) 1px, transparent 1.1px);
  background-size: 1.5rem 1.5rem;
}

/* Overview scrolling and native touch context menus stay browser-owned. */
:is(#task-list, .unified-search-cards).overview-list,
:is(#task-list, .unified-search-cards).overview-list > .task-item,
:is(#task-list, .unified-search-cards).overview-list > .task-item * {
  touch-action: pan-x pan-y pinch-zoom !important;
}

.dependency-focus-graph {
  --dependency-graph-zoom: 1;
  position: relative;
  display: block;
  container-type: inline-size;
  width: 100%;
  min-width: 48rem;
  min-height: 34rem;
  padding: 0;
  /* Nodes and endpoint controls may deliberately overhang the logical graph
   * rectangle. The viewport still clips the actual infinite-paper workspace. */
  overflow: visible;
  isolation: isolate;
  background: transparent;
  transform-origin: 0 0;
}

.dependency-graph-column,
.dependency-graph-focus {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
  min-width: 0;
}

.dependency-graph-focus {
  padding-top: clamp(3.75rem, 9vh, 7rem);
}

.dependency-graph-column-label {
  position: absolute;
  z-index: 2;
  top: 1.5rem;
  transform: translateX(-50%);
  width: 11rem;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.dependency-graph-column-label.predecessor {
  top: 1.25%;
}

.dependency-graph-column-label.successor {
  top: 92%;
}


/* src/styles/dependencyGraph.css */
.dependency-graph-card-stack {
  display: grid;
  gap: var(--space-12);
}

.dependency-graph-card {
  position: relative;
  display: grid;
  gap: var(--space-4);
  width: clamp(10.5rem, 24cqi, 13rem);
  min-height: 5.9rem;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--task-project-accent, var(--color-primary));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
}

.dependency-graph-card > .board-context-badge { justify-self: start; }

.dependency-graph-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: var(--space-28);
}

.dependency-graph-card-action-buttons {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.dependency-graph-card.has-flow-action .dependency-graph-card-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.dependency-graph-card-complete {
  display: inline-grid;
  width: var(--space-24);
  height: var(--space-24);
  place-items: center;
  cursor: pointer;
}

.dependency-graph-card-complete input {
  width: var(--space-18);
  height: var(--space-18);
  margin: 0;
  accent-color: var(--color-success);
  cursor: pointer;
}

.dependency-graph-card-activate,
.dependency-graph-card-overview,
.dependency-graph-card-goal,
.dependency-graph-card-flow {
  display: grid;
  width: var(--space-32);
  height: var(--space-32);
  flex: 0 0 var(--space-32);
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-hairline);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.dependency-graph-card-activate:hover,
.dependency-graph-card-activate:focus-visible,
.dependency-graph-card-activate.active,
.dependency-graph-card-overview:hover,
.dependency-graph-card-overview:focus-visible,
.dependency-graph-card-goal:hover,
.dependency-graph-card-goal:focus-visible,
.dependency-graph-card-goal.active,
.dependency-graph-card-flow:hover,
.dependency-graph-card-flow:focus-visible,
.dependency-graph-card-connection:hover,
.dependency-graph-card-connection:focus-visible,
.dependency-graph-card-connection.dependency-drop-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.dependency-graph-card-overview {
  font-size: 0.95rem;
  font-weight: var(--font-weight-strong);
}

.dependency-graph-card-goal {
  font-size: 1rem;
  font-weight: var(--font-weight-strong);
}

.dependency-graph-card-flow-icon {
  position: relative;
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 100% no-repeat;
}

.dependency-graph-card-flow-icon::before,
.dependency-graph-card-flow-icon::after {
  position: absolute;
  left: 50%;
  width: 0.34rem;
  height: 0.34rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: var(--color-surface);
  content: "";
  transform: translateX(-50%);
}

.dependency-graph-card-flow-icon::before {
  top: -0.25rem;
}

.dependency-graph-card-flow-icon::after {
  bottom: -0.25rem;
}

.dependency-graph-card-connection {
  position: absolute;
  z-index: 7;
  top: 50%;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  padding: 0;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  transform: translateY(-50%);
}

@media (pointer: coarse) {
  .dependency-graph-card-connection {
    width: 2.75rem;
    height: 2.75rem;
  }

  .dependency-graph-card-activate,
  .dependency-graph-card-overview,
  .dependency-graph-card-goal,
  .dependency-graph-card-flow,
  .dependency-finder-item-focus {
    width: 2.75rem;
    height: 2.75rem;
    flex-basis: 2.75rem;
  }

  .dependency-connection-mode button {
    min-height: 2.75rem;
  }
}

.dependency-graph-card-connection-input {
  top: -1.28rem;
  left: 50%;
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success);
  transform: translate(-50%, -50%);
}

.dependency-graph-card-connection-output {
  top: auto;
  right: auto;
  bottom: -1.28rem;
  left: 50%;
  border-color: var(--color-accent-orange);
  background: var(--color-warning-soft);
  color: var(--color-warning-deep);
  transform: translate(-50%, 50%);
  cursor: grab;
  touch-action: none;
}

.dependency-graph-card-connection-input:hover,
.dependency-graph-card-connection-input:focus-visible,
.dependency-graph-card-connection-input.dependency-drop-active {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.dependency-graph-card-connection-output:hover,
.dependency-graph-card-connection-output:focus-visible,
.dependency-graph-card-connection-output.dependency-drop-active {
  border-color: var(--color-warning-deep);
  background: var(--color-warning-soft);
  color: var(--color-warning-deep);
}

.dependency-graph-card-connection.selected,
.dependency-graph-card.dependency-connection-source-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.22rem var(--color-primary-soft), var(--shadow-card);
}

.dependency-graph-card-connection.selected {
  background: var(--color-primary);
  color: var(--color-surface);
}

.dependency-graph-card-connection-output:active {
  cursor: grabbing;
}

.dependency-graph-card-connection-icon {
  position: relative;
  display: block;
  width: 0.72rem;
  height: 0.78rem;
  color: currentColor;
}

.dependency-graph-card-connection-icon::before,
.dependency-graph-card-connection-icon::after {
  position: absolute;
  content: "";
}

.dependency-graph-card-connection-icon.output::before {
  top: 0.04rem;
  left: 0.34rem;
  height: 0.42rem;
  border-left: 1.5px solid currentColor;
}

.dependency-graph-card-connection-icon.output::after {
  top: 0.34rem;
  left: 0.2rem;
  width: 0.28rem;
  height: 0.28rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.dependency-graph-card-connection-icon.input::before {
  top: 0.04rem;
  left: 0.34rem;
  height: 0.42rem;
  border-left: 1.5px solid currentColor;
}

.dependency-graph-card-connection-icon.input::after {
  top: 0.34rem;
  left: 0.2rem;
  width: 0.28rem;
  height: 0.28rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.dependency-graph-card-activate-icon {
  position: relative;
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.dependency-graph-card-activate-icon::after {
  position: absolute;
  inset: 0.18rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0;
}

.dependency-graph-card-activate.active .dependency-graph-card-activate-icon::after {
  opacity: 1;
}

.dependency-graph-node {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  touch-action: none;
  user-select: none;
  transition: left 160ms ease, top 160ms ease, border-color 140ms ease, box-shadow 140ms ease;
  cursor: grab;
}

.dependency-graph-layout-updating .dependency-graph-node {
  transition: none;
}

.dependency-graph-node.dragging {
  z-index: 4;
  transition: none;
  cursor: grabbing;
  box-shadow: 0 0 0 0.18rem var(--color-primary-soft), 0 1rem 2rem var(--shadow-ink-18);
}

.dependency-graph-node.selected:not(.dragging) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 20%, transparent), var(--shadow-card);
}

.dependency-graph-card.dependency-drag-source {
  opacity: 0.48;
}

.dependency-graph-card.dependency-drop-active {
  z-index: 5;
  border-color: var(--color-accent-teal);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--color-accent-teal) 18%, transparent), var(--shadow-card);
}

.dependency-graph-card-disconnects {
  position: absolute;
  z-index: 6;
  right: auto;
  bottom: -0.58rem;
  left: 50%;
  display: contents;
}

.dependency-graph-card-disconnect {
  position: absolute;
  z-index: 7;
  top: var(--dependency-root-top, 100%);
  bottom: auto;
  left: var(--dependency-root-left, 50%);
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  padding: 0 0 0.08rem;
  border: 1px solid var(--color-danger);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-danger);
  font: inherit;
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%);
  transition: top 110ms linear, left 110ms linear;
}

.dependency-graph-card-disconnect:hover,
.dependency-graph-card-disconnect:focus-visible {
  background: var(--color-danger-soft);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--color-danger) 16%, transparent);
  outline: none;
}

.dependency-graph-card:hover,
.dependency-graph-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.15rem var(--color-primary-soft), var(--shadow-card);
  outline: none;
}

.dependency-graph-card.focused {
  min-height: 7.5rem;
  border-color: var(--color-primary);
  border-left-color: var(--color-primary);
  box-shadow: 0 0 0 0.18rem var(--color-primary-soft), var(--shadow-card);
}

.dependency-graph-card.blocking {
  border-left-color: var(--color-danger);
}

.dependency-graph-card.sequence {
  border-left-color: var(--color-accent-green);
}

.dependency-graph-card strong {
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.3;
}

.dependency-graph-card .dependency-graph-card-context {
  color: var(--task-project-accent, var(--color-primary));
  font-weight: var(--font-weight-strong);
}

.dependency-graph-card span,
.dependency-graph-card small {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-graph-empty {
  display: grid;
  place-items: center;
  min-height: 5.5rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-graph-edges {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
}

.dependency-graph-edge {
  fill: none;
  stroke-width: 2;
}

.dependency-graph-edge.blocking {
  stroke-dasharray: 5 4;
}

.dependency-graph-edge.sequence {
  stroke-dasharray: none;
}

.dependency-graph-edge.hierarchy {
  stroke: var(--color-text-muted) !important;
  stroke-width: 1.5;
  stroke-dasharray: 2 5;
  opacity: 0.72;
}

.dependency-graph-edge.critical {
  stroke: var(--color-accent-orange);
  stroke-width: 3;
  stroke-dasharray: 6 4;
}

.share-dialog {
  box-sizing: border-box;
  width: min(28rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  outline: none;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

.share-dialog::backdrop {
  background: var(--shadow-ink-42);
}


/* src/styles/taskDialogsAndSharing.css */
.conflict-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

.conflict-dialog::backdrop { background: var(--color-backdrop); }

.task-delete-impact-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

.task-delete-impact-dialog::backdrop {
  background: var(--color-backdrop);
}

.task-delete-impact-shell {
  display: grid;
  gap: var(--space-14);
  padding: var(--space-24);
}

.task-delete-impact-shell h2,
.task-delete-impact-shell > p,
.task-delete-impact-group h3 {
  margin: 0;
}

.task-delete-impact-shell > p {
  color: var(--color-text-secondary);
}

.task-delete-impact-group {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.task-delete-impact-group h3 {
  font-size: var(--text-caption);
}

.task-delete-impact-group ul {
  display: grid;
  gap: var(--space-4);
  max-height: 9rem;
  margin: 0;
  padding-left: 1.2rem;
  overflow: auto;
  font-size: var(--text-caption);
}

.task-delete-impact-shell footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-10);
}

.conflict-dialog-shell {
  display: grid;
  gap: var(--space-16);
  padding: var(--space-24);
}

.conflict-dialog-shell h2,
.conflict-dialog-shell p { margin: 0; }

.conflict-dialog-list {
  display: grid;
  gap: var(--space-10);
  max-height: 18rem;
  overflow: auto;
}

.conflict-dialog-list article,
.conflict-dialog-list > p {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.conflict-field { display: grid; gap: var(--space-6); min-width: 0; padding: var(--space-8) 0; border-top: 1px solid var(--color-border); }
.conflict-field h3 { margin: 0; font-size: var(--text-body); }
.conflict-field p { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.conflict-dialog-shell footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-10);
}

.share-dialog-shell {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100dvh - 2rem);
  gap: var(--space-12);
  padding: var(--space-20);
  overflow: auto;
}

.share-dialog-shell > header,
.share-dialog-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.share-dialog-shell > header {
  align-items: flex-start;
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.share-dialog-shell > header > div {
  min-width: 0;
}

.share-dialog-shell h2,
.share-dialog-shell h3,
.share-dialog-shell p {
  margin: 0;
}

.share-dialog-shell h2 {
  margin-top: var(--space-2);
  font-size: 1.08rem;
  line-height: 1.3;
}

.share-dialog-shell header small {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.share-dialog-close {
  flex: 0 0 auto;
  width: var(--space-32);
  height: var(--space-32);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.5rem;
}

.share-dialog-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  min-width: 0;
}

.share-dialog-form label {
  display: grid;
  min-width: 0;
  gap: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.share-dialog-form select,
.share-dialog-form input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--space-36);
  padding-inline: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.share-dialog-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-10);
  align-items: end;
}

.share-dialog-actions > .button {
  align-self: end;
  width: auto;
  min-height: var(--space-36);
  padding-inline: var(--space-16);
}

.share-dialog-access-help {
  display: block;
  min-height: 1em;
  color: var(--color-text-tertiary);
  line-height: 1.25;
}

.share-dialog-list {
  display: grid;
  gap: 0;
  overflow: auto;
}

.share-dialog-list h3 {
  padding-bottom: var(--space-6);
  font-size: 0.88rem;
}

.share-dialog-list article {
  min-height: 3.25rem;
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.share-dialog-list article > div {
  display: grid;
  gap: var(--space-2);
}

.share-dialog-list article strong {
  font-size: 0.9rem;
}

.share-dialog-list article p {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.share-dialog-list .share-dialog-row-actions {
  display: flex;
  grid-auto-flow: initial;
  align-items: center;
  gap: var(--space-6);
}

.share-dialog-row-actions select {
  min-height: 2rem;
  padding-inline: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.share-dialog-row-actions .button {
  min-height: 2rem;
  padding-inline: var(--space-8);
  font-size: var(--text-caption);
}

.share-dialog-message {
  padding: var(--space-10);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

@media (max-width: 440px) {
  .share-dialog {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .share-dialog-shell {
    max-height: calc(100dvh - 1rem);
    padding: var(--space-14);
  }

  .share-dialog-actions { grid-template-columns: minmax(0, 1fr); }
  .share-dialog-actions > .button { width: 100%; }
}

.dependency-graph-edge-label {
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 4;
  stroke-linejoin: round;
  fill: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-strong);
}

.dependency-graph-edge-label.blocking,
.dependency-graph-edge-label.sequence { fill: var(--color-text-secondary); }
.dependency-graph-edge-label.hierarchy { fill: var(--color-text-muted); }
.dependency-graph-edge-label.critical { fill: var(--color-accent-orange); }

.dependency-graph-edge-icon circle {
  fill: var(--color-surface);
  stroke-width: 1.8;
}

.dependency-graph-edge-icon path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.dependency-graph-edge-icon.blocking circle,
.dependency-graph-edge-icon.blocking path,
.dependency-graph-edge-icon.sequence circle,
.dependency-graph-edge-icon.sequence path { stroke: var(--color-text-secondary); }
.dependency-graph-edge-icon.critical circle,
.dependency-graph-edge-icon.critical path { stroke: var(--color-accent-orange); }

.dependency-goal-focus {
  grid-column: 1 / -1;
  flex: 1 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, auto) 1fr auto;
  align-items: center;
  gap: var(--space-10);
  min-height: 2.75rem;
  padding: var(--space-8) var(--space-12);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  color: var(--color-text-secondary);
}

.dependency-goal-focus-icon::before {
  content: "◎";
  color: var(--color-primary);
  font-size: 1.2rem;
}

.dependency-goal-focus > span:nth-child(2) {
  display: grid;
  gap: 1px;
}

.dependency-goal-focus small {
  font-size: 0.68rem;
  color: var(--color-text-secondary);
}

.dependency-goal-focus strong {
  color: var(--color-text-primary);
}

.dependency-goal-focus > button {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 1.15rem;
}

.child-task-focus {
  grid-template-columns: auto minmax(0, 1fr) auto;
  border-color: color-mix(in srgb, var(--color-accent-purple) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-purple) 5%, var(--color-surface));
}

.child-task-focus > span:nth-child(2) {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.child-task-focus > span:nth-child(2) strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-task-focus > span:last-child {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.child-task-focus > .child-task-focus-back {
  color: var(--color-accent-purple);
  font-size: 1rem;
  cursor: pointer;
}

.child-task-focus > .child-task-focus-back:hover,
.child-task-focus > .child-task-focus-back:focus-visible {
  border-color: color-mix(in srgb, var(--color-accent-purple) 42%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-surface));
  outline: none;
}

.hierarchy-focus-list {
  display: block !important;
  --hierarchy-line: color-mix(in srgb, var(--color-primary) 19%, var(--color-border));
}

@media (min-width: 37.5rem) {
  .task-panel:has(#task-list.hierarchy-focus-list) {
    padding: var(--space-8) var(--space-10) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  }
}

.hierarchy-task-focus {
  display: grid;
  gap: var(--space-8);
  width: 100%;
  min-width: 0;
}

.hierarchy-focus-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-8);
  min-height: 4.75rem;
  padding: var(--space-10) var(--space-14);
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 25%, var(--color-border));
  border-radius: var(--radius-md);
  background: linear-gradient(110deg, color-mix(in srgb, var(--color-accent-purple) 5%, var(--color-surface)), var(--color-surface));
  box-shadow: 0 0.35rem 1.1rem var(--shadow-ink-05);
}

.hierarchy-focus-header-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 22%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 1.55rem;
}

.hierarchy-focus-header-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hierarchy-focus-header-copy small {
  color: var(--color-text-secondary);
  font-size: 0.72rem;
}

.hierarchy-focus-header-copy strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hierarchy-focus-header-count {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-purple) 5%, var(--color-surface-muted));
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  white-space: nowrap;
}


/* src/styles/hierarchyFocusHeader.css */
.hierarchy-focus-header .child-task-focus-back {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 1rem;
}

@media (min-width: 37.5rem) {
  .hierarchy-focus-header .child-task-focus-back {
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }

  .hierarchy-focus-header:hover .child-task-focus-back,
  .hierarchy-focus-header:focus-within .child-task-focus-back {
    opacity: 1;
    pointer-events: auto;
  }
}

.hierarchy-focus-path {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  padding: 0;
  overflow-x: auto;
}

.hierarchy-focus-path button {
  position: relative;
  flex: 0 0 auto;
  max-width: 18rem;
  padding: var(--space-6) var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hierarchy-focus-path button + button::before {
  content: "›";
  position: absolute;
  left: calc(var(--space-6) * -1);
  color: var(--color-text-muted);
}

.hierarchy-focus-tree,
.hierarchy-focus-tree ul {
  display: grid;
  row-gap: var(--space-6);
  column-gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hierarchy-focus-node > ul {
  grid-template-columns: repeat(var(--overview-column-count), minmax(0, 1fr));
}

.hierarchy-focus-list[data-column-mode="auto"] .hierarchy-focus-node > ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
}

.hierarchy-focus-node {
  position: relative;
  min-width: 0;
}

.hierarchy-focus-node.has-children {
  grid-column: 1 / -1;
}

.hierarchy-focus-node > ul {
  position: relative;
  margin-top: var(--space-8);
  margin-left: var(--space-4);
  padding-top: var(--space-6);
  padding-left: 1.2rem;
  border-left: 1.5px solid var(--hierarchy-line);
}

.hierarchy-focus-node > ul > .hierarchy-focus-node::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: -1.2rem;
  width: 1rem;
  height: 0.7rem;
  border-bottom: 1.5px solid var(--hierarchy-line);
  border-left: 1.5px solid var(--hierarchy-line);
  border-bottom-left-radius: 0.5rem;
  display: none;
}

.hierarchy-focus-node > ul > .hierarchy-focus-node:first-child::before,
.hierarchy-focus-node > ul > .hierarchy-focus-node.has-children::before {
  display: block;
}

.hierarchy-focus-row {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.hierarchy-focus-row > .hierarchy-focus-card.task-item {
  width: 100%;
  min-width: 0;
}

.hierarchy-focus-tree > .task-drop-preview,
.hierarchy-focus-node > ul > .task-drop-preview {
  grid-column: 1 / -1;
  width: calc(100% - 1.95rem);
  margin-left: 1.95rem;
}

.hierarchy-focus-toggle {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.hierarchy-focus-toggle:disabled {
  border-color: transparent;
  background: transparent;
}

.hierarchy-focus-card.task-item {
  position: relative;
  inset: auto;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  min-height: 4.55rem;
  margin: var(--space-8) 0 0;
  padding: 1.6rem var(--space-16) var(--space-10);
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 17%, var(--color-border));
  border-left: 3px solid var(--task-project-accent, var(--color-primary));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 0.3rem 0.85rem var(--shadow-ink-06);
  cursor: pointer;
  transform: none;
}

/* The generic desktop task rule has deliberately high specificity. The
   focus cards are a separate visual component, so pin their density here. */
#task-list.hierarchy-focus-list .hierarchy-focus-card.task-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  min-height: 4.55rem;
  padding: 1.6rem var(--space-16) var(--space-10);
}

.hierarchy-focus-card.task-item::before,
.hierarchy-focus-card.task-item::after {
  content: none;
}

.hierarchy-focus-card.container-card {
  min-height: 5.15rem;
  background: linear-gradient(105deg, color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 6%, var(--color-surface)), var(--color-surface));
}

#task-list.hierarchy-focus-list .hierarchy-focus-card.container-card {
  min-height: 5.15rem;
}

.hierarchy-focus-card.focus-card {
  min-height: 5.65rem;
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 34%, var(--color-border));
  box-shadow: 0 0.45rem 1.25rem color-mix(in srgb, var(--color-primary-hover) 9%, transparent);
}

#task-list.hierarchy-focus-list .hierarchy-focus-card.focus-card {
  min-height: 5.65rem;
}

.hierarchy-focus-card.selected {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 38%, var(--color-border));
  outline: none;
}

.hierarchy-focus-card.dragging {
  cursor: grabbing;
}

.hierarchy-focus-sequence {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1;
}

.hierarchy-focus-sequence.urgent {
  color: var(--color-danger);
}

.hierarchy-focus-card.container-card .hierarchy-focus-sequence,
.hierarchy-focus-card.focus-card .hierarchy-focus-sequence {
  font-size: 0.82rem;
}

.hierarchy-focus-actionbar {
  position: absolute;
  z-index: 2;
  top: -0.85rem;
  left: 1.45rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(18rem, calc(100% - 2.5rem));
  min-height: 2.1rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 14%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 2%, var(--color-surface));
  box-shadow: 0 0.3rem 0.8rem var(--shadow-ink-10);
}

.hierarchy-focus-card.container-card .hierarchy-focus-actionbar {
  width: min(21rem, calc(100% - 3rem));
}

.hierarchy-focus-card.focus-card .hierarchy-focus-actionbar {
  width: min(23rem, calc(100% - 3rem));
}

.hierarchy-focus-actionbar .task-done-toggle,
.hierarchy-focus-actionbar .hierarchy-focus-important,
.hierarchy-focus-actionbar .hierarchy-focus-delete {
  position: static;
  inset: auto;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  min-width: 1.45rem;
  min-height: 1.45rem;
  margin: 0;
  padding: 0;
  transform: none;
}

.hierarchy-focus-actionbar .task-done-toggle {
  order: 2;
  color: transparent;
}

.hierarchy-focus-actionbar .task-done-toggle[aria-pressed="true"] {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 16%, var(--color-surface));
  color: var(--color-success);
}

.hierarchy-focus-important {
  order: 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1;
  transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.hierarchy-focus-important[aria-pressed="true"] {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  color: var(--color-warning-deep);
}

.hierarchy-focus-actionbar .hierarchy-focus-delete {
  order: 4;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  opacity: 1;
}

.hierarchy-focus-actionbar .hierarchy-focus-delete::before {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--color-danger);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 5v5m4-5v5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 5v5m4-5v5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hierarchy-focus-card-body {
  display: grid;
  align-content: center;
  gap: var(--space-6);
  min-width: 0;
}

.hierarchy-focus-card.done {
  opacity: 0.84;
  background: var(--color-surface);
}

.hierarchy-focus-card.done .hierarchy-focus-actionbar {
  border-color: color-mix(in srgb, var(--color-success) 34%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
}

.hierarchy-focus-card.done .hierarchy-focus-card-title {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--color-text-secondary) 62%, transparent);
}

.hierarchy-focus-card-title.task-title {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 0.82rem;
  font-weight: 520;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#task-list.hierarchy-focus-list .hierarchy-focus-card-title.task-title {
  display: block;
  grid-column: auto;
  grid-row: auto;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 520;
  line-height: 1.25;
  -webkit-line-clamp: unset;
}

.hierarchy-focus-card.container-card .hierarchy-focus-card-title,
.hierarchy-focus-card.focus-card .hierarchy-focus-card-title {
  font-size: 0.94rem;
  font-weight: 680;
}

#task-list.hierarchy-focus-list .hierarchy-focus-card.container-card .hierarchy-focus-card-title,
#task-list.hierarchy-focus-list .hierarchy-focus-card.focus-card .hierarchy-focus-card-title {
  font-size: 0.94rem;
  font-weight: 680;
}

.hierarchy-focus-card.focus-card .hierarchy-focus-card-title {
  font-size: 1rem;
}

#task-list.hierarchy-focus-list .hierarchy-focus-card.focus-card .hierarchy-focus-card-title {
  font-size: 1rem;
}

.hierarchy-focus-signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.hierarchy-focus-date {
  position: relative;
  display: inline-flex;
  min-height: 1.45rem;
  align-items: center;
  padding: 2px var(--space-8);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  color: var(--color-primary);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 620;
  white-space: nowrap;
  cursor: pointer;
}

.hierarchy-focus-date::before {
  content: "▣";
  margin-right: 0.25rem;
  font-size: 0.66rem;
}

.hierarchy-focus-date.empty {
  border-style: dashed;
  color: var(--color-text-secondary);
}

.hierarchy-focus-date:hover,
.hierarchy-focus-date:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.hierarchy-focus-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 2px var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: 620;
  white-space: nowrap;
}

.hierarchy-focus-status.overdue,
.hierarchy-focus-status.blocked {
  border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface));
  color: var(--color-danger);
}

.hierarchy-focus-status.today {
  border-color: color-mix(in srgb, var(--color-warning) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning) 8%, var(--color-surface));
  color: var(--color-warning-deep);
}

.hierarchy-focus-status.waiting {
  color: var(--color-text-secondary);
}

.hierarchy-focus-status.done {
  border-color: color-mix(in srgb, var(--color-success) 22%, var(--color-border));
  color: var(--color-success);
}


/* src/styles/hierarchyFocusContent.css */
.hierarchy-focus-status.overdue::before,
.hierarchy-focus-status.today::before {
  content: "▣";
  margin-right: 0.25rem;
  font-size: 0.66rem;
}

.hierarchy-focus-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
}

.hierarchy-focus-content-button {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  place-items: center;
  gap: 2px;
  width: auto;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}

.hierarchy-focus-content-button.has-content,
.hierarchy-focus-card:hover .hierarchy-focus-content-button,
.hierarchy-focus-card:focus-within .hierarchy-focus-content-button {
  opacity: 1;
}

.hierarchy-focus-content-button.has-content {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.hierarchy-focus-content-button:hover,
.hierarchy-focus-content-button:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  outline: none;
}

.hierarchy-focus-content-button svg {
  width: 1.05rem;
  height: 1.05rem;
}

.hierarchy-focus-content-button > span {
  font-size: 0.65rem;
  font-weight: 700;
}

/* Hierarchy siblings can become much narrower than the viewport when many
   columns are selected.  Adapt to the card itself so the floating rail and
   status/content row can never escape its bounds. */
@container (max-width: 18rem) {
  .hierarchy-focus-actionbar,
  .hierarchy-focus-card.container-card .hierarchy-focus-actionbar,
  .hierarchy-focus-card.focus-card .hierarchy-focus-actionbar {
    left: 0.25rem;
    width: calc(100% - 0.5rem);
    gap: 0.34rem;
    padding-inline: 0.42rem;
  }

  .hierarchy-focus-actionbar .task-done-toggle,
  .hierarchy-focus-actionbar .hierarchy-focus-important,
  .hierarchy-focus-actionbar .hierarchy-focus-delete {
    width: 1.3rem;
    min-width: 1.3rem;
    height: 1.3rem;
    min-height: 1.3rem;
  }

  .hierarchy-focus-sequence,
  .hierarchy-focus-card.container-card .hierarchy-focus-sequence,
  .hierarchy-focus-card.focus-card .hierarchy-focus-sequence {
    min-width: 1.3rem;
    font-size: 0.72rem;
  }

  .hierarchy-focus-card.task-item,
  #task-list.hierarchy-focus-list .hierarchy-focus-card.task-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem;
    padding-inline: 0.7rem;
  }

  .hierarchy-focus-signals,
  .hierarchy-focus-status {
    min-width: 0;
    max-width: 100%;
  }

  .hierarchy-focus-status {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hierarchy-focus-content {
    gap: 0.1rem;
    min-width: 0;
  }

  .hierarchy-focus-content-button:not(.has-content) {
    display: none;
  }

  .hierarchy-focus-content-button {
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 2px;
  }

  .hierarchy-focus-content-button svg {
    width: 0.88rem;
    height: 0.88rem;
  }
}

@container (max-width: 12rem) {
  .hierarchy-focus-card.task-item,
  #task-list.hierarchy-focus-list .hierarchy-focus-card.task-item {
    min-height: 5rem;
    padding-inline: 0.55rem;
  }

  .hierarchy-focus-card-title.task-title,
  #task-list.hierarchy-focus-list .hierarchy-focus-card-title.task-title {
    font-size: 0.76rem;
  }

  .hierarchy-focus-status {
    padding-inline: 0.35rem;
    font-size: 0.62rem;
  }
}

.hierarchy-focus-list[data-card-size="minimal"] .hierarchy-focus-card {
  min-height: 4.2rem;
  padding: 1.45rem var(--space-12) var(--space-8);
}

#task-list.hierarchy-focus-list[data-card-size="minimal"] .hierarchy-focus-card.task-item {
  min-height: 4.2rem;
  padding: 1.45rem var(--space-12) var(--space-8);
}

#task-list.hierarchy-focus-list[data-card-size="minimal"] .hierarchy-focus-card.container-card {
  min-height: 4.65rem;
}

#task-list.hierarchy-focus-list[data-card-size="minimal"] .hierarchy-focus-card.focus-card {
  min-height: 5rem;
}

.hierarchy-focus-list[data-card-size="full"] .hierarchy-focus-card {
  min-height: 5.4rem;
  padding: 1.75rem var(--space-20) var(--space-12);
}

#task-list.hierarchy-focus-list[data-card-size="full"] .hierarchy-focus-card.task-item {
  min-height: 5.4rem;
  padding: 1.75rem var(--space-20) var(--space-12);
}

.hierarchy-focus-list[data-card-size="full"] .hierarchy-focus-card.focus-card {
  min-height: 6rem;
}

#task-list.hierarchy-focus-list[data-card-size="full"] .hierarchy-focus-card.focus-card {
  min-height: 6rem;
}

@media (max-width: 37.4375rem) {
  .hierarchy-focus-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 4.5rem;
    padding: var(--space-10) var(--space-12);
  }

  .hierarchy-focus-header-count {
    grid-column: 2;
    justify-self: start;
    padding: 2px var(--space-6);
  }

  .hierarchy-focus-header .child-task-focus-back {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .hierarchy-focus-node > ul {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-left: 0.35rem;
    padding-left: 0.55rem;
  }

  .hierarchy-focus-row {
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 2px;
  }

  .hierarchy-focus-toggle {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.55rem;
  }

  .hierarchy-focus-card.task-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    min-height: 4.25rem;
    padding: 1.45rem var(--space-10) var(--space-8);
  }

  .hierarchy-focus-sequence {
    min-width: 1.35rem;
    height: auto;
    font-size: 0.7rem;
  }

  .hierarchy-focus-card.container-card .hierarchy-focus-sequence,
  .hierarchy-focus-card.focus-card .hierarchy-focus-sequence {
    min-width: 1.4rem;
    height: auto;
    font-size: 0.75rem;
  }

  .hierarchy-focus-actionbar,
  .hierarchy-focus-card.container-card .hierarchy-focus-actionbar,
  .hierarchy-focus-card.focus-card .hierarchy-focus-actionbar {
    left: 0.65rem;
    width: min(17rem, calc(100% - 1.25rem));
    gap: 0.65rem;
  }

  .hierarchy-focus-card.container-card .hierarchy-focus-card-title,
  .hierarchy-focus-card.focus-card .hierarchy-focus-card-title {
    font-size: 0.9rem;
  }

  .hierarchy-focus-content {
    gap: 1px;
  }

  .hierarchy-focus-content-button {
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 2px;
  }
}

.dependency-focus-details {
  position: relative;
  z-index: 5;
  display: grid;
  align-content: start;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-16);
  border-left: 1px solid var(--color-border);
  overflow: auto;
  background: var(--color-surface);
}

.dependency-focus-details > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-8);
}

.dependency-focus-details > header strong {
  font-size: var(--text-body);
  line-height: 1.35;
}

.dependency-focus-details > header button {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.25rem;
  line-height: 1;
}

.dependency-focus-details > span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-focus-details dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-12) 0;
  border-block: 1px solid var(--color-border);
  font-size: var(--text-caption);
}

.dependency-focus-details dt { color: var(--color-text-secondary); }
.dependency-focus-details dd { margin: 0; color: var(--color-text-primary); font-weight: var(--font-weight-strong); }

.dependency-graph-legend {
  display: grid;
  gap: var(--space-8);
  font-size: var(--text-caption);
}

.dependency-graph-link-manager {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12) 0;
  border-block: 1px solid var(--color-border);
}

.dependency-graph-link-add,
.dependency-graph-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7.8rem, auto) var(--space-32);
  gap: var(--space-6);
  align-items: center;
}

.dependency-graph-link-add select,
.dependency-graph-link select {
  min-width: 0;
  min-height: var(--space-32);
  padding: 0 var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
}

.dependency-graph-link-add button,
.dependency-graph-link > button:last-child {
  display: grid;
  width: var(--space-32);
  height: var(--space-32);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-title);
}

.dependency-graph-link > button:last-child {
  color: var(--color-danger);
}

.dependency-graph-link-list {
  display: grid;
  gap: var(--space-6);
}

.dependency-graph-link-list > span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-graph-link {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-xs);
}

.dependency-graph-link.sequence {
  border-left-color: var(--color-accent-green);
}

.dependency-graph-link > button:first-child {
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-graph-legend > span {
  position: relative;
  padding-left: var(--space-16);
  color: var(--color-text-secondary);
}

.dependency-graph-legend > span::before {
  position: absolute;
  top: 0.42rem;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-border-strong, var(--color-border));
  content: "";
}

.dependency-graph-legend > span.blocking::before { background: var(--color-danger); }
.dependency-graph-legend > span.sequence::before { background: var(--color-accent-green); }
.dependency-graph-legend > span.critical::before { background: var(--color-accent-orange); }

.dependency-relation-list-body {
  display: grid;
  align-content: start;
  gap: var(--space-8);
  min-height: 0;
  overflow: auto;
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.dependency-relation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-10);
  min-height: 3rem;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
}

.dependency-relation-row.sequence { border-left-color: var(--color-accent-green); }
.dependency-relation-row.selected { border-color: var(--color-primary); box-shadow: 0 0 0 0.14rem var(--color-primary-soft); }
.dependency-relation-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dependency-relation-row span { color: var(--color-text-secondary); font-size: var(--text-caption); }

@media (max-width: 72rem) {
  .dependency-focus-layout {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 30%);
    overflow: hidden;
  }
  .dependency-focus-graph { width: 100%; }
  .dependency-graph-label-toggle { margin-left: 0; }
}

/* Selection must stay unmistakable across every overview card-size override. */
#task-list .task-item.multi-selected,
#task-list .outline-row.multi-selected,
#task-list .project-hierarchy-row.multi-selected:not(.order-selected) {
  border-color: var(--color-primary) !important;
  outline: 3px solid color-mix(in srgb, var(--color-primary) 52%, transparent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface)) !important;
  box-shadow: inset 4px 0 0 var(--color-primary), 0 8px 20px var(--shadow-ink-16);
}


/* src/styles/dependencyStageCards.css */
.overview-modal-subcards-flow,
.detail-subtasks-flow {
  min-height: 1.9rem;
  padding: 0 var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.detail-subtasks-flow {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-8);
  text-align: left;
}

.detail-subtasks-flow strong { color: var(--color-primary); }
.detail-subtask-stage-heading {
  margin-top: var(--space-6);
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size: 0.64rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.subtask-item.blocked { opacity: .52; }
.subtask-item.blocked:hover { opacity: .78; }
.subtask-lock {
  position: relative;
  grid-column: -1;
  width: .72rem;
  height: .58rem;
  margin-top: .18rem;
  border: 1.5px solid var(--color-text-tertiary, var(--color-text-secondary));
  border-radius: var(--radius-hairline);
}
.subtask-lock::before {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 50%;
  width: .38rem;
  height: .32rem;
  border: 1.5px solid var(--color-text-tertiary, var(--color-text-secondary));
  border-bottom: 0;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  content: "";
  transform: translateX(-50%);
}

.overview-modal-subcards-flow:hover,
.overview-modal-subcards-flow:focus-visible,
.detail-subtasks-flow:hover,
.detail-subtasks-flow:focus-visible {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
  outline: none;
}

.dependency-stage-editor-dialog {
  width: min(58rem, calc(100vw - 2rem));
  max-width: none;
  max-height: min(52rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 1.5rem 4rem var(--shadow-ink-24);
}

.dependency-stage-editor-dialog::backdrop {
  background: var(--shadow-ink-34);
  backdrop-filter: blur(2px);
}

.dependency-stage-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: inherit;
}

.dependency-stage-editor-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-24) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.dependency-stage-editor-header > div {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.dependency-stage-editor-header span {
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.dependency-stage-editor-header h2,
.dependency-stage-editor-header p,
.dependency-stage-step-heading h3,
.dependency-stage-step-heading p,
.dependency-stage-success h3,
.dependency-stage-success p {
  margin: 0;
}

.dependency-stage-editor-header h2 {
  font-size: 1.2rem;
}

.dependency-stage-editor-header p,
.dependency-stage-step-heading p {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.dependency-stage-editor-close {
  display: grid;
  width: var(--space-32);
  height: var(--space-32);
  flex: 0 0 var(--space-32);
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.35rem;
}

.dependency-stage-editor-close:hover,
.dependency-stage-editor-close:focus-visible {
  border-color: var(--color-border);
  background: var(--color-background);
  color: var(--color-text-primary);
}

.dependency-stage-editor-content {
  display: grid;
  align-content: start;
  gap: var(--space-16);
  min-height: 0;
  padding: var(--space-20) var(--space-24);
  overflow: auto;
}

.dependency-stage-step-heading {
  display: flex;
  align-items: start;
  gap: var(--space-10);
}

.dependency-stage-step-heading > span {
  display: grid;
  width: var(--space-28);
  height: var(--space-28);
  flex: 0 0 var(--space-28);
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: white;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.dependency-stage-step-heading > div {
  display: grid;
  gap: 2px;
}

.dependency-stage-step-heading h3 {
  font-size: 1rem;
}

.dependency-stage-board {
  display: grid;
  gap: 0;
}

.dependency-stage {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  transition: border-color 120ms ease, background 120ms ease;
}

.dependency-stage + .dependency-stage-new-dropzone,
.dependency-stage-new-dropzone + .dependency-stage {
  margin-top: var(--space-5);
}

.dependency-stage.stage-dragging {
  opacity: 0.48;
}

.dependency-stage.stage-drop-before::before,
.dependency-stage.stage-drop-after::after {
  position: absolute;
  z-index: 2;
  right: var(--space-4);
  left: var(--space-4);
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
  content: "";
  pointer-events: none;
}

.dependency-stage.stage-drop-before::before {
  top: -7px;
}

.dependency-stage.stage-drop-after::after {
  bottom: -7px;
}

.dependency-stage.unassigned {
  border-style: dashed;
  background: color-mix(in srgb, var(--color-warning) 5%, var(--color-surface));
}

.dependency-stage.completed {
  border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-surface));
}

.dependency-stage.drop-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dependency-stage > header {
  display: flex;
  min-height: var(--space-28);
  align-items: center;
  gap: var(--space-8);
}

.dependency-stage > header > strong {
  font-size: var(--text-body-sm);
}

.dependency-stage-drag-handle {
  display: inline-grid;
  width: var(--space-24);
  height: var(--space-28);
  flex: 0 0 var(--space-24);
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  cursor: grab;
  user-select: none;
}

.dependency-stage-drag-handle:hover,
.dependency-stage-drag-handle:focus-visible {
  background: var(--color-surface);
  color: var(--color-primary);
  outline: 1px solid var(--color-border);
}

.dependency-stage-drag-handle:active {
  cursor: grabbing;
}

.dependency-stage > header > span:not(.dependency-stage-actions):not(.dependency-stage-drag-handle) {
  display: inline-grid;
  min-width: var(--space-22);
  height: var(--space-22);
  place-items: center;
  padding: 0 var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-stage-actions {
  display: inline-flex;
  gap: var(--space-4);
  margin-left: auto;
}

.dependency-stage-actions button {
  display: grid;
  width: var(--space-28);
  height: var(--space-28);
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
}

.dependency-stage-actions .dependency-stage-assign-all {
  width: auto;
  padding-inline: var(--space-8);
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.dependency-stage-actions button:hover:not(:disabled),
.dependency-stage-actions button:focus-visible:not(:disabled) {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
}

.dependency-stage-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  min-height: 2.6rem;
}

.dependency-stage-card {
  display: grid;
  grid-template-columns: auto minmax(7rem, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  min-width: min(100%, 17rem);
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

.dependency-stage-card.dragging {
  opacity: 0.42;
}

.dependency-stage-card.completed {
  cursor: default;
  opacity: 0.72;
}

.dependency-stage-card.completed > span,
.dependency-stage-card.completed > small {
  color: var(--color-success);
}

.dependency-stage-card.completed > small {
  font-size: var(--text-caption);
}

.dependency-stage-card > span {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.dependency-stage-card strong {
  overflow: hidden;
  font-size: var(--text-body-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-stage-card select {
  min-height: var(--space-28);
  max-width: 7rem;
  padding: 0 var(--space-24) 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-stage-empty {
  align-self: center;
  padding: var(--space-8);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.dependency-stage-add {
  min-height: 2.4rem;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}

.dependency-stage-notice,
.dependency-stage-summary {
  margin: 0;
  padding: var(--space-10) var(--space-12);
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-stage-editor-footer {
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-12) var(--space-24);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -0.5rem 1rem var(--shadow-ink-04);
}

.dependency-stage-editor-footer button,
.dependency-stage-success button {
  min-height: 2.4rem;
  padding: 0 var(--space-16);
  border-radius: var(--radius-sm);
}

.dependency-stage-editor .primary-button {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-strong);
}

.dependency-stage-editor .primary-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 88%, var(--color-black));
}

.dependency-stage-editor .secondary-button {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.dependency-stage-editor .primary-button:disabled,
.dependency-stage-editor .secondary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dependency-stage-preview {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
}

.dependency-stage-preview section {
  display: grid;
  width: 100%;
  gap: var(--space-8);
}

.dependency-stage-preview section > strong {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}


/* src/styles/dependencyStageDropzones.css */
.dependency-stage-new-dropzone,
.dependency-arrange-new-stage-dropzone {
  display: grid;
  min-height: var(--space-14);
  place-items: center;
  border-radius: var(--radius-sm);
  color: transparent;
  transition: min-height var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.dependency-stage-new-dropzone span,
.dependency-arrange-new-stage-dropzone span {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  pointer-events: none;
}

.dependency-stage-new-dropzone.drop-active,
.dependency-arrange-new-stage-dropzone.drop-active {
  min-height: var(--space-40);
  border: 1px dashed var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dependency-arrange-workspace.arrange-drag-active .dependency-arrange-new-stage-dropzone {
  min-height: var(--space-28);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  color: var(--color-primary);
}


/* src/styles/taskCompactLayout.css */
.dependency-stage-preview section > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}

.dependency-stage-preview section > div > span {
  min-width: 9rem;
  max-width: 14rem;
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-body-sm);
  text-align: center;
}

.dependency-stage-preview-arrow {
  display: grid;
  justify-items: center;
  color: var(--color-primary);
  line-height: 1;
}

.dependency-stage-preview-arrow span {
  font-size: 1.4rem;
}

.dependency-stage-preview-arrow small {
  color: var(--color-text-tertiary);
  font-size: 0.65rem;
}

.dependency-stage-summary {
  display: grid;
  gap: var(--space-4);
  color: var(--color-success);
}

.dependency-stage-summary.warning {
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning) 9%, var(--color-surface));
  color: var(--color-warning-text, var(--color-warning-deep));
}

.dependency-stage-summary span,
.dependency-stage-summary p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.dependency-stage-success {
  display: grid;
  justify-items: center;
  gap: var(--space-10);
  padding: clamp(3rem, 10vh, 6rem) var(--space-24);
  text-align: center;
}

.dependency-stage-success > span {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
  color: var(--color-success);
  font-size: 1.5rem;
}

.dependency-stage-success p {
  color: var(--color-text-secondary);
}

@media (max-width: 37.4375rem) {
  .dependency-stage-editor-dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .dependency-stage-editor-header,
  .dependency-stage-editor-content {
    padding-right: var(--space-14);
    padding-left: var(--space-14);
  }

  .dependency-stage-editor-footer {
    padding-right: var(--space-14);
    padding-left: var(--space-14);
  }

  .dependency-stage-card {
    width: 100%;
  }
}

/* Compact cards use their content height. The single-column layout should spend
   vertical space on information, not desktop card padding or fixed heights. */
@media (max-width: 37.4375rem) {
  .sidebar:has(.board-menu.open) {
    position: relative;
    z-index: 90;
  }

  .sidebar .board-menu.open {
    z-index: 91;
  }

  .sidebar .board-menu.open .board-menu-list {
    z-index: 92;
  }

  .task-panel {
    padding: 0.38rem 0.42rem calc(0.65rem + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom-reserve, 0px));
  }

  :is(#task-list, .unified-search-cards).overview-list {
    gap: 0.4rem;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size]:not([data-overview-layout="list"]) > .task-item {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 1.5rem 0.55rem 0.4rem 0.68rem !important;
    border-left-width: 0.28rem !important;
    box-shadow: 0 0.35rem 0.9rem var(--shadow-ink-07), 0 1px 3px var(--shadow-ink-05) ;
    overflow: visible !important;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size]:not([data-overview-layout="list"]) > .task-item.expanded {
    display: block;
    overflow: visible !important;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-card-header {
    height: auto;
    gap: 0.18rem !important;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-content {
    gap: 0.12rem !important;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-title {
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-parent-context,
  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-parent-link,
  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-parent-separator {
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-body {
    grid-template-rows: auto;
    gap: 0.24rem !important;
    margin: 0 -0.55rem !important;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-facts,
  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tags {
    margin-inline: 0.55rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.22rem 0.38rem;
    padding-block: 0.22rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact {
    grid-template-columns: 0.85rem minmax(0, 1fr);
    gap: 0.02rem 0.22rem;
    font-size: 0.64rem;
    line-height: 1.05;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) button.task-fact {
    padding: 0.14rem 0.2rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-icon {
    width: 0.78rem;
    height: 0.78rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-label,
  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-fact-value {
    font-size: 0.64rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-subtask-controls {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    gap: 0.2rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-subtask-add {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.88rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tags {
    gap: 0.22rem;
    min-height: 1.25rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-tag-controls,
  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-tag-heading {
    min-height: 1.2rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-tag-heading {
    gap: 0.2rem;
    padding: 0.1rem 0.28rem;
    font-size: 0.64rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-tag-heading-icon {
    width: 0.76rem;
    height: 0.76rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag,
  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-overview-tag-input {
    min-height: 1.2rem;
    font-size: 0.64rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel {
    margin-top: 0;
    padding: 0.25rem 0.42rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip-list {
    gap: 0.2rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip {
    min-height: 1.2rem;
    padding-inline: 0.14rem;
    font-size: 0.6rem;
  }

  :is(#task-list, .unified-search-cards).overview-list .task-overview-body-scrollable {
    overflow: visible;
    padding-right: 0;
  }

  :is(#task-list, .unified-search-cards).overview-list .task-item.expanded .task-children {
    gap: 0.32rem;
    margin-top: 0.35rem;
    padding: 0.35rem var(--space-12, 0.75rem) 0;
  }

  :is(#task-list, .unified-search-cards).overview-list .task-children .task-inline-details {
    display: none;
  }

  :is(#task-list, .unified-search-cards).overview-list .task-child-list {
    gap: 0.22rem;
  }

  :is(#task-list, .unified-search-cards).overview-list .task-child {
    margin-left: min(calc(var(--child-depth, 0) * 0.7rem), 2.8rem);
    padding: 0.18rem;
  }

  :is(#task-list, .unified-search-cards).overview-list .task-child-form {
    min-height: 1.8rem;
    gap: 0.35rem;
  }

  :is(#task-list, .unified-search-cards).overview-list .task-child-form input {
    height: 1.8rem;
  }

  :is(#task-list, .unified-search-cards).overview-list .task-child-help,
  :is(#task-list, .unified-search-cards).overview-list .task-child-divider {
    display: none;
  }
}
.team-filter-field select {
  min-width: 9rem;
  height: 2.5rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

/* Final phone overrides: later overview-card rules are desktop-first, so the
   narrow layout must win the cascade here. */
@media (max-width: 37.4375rem) {
  .task-panel {
    padding: var(--space-10) var(--space-10) calc(var(--space-16) + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom-reserve, 0px));
  }

  .task-panel:has(.board-list) {
    padding: 0;
  }

  :is(#task-list, .unified-search-cards).overview-list {
    gap: var(--space-10);
  }

  :is(#task-list, .unified-search-cards).overview-list[data-column-mode] > .task-item,
  :is(#task-list, .unified-search-cards).overview-list > .task-item {
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) > .task-item {
    min-height: 11.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1.1rem !important;
  }

  .task-list.board-list,
  .task-list.board-list.show-done-column {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .project-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sidebar {
    max-height: 13rem;
  }

  .project-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-quick-create-host .quick-create-form.editing,
  .overview-quick-create-host .quick-create-form.editing .quick-create-controls,
  .quick-create-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .quick-create-submit {
    width: 100%;
    min-height: 2.75rem;
  }

  .task-work-area {
    position: relative;
  }

  :root[data-layout-size="compact"] .task-work-area:has(.dependency-project-tree:not([hidden])),
  :root[data-layout-size="compact"] .task-work-area:has(.dependency-project-tree:not([hidden])):has(.dependency-finder:not([hidden])),
  :root[data-layout-size="compact"] .task-work-area:has(.dependency-finder:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .dependency-project-tree:not([hidden]) {
    display: none;
  }

  .dependency-finder-header button,
  .dependency-finder-scopes button,
  .dependency-finder-item-focus {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  .overview-card-dialog {
    width: calc(100vw - 0.75rem);
    max-width: calc(100vw - 0.75rem);
    max-height: calc(100dvh - 0.75rem);
    margin: auto;
  }

  .overview-card-modal-editor {
    grid-template-rows: 2.75rem minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 0.75rem - 2px) !important;
  }

  .overview-card-modal-header {
    min-height: 2.75rem;
    padding-inline: 0.5rem;
  }

  .overview-card-modal-icon-button {
    width: 2rem;
    height: 2rem;
  }

  .overview-card-modal-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.65rem;
  }

  .overview-modal-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-modal-input,
  .overview-modal-inline-input,
  .overview-modal-checkbox-control,
  .overview-modal-attachment-picker {
    min-height: 2.6rem;
  }

  .overview-modal-attachment-gallery {
    grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  }

  .overview-modal-subcard-list {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .overview-modal-subcard-columns,
  .overview-modal-subcard-row {
    min-width: 34rem;
  }

  .overview-modal-footer {
    grid-template-columns: auto 0 minmax(0, 1fr) auto auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: var(--space-4);
    padding: 0.5rem;
  }

  .overview-modal-footer .button {
    min-height: 2.6rem;
    padding-inline: 0.65rem;
  }

  .overview-modal-created-at {
    display: none;
  }
}

/* The board/project move is a secondary card action: it follows the display
   controls and stays deliberately understated, including on narrow phones. */
:is(#task-list, .unified-search-cards).overview-list .task-card-actions {
  width: calc((var(--overview-toolbar-control) * 4) + (var(--overview-toolbar-action-gap) * 3));
}


/* src/styles/taskAdaptiveInteractions.css */
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-card-move-menu {
  display: grid;
  order: 3;
  width: var(--overview-toolbar-control);
  height: var(--overview-toolbar-height);
  align-items: center;
  justify-items: center;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-card-move-menu .card-move-menu-trigger {
  display: grid;
  width: var(--overview-toolbar-control);
  min-width: 0;
  height: var(--overview-toolbar-control);
  min-height: 0;
  place-items: center;
  padding: 0;
  color: var(--color-text-secondary);
}

/* `⇄` has an uneven visual baseline in the UI font.  Use the same masked SVG
   treatment as the neighbouring actions so the board move is optically, not
   merely mathematically, centered in the top rail. */
:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-card-move-menu .card-move-menu-trigger::before {
  display: block;
  width: var(--overview-toolbar-icon);
  height: var(--overview-toolbar-icon);
  background-color: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' d='M5 7h12m0 0-3-3m3 3-3 3M19 17H7m0 0 3-3m-3 3 3 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round' d='M5 7h12m0 0-3-3m3 3-3 3M19 17H7m0 0 3-3m-3 3 3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-card-move-menu .card-move-menu-trigger {
  font-size: 0;
  line-height: 1;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-card-move-menu .card-move-menu-panel {
  z-index: 50;
}

/* The action rail normally clips its compact icons.  The board/project chooser
   is the one exception: once open, its menu must be allowed to leave the rail. */
:is(#task-list, .unified-search-cards).overview-list .task-card-actions:has(.task-card-move-menu.open) {
  z-index: 60;
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions:has(.task-card-move-menu.open) {
  contain: none;
  overflow: visible !important;
}

/* In the minimal card the top rail is smaller than the regular toolbar.  The
   move wrapper must use that same height; otherwise its icon is centered in a
   taller invisible box and appears visibly too high. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-card-move-menu {
  display: grid !important;
  flex: 0 0 var(--minimal-topbar-icon) !important;
  width: var(--minimal-topbar-icon) !important;
  height: var(--minimal-topbar-icon) !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-items: center !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-card-move-menu .card-move-menu-trigger {
  width: var(--minimal-topbar-icon) !important;
  min-width: 0 !important;
  height: var(--minimal-topbar-icon) !important;
  min-height: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions .task-card-move-menu .card-move-menu-trigger::before {
  width: var(--minimal-topbar-icon);
  height: var(--minimal-topbar-icon);
}

@container (max-width: 18rem) {
:is(#task-list, .unified-search-cards).overview-list .task-card-actions {
  width: calc((var(--overview-toolbar-control) * 4) + (var(--overview-toolbar-action-gap) * 3));
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions:has(.task-share) {
  width: calc((var(--overview-toolbar-control) * 5) + (var(--overview-toolbar-action-gap) * 4));
}

  :is(#task-list, .unified-search-cards).overview-list .task-card-actions .task-card-move-menu .card-move-menu-trigger {
    opacity: 0.58;
  }
}

/* Pointer-capability behavior is independent of compact/medium/expanded size.
   Native browser zoom remains available on touch devices, including
   “Desktopwebsite anzeigen”.
   Dependency canvases retain their own touch-action:none and custom pinch zoom. */
@media (hover: none) and (pointer: coarse) {
  .task-panel,
  .task-work-area,
  .task-list:not(.dependency-list),
  .task-list:not(.dependency-list) > .task-item {
    touch-action: pan-x pan-y pinch-zoom !important;
  }
}

@media (max-width: 37.4375rem) {
  .c2-toolbar {
    display: none;
  }

  .app-frame[data-mobile-panel="search"] .c2-toolbar,
  .app-frame[data-mobile-panel="filters"] .c2-toolbar {
    display: grid;
  }

  .c2-toolbar .dependency-finder-toggle {
    display: none !important;
  }

  .app-frame[data-mobile-panel="search"] .c2-toolbar .toolbar-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .toolbar-primary {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, 2.75rem);
    gap: var(--space-4);
    width: 100%;
    min-width: 0;
    padding: var(--space-6);
    overflow: visible;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .sort-menu-control:has(.sort-menu:not([hidden])) {
    position: relative;
    z-index: 40;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .sort-menu {
    right: 0;
    left: auto;
    width: min(13rem, calc(100vw - 1rem));
    min-width: min(13rem, calc(100vw - 1rem));
    max-height: min(18rem, calc(100dvh - 12rem));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .toolbar-primary > * {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 2.75rem;
    margin: 0;
    padding: 0;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .project-control {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .task-sort {
    grid-column: 7 / 13;
    grid-row: 1;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .toolbar-result-count {
    display: none;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .done-column-field {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .blocked-tasks-field {
    grid-column: 4 / 7;
    grid-row: 2;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .overview-card-size-field {
    grid-column: 7 / 11;
    grid-row: 2;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .dependency-finder-toggle {
    grid-column: 11 / 13;
    grid-row: 2;
    justify-self: stretch;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .team-filter-field,
  .app-frame[data-mobile-panel="filters"] .c2-toolbar .project-view-field {
    grid-column: 1 / -1;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .project-control-row,
  .app-frame[data-mobile-panel="filters"] .c2-toolbar .project-filter,
  .app-frame[data-mobile-panel="filters"] .c2-toolbar .sort-menu-control,
  .app-frame[data-mobile-panel="filters"] .c2-toolbar .done-switch-label,
  .app-frame[data-mobile-panel="filters"] .c2-toolbar .toolbar-select-shell {
    width: 100%;
    min-width: 0;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .done-switch-label {
    justify-content: center;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .toolbar-secondary {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: var(--space-6);
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .toolbar-secondary .tag-filter,
  .app-frame[data-mobile-panel="filters"] .overview-quick-create-host {
    display: none !important;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .filters {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  .app-frame[data-mobile-panel="filters"] .c2-toolbar .filter-group {
    display: inline-flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content;
  }
}

@media (max-width: 37.4375rem) {
  .task-panel {
    padding: 0.38rem 0.42rem calc(0.65rem + env(safe-area-inset-bottom, 0px) + var(--mobile-browser-bottom-reserve, 0px));
  }

  :is(#task-list, .unified-search-cards).overview-list {
    gap: 0.4rem;
  }

  :root[data-layout-size="compact"] .task-work-area:has(.dependency-finder:not([hidden])) .task-panel {
    display: none;
  }

  .dependency-finder-resize {
    display: none;
  }
}

/* Minimal phone cards are a three-row layout: path, title, facts/actions.
   This comes after the general phone-card rules on purpose.  The final facts
   row is never allowed to borrow space from the card edge. */
@media (max-width: 37.4375rem) {
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) > .task-item {
    min-height: 0 !important;
    padding: 1rem 0.55rem 0.5rem 0.68rem !important;
  }

  /* Larger, comfortably separated touch targets without affecting desktop. */
  :is(#task-list, .unified-search-cards).overview-list {
    --overview-toolbar-top: -0.64rem;
    --overview-toolbar-height: 2.3rem;
    --overview-toolbar-control: 1.3rem;
    --overview-toolbar-icon: 1.14rem;
    --overview-toolbar-action-gap: 0.48rem;
  }

  :is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]) > .task-item {
    padding-top: 2.25rem !important;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] {
    --minimal-topbar-height: 1.3rem;
    --minimal-topbar-icon: 0.94rem;
    --minimal-topbar-action-gap: 0.43rem;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-card-actions {
    width: calc((var(--minimal-topbar-icon) * 5) + (var(--minimal-topbar-action-gap) * 4)) !important;
    max-width: none !important;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"]:not([data-overview-layout="list"]) > .task-item {
    padding-top: 1.2rem !important;
  }
}

/* Compact and full cards: keep the two primary facts together, while the
   expandable subtask control and the tag row always get the usable card width. */
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-facts {
  column-gap: 0;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-fact-planned,
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-fact-dependency {
  width: 100%;
  justify-self: stretch;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-fact-planned {
  grid-column: 1;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-fact-dependency {
  grid-column: 2;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-subtask-controls {
  grid-column: 1 / -1;
  grid-template-columns: auto auto;
  width: auto;
  justify-self: start;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-overview-tags {
  width: 100%;
  max-width: none;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-tag-controls {
  flex: 1 0 100%;
  width: 100%;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-overview-tag-add {
  margin-left: auto;
}

/* The standard rail already has right: 0.8rem. Increase that inset by five
   pixels, which actually moves the whole group left. */
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-card-actions {
  right: calc(0.8rem + 5px);
}

/* The middle/Erweitert level is content-sized. Earlier shared overview rules
   still imposed a presentation minimum intended for the full reading card,
   leaving large blank panels below short tasks. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) > .task-item {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 1rem !important;
  align-self: flex-start !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) .task-card-header {
  height: auto;
}

/* Compact cards must only create rows for content that actually exists. The
   shared overview grid reserves a third reading-preview row for full cards;
   on short compact cards that empty track looked like a large blank footer. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) .task-overview-body {
  grid-template-rows: none;
  grid-auto-rows: auto;
}

/* Final overview-card corrections. Auto mode is genuinely width-driven: the
   browser fits as many useful cards as the available work area can hold.
   Full cards retain more reading width, compact/minimal cards pack tighter. */
:is(#task-list, .unified-search-cards).overview-list[data-column-mode="auto"] {
  --overview-auto-card-min: 20rem;
  --overview-resolved-columns: auto;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="auto"][data-card-size="full"] {
  --overview-auto-card-min: 23rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="auto"][data-card-size="minimal"] {
  --overview-auto-card-min: 15.5rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="auto"] > .task-item {
  flex: 1 1 var(--overview-auto-card-min) !important;
  min-width: min(100%, var(--overview-auto-card-min));
}

/* Tags and their add action form one bounded control group. Keeping the plus
   beside the label prevents it from being pushed beyond the card edge. */
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-tag-controls {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-overview-tag-add {
  box-sizing: border-box;
  margin-left: 0.28rem;
}

/* Every direct action uses the same geometry. The previous fixed rail width
   omitted the optional share button, which clipped precisely its left edge. */
:is(#task-list, .unified-search-cards).overview-list .task-card-actions {
  width: auto !important;
  max-width: calc(100% - 7.2rem);
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-actions > .task-share {
  display: grid;
  flex: 0 0 var(--overview-toolbar-control);
  width: var(--overview-toolbar-control);
  min-width: var(--overview-toolbar-control);
  height: var(--overview-toolbar-control);
  min-height: var(--overview-toolbar-control);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--overview-toolbar-icon);
  line-height: 1;
}


/* src/styles/taskImportance.css */
.task-important-toggle {
  display: grid;
  width: var(--space-24);
  min-width: var(--space-24);
  height: var(--space-24);
  min-height: var(--space-24);
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.task-important-toggle:hover,
.task-important-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--color-text-secondary) 48%, var(--color-border));
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  outline: none;
}

.task-important-toggle[aria-pressed="true"] {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-warning) 72%, var(--color-warning-deep));
}

:is(#task-list, .unified-search-cards).overview-list .task-important-toggle {
  display: grid;
  flex: 0 0 var(--overview-toolbar-control);
  width: var(--overview-toolbar-control);
  min-width: var(--overview-toolbar-control);
  height: var(--overview-toolbar-control);
  min-height: var(--overview-toolbar-control);
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

:is(#task-list, .unified-search-cards).overview-list .task-important-toggle:hover,
:is(#task-list, .unified-search-cards).overview-list .task-important-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--color-text-secondary) 48%, var(--color-border));
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  outline: none;
}

:is(#task-list, .unified-search-cards).overview-list .task-important-toggle[aria-pressed="true"] {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-warning) 72%, var(--color-warning-deep));
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .task-item .task-important-toggle:not([aria-pressed="true"]),
  .hierarchy-focus-important:not([aria-pressed="true"]),
  .overview-modal-important-action:not(.active) {
    opacity: 0;
    pointer-events: none;
  }

  .dependency-finder-details-view .compact-sidebar-detail .detail-important-icon:not(:has(input:checked)) {
    opacity: 0;
    pointer-events: none;
  }

  .task-item:hover .task-important-toggle,
  .task-item:focus-within .task-important-toggle,
  .hierarchy-focus-card:hover .hierarchy-focus-important,
  .hierarchy-focus-card:focus-within .hierarchy-focus-important,
  .overview-modal-title-row:hover .overview-modal-important-action,
  .overview-modal-title-row:focus-within .overview-modal-important-action,
  .task-important-toggle:focus-visible,
  .hierarchy-focus-important:focus-visible,
  .overview-modal-important-action:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .dependency-finder-details-view .compact-sidebar-detail:hover .detail-important-icon,
  .dependency-finder-details-view .compact-sidebar-detail:focus-within .detail-important-icon {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Breadcrumb hierarchy stays clearly readable without becoming title-bold. */
.task-parent-context,
.task-parent-link,
.task-parent-separator,
.overview-modal-path-crumb {
  font-weight: 600 ;
}

/* On phones the filter toolbar is normally collapsed behind the header
   buttons. The overview quick-create row is different: it remains in the
   normal page flow and must never disappear together with those controls. */
@media (max-width: 37.4375rem) {
  .app-frame .c2-toolbar:has(.overview-quick-create-host:not([hidden])) {
    display: grid;
    flex: 0 0 auto;
    grid-template-areas:
      "primary"
      "views"
      "tags"
      "quick-create";
    max-height: none;
    padding: var(--space-6) var(--space-10) var(--space-8);
    overflow: visible;
    box-shadow: none;
  }

  .app-frame:not([data-mobile-panel="search"]):not([data-mobile-panel="filters"])
    .c2-toolbar:has(.overview-quick-create-host:not([hidden])) > .toolbar-primary,
  .app-frame:not([data-mobile-panel="search"]):not([data-mobile-panel="filters"])
    .c2-toolbar:has(.overview-quick-create-host:not([hidden])) > .toolbar-secondary {
    display: none !important;
  }

  .app-frame[data-mobile-panel="search"] .overview-quick-create-host:not([hidden]),
  .app-frame[data-mobile-panel="filters"] .overview-quick-create-host:not([hidden]),
  .app-frame .overview-quick-create-host:not([hidden]) {
    display: block !important;
    width: 100%;
    min-width: 0;
  }

  .overview-quick-create-host .quick-create-form:not(.editing) {
    min-height: 2.35rem;
  }

  .overview-quick-create-host .quick-create-form .column-add-trigger {
    min-height: 2.35rem;
    font-size: 0.8rem;
  }
}


/* src/styles/archiveWorkspace.css */
.task-list.deleted-activity-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-8);
}

.deleted-activity-card {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-left: 0.25rem solid var(--color-text-secondary);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  opacity: 0.82;
}

.deleted-activity-card > strong {
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
}

.deleted-activity-state {
  width: fit-content;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.deleted-activity-context {
  font-size: var(--text-caption);
}

.task-list.archive-list {
  display: block;
}

.archive-workspace {
  display: grid;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}

.archive-workspace h2 { margin: 0; }
.archive-workspace p { margin: 0; }
.archive-count { flex: 0 0 auto; color: var(--color-text-secondary); font-size: var(--text-caption); }
.archive-card-list { display: grid; gap: var(--space-8); }

.archive-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-12) var(--space-16);
  border: var(--workspace-card-border);
  border-radius: var(--workspace-card-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-card-shadow);
}

.archive-card-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.archive-card-icon svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.archive-card > div:not(.archive-card-actions) { display: grid; gap: var(--space-4); min-width: 0; }
.archive-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-card > div > span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.archive-card-actions { display: flex; gap: var(--space-6); }
.archive-card-actions .button { min-height: 2.2rem; padding: 0 var(--space-10); }

.archive-empty {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  padding: var(--space-24);
  border: 1px dashed var(--color-border);
  border-radius: var(--workspace-panel-radius);
  color: var(--color-text-secondary);
  text-align: center;
}

.archive-empty strong { color: var(--color-text-primary); }

@media (max-width: 37.4375rem) {
  .archive-card { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-10); }
  .archive-card-actions { grid-column: 1 / -1; }
  .archive-card-actions .button { flex: 1; }
}


/* src/styles/myDayFoundation.css */
.my-day-view {
  display: grid;
  grid-template-columns: minmax(14rem, 24rem) minmax(26rem, 1fr);
  gap: 1.5rem;
  min-height: calc(100dvh - 12rem);
  padding: 0.75rem;
}

.task-panel:has(.my-day-list) {
  container-type: inline-size;
}

.my-day-pool,
.my-day-workspace {
  min-width: 0;
}

.my-day-pool-resizer {
  position: relative;
  z-index: 4;
  min-width: var(--space-20);
  cursor: col-resize;
  touch-action: none;
}

.my-day-pool-resizer::before {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: var(--color-border);
  content: "";
  transform: translateX(-50%);
}

.my-day-pool-resizer::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 0.9rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  color: var(--color-primary);
  box-shadow: var(--shadow-card);
  content: "⋮";
  font-size: 0.8rem;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.my-day-pool-resizer:is(:hover, :focus-visible)::after,
.resizing-my-day-pool .my-day-pool-resizer::after {
  background: var(--color-primary-soft);
}

.resizing-my-day-pool {
  cursor: col-resize;
  user-select: none;
}

.my-day-pool {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  container-type: inline-size;
}

.my-day-pool > .workspace-panel-header {
  flex-wrap: wrap;
}

.my-day-add-due {
  max-width: 100%;
  padding-inline: var(--space-10);
  white-space: normal;
}

.my-day-pool-content {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 1rem;
  min-height: 0;
}

.my-day-pool h2,
.my-day-workspace h2 { margin: 0; color: var(--color-text-primary); }

.my-day-pool-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.18rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.my-day-pool-tabs button,
.my-day-header-controls button {
  min-height: 2rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
}

.my-day-pool-tabs button.active,
.my-day-header-controls button.active { background: var(--color-primary-soft); color: var(--color-primary); }

.my-day-search {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-height: 2.55rem;
  padding: 0 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.my-day-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  outline: 0;
}

.my-day-pool-list {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  min-height: 0;
  overflow: auto;
}

.my-day-pool-card {
  display: grid;
  grid-template-areas: "grip copy date add";
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: grab;
}

.my-day-pool-card > .my-day-grip { grid-area: grip; }
.my-day-pool-card > .my-day-card-copy { grid-area: copy; }
.my-day-pool-card > .my-day-date-status { grid-area: date; }
.my-day-pool-card > .my-day-add-card { grid-area: add; }

@container (max-width: 18rem) {
  .my-day-pool-card {
    grid-template-areas:
      "grip copy add"
      ". date add";
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: max-content;
    align-items: center;
  }

  .my-day-pool-card > .my-day-date-status {
    justify-self: start;
    white-space: normal;
  }
}

.my-day-pool-card:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: var(--shadow-sm); }
.my-day-grip { color: var(--color-text-tertiary); font-size: 1.15rem; }

.my-day-card-copy { display: grid; gap: 0.28rem; min-width: 0; }
.my-day-card-context { display: flex; min-width: 0; gap: var(--space-4); align-items: center; }
.my-day-card-context .my-day-breadcrumb { min-width: 0; }
.my-day-card-context .my-day-board-origin {
  min-height: 1rem;
  padding-inline: var(--space-4);
  font-size: 0.62rem;
}
.my-day-card-copy strong { overflow: hidden; color: var(--color-text-primary); font-size: 0.98rem; text-overflow: ellipsis; white-space: nowrap; }
.my-day-breadcrumb { overflow: hidden; color: var(--color-primary); font-size: 0.73rem; text-overflow: ellipsis; white-space: nowrap; }
.my-day-date-status { color: var(--color-primary); font-size: 0.73rem; white-space: nowrap; }
.my-day-date-status:empty { display: none; }
.my-day-date-status.overdue { color: var(--color-danger); }

.my-day-add-card,
.my-day-remove,
.my-day-checkbox { display: inline-grid; place-items: center; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary); }
.my-day-add-card { width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.2rem; }

.my-day-workspace { display: grid; min-height: 0; grid-template-rows: auto minmax(20rem, 1fr); gap: var(--space-6); overflow: hidden; padding: var(--space-6); container-type: inline-size; }
.my-day-workspace:has(> .my-day-ai-guidance) { grid-template-rows: auto auto minmax(20rem, 1fr); }
.my-day-workspace > header { display: grid; grid-template-columns: minmax(5rem, auto) minmax(5rem, 1fr) auto; height: var(--workspace-command-height); min-height: var(--workspace-command-height); max-height: var(--workspace-command-height); gap: var(--space-8); align-items: center; padding-inline: var(--space-10); overflow: hidden; }
.my-day-title-block { display: flex; min-width: 0; align-items: baseline; gap: var(--space-6); }
.my-day-workspace > header p { min-width: 0; margin: 0; overflow: hidden; color: var(--color-text-secondary); font-size: var(--text-caption); line-height: var(--line-tight); text-overflow: ellipsis; white-space: nowrap; }
.my-day-workspace > header .workspace-title { font-size: var(--text-body); }
.my-day-ai-guidance {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-12);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary-soft) 55%, var(--color-surface));
  color: var(--color-text-secondary);
  font-size: 0.76rem;
}
.my-day-ai-guidance strong { color: var(--color-primary); }
.my-day-ai-guidance small { margin-left: auto; color: var(--color-text-tertiary); }

.detail-intelligence-toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}


/* src/styles/detailIntelligence.css */
.detail-intelligence-panel {
  display: grid;
  gap: var(--space-10);
  margin: var(--space-10) var(--space-14) 0;
  padding: var(--space-12);
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary-soft) 45%, var(--color-surface));
}
.detail-intelligence-panel[hidden] { display: none; }
.detail-intelligence-panel.loading { opacity: 0.72; }
.detail-intelligence-panel > header { display: grid; gap: 0.15rem; }
.detail-intelligence-panel > header strong { color: var(--color-primary); font-size: 0.82rem; }
.detail-intelligence-panel > header span { color: var(--color-text-tertiary); font-size: 0.68rem; }
.detail-intelligence-panel section { padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.detail-intelligence-panel h3 { margin: 0 0 var(--space-4); font-size: 0.75rem; }
.detail-intelligence-panel p,
.detail-intelligence-panel ul { margin: 0; color: var(--color-text-secondary); font-size: 0.73rem; line-height: 1.45; }
.detail-intelligence-panel ul { padding-left: 1.1rem; }
.detail-intelligence-provider { display: grid; gap: var(--space-6); }
.detail-intelligence-local { display: grid; gap: var(--space-10); }
.detail-intelligence-provider > strong { color: var(--color-text-primary); font-size: 0.7rem; }
.detail-intelligence-provider li { margin-bottom: var(--space-4); }
.detail-intelligence-provider li:has(.detail-intelligence-apply) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: start;
}
.detail-intelligence-apply {
  min-height: 1.75rem;
  padding: 0 var(--space-8);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  white-space: nowrap;
}
.detail-intelligence-apply:disabled { opacity: 0.56; }


/* src/styles/myDayControls.css */
.my-day-progress { display: grid; gap: 0.35rem; min-width: 9rem; color: var(--color-text-secondary); font-size: 0.8rem; }
.my-day-progress > span { height: 0.28rem; overflow: hidden; border-radius: var(--radius-full); background: var(--color-surface-muted); }
.my-day-progress i { display: block; width: var(--my-day-progress); height: 100%; border-radius: inherit; background: var(--color-primary); }
.my-day-header-controls,
.my-day-date-controls,
.my-day-focus-controls,
.my-day-plan-controls { display: flex; gap: var(--space-4); }
.my-day-header-controls { flex-wrap: nowrap; justify-content: flex-end; }
.my-day-header-controls button {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border);
}
.my-day-header-controls .my-day-header-icon svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.my-day-header-controls .my-day-start { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.my-day-header-controls .my-day-ai-plan { border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); color: var(--color-primary); }
.my-day-header-controls .my-day-defer { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); color: var(--color-primary); }
.my-day-header-controls button:disabled { opacity: 0.42; cursor: default; }
.my-day-header-controls .my-day-plan-controls button:first-child { color: var(--color-primary); }
.my-day-header-controls .my-day-plan-controls button:last-child { color: var(--color-danger); }


/* src/styles/myDayPlanDialog.css */
.my-day-plan-dialog {
  width: min(32rem, calc(100vw - 2 * var(--workspace-page-gutter)));
  max-height: calc(100dvh - 2 * var(--workspace-page-gutter));
  padding: var(--space-20);
  overflow: auto;
  border: var(--workspace-panel-border);
  border-radius: var(--workspace-panel-radius);
  background: var(--workspace-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-modal);
}
.my-day-plan-dialog::backdrop { background: var(--color-backdrop); }
.my-day-plan-dialog h2 { margin: 0 0 0.5rem; }
.my-day-plan-dialog p { color: var(--color-text-secondary); }
.my-day-plan-preview { display: grid; gap: 0.5rem; max-height: 40dvh; padding-left: 1.5rem; overflow: auto; }
.my-day-plan-preview li { padding: 0.4rem; }
.my-day-plan-preview strong,
.my-day-plan-preview span { display: block; }
.my-day-plan-preview span { color: var(--color-text-secondary); }
.my-day-plan-preview .my-day-plan-order-controls { display: flex; gap: var(--space-4); margin-top: var(--space-4); }
.my-day-plan-order-controls .button { min-width: 2.75rem; min-height: 2.75rem; padding: 0; }
.my-day-plan-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.my-day-plan-dialog-actions .button { min-height: 2.75rem; }
.my-day-plan-dialog-actions .button-danger { color: var(--color-danger); }


/* src/styles/myDayWorkspace.css */
.my-day-mobile-switcher { display: none; }

.my-day-surface-frame {
  position: relative;
  min-width: 0;
  min-height: 20rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.my-day-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 20rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--color-surface-muted) 45%, var(--color-surface));
  cursor: grab;
  scrollbar-gutter: stable;
  touch-action: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.my-day-surface.panning { cursor: grabbing; user-select: none; }
.my-day-surface-canvas {
  position: relative;
  width: max(100%, 48rem);
  min-height: max(100%, 64rem);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-text-tertiary) 22%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  zoom: var(--my-day-surface-zoom, 1);
}
.my-day-surface-navigation {
  position: absolute;
  z-index: 12;
  top: var(--space-8);
  right: var(--space-8);
  display: flex;
  width: max-content;
  height: 2rem;
  min-height: 2rem;
  gap: var(--space-4);
}
.my-day-surface-navigation button {
  display: inline-grid;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-body);
  font-weight: var(--font-weight-strong);
  backdrop-filter: blur(0.5rem);
}
.my-day-surface-navigation .my-day-zoom-value {
  width: auto;
  min-width: 3.4rem;
  padding-inline: var(--space-8);
  font-size: var(--text-caption);
}
.my-day-surface-navigation button:is(:hover, :focus-visible) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
@media (pointer: coarse) {
  .my-day-surface-navigation {
    height: 2.75rem;
    min-height: 2.75rem;
  }
  .my-day-surface-navigation button {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
}
.my-day-surface.drag-over { border-color: var(--color-primary); background-color: var(--color-primary-soft); }
.my-day-surface.focus-active .my-day-surface-canvas { background-image: none; }

.my-day-surface-empty {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  gap: 0.35rem;
  width: min(20rem, 80%);
  padding: 1.4rem;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  text-align: center;
  transform: translate(-50%, -50%);
}

.my-day-board-card {
  position: absolute;
  top: var(--my-day-card-top, 0);
  left: var(--my-day-card-left, 0);
  z-index: 1;
  width: clamp(15rem, 28%, 22rem);
  min-height: 6.25rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 0.65rem 1.6rem color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  cursor: grab;
  touch-action: none;
  transition: box-shadow 140ms ease, border-color 140ms ease;
  user-select: none;
}
.my-day-board-card:nth-of-type(3n + 1) { transform: rotate(-1.2deg); }
.my-day-board-card:nth-of-type(3n + 2) { transform: rotate(0.8deg); }
.my-day-board-card:nth-of-type(3n) { transform: rotate(-0.35deg); }
.my-day-board-card:hover,
.my-day-board-card.selected { z-index: 3; border-color: var(--color-primary); }
.my-day-board-card.dragging,
.my-day-board-card.dragging:nth-of-type(n) {
  z-index: 10;
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--color-primary) 22%, transparent);
  cursor: grabbing;
  transform: translate3d(var(--my-day-drag-x, 0), var(--my-day-drag-y, 0), 0);
  transition: none;
  will-change: transform;
}
.my-day-board-card.focus-card,
.my-day-board-card.focus-card:nth-of-type(n) {
  width: min(38rem, calc(100% - 3rem));
  min-height: 15rem;
  cursor: default;
  transform: translate(-50%, -50%);
}
.my-day-board-card.next { border: 2px solid var(--color-primary); }
.my-day-board-card.done { opacity: 0.68; }
.my-day-board-card.done strong { text-decoration: line-through; }
.my-day-board-card.blocked { border-style: dashed; }
.my-day-blocked-status { width: max-content; padding: 0.18rem 0.45rem; border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.7rem; }

.my-day-next-badge { position: absolute; top: -1.55rem; left: 0; padding: 0.35rem 0.75rem; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--color-primary); color: white; font-size: 0.74rem; }
.my-day-order { position: absolute; top: 0.6rem; right: 0.75rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-secondary); font-size: 0.72rem; }
.my-day-remove { position: absolute; right: 2.55rem; top: 0.55rem; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; opacity: 0; }
.my-day-board-card:hover .my-day-remove,
.my-day-board-card:focus-within .my-day-remove { opacity: 1; }
.my-day-board-card-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; align-items: start; padding-top: 0.55rem; }
.my-day-board-card-content .my-day-card-copy { width: 100%; }
.my-day-checkbox { width: 1.35rem; height: 1.35rem; border-radius: var(--radius-xs); }
.my-day-empty { padding: 1rem; color: var(--color-text-secondary); text-align: center; }

.my-day-active #home-overview,
.my-day-active #home-tag-quick-filters,
.my-day-active #empty-state,
.my-day-active .task-workspace-header,
.my-day-active #mobile-card-count,
.my-day-active #mobile-active-selection { display: none !important; }

@media (max-width: 60rem) {
  .my-day-view { grid-template-columns: 1fr; }
}

@container (max-width: 44rem) {
  .my-day-view { grid-template-columns: 1fr; }
  .my-day-workspace {
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .my-day-workspace > header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
    padding-inline: var(--space-8);
  }
  .my-day-title-block h2 { white-space: nowrap; }
  .my-day-progress,
  .my-day-title-block .workspace-copy { display: none; }
  .my-day-header-controls {
    width: auto;
    justify-content: flex-end;
  }
  .my-day-view.focus-active .my-day-title-block { display: none; }
  .my-day-view.focus-active .my-day-workspace > header { grid-template-columns: minmax(0, 1fr); }
  .my-day-focus-controls { flex: 1 1 auto; justify-content: flex-end; }
  .my-day-board-card.focus-card,
  .my-day-board-card.focus-card:nth-of-type(n) {
    width: calc(100% - 2rem);
    min-height: 11rem;
  }
  .my-day-board-card .my-day-card-copy strong,
  .my-day-board-card .my-day-breadcrumb {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@container (max-width: 36rem) {
  .my-day-header-controls {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .my-day-header-controls::-webkit-scrollbar { display: none; }
}

@container (max-width: 30rem) {
  .my-day-title-block { display: none; }
  .my-day-workspace > header { grid-template-columns: minmax(0, 1fr); }
  .my-day-header-controls { justify-self: end; }
}

@media (max-width: 52rem) {
  .app-shell[data-active-view="myday"] .my-day-view.workspace-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .app-shell[data-active-view="myday"] .my-day-view .my-day-layout {
    grid-row: 3;
    display: block;
    overflow: hidden;
  }
  .my-day-mobile-switcher {
    display: grid;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-6) var(--workspace-panel-padding);
    border-bottom: 1px solid var(--color-border);
    background: var(--workspace-header-background);
  }
  .my-day-mobile-switcher button {
    display: flex;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding-inline: var(--space-8);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
  }
  .my-day-mobile-switcher button.active {
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--font-weight-strong);
  }
  .my-day-mobile-switcher button small {
    color: inherit;
    font-size: var(--text-caption);
  }
  .my-day-view { gap: 0; padding: 0; }
  .my-day-view:not(.mobile-pool-open) .my-day-pool,
  .my-day-view.mobile-pool-open .my-day-workspace { display: none; }
  .my-day-view.mobile-pool-open .my-day-pool {
    display: grid;
    height: 100%;
    max-height: none;
  }
  .my-day-pool,
  .my-day-workspace {
    height: 100%;
    padding: var(--space-6);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .my-day-workspace > header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .my-day-progress { display: none; }
  .my-day-header-controls {
    width: auto;
    max-width: 100%;
    align-items: center;
    justify-content: flex-end;
    overflow-x: auto;
  }
  .my-day-surface-frame,
  .my-day-surface {
    min-height: 0;
    height: 100%;
  }
  .my-day-surface {
    overflow-x: hidden;
    overflow-y: auto;
    cursor: default;
    touch-action: pan-y;
    scrollbar-gutter: auto;
  }
  .my-day-surface-canvas {
    display: grid;
    width: 100%;
    min-height: 100%;
    align-content: start;
    gap: var(--space-10);
    padding: var(--space-10);
    background-image: none;
  }
  .my-day-surface-navigation { display: none; }
  .my-day-surface-empty {
    position: static;
    width: 100%;
    margin-block: var(--space-16);
    transform: none;
  }
  .my-day-board-card,
  .my-day-board-card:nth-of-type(n),
  .my-day-board-card.focus-card,
  .my-day-board-card.focus-card:nth-of-type(n) {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 0;
    transform: none;
    cursor: pointer;
    touch-action: pan-y;
  }
  .my-day-next-badge {
    position: static;
    display: inline-flex;
    width: fit-content;
    margin: -0.45rem 0 var(--space-4);
    border-radius: var(--radius-full);
  }
  .my-day-remove { opacity: 1; }
}

.my-day-view.focus-active .my-day-workspace { position: relative; }
.my-day-view.focus-active .my-day-workspace > header { padding-right: 3.5rem !important; }
.my-day-header-controls .my-day-focus-close {
  position: absolute;
  z-index: 8;
  top: 1rem;
  right: 1rem;
  display: inline-grid;
  width: 2.35rem;
  min-width: 2.35rem;
  height: 2.35rem;
  min-height: 2.35rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
  font-size: 1.35rem;
  line-height: 1;
  opacity: 1;
  visibility: visible;
}

.my-day-header-controls .my-day-focus-close:hover,
.my-day-header-controls .my-day-focus-close:focus-visible {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
  color: var(--color-danger);
}

.my-day-header-controls .my-day-focus-close svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.my-day-board-scope {
  display: inline-flex;
  width: fit-content;
  margin: 0 var(--workspace-content-inset, var(--space-16)) var(--space-8);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
}

.my-day-board-scope button {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}

.my-day-board-scope button.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.my-day-board-scope button:disabled {
  opacity: 0.45;
  cursor: default;
}


/* src/styles/tasksCommandToolbar.css */
/* Five-row desktop workspace: navigation, status/statistics, tags, tools,
   then the narrow quick-create action. Mobile keeps its panel-based layout. */
@media (min-width: 37.5rem) {
  .app-frame { --task-top-stack-height: 19rem; }

  .workspace > section[data-screen="tasks"]:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .workspace > section[data-screen="tasks"] > .task-workspace-header,
  :root:not(.has-unified-search) .workspace > section[data-screen="tasks"] > .mobile-workspace-controls,
  .workspace > section[data-screen="tasks"] > .mobile-card-count,
  .workspace > section[data-screen="tasks"] > .mobile-active-selection {
    display: none !important;
  }

  .workspace > section[data-screen="tasks"] > .home-overview,
  .workspace > section[data-screen="tasks"] > .home-tag-quick-filters,
  .workspace > section[data-screen="tasks"] > .c2-toolbar { flex: 0 0 auto; }
  .workspace > section[data-screen="tasks"] > .task-work-area { flex: 1 1 0; }

  .sidebar {
    grid-template-columns: 9.5rem minmax(7rem, 10rem) minmax(0, 1fr) minmax(9rem, 12rem) auto auto;
    grid-template-rows: 3.6rem;
    gap: var(--space-6);
    padding-right: var(--space-10);
    white-space: nowrap;
  }

  .brand,
  .sidebar-board-section,
  .header-view-nav,
  .sidebar-nav,
  .session-card {
    grid-column: auto;
    grid-row: auto;
  }

  .brand { align-self: stretch; border-right: 1px solid var(--color-border); }
  .sidebar-board-section { order: 2; }
  .header-view-nav { order: 3; }
  .sidebar-nav { order: 4; justify-self: auto; }

  .header-view-nav {
    justify-content: center;
    overflow: hidden;
  }

  .header-view-nav .view-button {
    min-width: 0;
    padding-inline: clamp(0.3rem, 0.7vw, 0.8rem);
  }

  :root:not(.has-unified-search) .mobile-workspace-controls { display: none !important; }

  .home-overview.execution-status-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(22rem, 0.85fr);
    gap: var(--space-12);
    height: 8.25rem;
    padding: var(--space-12) var(--space-20);
    background: var(--color-surface);
  }

  .execution-status-layout .home-summary-counters {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .execution-status-layout .home-summary-counter {
    grid-template-rows: 1.4rem auto auto;
    gap: var(--space-4);
    min-height: 0;
    padding: var(--space-8) var(--space-4);
    place-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: 0 1px 3px var(--shadow-ink-04);
  }

  .execution-status-layout .home-summary-counter.active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
    box-shadow: inset 0 -2px 0 var(--color-primary);
  }

  .home-summary-icon {
    display: grid;
    color: var(--color-primary);
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    align-self: center;
    justify-self: center;
    margin-inline: auto;
    font-style: normal;
    line-height: 1;
  }

  .home-summary-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .home-summary-counter.success .home-summary-icon { color: var(--color-success); }
  .home-summary-counter.danger .home-summary-icon { color: var(--color-danger); }

  .execution-status-layout .home-summary-counter span {
    overflow: visible;
    font-size: 0.7rem;
    text-overflow: clip;
  }

  .execution-status-layout .home-summary-counter strong {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
  }

  .execution-status-layout .home-daily-summary {
    display: block;
    border-radius: var(--radius-sm);
  }

  .execution-status-layout .home-progress-card {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: var(--space-12);
    height: 100%;
    padding: var(--space-12) var(--space-16);
    border-right: 0;
  }

  .execution-status-layout .home-progress-ring {
    width: 3.6rem;
    height: 3.6rem;
  }

  .execution-status-layout .home-progress-copy { gap: var(--space-6); }
  .execution-status-layout .home-progress-copy > strong { font-size: 0.78rem; }
  .execution-status-layout .home-progress-copy > span { font-size: 0.64rem; }

  .execution-status-layout .home-progress-activity {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .execution-status-layout .home-progress-activity button {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.58rem;
    text-align: center;
  }

  .execution-status-layout .home-progress-activity button:hover,
  .execution-status-layout .home-progress-activity button.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .execution-status-layout .home-progress-activity button b {
    color: var(--color-text-primary);
    font-size: 0.82rem;
  }

  .execution-status-layout .home-progress-activity button i {
    display: inline;
    height: auto;
    margin: 0;
    overflow: visible;
    background: transparent;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-style: normal;
  }

  .execution-status-layout .home-progress-activity button b {
    display: inline;
    height: auto;
    background: transparent;
  }

  .execution-status-layout .home-progress-activity button span { grid-column: 1 / -1; }

  .home-tag-quick-filters,
  .home-tag-quick-filters.expanded {
    grid-template-columns: auto minmax(8rem, 14rem) minmax(0, 1fr) auto;
    align-items: center;
    min-height: 3.15rem;
    padding: var(--space-6) var(--space-20);
    border-top: 0;
    background: var(--color-surface);
    box-shadow: none;
    overflow: hidden;
  }

  .home-tag-quick-filters .tag-filter-label {
    color: var(--color-text-primary);
    font-size: 0.85rem;
  }

  .home-tag-quick-filters .tag-filter-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    height: 1.85rem;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
  }

  .home-tag-quick-filters .tag-filter-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.7rem;
  }

  .home-tag-quick-filters .tag-filter-chips,
  .home-tag-quick-filters.expanded .tag-filter-chips {
    flex-wrap: nowrap;
    max-height: none;
    padding: 0;
    overflow: hidden;
  }

  /* Outline, not fill — chips read as loose tags, one visual step below the
     segmented control's own solid "Rinne", so the hierarchy between the two
     rows (control vs. markers) stays unambiguous. */
  .home-tag-quick-filters .tag-filter-chip {
    min-height: 1.5rem;
    padding: 0.1875rem 0.5625rem;
    border-color: var(--color-border);
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
  }

  .home-tag-quick-filters .tag-filter-chip span {
    min-width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-secondary);
  }

  .home-tag-quick-filters .tag-filter-chip.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  .home-tag-quick-filters .tag-filter-chip.active span { background: transparent; color: inherit; }
  .home-tag-quick-filters .tag-filter-chip-remove {
    display: inline;
    min-width: 0;
    height: auto;
    margin-left: 0.1rem;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 0.62rem;
    opacity: 0.85;
  }
  .home-tag-quick-filters .tag-filter-expand { color: var(--color-text-primary); }

  .c2-toolbar {
    display: grid;
    grid-template-areas: "primary" "quick-create";
    gap: var(--space-4);
    padding: var(--space-8) var(--space-20) var(--space-6);
    background: var(--color-surface);
  }

  .c2-toolbar .toolbar-primary {
    display: flex;
    flex-wrap: nowrap;
    min-height: 3rem;
    gap: var(--space-8);
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .c2-toolbar .toolbar-control-group-find {
    flex: 1 1 auto;
    gap: var(--space-8);
  }

  .c2-toolbar .toolbar-control-group {
    display: flex;
    min-width: 0;
  }

  .c2-toolbar .task-search {
    flex: 1 1 24rem;
    max-width: none;
  }

  .c2-toolbar .task-search-control,
  .c2-toolbar .project-filter,
  .c2-toolbar .sort-menu-control,
  .c2-toolbar .done-switch-label,
  .c2-toolbar .toolbar-select-shell,
  .c2-toolbar .dependency-finder-toggle {
    min-height: 2.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  .c2-toolbar .task-search-control { padding-inline: var(--space-12); }
  .c2-toolbar .project-control { flex: 0 1 15rem; min-width: 10rem; }
  .c2-toolbar .task-sort { flex: 0 1 12rem; min-width: 8rem; }

  .c2-toolbar .project-control,
  .c2-toolbar .task-sort,
  .c2-toolbar .done-column-field,
  .c2-toolbar .overview-columns-field,
  .c2-toolbar .overview-card-size-field {
    margin-left: 0;
    padding-left: 0;
  }

  .c2-toolbar .project-control::before,
  .c2-toolbar .task-sort::before,
  .c2-toolbar .done-column-field::before,
  .c2-toolbar .overview-columns-field::before,
  .c2-toolbar .overview-card-size-field::before { display: none; }

  .c2-toolbar .toolbar-control-group-status,
  .c2-toolbar .toolbar-control-group-view {
    gap: var(--space-8);
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .c2-toolbar .blocked-tasks-field,
  .c2-toolbar .toolbar-result-count,
  .c2-toolbar .task-search-control kbd,
  .c2-toolbar .c2-done-count { display: none !important; }

  /* The result count is otherwise redundant clutter next to the card list,
     but while searching it's the only place the "N Aufgaben, M Wissen" line
     and the click-to-close affordance can live. */
  .c2-toolbar.search-active .toolbar-result-count { display: inline-flex !important; }

  .c2-toolbar .done-column-field { min-width: auto; }
  .c2-toolbar .done-switch-label { gap: 0; padding: 0 var(--space-8); }

  .c2-toolbar .done-column-toggle {
    width: 2.35rem;
    min-width: 2.35rem;
    height: 1.18rem;
    min-height: 1.18rem;
    border-radius: var(--radius-full);
  }

  .c2-toolbar .done-column-toggle::before { display: block; }
  .c2-toolbar .done-switch-state { display: none; white-space: nowrap; }

  .c2-toolbar .toolbar-control-group-view .dependency-finder-toggle { order: 1; }
  .c2-toolbar .toolbar-control-group-view .overview-columns-field { order: 2; }
  .c2-toolbar .toolbar-control-group-view .overview-card-size-field { order: 3; }

  .c2-toolbar .dependency-finder-toggle {
    display: inline-grid;
    width: 2.45rem;
    min-width: 2.45rem;
    padding: 0;
    place-items: center;
  }

  .c2-toolbar .dependency-finder-toggle .toolbar-action-name { display: none !important; }

  .c2-toolbar .toolbar-action-name {
    color: var(--color-text-primary);
    font-size: 0.72rem;
    font-weight: var(--font-weight-strong);
    white-space: nowrap;
  }

  .c2-toolbar .dependency-finder-toggle[aria-pressed="false"] .toolbar-action-name { display: none; }

  .c2-toolbar .toolbar-select-shell {
    position: relative;
    display: inline-flex;
    min-width: 2.45rem;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-10);
  }

  .c2-toolbar .overview-columns-field .toolbar-action-value {
    display: inline;
    min-width: 1.7rem;
    color: var(--color-text-primary);
    font-size: 0.72rem;
    font-weight: var(--font-weight-strong);
    text-align: center;
  }

  .c2-toolbar .overview-card-size-field { min-width: auto; }
  .c2-toolbar .overview-card-size-field .toolbar-select-shell {
    width: 2.45rem;
    padding: 0;
    justify-content: center;
  }

  .c2-toolbar .toolbar-select-shell select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .overview-quick-create-host {
    width: min(18rem, 100%);
  }

  .overview-quick-create-host .quick-create-form .column-add-trigger {
    min-height: 1.85rem;
    padding-inline: var(--space-4);
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}


/* src/styles/searchContextControls.css */
.search-scope-toggle,
.search-tag-suggestion {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}

.search-context-row {
  grid-area: search-context;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

#task-toolbar.search-active {
  grid-template-areas:
    "primary"
    "search-context"
    "quick-create";
}

.search-context-row > .toolbar-result-count-search {
  margin: 0;
}

.search-scope-toggle[aria-pressed="true"],
.search-tag-suggestion.active {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.search-scope-toggle:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: default;
}

.search-tag-suggestions {
  display: flex;
  min-width: 0;
  gap: var(--space-4);
  overflow-x: auto;
}

.search-tag-suggestions[hidden],
.search-scope-toggle[hidden] {
  display: none;
}


/* src/styles/tasksCommandResponsive.css */
@media (min-width: 37.5rem) and (max-width: 72rem) {
  .app-frame {
    --task-top-stack-height: 15.7rem;
    grid-template-rows: 3rem minmax(0, 1fr);
  }

  .sidebar {
    grid-template-columns: 6.75rem 6.75rem minmax(0, 1fr) auto auto;
    gap: var(--space-2);
    padding-inline: var(--space-6);
    grid-template-rows: 3rem;
  }

  .today-progress { display: none; }

  .brand { padding-left: var(--space-4); }
  .brand small { display: none; }
  .header-view-nav { gap: 0; }
  .header-view-nav .view-button { padding-inline: 0.28rem; font-size: 0.62rem; }
  .sidebar-nav { gap: var(--space-2); padding-left: var(--space-2); }
  .sidebar-nav .nav-button,
  .session-card button { width: 1.8rem; min-width: 1.8rem; min-height: 1.8rem; }

  .home-overview:not(.execution-status-layout) {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.75fr);
    gap: var(--space-6);
    height: 6.25rem;
    padding: var(--space-6) var(--space-10);
    overflow: hidden;
  }

  .home-overview:not(.execution-status-layout) .home-daily-summary {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .home-overview:not(.execution-status-layout) .home-progress-card {
    grid-template-columns: 2.4rem;
    justify-content: center;
    padding: var(--space-4);
  }

  .home-overview:not(.execution-status-layout) .home-progress-ring {
    width: 2.4rem;
    height: 2.4rem;
  }

  .home-overview:not(.execution-status-layout) .home-progress-copy { display: none; }
  .home-overview:not(.execution-status-layout) .home-summary-counters { gap: 0; }
  .home-overview:not(.execution-status-layout) .home-summary-counter {
    grid-template-rows: 1rem auto auto;
    gap: 0.12rem;
    padding: var(--space-2);
  }
  .home-overview:not(.execution-status-layout) .home-summary-icon { width: 1rem; height: 1rem; }
  .home-overview:not(.execution-status-layout) .home-summary-counter span { font-size: 0.54rem; }
  .home-overview:not(.execution-status-layout) .home-summary-counter strong { font-size: 0.68rem; }
  .home-overview:not(.execution-status-layout) .home-insight-card { padding: var(--space-6) var(--space-8); }
  .home-overview:not(.execution-status-layout) .home-insight-card p { font-size: 0.56rem; }

  .home-overview.execution-status-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.8fr);
    height: 6.25rem;
    padding-inline: var(--space-10);
  }

  .execution-status-layout .home-summary-counter {
    grid-template-rows: 1.15rem auto auto;
    gap: 0.15rem;
    padding: var(--space-4) var(--space-2);
  }
  .execution-status-layout .home-summary-icon { width: 1.1rem; height: 1.1rem; }
  .execution-status-layout .home-summary-counter span { font-size: 0.6rem; }
  .execution-status-layout .home-summary-counter strong { font-size: 0.68rem; }
  .execution-status-layout .home-progress-card {
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6) var(--space-8);
  }
  .execution-status-layout .home-progress-ring { width: 2.8rem; height: 2.8rem; }
  .execution-status-layout .home-progress-copy > strong,
  .execution-status-layout .home-progress-copy > span,
  .execution-status-layout .home-progress-copy > i { display: none; }
  .execution-status-layout .home-progress-copy { align-content: center; }
  .execution-status-layout .home-progress-activity { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .execution-status-layout .home-progress-activity button {
    display: grid;
    grid-template-columns: auto auto;
    place-content: center;
    gap: 0.12rem;
    padding: 0;
  }
  .execution-status-layout .home-progress-activity button i { font-size: 0.62rem; }
  .execution-status-layout .home-progress-activity button b { font-size: 0.65rem; }
  .execution-status-layout .home-progress-activity button span { display: none; }

  .home-tag-quick-filters,
  .home-tag-quick-filters.expanded {
    grid-template-columns: auto minmax(6rem, 9rem) minmax(0, 1fr) auto;
    min-height: 2.55rem;
    padding-block: var(--space-4);
  }
  .home-tag-quick-filters .tag-filter-search { height: 1.65rem; }
  .home-tag-quick-filters .tag-filter-chip { min-height: 1.65rem; padding-block: 0; }

  .c2-toolbar { padding: var(--space-4) var(--space-10); }
  .c2-toolbar .toolbar-primary { gap: var(--space-4); }
  .c2-toolbar .toolbar-control-group-find,
  .c2-toolbar .toolbar-control-group-status,
  .c2-toolbar .toolbar-control-group-view { gap: var(--space-4); }
  .c2-toolbar .task-search { flex: 1 1 11rem; min-width: 8rem; }
  .c2-toolbar .project-control { flex: 0 1 10rem; min-width: 7.5rem; }
  .c2-toolbar .task-sort { flex: 0 1 7.5rem; min-width: 6rem; }
  .c2-toolbar .done-switch-label,
  .c2-toolbar .dependency-finder-toggle,
  .c2-toolbar .toolbar-select-shell { padding-inline: var(--space-6); }
  .execution-status-layout .home-progress-activity button { padding-inline: 0; font-size: 0.5rem; }
  .c2-toolbar .toolbar-action-name { display: none; }
  .c2-toolbar .dependency-finder-toggle[aria-pressed="true"] .toolbar-action-name,
  .c2-toolbar .done-column-toggle[aria-pressed="true"] ~ .done-switch-state { display: none; }
  .overview-quick-create-host .quick-create-form .column-add-trigger { min-height: 1.45rem; }
}

/* Strong, unambiguous active states for the compact Tasks toolbar. */
.c2-toolbar .done-column-toggle[aria-pressed="true"] {
  border-color: var(--color-success);
  background: var(--color-success);
  box-shadow: 0 0.22rem 0.6rem color-mix(in srgb, var(--color-success) 24%, transparent);
}

.c2-toolbar .done-column-toggle[aria-pressed="true"]::after {
  color: color-mix(in srgb, var(--color-success) 78%, var(--color-success));
}

.c2-toolbar .dependency-finder-toggle.active,
.c2-toolbar .dependency-finder-toggle[aria-pressed="true"] {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

.c2-toolbar .dependency-finder-toggle[aria-pressed="true"] .sidebar-toggle-outline,
.c2-toolbar .dependency-finder-toggle[aria-pressed="true"] .sidebar-toggle-left-lines {
  stroke: var(--color-primary);
}

.c2-toolbar .dependency-finder-toggle[aria-pressed="true"] .sidebar-toggle-panel {
  fill: var(--color-primary);
  stroke: var(--color-primary);
}

.c2-toolbar .dependency-finder-toggle[aria-pressed="true"] .sidebar-toggle-panel-mark {
  fill: var(--color-on-primary);
}

.c2-toolbar .dependency-finder-toggle[aria-pressed="true"] .sidebar-toggle-panel-lines {
  stroke: var(--color-on-primary);
}

.c2-toolbar .dependency-finder-toggle[aria-pressed="false"] {
  border-color: color-mix(in srgb, var(--color-text-secondary) 14%, var(--color-border));
  background: color-mix(in srgb, var(--color-text-secondary) 5%, var(--color-surface));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 5%, transparent);
}

.c2-toolbar .dependency-finder-toggle[aria-pressed="false"] .sidebar-toggle-outline,
.c2-toolbar .dependency-finder-toggle[aria-pressed="false"] .sidebar-toggle-left-lines {
  stroke: var(--color-text-secondary);
}

.c2-toolbar .dependency-finder-toggle[aria-pressed="false"] .sidebar-toggle-panel {
  fill: var(--color-text-secondary);
  stroke: var(--color-text-secondary);
}

/* The Tags chevron opens a full-width row below the compact tag strip. */
.home-tag-quick-filters.expanded {
  align-items: start;
  overflow: visible;
}

.home-tag-quick-filters.expanded .tag-filter-label,
.home-tag-quick-filters.expanded .tag-filter-search,
.home-tag-quick-filters.expanded .tag-filter-actions {
  grid-row: 1;
}

.home-tag-quick-filters.expanded .tag-filter-label { grid-column: 1; }
.home-tag-quick-filters.expanded .tag-filter-search { grid-column: 2; }
.home-tag-quick-filters.expanded .tag-filter-actions { grid-column: 4; }

.home-tag-quick-filters.expanded .tag-filter-chips {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-height: none;
  overflow: visible;
  padding: var(--space-6) 0 var(--space-2);
}

/* Keep the closed quick-create trigger narrow, but give its editor the whole
   toolbar row so title, project, planning and submit controls cannot overlap. */
.overview-quick-create-host:has(.quick-create-form.editing) {
  width: 100%;
  max-width: none;
}

.overview-quick-create-host .quick-create-form.editing {
  grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr);
  width: 100%;
}

.overview-quick-create-host .quick-create-form.editing .quick-create-controls {
  grid-template-columns: minmax(8rem, 0.75fr) minmax(16rem, 1.4fr) auto;
  min-width: 0;
}

@media (max-width: 37.4375rem) {
  .overview-quick-create-host .quick-create-form.editing,
  .overview-quick-create-host .quick-create-form.editing .quick-create-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A slim, text-weight row rather than a solid button — the primary action
   still reads as clearly interactive (blue text) without competing with the
   cards below for visual weight. */
.overview-quick-create-host .quick-create-form:not(.editing) .column-add-trigger {
  width: 100%;
  min-height: 1.6rem;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
}

.overview-quick-create-host .quick-create-form:not(.editing) .column-add-trigger:hover,
.overview-quick-create-host .quick-create-form:not(.editing) .column-add-trigger:focus-visible {
  color: var(--color-primary-pressed);
  background: transparent;
  outline: var(--focus-ring);
}

/* Focus mode is an escape-sensitive state: its close control is always
   painted and remains above the header hit area before the first click. */
.hierarchy-focus-header .child-task-focus-back {
  position: relative;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

/* Compact Tasks command row: current status, tags, icon-only daily progress. */
.task-command-row { display: contents; }


/* src/styles/sharedHeaderDesktop.css */
@media (min-width: 37.5rem) {
  .app-shell[data-active-view="tasks"] .app-frame { --task-top-stack-height: 11rem; }

  .app-shell[data-active-view="tasks"] .workspace > section[data-screen="tasks"] > .task-command-row {
    position: relative;
    z-index: 12;
    display: flex;
    flex-direction: column;
    row-gap: var(--space-8);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  /* Status segments + search/settings/right-column icons share one row,
     with search able to overlay the segments when it expands (below). */
  .app-shell[data-active-view="tasks"] .task-command-primary {
    position: relative;
    /* Higher than .home-tag-quick-filters's own stacking context (z-index: 3,
       app.css) — otherwise its settings/sort popovers paint underneath the
       tag row below and silently eat clicks meant for the popover. */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-8);
    min-width: 0;
    padding-right: var(--space-10);
  }

  .app-shell[data-active-view="tasks"] .task-command-primary > .home-overview.execution-status-layout { display: contents; }

  /* Status segments stay flush-left at their natural width instead of
     stretching to fill the row — search/settings/right-column (below) keep
     the row's other end, per explicit user request. */
  .app-shell[data-active-view="tasks"] .task-command-primary .home-summary-counters {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    min-width: 0;
    padding: 0.125rem;
    gap: 0;
    border-radius: var(--radius-sm);
    /* Explicit hex, not --color-surface-muted (var(--color-bg)) — that token reads as
       near-white against the page background, which was the actual problem
       ("die Rinne ist jetzt sichtbar grau — das war der fehlende Punkt"). */
    background: var(--color-border);
    overflow: visible;
  }

  :root[data-theme="dark"] .app-shell[data-active-view="tasks"] .task-command-primary .home-summary-counters {
    background: var(--color-surface-muted);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .app-shell[data-active-view="tasks"] .task-command-primary .home-summary-counters {
      background: var(--color-surface-muted);
    }
  }

  .app-shell[data-active-view="tasks"] .task-command-tools.c2-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0;
    border: 0;
    background: transparent;
    z-index: 1;
    margin-left: auto;
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter {
    flex: 0 0 auto;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-height: 0;
    padding: 7px 13px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
    box-shadow: none;
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter:hover {
    color: var(--color-text-primary);
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter.active {
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-strong);
    box-shadow: 0 2px 5px var(--shadow-ink-16);
  }

  /* "Wissen" [· "Ungeplant"] sit on the same axis (which cards do I see) but
     aren't a time range, so a hairline sets them apart from Heute/Morgen/
     Woche/Erledigt/Alle instead of blending into one undifferentiated row. */
  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter.divider-before {
    margin-left: var(--space-6);
    padding-left: calc(var(--space-8) + var(--space-6));
    border-left: 0;
    position: relative;
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter.divider-before::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1.2rem;
    background: var(--color-border);
    transform: translateY(-50%);
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter .home-summary-icon {
    display: none;
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter span,
  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter strong {
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter small { display: none; }

  .app-shell[data-active-view="tasks"] .home-summary-overflow {
    position: relative;
    flex: 0 0 auto;
  }

  .app-shell[data-active-view="tasks"] .home-summary-overflow > summary {
    display: flex;
    min-width: 3.5rem;
    height: 100%;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: 0 var(--space-8);
    border-radius: 0;
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
  }

  .app-shell[data-active-view="tasks"] .home-summary-overflow-count {
    display: grid;
    min-width: 1.05rem;
    height: 1.05rem;
    place-items: center;
    padding: 0 0.25rem;
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: 0.62rem;
  }

  .app-shell[data-active-view="tasks"] .home-summary-overflow > summary::-webkit-details-marker { display: none; }
  .app-shell[data-active-view="tasks"] .home-summary-overflow > summary:hover { color: var(--color-text-primary); }
  .app-shell[data-active-view="tasks"] .home-summary-overflow.active > summary,
  .app-shell[data-active-view="tasks"] .home-summary-overflow[open] > summary {
    color: var(--color-primary);
  }

  .app-shell[data-active-view="tasks"] .home-summary-overflow[open] .home-summary-overflow-count {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .app-shell[data-active-view="tasks"] .home-summary-overflow-menu {
    position: absolute;
    top: calc(100% + var(--space-6));
    right: 0;
    z-index: 40;
    display: grid;
    min-width: 9.5rem;
    padding: var(--space-5);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }

  .app-shell[data-active-view="tasks"] .home-summary-overflow:not([open]) > .home-summary-overflow-menu {
    display: none;
  }

  .app-shell[data-active-view="tasks"] .home-summary-overflow-item {
    display: flex;
    min-height: 2.1rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding: 0 var(--space-10);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    cursor: pointer;
  }

  .app-shell[data-active-view="tasks"] .home-summary-overflow-item:hover,
  .app-shell[data-active-view="tasks"] .home-summary-overflow-item.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .app-shell[data-active-view="tasks"] .task-command-row > .home-tag-quick-filters {
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    padding: 0 var(--space-8) var(--space-6);
    border: 0;
    box-shadow: none;
  }

  /* Tasks deliberately hides the tag label/search. In the generic expanded
     layout those absent controls still reserve a first grid row, leaving a
     blank line above the chips. Keep chips and the collapse button together
     in the first row here. */
  .app-shell[data-active-view="tasks"] .task-command-row > .home-tag-quick-filters.expanded {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .app-shell[data-active-view="tasks"] .home-tag-quick-filters.expanded .tag-filter-chips {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
  }

  .app-shell[data-active-view="tasks"] .home-tag-quick-filters.expanded .tag-filter-actions {
    grid-column: 2;
    grid-row: 1;
  }

  /* The whole daily-summary card (percentage ring + activity badges) is
     superseded in the Tasks view by the header's #today-progress widget,
     which now carries both the day-progress bar and the activity badges
     together as one "today" bar — not duplicated down here. */
  .app-shell[data-active-view="tasks"] .task-command-row > .home-daily-summary,
  .app-shell[data-active-view="tasks"] .task-command-row .home-overview > .home-daily-summary {
    display: none;
  }

  .app-shell[data-active-view="tasks"] .c2-toolbar .project-control { display: none !important; }
  .app-shell[data-active-view="tasks"] .c2-toolbar .toolbar-control-group-find { flex: 0 0 auto; }

  /* Search, settings and the right-column toggle all moved up into the
     status row (#task-command-tools, above); #task-toolbar's own row now
     has nothing left in it for the Tasks view — .toolbar-primary only ever
     held those three plus a project filter that's already hidden here, and
     .toolbar-secondary's nav is unconditionally empty in every view — so
     collapsing them stops it from rendering as a large blank strip. The
     toolbar element itself stays (not display:none) so #creation-focus-filter
     and #overview-quick-create-host, its other direct children, keep working
     when they have real content. */
  .app-shell[data-active-view="tasks"] #task-toolbar {
    padding-top: 0;
    padding-bottom: 0;
  }
  .app-shell[data-active-view="tasks"] #task-toolbar > .toolbar-primary,
  .app-shell[data-active-view="tasks"] #task-toolbar > .toolbar-secondary {
    display: none;
  }

  /* Collapsed to an icon by default, sitting with settings/right-column at
     the far right of the status row — "Suchzeile nimmt noch eine volle
     Zeile ein" / "Icon neben dem Zahnrad" per UI_SPEC_KOPFBEREICH_KARTEN.md.
     Expanding (click, focus, or Strg+K) makes the field itself lay over the
     status segments — not just grow in place — while settings/right-column
     stay put and reachable, per explicit user correction of an earlier pass
     that only expanded inline within the icon cluster. */
  .app-shell[data-active-view="tasks"] .task-command-tools .task-search {
    flex: 0 0 auto;
    width: 2.35rem;
    min-width: 0;
    max-width: 2.35rem;
    overflow: hidden;
    transition: max-width var(--duration-base) var(--ease-standard);
  }
  .app-shell[data-active-view="tasks"] .task-command-tools .task-search-control kbd {
    flex: none;
  }

  .app-shell[data-active-view="tasks"] .task-command-primary:has(.task-search:focus-within) .home-summary-counters,
  .app-shell[data-active-view="tasks"] .task-command-primary:has(.task-command-tools.search-open) .home-summary-counters,
  .app-shell[data-active-view="tasks"] .task-command-primary:has(.task-command-tools.search-active) .home-summary-counters {
    display: none;
  }

  /* Global search replaces both contextual filter rows: neither the time
     segments nor the tag filters constrain its results. The tag state stays
     in memory and returns unchanged when search closes. */
  .app-shell[data-active-view="tasks"] .task-command-row:has(.task-search:focus-within) > .home-tag-quick-filters,
  .app-shell[data-active-view="tasks"] .task-command-row:has(.task-command-tools.search-open) > .home-tag-quick-filters,
  .app-shell[data-active-view="tasks"] .task-command-row:has(.task-command-tools.search-active) > .home-tag-quick-filters {
    display: none !important;
  }

  .app-shell[data-active-view="tasks"] .task-command-primary:has(.task-search:focus-within) .task-command-tools,
  .app-shell[data-active-view="tasks"] .task-command-tools.search-open,
  .app-shell[data-active-view="tasks"] .task-command-tools.search-active {
    flex: 1 1 auto;
    margin-left: 0;
  }

  .app-shell[data-active-view="tasks"] .task-command-primary:has(.task-search:focus-within) .task-search,
  .app-shell[data-active-view="tasks"] .task-command-tools.search-open .task-search,
  .app-shell[data-active-view="tasks"] .task-command-tools.search-active .task-search {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    overflow: visible;
  }

  .task-view-options { position: relative; flex: 0 0 auto; }
  .task-view-options > summary {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    list-style: none;
  }
  .task-view-options > summary svg { width: 1.15rem; height: 1.15rem; }
  .task-view-options > summary::-webkit-details-marker { display: none; }
  .task-view-options > summary:hover { background: var(--color-surface-muted); }
  .task-view-options[open] > summary,
  .task-view-options.has-active-settings > summary {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  .task-view-options-popover {
    position: absolute;
    top: calc(100% + var(--space-4));
    right: 0;
    z-index: 50;
    display: grid;
    width: 16rem;
    padding: var(--space-4) var(--space-10);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
  }
  /* .done-column-field / .overview-columns-field / .overview-card-size-field
     carry grid-area, justify-self and min-width rules meant for their other
     home in the old .toolbar-primary grid (app.css) — those class names are
     reused here for the popover's own fields, and without resetting them
     every row fought over two ad-hoc grid-area "views" columns instead of
     stacking as a plain list, with Kartengröße and the Erledigt switch
     pushed past the popover's right edge. */
  .task-view-options-popover .toolbar-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    grid-area: auto;
    width: 100%;
    min-width: 0;
    min-height: 2.6rem;
    justify-self: stretch;
    align-self: auto;
    border-bottom: 1px solid var(--color-border);
  }
  .task-view-options-popover .toolbar-field:last-child {
    border-bottom: 0;
  }
  .task-view-options-popover .toolbar-action-value {
    display: inline;
    color: var(--color-text-primary);
  }
  .task-view-options-popover .control-label {
    display: block;
    position: static;
    flex: none;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--color-text-primary);
    font-size: var(--text-body);
    font-weight: var(--font-weight-regular);
  }
  .task-view-options-popover .done-switch-label,
  .task-view-options-popover .toolbar-select-shell,
  .task-view-options-popover .sort-menu-control {
    flex: none;
    width: auto;
  }
  .task-view-options-popover .toolbar-select-shell {
    border: 0;
    background: transparent;
  }
  /* .overview-card-size-field .toolbar-select-shell has its own icon-only
     width:2.45rem rule (tasks.css, meant for a cramped icon-only toolbar
     state) that also matches here since the popover reuses .c2-toolbar for
     its descendant styling — too narrow for the "Kompakt"/"Minimal" value
     text this popover always shows, pushing the row's content (and the
     select's native dropdown, anchored to that cramped box) past the
     popover's edge. */
  .task-view-options-popover .overview-card-size-field .toolbar-select-shell {
    width: auto;
    padding: 0 var(--space-10);
    justify-content: flex-start;
  }
  .task-view-options-popover .sort-menu-trigger {
    border: 0;
    background: transparent;
  }
}


/* src/styles/dependencyWorkspaceHeader.css */
/* Use the approved two-row application header in every full workspace.
   "Mein Tag" intentionally keeps its reduced focus header. */
@media (min-width: 48rem) {
  .app-shell:not([data-active-view="myday"]) .sidebar {
    grid-template-columns: 3.5rem minmax(10rem, 10.75rem) minmax(18rem, 1fr) 6.3rem auto;
    grid-template-rows: 5rem 3rem;
    column-gap: 1rem;
    min-height: 8rem;
    padding: 0 4.3rem 0 3rem;
  }

  .app-shell:not([data-active-view="myday"]) .brand {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    padding: 0;
    border: 0;
  }

  .app-shell:not([data-active-view="myday"]) .brand > span:last-child { display: none; }
  .app-shell:not([data-active-view="myday"]) .brand-mark {
    width: 3.3rem;
    height: 3.3rem;
    background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
  }

  .app-shell:not([data-active-view="myday"]) .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
  }

  .app-shell:not([data-active-view="myday"]) .sidebar .board-menu-trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem;
    min-height: 3.25rem;
    padding: 0 0.5rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .app-shell:not([data-active-view="myday"]) .sidebar .board-menu-trigger:hover {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
  }

  .app-shell:not([data-active-view="myday"]) .sidebar .board-menu-trigger strong { font-size: 1.3rem; }
  .app-shell:not([data-active-view="myday"]) .sidebar .board-menu-count { display: none; }
  .app-shell:not([data-active-view="myday"]) .sidebar .board-menu-trigger small { border-left: 0; }

  .app-shell:not([data-active-view="myday"]) .today-progress {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    gap: 1rem;
    width: 100%;
    padding-inline: 1.75rem;
  }

  .app-shell:not([data-active-view="myday"]) .today-progress-label,
  .app-shell:not([data-active-view="myday"]) .today-progress-count { font-size: 1.1rem; }
  .app-shell:not([data-active-view="myday"]) .today-progress-bar {
    flex: 1 1 55rem;
    max-width: 55rem;
    height: 0.45rem;
    background: var(--color-border);
  }
  .app-shell:not([data-active-view="myday"]) .today-progress-count { margin-left: auto; }

  .app-shell:not([data-active-view="myday"]) .sidebar-nav {
    grid-column: 4;
    grid-row: 1;
    width: 6.3rem;
    justify-content: center;
    padding-left: 1.25rem;
  }

  .app-shell:not([data-active-view="myday"]) .sidebar-nav .history-button { display: none; }
  .app-shell:not([data-active-view="myday"]) .sidebar-nav .notification-button,
  .app-shell:not([data-active-view="myday"]) .session-card button {
    width: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-shell:not([data-active-view="myday"]) .sidebar-nav .notification-button {
    position: relative;
    left: -1.1rem;
  }

  .app-shell:not([data-active-view="myday"]) .session-card {
    grid-column: 5;
    grid-row: 1;
  }
  .app-shell:not([data-active-view="myday"]) .session-card .account-menu-button { background: var(--color-surface-muted); }

  .app-shell:not([data-active-view="myday"]) .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 4.65rem;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    justify-self: stretch;
    border-top: 0;
    left: 0;
  }

  .app-shell:not([data-active-view="myday"]) .header-view-nav .view-button,
  .app-shell:not([data-active-view="myday"]) .view-overflow-trigger {
    padding-inline: 0.65rem;
    font-size: 1.22rem;
    font-weight: var(--font-weight-regular);
  }
  .app-shell:not([data-active-view="myday"]) .view-overflow-trigger { background: transparent; }
  .app-shell:not([data-active-view="myday"]) .header-view-nav .view-button.active { color: var(--color-text-primary); }
  .app-shell:not([data-active-view="myday"]) .view-button-wissen {
    position: relative;
    margin-left: 0.5rem;
    padding-left: 1.75rem;
    border-left: 0;
  }
  .app-shell:not([data-active-view="myday"]) .view-button-wissen::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1.2rem;
    background: var(--color-border);
    transform: translateY(-50%);
  }
}

@media (min-width: 48rem) and (max-width: 95rem) {
  .app-shell:not([data-active-view="myday"]) .sidebar {
    grid-template-columns: 3.5rem minmax(9rem, 10rem) minmax(12rem, 1fr) 4.5rem auto;
    column-gap: 0.6rem;
    padding-inline: 1.5rem;
  }
  .app-shell:not([data-active-view="myday"]) .today-progress {
    gap: 1rem;
    padding-inline: 0.75rem;
  }
  .app-shell:not([data-active-view="myday"]) .sidebar-nav {
    width: 4.5rem;
    padding-left: 0.5rem;
  }
  .app-shell:not([data-active-view="myday"]) .sidebar-nav .notification-button { left: -0.35rem; }
  .app-shell:not([data-active-view="myday"]) .header-view-nav { gap: clamp(1.6rem, 4vw, 3.5rem); }
}

/* Dependency workspace: calculated left-to-right stages and editing matrix. */
.dependency-workspace-toolbar {
  position: relative;
  flex-wrap: nowrap;
  overflow: visible;
  box-shadow: none;
}

.dependency-workspace-hint {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-workspace-overlay-hint {
  position: absolute;
  z-index: 14;
  top: var(--space-10);
  left: var(--space-10);
  max-width: min(26rem, calc(100% - 2 * var(--space-10)));
  padding: var(--space-6) var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: var(--shadow-subtle, 0 1px 2px var(--shadow-ink-08));
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.25;
  pointer-events: none;
}

.dependency-project-only {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.dependency-project-only input { accent-color: var(--color-primary); }

.dependency-view-options {
  position: relative;
  flex: 0 0 auto;
}

.dependency-view-options > summary {
  display: grid;
  width: var(--space-32);
  min-height: var(--space-32);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
  place-items: center;
}

.dependency-view-options > summary::-webkit-details-marker { display: none; }
.dependency-view-options[open] > summary { border-color: var(--color-primary); color: var(--color-primary); }

.dependency-view-options > div {
  position: absolute;
  z-index: 25;
  top: calc(100% + var(--space-6));
  right: 0;
  display: grid;
  min-width: 13rem;
  gap: var(--space-10);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-floating, 0 8px 24px var(--shadow-ink-15));
}

.dependency-workspace-toolbar .dependency-graph-finder-toggle {
  margin-left: auto;
}

.dependency-stage-workspace,
.dependency-matrix-viewport,
.dependency-grouped-list {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--color-surface);
  overscroll-behavior: contain;
}

.dependency-stage-workspace {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.dependency-stage-viewport {
  min-width: 0;
  min-height: 18rem;
  overflow: auto;
  background-color: var(--color-surface);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-border) 58%, transparent) 1px, transparent 1.1px);
  background-size: 1.5rem 1.5rem;
  cursor: default;
  overscroll-behavior: contain;
  touch-action: none;
}

.dependency-stage-viewport.panning { cursor: grabbing; user-select: none; }
.dependency-stage-viewport.pinching { cursor: zoom-in; user-select: none; }

.dependency-stage-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.dependency-stage-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.dependency-stage-layout {
  position: absolute;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vh, 4.5rem);
  width: 100%;
  min-width: 100%;
  min-height: 20rem;
  padding: var(--space-16) var(--space-20) var(--space-24);
  isolation: isolate;
}

.dependency-stage-layout.show-hierarchy-notice::after {
  position: absolute;
  z-index: 12;
  top: var(--space-8);
  left: 50%;
  max-width: 20rem;
  padding: var(--space-6) var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-hierarchy-strong) 35%, var(--color-border));
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-floating, 0 8px 24px var(--shadow-ink-15));
  color: var(--color-hierarchy-strong);
  content: attr(data-hierarchy-notice);
  font-size: var(--text-caption);
  text-align: center;
  transform: translateX(-50%);
}

.dependency-stage-navigation {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--space-32);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.dependency-stage-navigation button,
.dependency-stage-navigation span {
  display: grid;
  min-width: 2rem;
  min-height: var(--space-32);
  place-items: center;
  padding: 0 var(--space-8);
  border: 0;
  border-left: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
}
.dependency-stage-navigation button:first-child { border-left: 0; }
.dependency-stage-navigation span { min-width: 3.25rem; }

.dependency-stage-column {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: var(--space-8);
  min-width: 0;
}

.dependency-stage-column > h3,
.dependency-grouped-list h3 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dependency-stage-column > h3 {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.dependency-stage-column > h3 i {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.dependency-stage-card-list {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: var(--space-8);
}

.dependency-stage-node.dependency-graph-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.18rem 0.45rem;
  flex: 0 1 12rem;
  width: min(100%, 12rem);
  max-width: 12rem;
  min-height: 4rem;
  padding: 0.55rem 0.65rem;
  box-shadow: none;
  cursor: default;
}

.dependency-stage-node .dependency-stage-ready-dot {
  grid-row: 1;
  align-self: start;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-success);
  margin-top: 0.28rem;
}

.dependency-stage-node .dependency-graph-card-title {
  display: -webkit-box;
  grid-column: 2;
  min-width: 0;
  min-height: 1.95rem;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dependency-stage-node > .board-context-badge {
  grid-column: 2;
  justify-self: start;
}

.dependency-stage-node > small {
  grid-column: 2;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size: 0.68rem;
}

.dependency-stage-node-path {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dependency-stage-node-path.external::before {
  color: var(--color-primary);
  content: "Extern · ";
  font-weight: var(--font-weight-strong);
}

.dependency-stage-node-progress {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.75rem auto;
  gap: 0.3rem;
  align-items: center;
  color: var(--color-hierarchy-strong);
  font-size: 0.62rem;
}

.dependency-stage-node-progress[hidden] { display: none; }
.dependency-stage-node-progress > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dependency-stage-node-progress-track { height: 0.22rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-surface-muted); }
.dependency-stage-node-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--color-success); }
.dependency-stage-node-progress small { color: var(--color-text-tertiary, var(--color-text-secondary)); font-size: 0.6rem; }

.dependency-stage-node.focused {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.dependency-stage-node.dependency-drop-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.dependency-stage-node.dependency-drop-invalid {
  opacity: 0.42;
  cursor: not-allowed;
}

.dependency-stage-node.dependency-hierarchy-drop-active {
  border-color: var(--color-hierarchy-strong);
  background: color-mix(in srgb, var(--color-hierarchy-strong) 10%, var(--color-surface));
  box-shadow: inset 0 0 0 1px var(--color-hierarchy-strong);
}


/* src/styles/dependencyWorkspaceCanvas.css */
.dependency-stage-node.dependency-hierarchy-drop-active::after,
.dependency-stage-node.dependency-drop-invalid[data-hierarchy-drop-hint]::after {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: calc(100% + 0.3rem);
  max-width: 13rem;
  padding: 0.25rem 0.45rem;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  box-shadow: var(--shadow-floating, 0 8px 24px var(--shadow-ink-15));
  color: var(--color-hierarchy-strong);
  content: attr(data-hierarchy-drop-hint);
  font-size: 0.62rem;
  white-space: nowrap;
}

.dependency-stage-port {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-surface);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.dependency-stage-port.input {
  top: -0.45rem;
  left: 50%;
  transform: translateX(-50%);
}
.dependency-stage-port.output {
  top: auto;
  right: auto;
  bottom: -0.45rem;
  left: 50%;
  cursor: grab;
  touch-action: none;
  transform: translateX(-50%);
}

.dependency-stage-node:hover .dependency-stage-port,
.dependency-stage-node:focus-within .dependency-stage-port,
.dependency-drag-active .dependency-stage-port {
  opacity: 1;
}

.dependency-stage-port.output:hover,
.dependency-stage-port.output:focus-visible {
  background: var(--color-primary);
  outline: 0;
}

@media (pointer: coarse) {
  .dependency-stage-port.output {
    width: 2.75rem;
    height: 2.75rem;
    right: auto;
    bottom: -1.35rem;
    border-color: transparent;
    background: radial-gradient(circle, var(--color-surface) 0 12%, var(--color-primary) 13% 18%, transparent 19%);
    opacity: 1;
  }
}

.dependency-stage-edges {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: auto;
}

.dependency-stage-edge {
  fill: none;
  stroke: var(--color-border-strong, var(--color-text-tertiary));
  stroke-width: 1.6;
  pointer-events: stroke;
  cursor: pointer;
}

.dependency-arrange-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
}

.dependency-arrange-intro,
.dependency-arrange-confirm {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface-subtle, var(--color-surface));
}

.dependency-arrange-intro { border-bottom: 1px solid var(--color-border); }
.dependency-arrange-intro > div { display: grid; gap: var(--space-2); min-width: 0; }
.dependency-arrange-intro span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.dependency-arrange-intro button { margin-left: auto; }

.dependency-arrange-board {
  display: grid;
  gap: 0;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  padding: var(--space-16);
}

.dependency-arrange-stage + .dependency-arrange-new-stage-dropzone,
.dependency-arrange-new-stage-dropzone + .dependency-arrange-stage {
  margin-top: var(--space-7);
}

.dependency-arrange-stage { position: relative; display: grid; gap: var(--space-6); min-width: 0; }
.dependency-arrange-stage.stage-drop-before::before,
.dependency-arrange-stage.stage-drop-after::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);
  content: "";
}
.dependency-arrange-stage.stage-drop-before::before { top: calc(var(--space-8) * -1); }
.dependency-arrange-stage.stage-drop-after::after { bottom: calc(var(--space-8) * -1); }
.dependency-arrange-stage.stage-dragging { opacity: .48; }
.dependency-arrange-stage > header { display: flex; gap: var(--space-8); align-items: center; }
.dependency-arrange-stage-handle { color: var(--color-text-tertiary, var(--color-text-secondary)); cursor: grab; touch-action: none; }
.dependency-arrange-stage > header > strong { color: var(--color-text-secondary); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .04em; }
.dependency-arrange-stage > header small { color: var(--color-text-tertiary, var(--color-text-secondary)); }
.dependency-arrange-stage > header button { min-height: 1.7rem; margin-left: auto; border: 0; background: transparent; color: var(--color-primary); font-size: var(--text-caption); }
.dependency-arrange-stage-actions { display: flex; gap: var(--space-2); align-items: center; }
.dependency-arrange-stage-actions button { display: grid; place-items: center; min-width: 1.9rem; margin-left: 0 !important; border-radius: var(--radius-sm); }
.dependency-arrange-stage-actions button:hover:not(:disabled) { background: var(--color-primary-soft); }
.dependency-arrange-stage-actions button:disabled { opacity: .32; }
.dependency-arrange-stage-actions .dependency-arrange-stage-remove { color: var(--color-danger, var(--color-danger)); }
.dependency-arrange-stage-line { flex: 1; height: 1px; background: var(--color-border); }
.dependency-arrange-dropzone {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  min-height: 4.2rem;
  min-width: 0;
  padding: var(--space-10);
  border: 1.5px dashed var(--color-border-strong, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle, var(--color-surface));
}
.dependency-arrange-stage.drop-active .dependency-arrange-dropzone {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.dependency-arrange-stage.unassigned { margin-top: var(--space-8); }
.dependency-arrange-card {
  display: flex;
  flex: 1 1 12rem;
  gap: var(--space-8);
  align-items: stretch;
  max-width: 18rem;
  min-width: 0;
  min-height: 3rem;
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: grab;
  touch-action: none;
}
.dependency-arrange-card.dragging { opacity: .5; box-shadow: var(--shadow-floating); }
.dependency-arrange-card-marker { width: 3px; border-radius: var(--radius-pill); background: var(--task-project-accent, var(--color-primary)); }
.dependency-arrange-card strong { align-self: center; font-size: var(--text-body-small); }
.dependency-arrange-empty { align-self: center; color: var(--color-text-tertiary, var(--color-text-secondary)); font-size: var(--text-caption); }
.dependency-arrange-confirm { border-top: 1px solid var(--color-border); box-shadow: 0 -4px 14px var(--shadow-ink-06); }
.dependency-arrange-confirm-copy { display: grid; flex: 1; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-caption); }
.dependency-arrange-blocked-reason { color: var(--color-danger); font-weight: var(--font-weight-strong); }
.dependency-arrange-confirm button { border: 0; background: transparent; color: var(--color-text-secondary); }
.dependency-arrange-confirm button.primary { color: var(--color-primary); font-weight: var(--font-weight-strong); }
.dependency-arrange-confirm button:disabled { opacity: .45; }

@container (max-width: 60rem) {
  .dependency-workspace-toolbar {
    flex-wrap: wrap;
  }

  .dependency-workspace-toolbar > * {
    flex: 0 0 auto;
  }

  .dependency-workspace-toolbar .dependency-graph-finder-toggle {
    margin-left: 0;
  }

  .dependency-arrange-intro,
  .dependency-arrange-confirm,
  .dependency-arrange-stage > header {
    flex-wrap: wrap;
  }

  .dependency-arrange-intro > div {
    flex: 1 1 14rem;
  }

  .dependency-arrange-intro span,
  .dependency-arrange-confirm-copy,
  .dependency-arrange-card strong {
    overflow-wrap: anywhere;
  }

  .dependency-arrange-confirm-copy {
    flex: 1 1 100%;
  }

  .dependency-arrange-intro button,
  .dependency-arrange-confirm button,
  .dependency-arrange-stage > header button {
    flex: 0 0 auto;
  }

  .dependency-arrange-card {
    flex: 1 1 min(12rem, 100%);
    max-width: 100%;
  }
}

.dependency-stage-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  pointer-events: stroke;
  cursor: pointer;
}

.dependency-stage-edge.critical { stroke: var(--color-warning-strong); stroke-width: 1.9; }
.dependency-stage-edge.hierarchy { stroke: var(--color-hierarchy); }
.dependency-stage-edge.focus-connection { stroke: var(--color-primary); stroke-width: 2.4; }
.dependency-stage-edge-bundle {
  fill: none;
  stroke: var(--color-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  pointer-events: none;
}
.dependency-stage-edge-bundle.hierarchy { stroke: color-mix(in srgb, var(--color-primary) 70%, var(--color-hierarchy)); }
.dependency-stage-edge.bundled { stroke-width: 1.7; }
.dependency-stage-edge.selected { stroke: var(--color-danger); stroke-width: 2.5; }
.dependency-stage-transition {
  fill: none;
  stroke: var(--color-border-strong, var(--color-text-tertiary));
  stroke-linecap: round;
  stroke-width: 1.5;
  pointer-events: none;
}
.dependency-stage-transition.hierarchy { stroke: var(--color-hierarchy); }
.dependency-stage-transition-label {
  fill: var(--color-text-tertiary, var(--color-text-secondary));
  font-size: .62rem;
  pointer-events: none;
}
.dependency-stage-edge-remove { opacity: 0; pointer-events: none; cursor: pointer; }
.dependency-stage-edge-remove.visible { opacity: 1; pointer-events: auto; }
.dependency-stage-edge-remove circle { fill: var(--color-surface); stroke: var(--color-danger); stroke-width: 1.6; }
.dependency-stage-edge-remove path { fill: none; stroke: var(--color-danger); stroke-linecap: round; stroke-width: 1.8; }

.dependency-critical-path {
  display: grid;
  gap: var(--space-8);
  margin: 0 var(--space-20) var(--space-16);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.dependency-external-summary {
  width: calc(100% - 2 * var(--space-20));
  min-height: 2.35rem;
  margin: 0 var(--space-20) var(--space-12);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
}

.dependency-critical-path > span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.dependency-critical-path > div { display: flex; align-items: center; gap: var(--space-6); overflow-x: auto; }
.dependency-critical-path i { color: var(--color-warning-strong); font-style: normal; }
.dependency-critical-path button {
  flex: 0 0 auto;
  min-height: 1.9rem;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
}

.dependency-matrix-viewport { padding: var(--space-16); }
.dependency-matrix { border-collapse: collapse; font-size: var(--text-caption); }
.dependency-matrix th { font-weight: var(--font-weight-regular); }
.dependency-matrix > tr:first-child > th:not(.dependency-matrix-corner) { width: 2rem; height: 8.75rem; vertical-align: bottom; }
.dependency-matrix > tr:first-child > th > span {
  display: block;
  max-height: 8.2rem;
  overflow: hidden;
  color: var(--color-text-secondary);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.dependency-matrix-corner { min-width: 11.5rem; padding: 0 var(--space-10) var(--space-6) 0; color: var(--color-text-tertiary, var(--color-text-secondary)); font-size: 0.65rem; text-align: left; text-transform: uppercase; }
.dependency-matrix tr > th:first-child:not(.dependency-matrix-corner) {
  max-width: 12rem;
  height: 2rem;
  overflow: hidden;
  padding-right: var(--space-10);
  border-left: 3px solid var(--task-project-accent, var(--color-primary));
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dependency-matrix td { width: 2rem; height: 2rem; border: 1px solid var(--color-border); text-align: center; }
.dependency-matrix td.diagonal { background: var(--color-surface-muted); }
.dependency-matrix td.invalid:not(.diagonal) { background: color-mix(in srgb, var(--color-surface-muted) 55%, transparent); }
.dependency-matrix-toggle {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.dependency-matrix-toggle.active::after {
  display: inline-block;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: var(--color-primary);
  content: "";
}
.dependency-matrix-toggle.hierarchy.active::after { background: var(--color-hierarchy); }
.dependency-matrix td.hierarchy { background: color-mix(in srgb, var(--color-hierarchy) 18%, var(--color-surface)); }
.dependency-matrix-toggle:disabled { cursor: not-allowed; }
.dependency-matrix-toggle:not(:disabled):hover { background: var(--color-primary-soft); }

.dependency-grouped-list { display: grid; align-content: start; gap: var(--space-20); padding: var(--space-16); }
.dependency-grouped-list section { display: grid; gap: var(--space-6); }
.dependency-grouped-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.4fr) auto;
  gap: var(--space-12);
  align-items: center;
  min-height: 2.65rem;
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
}
.dependency-grouped-row.selected { border-color: var(--color-primary); }
.dependency-grouped-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
}
.dependency-grouped-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dependency-grouped-row span,
.dependency-grouped-row small { overflow: hidden; color: var(--color-text-secondary); text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 47.99rem) {
  .dependency-workspace-toolbar { align-items: stretch; flex-wrap: wrap; overflow: visible; }
  .dependency-workspace-hint { display: none; }
  .dependency-workspace-toolbar .dependency-graph-finder-toggle { margin-left: 0; }
  .dependency-focus-layout { grid-template-columns: minmax(0, 1fr); }
  .dependency-focus-layout:not(.details-collapsed):not(.arranging) > .dependency-focus-details {
    position: absolute;
    z-index: 18;
    inset: 0 0 0 auto;
    width: min(18rem, 100%);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-floating, -8px 0 24px var(--shadow-ink-12));
  }
  .dependency-stage-layout { min-width: 100%; padding: var(--space-12); }
  .dependency-grouped-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dependency-grouped-row span { grid-column: 1 / -1; grid-row: 2; }
}

/* Dedicated calendar workspace: scheduling overview, not a task-card grid. */
.task-list.calendar-list {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}

.task-list.calendar-list > .bulk-toolbar { display: none; }

.calendar-view {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.calendar-navigation,
.calendar-toolbar-actions,
.calendar-mode-switch,
.calendar-search {
  display: flex;
  align-items: center;
}

.calendar-navigation { gap: 0.25rem; }
.calendar-navigation h2 {
  min-width: 11rem;
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: var(--font-weight-strong);
  text-align: center;
}

.calendar-toolbar-actions { gap: 0.35rem; margin-left: auto; }
.calendar-icon-button,
.calendar-settings > summary {
  display: inline-grid;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.calendar-icon-button:hover,
.calendar-settings > summary:hover { background: var(--color-surface-muted); color: var(--color-primary); }
.calendar-icon-button svg,
.calendar-settings svg,
.calendar-search svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* src/styles/calendarSharedHeader.css */
.calendar-today-button,
.calendar-workweek-toggle,
.calendar-mode-switch button {
  min-height: 2.15rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
}
.calendar-today-button { margin-left: 0.35rem; border-radius: var(--radius-sm); }
.calendar-workweek-toggle { border-radius: var(--radius-sm); white-space: nowrap; }
.calendar-workweek-toggle[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }
.calendar-mode-switch button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.calendar-mode-switch button:last-child { margin-left: -1px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.calendar-mode-switch button[aria-pressed="true"] { position: relative; border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }

.calendar-search {
  display: none;
  width: min(18rem, 34vw);
  height: 2.25rem;
  gap: 0.35rem;
  padding-inline: 0.6rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.calendar-toolbar.search-open .calendar-search { display: flex; }
.calendar-toolbar.search-open .calendar-search-button { display: none; }
.calendar-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font: inherit; }
.calendar-search input::-webkit-search-cancel-button { display: none; }
.calendar-search-close { width: 1.65rem; height: 1.65rem; padding: 0; border: 0; background: transparent; color: var(--color-text-secondary); font-size: 1.15rem; cursor: pointer; }

.calendar-settings { position: relative; }
.calendar-settings > summary { list-style: none; }
.calendar-settings > summary::-webkit-details-marker { display: none; }
.calendar-settings-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  gap: 0.65rem;
  width: min(22rem, 80vw);
  padding: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.calendar-settings-popover > label { display: flex; align-items: center; font-size: 0.86rem; }
.calendar-settings-popover > strong { color: var(--color-text-secondary); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.calendar-settings-popover > .calendar-capacity-summary { margin-top: -0.4rem; color: var(--color-text-secondary); font-size: 0.72rem; white-space: nowrap; }
.calendar-settings-popover .planning-tag-strip { flex-wrap: wrap; max-height: 9rem; overflow: auto; }

.calendar-workspace-body {
  display: grid;
  grid-template-columns: 11.875rem minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.calendar-view.no-overdue .calendar-workspace-body { grid-template-columns: minmax(0, 1fr); }
.calendar-overdue {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  min-height: 0;
  padding: 0.65rem;
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-muted) 62%, white);
}
.calendar-overdue > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.35rem; min-height: 1.8rem; color: var(--color-danger); font-size: 0.82rem; }
.calendar-overdue > header b { display: inline-grid; min-width: 1.35rem; min-height: 1.35rem; place-items: center; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-danger) 12%, white); font-size: 0.72rem; }
.calendar-overdue-more { justify-self: start; padding: 0.35rem 0; border: 0; background: transparent; color: var(--color-primary); font-size: 0.76rem; cursor: pointer; }

.calendar-grid-shell { min-width: 0; min-height: 0; overflow: auto; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(var(--calendar-workday-count, 7), minmax(7.25rem, 1fr));
  gap: 0;
  min-width: calc(var(--calendar-workday-count, 7) * 7.25rem);
  min-height: 100%;
  background: var(--color-border);
}
.calendar-weekday {
  display: grid;
  min-height: 1.9rem;
  place-items: center;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: var(--font-weight-strong);
  text-align: center;
}
.calendar-day {
  display: grid;
  grid-template-rows: auto repeat(3, auto) auto 1fr auto;
  align-content: start;
  gap: 0.3rem;
  min-height: 7.9rem;
  padding: 0.4rem;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background 120ms, box-shadow 120ms;
}
.calendar-mode-fortnight .calendar-day { min-height: min(34vh, 17rem); }
.calendar-day.outside { color: var(--color-text-tertiary); background: color-mix(in srgb, var(--color-surface-muted) 72%, white); }
.calendar-day.weekend { background: color-mix(in srgb, var(--color-surface-muted) 42%, white); }
.calendar-day.today { background: var(--color-primary-soft); box-shadow: inset 0 3px 0 var(--color-primary); }
.calendar-day.drop-target { background: color-mix(in srgb, var(--color-primary-soft) 78%, white); box-shadow: inset 0 0 0 2px var(--color-primary); }
.calendar-day-header { display: grid; grid-template-columns: auto minmax(1.5rem, 1fr); align-items: center; gap: 0.35rem; min-height: 1.35rem; font-size: 0.74rem; }
.calendar-day-header > strong { color: var(--color-text-primary); }
.calendar-day-header > b { min-width: 1rem; color: var(--color-text-secondary); font-size: 0.68rem; text-align: right; }
.calendar-day-header > b.high { color: var(--color-warning-strong, var(--color-warning-deep)); }

.calendar-entry {
  position: relative;
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  min-height: 1.7rem;
  padding: 0.28rem 0.35rem 0.28rem 0.55rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--task-project-bg, var(--color-surface-muted));
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}
.calendar-entry::before { position: absolute; inset: 0 auto 0 0; width: 0.2rem; background: var(--task-project-accent, var(--color-primary)); content: ""; }
.calendar-entry strong,
.calendar-entry span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-entry strong { font-size: 0.72rem; font-weight: var(--font-weight-medium); }
.calendar-entry span { color: var(--color-text-secondary); font-size: 0.64rem; }
.calendar-entry .board-context-badge {
  min-height: 1rem;
  justify-self: start;
  padding-inline: 0.22rem;
  color: hsl(var(--board-context-hue, 215) 58% 34%);
  font-size: 0.58rem;
}
.calendar-entry.overdue { min-height: 2.7rem; padding-block: 0.38rem; background: var(--color-surface); box-shadow: 0 1px 4px var(--shadow-ink-07); }
.calendar-entry.overdue span { color: var(--color-danger); }
.calendar-entry.done { opacity: 0.58; }
.calendar-entry.done strong { text-decoration: line-through; }
.calendar-entry.selected { box-shadow: inset 0 0 0 1px var(--color-primary); }
.calendar-entry.dragging { opacity: 0.7; transform: rotate(1.5deg); box-shadow: var(--shadow-lg); }
.calendar-more,
.calendar-distribute,
.calendar-deadline { justify-self: start; min-height: 1.3rem; padding: 0 0.2rem; border: 0; background: transparent; font-size: 0.66rem; cursor: pointer; }
.calendar-more { color: var(--color-text-secondary); }
.calendar-distribute { color: var(--color-warning-strong, var(--color-primary)); font-weight: var(--font-weight-strong); }
.calendar-deadline { align-self: end; color: var(--color-danger); }
.calendar-deadline span { margin-right: 0.18rem; }

.calendar-day-header { cursor: pointer; }
.calendar-day-header:focus-visible { border-radius: var(--radius-xs); outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 68rem) {
  .calendar-toolbar { align-items: flex-start; }
  .calendar-navigation h2 { min-width: 8.5rem; }
  .calendar-workspace-body { grid-template-columns: 10rem minmax(0, 1fr); }
  .calendar-mode-switch { display: none; }
}

@media (max-width: 37.4375rem) {
  .task-list.calendar-list { overflow: visible; }
  .calendar-view { min-height: calc(100dvh - 9.5rem); overflow: visible; }
  .calendar-toolbar { position: sticky; z-index: 8; top: 0; flex-wrap: wrap; gap: 0.3rem; padding: 0.35rem 0.45rem; background: var(--color-surface); }
  .calendar-navigation { width: 100%; }
  .calendar-navigation h2 { min-width: 0; flex: 1; }
  .calendar-toolbar-actions { width: 100%; }
  .calendar-toolbar-actions .calendar-mode-switch { display: flex; }
  .calendar-search { width: 100%; }
  .calendar-toolbar.search-open .calendar-mode-switch { display: none; }
  .calendar-toolbar.search-open .calendar-workweek-toggle { display: none; }
  .calendar-workspace-body { display: block; overflow: visible; }
  .calendar-overdue { max-height: 11rem; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .calendar-grid-shell { overflow-x: auto; }
  .calendar-grid {
    grid-template-columns: repeat(var(--calendar-workday-count, 7), minmax(6.5rem, 1fr));
    min-width: calc(var(--calendar-workday-count, 7) * 6.5rem);
  }
  .calendar-day { min-height: 7rem; }
  .task-work-area:has(.dependency-finder.calendar-day-mode:not([hidden])) {
    position: relative;
    display: grid;
    overflow: hidden;
  }
  .task-work-area:has(.dependency-finder.calendar-day-mode:not([hidden])) .task-panel {
    display: block;
  }
  .dependency-finder.calendar-day-mode:not([hidden]) {
    position: absolute;
    z-index: 24;
    inset: auto 0 0;
    width: 100%;
    height: min(48dvh, 24rem);
    min-height: 0;
    padding: var(--space-10);
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--color-surface);
    box-shadow: 0 -0.55rem 2rem var(--shadow-ink-18);
  }
  .dependency-finder.calendar-day-mode .dependency-finder-details-view,
  .dependency-finder.calendar-day-mode .calendar-sidebar-day-list {
    overflow-y: auto;
  }
}

/* One shared desktop header template for every view. View-specific workspace
   content starts below this component and cannot change its geometry. */
@media (min-width: 48rem) {
  .app-shell .sidebar.shared-workspace-header {
    grid-template-columns: 3.5rem minmax(10rem, 10.75rem) minmax(18rem, 1fr) 6.3rem auto;
    grid-template-rows: 5rem 3rem;
    column-gap: 1rem;
    min-height: 8rem;
    padding: 0 4.3rem 0 3rem;
  }

  .app-shell .shared-workspace-header .brand {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    padding: 0;
    border: 0;
  }
  .app-shell .shared-workspace-header .brand > span:last-child { display: none; }
  .app-shell .shared-workspace-header .brand-mark {
    width: 3.3rem;
    height: 3.3rem;
    background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
  }

  .app-shell .shared-workspace-header .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
  }
  .app-shell .shared-workspace-header .board-menu-trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem;
    min-height: 3.25rem;
    padding: 0 0.5rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .app-shell .shared-workspace-header .board-menu-trigger:hover {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
  }
  .app-shell .shared-workspace-header .board-menu-trigger strong { font-size: 1.3rem; }
  .app-shell .shared-workspace-header .board-menu-count { display: none; }
  .app-shell .shared-workspace-header .board-menu-trigger small { border-left: 0; }

  .app-shell .shared-workspace-header .today-progress {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    gap: 1rem;
    width: 100%;
    padding-inline: 1.75rem;
  }
  .app-shell .shared-workspace-header .today-progress-label,
  .app-shell .shared-workspace-header .today-progress-count { font-size: 1.1rem; }
  .app-shell .shared-workspace-header .today-progress-bar {
    flex: 1 1 55rem;
    max-width: 55rem;
    height: 0.45rem;
    background: var(--color-border);
  }
  .app-shell .shared-workspace-header .today-progress-count { margin-left: auto; }

  .app-shell .shared-workspace-header .sidebar-nav {
    grid-column: 4;
    grid-row: 1;
    width: 6.3rem;
    justify-content: center;
    padding-left: 1.25rem;
  }
  .app-shell .shared-workspace-header .sidebar-nav .history-button { display: none; }
  .app-shell .shared-workspace-header .sidebar-nav .notification-button,
  .app-shell .shared-workspace-header .session-card button {
    width: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-shell .shared-workspace-header .sidebar-nav .notification-button {
    position: relative;
    left: -1.1rem;
  }
  .app-shell .shared-workspace-header .session-card {
    grid-column: 5;
    grid-row: 1;
  }
  .app-shell .shared-workspace-header .account-menu-button { background: var(--color-surface-muted); }

  .app-shell .shared-workspace-header .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 4.65rem;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    justify-self: stretch;
    border-top: 0;
    left: 0;
  }
  .app-shell .shared-workspace-header .header-view-nav .view-button,
  .app-shell .shared-workspace-header .view-overflow-trigger {
    padding-inline: 0.65rem;
    font-size: 1.22rem;
    font-weight: var(--font-weight-regular);
  }
  .app-shell .shared-workspace-header .header-view-nav > .view-button-rotating {
    flex: 0 0 10rem;
    width: 10rem;
  }
  .app-shell .shared-workspace-header .view-overflow-trigger { background: transparent; }
  .app-shell .shared-workspace-header .header-view-nav .view-button.active { color: var(--color-text-primary); }
  .app-shell .shared-workspace-header .view-button-wissen {
    position: relative;
    margin-left: 0.5rem;
    padding-left: 1.75rem;
    border-left: 0;
  }
  .app-shell .shared-workspace-header .view-button-wissen::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1.2rem;
    background: var(--color-border);
    transform: translateY(-50%);
  }

}

@media (min-width: 48rem) and (max-width: 95rem) {
  .app-shell .sidebar.shared-workspace-header {
    grid-template-columns: 3.5rem minmax(9rem, 10rem) minmax(12rem, 1fr) 4.5rem auto;
    column-gap: 0.6rem;
    padding-inline: 1.5rem;
  }
  .app-shell .shared-workspace-header .today-progress {
    gap: 1rem;
    padding-inline: 0.75rem;
  }
  .app-shell .shared-workspace-header .sidebar-nav {
    width: 4.5rem;
    padding-left: 0.5rem;
  }
  .app-shell .shared-workspace-header .sidebar-nav .notification-button { left: -0.35rem; }
  .app-shell .shared-workspace-header .header-view-nav { gap: clamp(1.6rem, 4vw, 3.5rem); }
}

@media (min-width: 48rem) and (max-width: 60rem) {
  .app-shell .shared-workspace-header .today-progress-activity button span { display: none; }
  .app-shell .shared-workspace-header .today-progress-activity button { padding-inline: 0.25rem; }
}

@media (min-width: 48rem) and (max-width: 60rem) {
  .app-shell:not([data-active-view="myday"]) .today-progress-activity button span { display: none; }
  .app-shell:not([data-active-view="myday"]) .today-progress-activity button { padding-inline: 0.25rem; }
}

/* Mein Tag keeps its reduced set of controls, but every control that remains
   visible occupies the exact same header grid, size and typographic scale as
   in the full workspaces. View changes must not make navigation or account
   actions jump. */
@media (min-width: 48rem) {
  .app-shell[data-active-view="myday"] .sidebar {
    grid-template-columns: 3.5rem minmax(10rem, 10.75rem) minmax(18rem, 1fr) 6.3rem auto;
    grid-template-rows: 5rem 3rem;
    column-gap: 1rem;
    min-height: 8rem;
    padding: 0 4.3rem 0 3rem;
  }

  .app-shell[data-active-view="myday"] .brand {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    padding: 0;
    border: 0;
  }
  .app-shell[data-active-view="myday"] .brand > span:last-child { display: none; }
  .app-shell[data-active-view="myday"] .brand-mark {
    width: 3.3rem;
    height: 3.3rem;
    background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
  }

  .app-shell[data-active-view="myday"] .sidebar-nav {
    grid-column: 4;
    grid-row: 1;
    width: 6.3rem;
    justify-content: center;
    padding-left: 1.25rem;
  }
  .app-shell[data-active-view="myday"] .sidebar-nav .history-button { display: none; }
  .app-shell[data-active-view="myday"] .sidebar-nav .notification-button,
  .app-shell[data-active-view="myday"] .session-card button {
    width: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-shell[data-active-view="myday"] .sidebar-nav .notification-button {
    position: relative;
    left: -1.1rem;
  }

  .app-shell[data-active-view="myday"] .session-card {
    grid-column: 5;
    grid-row: 1;
  }
  .app-shell[data-active-view="myday"] .session-card .account-menu-button { background: var(--color-surface-muted); }

  .app-shell[data-active-view="myday"] .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 4.65rem;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    justify-self: stretch;
    border-top: 0;
    left: 0;
  }
  .app-shell[data-active-view="myday"] .header-view-nav .view-button,
  .app-shell[data-active-view="myday"] .view-overflow-trigger {
    padding-inline: 0.65rem;
    font-size: 1.22rem;
    font-weight: var(--font-weight-regular);
  }
  .app-shell[data-active-view="myday"] .view-overflow-trigger { background: transparent; }
  .app-shell[data-active-view="myday"] .header-view-nav .view-button.active { color: var(--color-text-primary); }
  .app-shell[data-active-view="myday"] .view-button-wissen {
    position: relative;
    margin-left: 0.5rem;
    padding-left: 1.75rem;
    border-left: 0;
  }
  .app-shell[data-active-view="myday"] .view-button-wissen::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1.2rem;
    background: var(--color-border);
    transform: translateY(-50%);
  }
}

@media (min-width: 48rem) and (max-width: 95rem) {
  .app-shell[data-active-view="myday"] .sidebar {
    grid-template-columns: 3.5rem minmax(9rem, 10rem) minmax(12rem, 1fr) 4.5rem auto;
    column-gap: 0.6rem;
    padding-inline: 1.5rem;
  }
  .app-shell[data-active-view="myday"] .sidebar-nav {
    width: 4.5rem;
    padding-left: 0.5rem;
  }
  .app-shell[data-active-view="myday"] .sidebar-nav .notification-button { left: -0.35rem; }
  .app-shell[data-active-view="myday"] .header-view-nav { gap: clamp(1.6rem, 4vw, 3.5rem); }
}


/* src/styles/calendarAbsences.css */
.calendar-absence-create { width: 100%; }
.calendar-absence-list { display: grid; gap: var(--space-4); max-height: 8rem; overflow: auto; }
.calendar-absence-list > span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-8); color: var(--color-text-primary); font-size: var(--text-caption); }
.calendar-absence-list > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.calendar-absence-dialog {
  width: min(34rem, calc(100vw - (2 * var(--space-16))));
  max-height: calc(100dvh - (2 * var(--space-16)));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}
.calendar-absence-dialog::backdrop { background: var(--shadow-ink-18); backdrop-filter: blur(2px); }
.calendar-absence-dialog form { display: grid; gap: var(--space-16); padding: var(--space-20); }
.calendar-absence-dialog header,
.calendar-absence-dialog footer { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.calendar-absence-dialog h2 { margin: 0; font-size: var(--text-title); }
.calendar-absence-dialog header p { margin: var(--space-4) 0 0; color: var(--color-text-secondary); }
.calendar-absence-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.calendar-absence-fields > label:first-child { grid-column: 1 / -1; }
.calendar-absence-fields label { display: grid; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-caption); }
.calendar-absence-dialog fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); padding: var(--space-12); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.calendar-absence-dialog legend { padding-inline: var(--space-4); font-weight: var(--font-weight-strong); }
.calendar-absence-dialog footer { justify-content: flex-end; }
.calendar-absence-error { margin: 0; color: var(--color-danger); }
.calendar-absence-marker { overflow: hidden; padding: 0.2rem 0.35rem; border-radius: var(--radius-control); background: var(--color-warning-soft, var(--color-primary-soft)); color: var(--color-warning-strong, var(--color-primary)); font-size: 0.66rem; font-weight: var(--font-weight-strong); text-overflow: ellipsis; white-space: nowrap; }

.calendar-absence-selection {
  display: flex;
  min-height: var(--space-48);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-6) var(--workspace-content-inset);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}
.calendar-absence-selection.has-selection { background: var(--color-warning-soft); color: var(--color-text-primary); }
.calendar-absence-selection > span { min-width: 0; }
.calendar-absence-selection > div { display: flex; gap: var(--space-8); align-items: center; }
.calendar-absence-selection .button { min-height: var(--space-36); }
.calendar-absence-apply:disabled { opacity: 0.46; cursor: default; }
.calendar-day { position: relative; }
.calendar-day-absence-toggle {
  position: absolute;
  z-index: 3;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  width: var(--space-24);
  height: var(--space-24);
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: transparent;
  cursor: pointer;
}
.calendar-day-absence-toggle:hover,
.calendar-day-absence-toggle:focus-visible { border-color: var(--color-warning); outline: 2px solid var(--color-warning-soft); }
.calendar-day-absence-toggle[aria-pressed="true"] { border-color: var(--color-warning); background: var(--color-warning); color: var(--color-on-warning, white); }
.calendar-day.absence-selected { background: color-mix(in srgb, var(--color-warning-soft) 74%, var(--color-surface)); box-shadow: inset 0 0 0 2px var(--color-warning); }
.calendar-day-header { padding-right: var(--space-24); }

@media (max-width: 37.4375rem) {
  .calendar-absence-fields,
  .calendar-absence-dialog fieldset { grid-template-columns: 1fr; }
  .calendar-absence-selection { align-items: flex-start; padding-inline: var(--space-8); font-size: var(--text-caption); }
  .calendar-absence-selection > div { flex: 0 0 auto; }
  .calendar-absence-selection .button { min-height: var(--space-32); padding-inline: var(--space-8); font-size: var(--text-caption); }
  .calendar-absence-clear { font-size: 0 !important; }
  .calendar-absence-clear::after { content: "×"; font-size: var(--text-body); }
}


/* src/styles/calendarResponsiveGrid.css */
.calendar-view {
  container-type: inline-size;
  container-name: calendar-workspace;
}

.calendar-grid {
  grid-template-columns: repeat(var(--calendar-workday-count, 7), minmax(0, 1fr));
  min-width: 0;
}

@container calendar-workspace (max-width: 64rem) {
  .calendar-workspace-body {
    grid-template-columns: clamp(7.5rem, 18cqi, 10rem) minmax(0, 1fr);
  }

  .calendar-overdue {
    min-width: 0;
    padding: var(--space-6);
  }
}

@container calendar-workspace (max-width: 44rem) {
  .calendar-weekday { min-height: 1.6rem; font-size: 0.66rem; }
  .calendar-day { min-height: 6.5rem; gap: var(--space-2); padding: var(--space-4); }
  .calendar-day-header { gap: var(--space-2); font-size: 0.68rem; }
  .calendar-day-header > b { font-size: 0.6rem; }
  .calendar-entry { min-height: 1.45rem; padding: 0.2rem 0.2rem 0.2rem 0.42rem; }
  .calendar-entry strong { font-size: 0.66rem; }
  .calendar-entry span { display: none; }
}

@media (max-width: 37.4375rem) {
  .calendar-workspace-body {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    overflow: hidden;
  }

  .calendar-overdue {
    max-height: none;
    border-right: 1px solid var(--color-border);
    border-bottom: 0;
  }

  .calendar-grid {
    grid-template-columns: repeat(var(--calendar-workday-count, 7), minmax(0, 1fr));
    min-width: 0;
  }

  :root[data-layout-size="compact"] .workspace > section[data-screen="tasks"]
  .dependency-finder.calendar-day-mode:not([hidden]) {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: min(48dvh, 24rem);
    min-height: 0;
    padding: var(--space-10);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -0.55rem 2rem var(--shadow-ink-18);
  }
}


/* src/styles/tasksHeaderLayout.css */
/* The broom count and collapsed command search are product behavior, not a
   desktop-only decoration. Keep both stable at every viewport width. */
.app-shell[data-active-view="tasks"] .triage-quick-start-count {
  top: -0.3rem;
  right: -0.2rem;
  min-width: 1.1rem;
  height: 1.1rem;
  background: var(--color-badge-blue);
}

.app-shell[data-active-view="tasks"] .task-command-tools:not(.search-active):not(.search-open) .task-search:not(:focus-within) {
  width: 2.35rem;
  max-width: 2.35rem;
  overflow: hidden;
}

.app-shell[data-active-view="tasks"] .task-command-tools:not(.search-active):not(.search-open) .task-search:not(:focus-within) input,
.app-shell[data-active-view="tasks"] .task-command-tools:not(.search-active):not(.search-open) .task-search:not(:focus-within) kbd {
  display: none;
}

/* Spacious Tasks header based on the product mockup. It starts at common
   laptop widths; the following range-specific block scales it down without
   clipping the action cluster. */
@media (min-width: 48rem) {
  .app-shell[data-active-view="tasks"] .sidebar {
    grid-template-columns: 3.5rem minmax(10rem, 10.75rem) minmax(18rem, 1fr) 6.3rem auto;
    grid-template-rows: 5rem 3rem;
    column-gap: 1rem;
    min-height: 8rem;
    padding: 0 4.3rem 0 3rem;
  }

  .app-shell[data-active-view="tasks"] .brand {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    padding: 0;
    border: 0;
  }

  .app-shell[data-active-view="tasks"] .brand > span:last-child { display: none; }
  .app-shell[data-active-view="tasks"] .brand-mark {
    width: 3.3rem;
    height: 3.3rem;
    background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
  }

  .app-shell[data-active-view="tasks"] .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
  }

  .app-shell[data-active-view="tasks"] .sidebar .board-menu-trigger {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem;
    min-height: 3.25rem;
    padding: 0 0.5rem;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .app-shell[data-active-view="tasks"] .sidebar .board-menu-trigger:hover {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
  }

  .app-shell[data-active-view="tasks"] .sidebar .board-menu-trigger strong { font-size: 1.3rem; }
  .app-shell[data-active-view="tasks"] .sidebar .board-menu-count { display: none; }
  .app-shell[data-active-view="tasks"] .sidebar .board-menu-trigger small { border-left: 0; }

  .app-shell[data-active-view="tasks"] .today-progress {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    gap: 1rem;
    width: 100%;
    padding-inline: 1.75rem;
  }

  .app-shell[data-active-view="tasks"] .today-progress-label,
  .app-shell[data-active-view="tasks"] .today-progress-count { font-size: 1.1rem; }
  .app-shell[data-active-view="tasks"] .today-progress-bar {
    flex: 1 1 55rem;
    max-width: 55rem;
    height: 0.45rem;
    background: var(--color-border);
  }
  .app-shell[data-active-view="tasks"] .today-progress-count { margin-left: auto; }

  @media (max-width: 60rem) {
    .app-shell[data-active-view="tasks"] .today-progress-activity button span { display: none; }
    .app-shell[data-active-view="tasks"] .today-progress-activity button { padding-inline: 0.25rem; }
  }

  .app-shell[data-active-view="tasks"] .sidebar-nav {
    grid-column: 4;
    grid-row: 1;
    padding-left: 1.25rem;
    width: 6.3rem;
    justify-content: center;
  }

  .app-shell[data-active-view="tasks"] .sidebar-nav .history-button { display: none; }
  .app-shell[data-active-view="tasks"] .sidebar-nav .notification-button,
  .app-shell[data-active-view="tasks"] .session-card button {
    width: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-shell[data-active-view="tasks"] .sidebar-nav .notification-button {
    position: relative;
    left: -1.1rem;
  }

  .app-shell[data-active-view="tasks"] .session-card {
    grid-column: 5;
    grid-row: 1;
  }

  .app-shell[data-active-view="tasks"] .session-card .account-menu-button { background: var(--color-surface-muted); }

  .app-shell[data-active-view="tasks"] .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 4.65rem;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    justify-self: stretch;
    border-top: 0;
    left: 0;
  }

  .app-shell[data-active-view="tasks"] .header-view-nav .view-button,
  .app-shell[data-active-view="tasks"] .view-overflow-trigger {
    padding-inline: 0.65rem;
    font-size: 1.22rem;
    font-weight: var(--font-weight-regular);
  }

  .app-shell[data-active-view="tasks"] .view-overflow-trigger { background: transparent; }
  .app-shell[data-active-view="tasks"] .header-view-nav .view-button.active { color: var(--color-text-primary); }
  .app-shell[data-active-view="tasks"] .view-button-wissen {
    margin-left: 0.5rem;
    padding-left: 1.75rem;
    border-left: 1px solid var(--color-border);
  }

  .app-shell[data-active-view="tasks"] .app-frame {
    --task-top-stack-height: 17.25rem;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .app-shell[data-active-view="tasks"] .workspace > section[data-screen="tasks"] > .task-command-row {
    row-gap: 1.4rem;
    min-height: 0;
    margin: 0 3rem;
    padding: 1.2rem 1.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: 0 0.7rem 1.6rem var(--shadow-ink-10);
  }

  .app-shell[data-active-view="tasks"] .task-command-primary { padding: 0; }

  .app-shell[data-active-view="tasks"] .task-command-primary .home-summary-counters {
    min-height: 3.55rem;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-muted) 72%, white);
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter {
    min-width: 0;
    padding: 0 1.55rem;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-regular);
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter:nth-child(1) { flex-basis: 12.25rem; }
  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter:nth-child(2) { flex-basis: 12.6rem; }
  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter:nth-child(3) { flex-basis: 12.25rem; }
  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter:nth-child(4) { flex-basis: 14.5rem; }
  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter:nth-child(5) { flex-basis: 13.75rem; }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter:nth-child(n) {
    flex: 0 0 auto;
    padding-inline: 1.3rem;
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter + .home-summary-counter {
    border-left: 0;
    border-radius: var(--radius-md);
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter.active {
    border-left-color: transparent;
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-weight: var(--font-weight-strong);
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter.active + .home-summary-counter { border-left-color: transparent; }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter span,
  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter strong {
    font-size: 1.15rem;
    font-weight: inherit;
  }

  .app-shell[data-active-view="tasks"] .task-command-tools.c2-toolbar {
    gap: 0.15rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    margin-left: auto;
    margin-right: -1.75rem;
  }

  .app-shell[data-active-view="tasks"] .triage-quick-start,
  .app-shell[data-active-view="tasks"] .task-command-tools .task-search,
  .app-shell[data-active-view="tasks"] .task-view-options > summary,
  .app-shell[data-active-view="tasks"] .task-command-tools .dependency-finder-toggle {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    border-radius: var(--radius-sm);
  }

  .app-shell[data-active-view="tasks"] .triage-quick-start,
  .app-shell[data-active-view="tasks"] .task-view-options > summary,
  .app-shell[data-active-view="tasks"] .task-command-tools .dependency-finder-toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell[data-active-view="tasks"] .triage-quick-start svg,
  .app-shell[data-active-view="tasks"] .task-view-options > summary svg,
  .app-shell[data-active-view="tasks"] .task-command-tools .dependency-finder-toggle svg {
    width: 2.2rem;
    height: 2.2rem;
  }

  .app-shell[data-active-view="tasks"] .task-command-tools .c2-control-icon,
  .app-shell[data-active-view="tasks"] .task-command-tools .toolbar-icon-button {
    color: var(--color-text-secondary);
  }

  .app-shell[data-active-view="tasks"] .task-command-tools .task-search {
    border: 0;
    background: transparent;
  }

  .app-shell[data-active-view="tasks"] .task-command-tools:not(.search-open):not(.search-active) .task-search-control {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell[data-active-view="tasks"] .task-command-tools .task-search:not(:focus-within) .task-search-control {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: 0;
  }

  .app-shell[data-active-view="tasks"] .task-command-tools:not(.search-active):not(.search-open) .task-search:not(:focus-within) input,
  .app-shell[data-active-view="tasks"] .task-command-tools:not(.search-active):not(.search-open) .task-search:not(:focus-within) kbd {
    display: none;
  }

  .app-shell[data-active-view="tasks"] .task-command-tools .c2-search-icon,
  .app-shell[data-active-view="tasks"] .task-command-tools .c2-search-icon::before {
    width: 2.3rem;
    min-width: 2.3rem;
    height: 2.3rem;
  }

  .app-shell[data-active-view="tasks"] .task-view-options[open] > summary,
  .app-shell[data-active-view="tasks"] .task-view-options.has-active-settings > summary,
  .app-shell[data-active-view="tasks"] .task-command-tools .dependency-finder-toggle.active,
  .app-shell[data-active-view="tasks"] .task-command-tools .dependency-finder-toggle[aria-pressed="true"] {
    border: 0;
    background: transparent;
    color: var(--color-primary);
    box-shadow: none;
  }

  .app-shell[data-active-view="tasks"] .triage-quick-start-count {
    position: absolute;
    top: -0.7rem;
    right: -0.1rem;
    min-width: 1.35rem;
    height: 1.3rem;
    padding-inline: 0.3rem;
    border: 2px solid var(--color-surface);
    background: var(--color-badge-blue);
    color: var(--color-on-primary);
    font-size: 0.68rem;
    line-height: 1;
  }

  .app-shell[data-active-view="tasks"] .triage-quick-start {
    display: grid;
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    place-items: center;
    padding: 0;
  }

  .app-shell[data-active-view="tasks"] .task-command-primary:has(.task-search:focus-within) .task-command-tools,
  .app-shell[data-active-view="tasks"] .task-command-tools.search-open,
  .app-shell[data-active-view="tasks"] .task-command-tools.search-active {
    margin-right: 0;
  }

  .app-shell[data-active-view="tasks"] .task-command-row > .home-tag-quick-filters {
    min-height: 1.9rem;
    padding: 0;
    align-items: center;
    column-gap: var(--space-10);
  }

  .app-shell[data-active-view="tasks"] .home-tag-quick-filters .tag-filter-chips {
    padding-right: var(--space-4);
  }

  .app-shell[data-active-view="tasks"] .home-tag-quick-filters .tag-filter-actions {
    position: relative;
    z-index: 2;
    padding-left: var(--space-4);
    background: var(--color-surface);
  }

  .app-shell[data-active-view="tasks"] .view-button-wissen {
    position: relative;
    border-left: 0;
  }

  .app-shell[data-active-view="tasks"] .view-button-wissen::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1.2rem;
    background: var(--color-border);
    transform: translateY(-50%);
  }

  .app-shell[data-active-view="tasks"] .home-tag-quick-filters .tag-filter-chip,
  .app-shell[data-active-view="tasks"] .home-tag-quick-filters .tag-filter-expand,
  .app-shell[data-active-view="tasks"] .home-tag-quick-filters .tag-filter-reset {
    min-height: 1.9rem;
    padding-inline: 0.65rem;
    font-size: 0.84rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  .app-shell[data-active-view="tasks"] #task-toolbar { border: 0; }
  .app-shell[data-active-view="tasks"] .overview-quick-create-host {
    width: auto;
    max-width: none;
    padding: 0.3rem 4.5rem 0.2rem;
  }
  .app-shell[data-active-view="tasks"] .overview-quick-create-host:has(.quick-create-form.editing) {
    padding-top: 1rem;
    padding-bottom: 0.65rem;
  }
  .app-shell[data-active-view="tasks"] .overview-quick-create-host .quick-create-form:not(.editing) .column-add-trigger {
    width: fit-content;
    min-height: 2rem;
    justify-content: flex-start;
    font-size: 1rem;
    white-space: nowrap;
  }

  .app-shell[data-active-view="tasks"] .overview-quick-create-host .column-add-trigger { gap: 1.25rem; }

  .app-shell[data-active-view="tasks"] .triage-banner {
    min-height: 5.75rem;
    margin: 0.5rem 4rem 2.25rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--color-border);
    border-left: 0.45rem solid var(--color-primary);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: 0 0.65rem 1.4rem var(--shadow-ink-10);
  }

  .app-shell[data-active-view="tasks"] .triage-banner-icon {
    width: 2.7rem;
    height: 2.7rem;
    color: var(--color-primary);
  }

  .app-shell[data-active-view="tasks"] .triage-banner-icon svg { width: 2.1rem; height: 2.1rem; }
  .app-shell[data-active-view="tasks"] .triage-banner-text {
    gap: 0.2rem;
    margin-left: 1.5rem;
  }
  .app-shell[data-active-view="tasks"] .triage-banner-text strong { font-size: 1.35rem; }
  .app-shell[data-active-view="tasks"] .triage-banner-text small { font-size: 1.1rem; }
  .app-shell[data-active-view="tasks"] .triage-banner-start {
    margin-right: 1.5rem;
    padding-inline: 2rem;
    font-size: 1.1rem;
  }
  .app-shell[data-active-view="tasks"] .triage-banner-dismiss {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 2.7rem;
    color: var(--color-text-secondary);
    font-size: 2rem;
  }
}


/* src/styles/tasksHeaderResponsive.css */
@media (min-width: 48rem) and (max-width: 95rem) {
  .app-shell[data-active-view="tasks"] .sidebar {
    grid-template-columns: 3.5rem minmax(9rem, 10rem) minmax(12rem, 1fr) 4.5rem auto;
    column-gap: 0.6rem;
    padding-inline: 1.5rem;
  }

  .app-shell[data-active-view="tasks"] .today-progress {
    gap: 1rem;
    padding-inline: 0.75rem;
  }

  .app-shell[data-active-view="tasks"] .sidebar-nav {
    width: 4.5rem;
    padding-left: 0.5rem;
  }

  .app-shell[data-active-view="tasks"] .sidebar-nav .notification-button {
    left: -0.35rem;
  }

  .app-shell[data-active-view="tasks"] .header-view-nav {
    gap: clamp(1.6rem, 4vw, 3.5rem);
  }

  .app-shell[data-active-view="tasks"] .workspace > section[data-screen="tasks"] > .task-command-row {
    min-height: 0;
    margin-inline: 1.5rem;
    padding: 1rem 1.15rem 0.85rem;
    row-gap: 1.15rem;
  }

  .app-shell[data-active-view="tasks"] .task-command-primary {
    gap: 0.6rem;
  }

  .app-shell[data-active-view="tasks"] .task-command-primary .home-summary-counters {
    flex: 0 1 auto;
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter:nth-child(n) {
    flex: 0 0 auto;
    padding-inline: 0.45rem;
  }

  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter span,
  .app-shell[data-active-view="tasks"] .task-command-row .home-summary-counter strong {
    font-size: clamp(0.9rem, 1.45vw, 1.15rem);
  }

  .app-shell[data-active-view="tasks"] .triage-quick-start,
  .app-shell[data-active-view="tasks"] .task-command-tools .task-search,
  .app-shell[data-active-view="tasks"] .task-view-options > summary,
  .app-shell[data-active-view="tasks"] .task-command-tools .dependency-finder-toggle {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .app-shell[data-active-view="tasks"] .triage-quick-start svg,
  .app-shell[data-active-view="tasks"] .task-view-options > summary svg,
  .app-shell[data-active-view="tasks"] .task-command-tools .dependency-finder-toggle svg {
    width: 1.8rem;
    height: 1.8rem;
  }

  .app-shell[data-active-view="tasks"] .triage-quick-start {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    padding: 0;
  }

  .app-shell[data-active-view="tasks"] .task-command-tools.c2-toolbar {
    margin-right: -1.15rem;
  }

  .app-shell[data-active-view="tasks"] .task-command-primary:has(.task-search:focus-within) .task-command-tools,
  .app-shell[data-active-view="tasks"] .task-command-tools.search-open,
  .app-shell[data-active-view="tasks"] .task-command-tools.search-active {
    margin-right: 0;
  }

  .app-shell[data-active-view="tasks"] .task-command-row > .home-tag-quick-filters {
    overflow: hidden;
  }

  .app-shell[data-active-view="tasks"] .overview-quick-create-host {
    padding-inline: 2.5rem;
  }

  .app-shell[data-active-view="tasks"] .triage-banner {
    margin-inline: 2rem;
  }
}

/* Shared command-header frame: every full workspace uses the same shell for
   its own segments, common tools and tags. Mein Tag keeps its reduced canvas. */
@media (min-width: 48rem) {
  /* The legacy tablet layout fixed the first app row to 3rem. The shared
     two-row header is 8rem high, so full-view command rows otherwise slide
     underneath it between 768px and 1152px. Let the grid measure the shared
     header in every view. */
  .app-shell .app-frame {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .app-shell:not([data-active-view="myday"]) .app-frame {
    --task-top-stack-height: 17.25rem;
  }

  .app-shell:not([data-active-view="myday"]) .workspace > section[data-screen="tasks"] > .task-command-row {
    position: relative;
    z-index: 12;
    display: flex;
    flex-direction: column;
    row-gap: 1.4rem;
    min-height: 0;
    margin: 0 3rem;
    padding: 1.2rem 1.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: 0 0.7rem 1.6rem var(--shadow-ink-10);
  }

  .app-shell:not([data-active-view="myday"]) .task-command-primary {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-width: 0;
    padding: 0;
  }

  .app-shell:not([data-active-view="myday"]) .task-command-primary > .home-overview.shared-command-layout {
    display: contents;
  }

  .app-shell:not([data-active-view="myday"]) .task-command-primary .home-summary-counters {
    position: relative;
    flex: 0 1 auto;
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 3.55rem;
    padding: 0.35rem;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-muted) 72%, white);
    overflow: visible;
  }

  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter {
    flex: 0 0 auto;
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: 0 1.3rem;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
    box-shadow: none;
  }

  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter:hover {
    color: var(--color-text-primary);
  }
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter.active {
    background: var(--color-surface);
    color: var(--color-primary);
    font-weight: var(--font-weight-strong);
    box-shadow: 0 2px 5px var(--shadow-ink-16);
  }
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter .home-summary-icon,
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter small {
    display: none;
  }
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter span,
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter strong {
    font-size: 1.05rem;
    font-weight: inherit;
    white-space: nowrap;
  }
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter.divider-before {
    position: relative;
    margin-left: var(--space-6);
    padding-left: calc(1.3rem + var(--space-8));
    border-left: 0;
  }
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter.divider-before::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 1.2rem;
    background: var(--color-border);
    transform: translateY(-50%);
  }

  .app-shell:not([data-active-view="myday"]) .task-command-row .home-daily-summary {
    display: none;
  }

  .app-shell:not([data-active-view="myday"]) .task-command-tools.c2-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
    margin-right: -1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    z-index: 1;
  }
  .app-shell:not([data-active-view="myday"]) .triage-quick-start,
  .app-shell:not([data-active-view="myday"]) .task-command-tools .task-search,
  .app-shell:not([data-active-view="myday"]) .task-view-options > summary,
  .app-shell:not([data-active-view="myday"]) .task-command-tools .dependency-finder-toggle {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    border-radius: var(--radius-sm);
  }
  .app-shell:not([data-active-view="myday"]) .triage-quick-start,
  .app-shell:not([data-active-view="myday"]) .task-view-options > summary,
  .app-shell:not([data-active-view="myday"]) .task-command-tools .dependency-finder-toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-shell:not([data-active-view="myday"]) .task-command-tools .task-search,
  .app-shell:not([data-active-view="myday"]) .task-command-tools:not(.search-open):not(.search-active) .task-search-control {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .app-shell:not([data-active-view="myday"]) .task-command-tools:not(.search-active):not(.search-open) .task-search:not(:focus-within) input,
  .app-shell:not([data-active-view="myday"]) .task-command-tools:not(.search-active):not(.search-open) .task-search:not(:focus-within) kbd {
    display: none;
  }

  .app-shell:not([data-active-view="myday"]) .task-command-row > .home-tag-quick-filters {
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 1.9rem;
    padding: 0;
    align-items: center;
    column-gap: var(--space-10);
    border: 0;
    background: var(--color-surface);
    box-shadow: none;
  }
  .app-shell:not([data-active-view="myday"]) .home-tag-quick-filters .tag-filter-chips {
    min-width: 0;
    padding-right: var(--space-4);
  }
  .app-shell:not([data-active-view="myday"]) .home-tag-quick-filters .tag-filter-actions {
    position: relative;
    z-index: 2;
    grid-column: 2;
    padding-left: var(--space-4);
    background: var(--color-surface);
  }
  .app-shell:not([data-active-view="myday"]) .home-tag-quick-filters.expanded .tag-filter-chips {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
  }
  .app-shell:not([data-active-view="myday"]) .home-tag-quick-filters.expanded .tag-filter-actions {
    grid-column: 2;
    grid-row: 1;
  }
  .app-shell:not([data-active-view="myday"]) .home-tag-quick-filters .tag-filter-chip,
  .app-shell:not([data-active-view="myday"]) .home-tag-quick-filters .tag-filter-expand,
.app-shell:not([data-active-view="myday"]) .home-tag-quick-filters .tag-filter-reset {
    min-height: 1.9rem;
    padding-inline: 0.65rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    font-size: 0.84rem;
  }

  .app-shell:not([data-active-view="myday"]) #task-toolbar {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
  }
  .app-shell:not([data-active-view="myday"]) #task-toolbar > .toolbar-primary,
  .app-shell:not([data-active-view="myday"]) #task-toolbar > .toolbar-secondary {
    display: none;
  }
}

/* Dependency search uses the same replacement behavior as Tasks: focusing or
   opening search temporarily gives the query the complete segment area and
   removes both relationship segments and tag chips from the header. */
.app-shell[data-active-view="dependencies"] .task-command-primary:has(.task-search:focus-within) .home-summary-counters,
.app-shell[data-active-view="dependencies"] .task-command-primary:has(.task-command-tools.search-open) .home-summary-counters,
.app-shell[data-active-view="dependencies"] .task-command-primary:has(.task-command-tools.search-active) .home-summary-counters {
  display: none;
}

.app-shell[data-active-view="dependencies"] .task-command-row:has(.task-search:focus-within) > .home-tag-quick-filters,
.app-shell[data-active-view="dependencies"] .task-command-row:has(.task-command-tools.search-open) > .home-tag-quick-filters,
.app-shell[data-active-view="dependencies"] .task-command-row:has(.task-command-tools.search-active) > .home-tag-quick-filters {
  display: none !important;
}

.app-shell[data-active-view="dependencies"] .task-command-primary:has(.task-search:focus-within) .task-command-tools,
.app-shell[data-active-view="dependencies"] .task-command-tools.search-open,
.app-shell[data-active-view="dependencies"] .task-command-tools.search-active {
  flex: 1 1 auto;
  margin-right: 0;
  margin-left: 0;
}

.app-shell[data-active-view="dependencies"] .task-command-primary:has(.task-search:focus-within) .task-search,
.app-shell[data-active-view="dependencies"] .task-command-tools.search-open .task-search,
.app-shell[data-active-view="dependencies"] .task-command-tools.search-active .task-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 8rem;
  max-width: none;
  overflow: visible;
}

/* Search context is a real row in #task-toolbar. It used to be absolutely
   positioned below the header search and consequently covered quick capture
   and the first content line. Normal document flow reserves its space at
   every viewport width and in every task-based view. */
#task-toolbar .toolbar-result-count-search {
  width: fit-content;
  min-height: 1.8rem;
  margin: 0;
  padding-inline: var(--space-10);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

@media (min-width: 48rem) and (max-width: 95rem) {
  .app-shell:not([data-active-view="myday"]) .workspace > section[data-screen="tasks"] > .task-command-row {
    margin-inline: 1.5rem;
    padding: 1rem 1.15rem 0.85rem;
    row-gap: 1.15rem;
  }
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter {
    padding-inline: 0.45rem;
  }
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter span,
  .app-shell:not([data-active-view="myday"]) .task-command-row .home-summary-counter strong {
    font-size: clamp(0.82rem, 1.35vw, 1.05rem);
  }
  .app-shell:not([data-active-view="myday"]) .task-command-tools.c2-toolbar {
    margin-right: -1.15rem;
  }
  .app-shell:not([data-active-view="myday"]) .triage-quick-start,
  .app-shell:not([data-active-view="myday"]) .task-command-tools .task-search,
  .app-shell:not([data-active-view="myday"]) .task-view-options > summary,
  .app-shell:not([data-active-view="myday"]) .task-command-tools .dependency-finder-toggle {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }
}
/* Large overview collections are materialized near the viewport instead of
   creating hundreds of rich card DOM trees during application startup. */
.overview-load-sentinel {
  grid-column: 1 / -1;
  min-height: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-caption);
  text-align: center;
}

.overview-load-sentinel:hover,
.overview-load-sentinel:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

#task-toolbar[hidden] {
  display: none !important;
}

@media (max-width: 37.4375rem) {
  .rich-notes-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .rich-notes-tool-group {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* src/styles/sharedHeaderPolish.css */
.shared-workspace-header .today-progress { box-sizing: border-box; }

@media (min-width: 75rem) {
  .app-shell[data-active-view] .sidebar.shared-workspace-header {
    grid-template-columns: 2.75rem minmax(34rem, 40rem) minmax(17rem, 20rem) minmax(2rem, 1fr) 5.5rem auto;
    grid-template-rows: 3.4rem 3rem;
    column-gap: var(--space-12);
    min-height: 6.4rem;
    padding: 0 var(--space-16);
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    backdrop-filter: saturate(180%) blur(22px);
  }

  .app-shell[data-active-view] .shared-workspace-header .brand {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    border: 0;
  }

  .app-shell[data-active-view] .shared-workspace-header .brand > span:last-child { display: none; }
  .app-shell[data-active-view] .shared-workspace-header .brand-mark {
    width: 2.5rem;
    height: 2.5rem;
    background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
  }

  .app-shell .shared-workspace-header .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    gap: 0;
    align-self: center;
    transform: translateY(0.18rem);
  }

  .app-shell .shared-workspace-header .sidebar-board-section > .sidebar-section-title { display: none; }
  .app-shell .shared-workspace-header .sidebar-board-section > .board-switcher { width: 0; min-width: 0; }
  .app-shell .shared-workspace-header .sidebar-board-section .board-menu-trigger,
  .app-shell .shared-workspace-header .sidebar-board-section > .board-switcher > .board-time-suggestion,
  .app-shell .shared-workspace-header .sidebar-board-section > .board-switcher > .board-attention-summary { display: none; }

  .app-shell .shared-workspace-header .board-attention-host {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    padding-left: var(--space-12);
    border-left: 1px solid var(--color-border);
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: var(--space-4) 0;
    overflow: visible;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent);
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav .view-button,
  .app-shell[data-active-view] .shared-workspace-header .view-overflow-trigger {
    display: inline-flex;
    min-height: 2.15rem;
    gap: var(--space-4);
    align-items: center;
    padding-inline: var(--space-14, 0.875rem);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    font-size: 0.94rem;
    font-weight: var(--font-weight-medium);
  }

  .app-shell[data-active-view] .shared-workspace-header .view-overflow-trigger {
    width: 10rem;
    justify-content: center;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav :is(.view-button, .view-overflow-trigger):hover {
    background: var(--color-surface-muted);
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav .view-button.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav .view-button.active::after { display: none; }

  .header-view-nav > [data-view="myday"] { order: 1; }
  .header-view-nav > [data-view="tasks"] { order: 2; }
  .header-view-nav > [data-view="projects"] { order: 3; }
  .header-view-nav > :is([data-view="dependencies"], [data-view="templates"], [data-view="archive"]) { order: 4; }
  .header-view-nav > [data-view="infos"] { order: 5; }
  .header-view-nav > .view-overflow { order: 4; }
  .header-view-nav > .header-search-launch { order: 7; }
  .header-view-nav > .workspace-global-tools { order: 8; }

  .app-shell[data-active-view] .shared-workspace-header .view-button-wissen {
    margin-left: var(--space-8);
    padding-left: var(--space-16);
  }

  .app-shell[data-active-view] .shared-workspace-header .view-button-wissen::before {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--space-6));
    display: block;
    width: 1px;
    height: 1.25rem;
    background: var(--color-border);
    content: "";
    transform: translateY(-50%);
  }

  .header-search-launch {
    display: grid;
    width: 2.15rem;
    min-width: 2.15rem;
    height: 2.15rem;
    margin-left: var(--space-8);
    place-items: center;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
  }

  .header-search-launch:hover { background: var(--color-surface-muted); }
  .header-search-launch[aria-expanded="true"] { background: var(--color-primary-soft); color: var(--color-primary); }
  .header-search-launch svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

  .app-shell .shared-workspace-header .today-progress {
    grid-column: 3;
    grid-row: 2;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: none;
    gap: var(--space-8);
    align-items: center;
    align-self: stretch;
    padding: 0 var(--space-12);
    border-left: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  }

  .app-shell .shared-workspace-header .today-progress-label {
    color: var(--color-text-primary);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-strong);
    text-transform: capitalize;
  }

  .app-shell .shared-workspace-header .today-progress-bar {
    width: 6.9rem;
    max-width: 6.9rem;
    height: 0.25rem;
    flex: 0 1 6.9rem;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  }

  .app-shell .shared-workspace-header .today-progress-count {
    margin-left: 0;
    color: var(--color-primary);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-strong);
  }

  .today-progress-activity-menu { display: contents; }
  .today-progress-activity-menu > summary { display: none; }
  .today-progress-activity-menu .today-progress-activity {
    position: static;
    display: flex;
    min-width: 0;
    gap: var(--space-6);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .today-progress-activity-menu .today-progress-activity button {
    min-width: 0;
    min-height: 1.75rem;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: 0.7rem;
  }

  .today-progress-activity-menu .today-progress-activity button span { display: none; }
  .today-progress-activity-menu .today-progress-activity button b { font-weight: var(--font-weight-regular); }

  .app-shell .shared-workspace-header .sidebar-nav {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
    width: auto;
    padding: 0;
  }

  .app-shell .shared-workspace-header .sidebar-nav .history-button { display: none; }
  .app-shell .shared-workspace-header .session-card { grid-column: 6; grid-row: 1; }

  .app-shell .shared-workspace-header .workspace-global-tools {
    position: relative;
    z-index: 3;
    margin-left: auto;
    padding-left: var(--space-8);
    border-left: 0;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    min-height: 0;
    height: calc(100% - 2px);
    align-self: start;
  }

  .workspace-global-tools .task-command-tools:not(.search-open):not(.search-active) .task-search:not(:focus-within) {
    display: none;
  }

}

@media (min-width: 48rem) {
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"])
  .task-command-primary .home-summary-counters {
    min-height: 0;
    height: auto;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"])
  .task-command-row .home-summary-counter,
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"])
  .task-command-row .home-summary-counter:nth-child(n) {
    min-width: 0;
    min-height: 1.9rem;
    flex: 0 0 auto;
    flex-basis: auto;
    gap: var(--space-6);
    padding: 0 var(--space-14, 0.875rem);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    box-shadow: none;
    font-weight: var(--font-weight-regular);
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"])
  .task-command-row .home-summary-counter:hover {
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"])
  .task-command-row .home-summary-counter.active {
    background: color-mix(in srgb, var(--color-primary-soft) 72%, transparent);
    color: var(--color-primary);
    box-shadow: none;
    font-weight: var(--font-weight-strong);
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"])
  .task-command-row .home-summary-counter span {
    font-size: 0.82rem;
    font-weight: inherit;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"])
  .task-command-row .home-summary-counter strong {
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    font-weight: var(--font-weight-regular);
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"])
  .task-command-row .home-summary-counter.active strong {
    color: color-mix(in srgb, var(--color-primary) 62%, transparent);
  }
}

@media (max-width: 74.99rem) {
  .board-attention-host { display: none; }
}

@media (min-width: 37.5rem) and (max-width: 74.99rem) {
  .header-search-launch {
    display: grid;
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    margin-left: var(--space-4);
    place-items: center;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
  }

  .header-search-launch:hover,
  .header-search-launch[aria-expanded="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .header-search-launch svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
  }
}

/* Fold-sized and narrow tablet windows still use the complete application
   header, but it needs two real rows. Legacy medium rules squeezed boards,
   navigation and account tools into one line and clipped the first view. */
@media (min-width: 37.5rem) and (max-width: 47.99rem) {
  .app-shell[data-active-view] .app-frame {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .app-shell[data-active-view] .sidebar.shared-workspace-header {
    grid-template-columns: 2.5rem minmax(7rem, 1fr) auto auto;
    grid-template-rows: 2.75rem 2.55rem;
    gap: 0 var(--space-6);
    min-height: 5.3rem;
    padding-inline: var(--space-8);
  }

  .app-shell[data-active-view] .shared-workspace-header .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 0;
  }

  .app-shell[data-active-view] .shared-workspace-header .brand > span:last-child { display: none; }
  .app-shell[data-active-view] .shared-workspace-header .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .app-shell[data-active-view] .shared-workspace-header .sidebar-nav {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .app-shell[data-active-view] .shared-workspace-header .session-card {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    justify-self: stretch;
    gap: var(--space-2);
    max-width: 100%;
    padding: 0;
    overflow-x: auto;
    overflow-y: visible;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav :is(.view-button, .view-overflow-trigger) {
    flex: 0 0 auto;
    min-height: 2.35rem;
    padding-inline: var(--space-8);
    font-size: 0.75rem;
  }

  .app-shell[data-active-view] .shared-workspace-header .view-button-wissen {
    margin-left: var(--space-4);
    padding-left: var(--space-12);
  }

  .app-shell[data-active-view] .shared-workspace-header .today-progress { display: none; }
}

@media (max-width: 37.4375rem) {
  .header-search-launch { display: none; }
}

@media (min-width: 37.5rem) {
  .app-shell[data-active-view] .shared-workspace-header .header-view-nav .view-button.active {
    font-weight: var(--font-weight-medium);
  }

  .shared-workspace-header .header-view-nav > [data-view="myday"] { width: 6rem; }
  .shared-workspace-header .header-view-nav > [data-view="tasks"] { width: 4.5rem; }
  .shared-workspace-header .header-view-nav > [data-view="projects"] { width: 6rem; }
  .shared-workspace-header .header-view-nav > .view-overflow .view-overflow-trigger { width: 10rem; justify-content: center; }
  .shared-workspace-header .header-view-nav > [data-view="infos"] { width: 6.5rem; }
}

:root.window-controls-overlay-active .pwa-titlebar-drag-region { display: none; }
:root.window-controls-overlay-active .app-shell,
:root.window-controls-overlay-active .auth-root { padding-top: 0; }
:root.window-controls-overlay-active .app-frame { height: var(--doneit-viewport-height, 100dvh); }
:root.window-controls-overlay-active .sidebar { -webkit-app-region: drag; app-region: drag; }
:root.window-controls-overlay-active .sidebar :is(button, a, input, select, summary, [role="button"]) { -webkit-app-region: no-drag; app-region: no-drag; }


/* src/styles/sharedHeaderMedium.css */
/* Keep the V9 header on desktop-mode tablets and narrower desktop windows.
   Below this range the dedicated phone/fold header deliberately uses the
   single Board trigger; above it sharedHeaderPolish owns the wider grid. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .app-shell[data-active-view] .sidebar.shared-workspace-header {
    grid-template-columns: 2.5rem minmax(13rem, 1fr) minmax(12rem, 15rem) minmax(5rem, auto) auto;
    grid-template-rows: 3.35rem 3rem;
    min-height: 6.35rem;
    gap: 0 var(--space-6);
    padding: 0 var(--space-10);
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  }

  .app-shell[data-active-view] .shared-workspace-header .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .app-shell[data-active-view] .shared-workspace-header .brand > span:last-child { display: none; }
  .app-shell[data-active-view] .shared-workspace-header .brand-mark {
    width: 2.35rem;
    height: 2.35rem;
    background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
  }

  .app-shell[data-active-view] .shared-workspace-header .sidebar-board-section {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    gap: 0;
    align-self: center;
  }

  .app-shell[data-active-view] .shared-workspace-header .sidebar-board-section > .sidebar-section-title,
  .app-shell[data-active-view] .shared-workspace-header .sidebar-board-section .board-menu-trigger,
  .app-shell[data-active-view] .shared-workspace-header .sidebar-board-section > .board-switcher > .board-time-suggestion,
  .app-shell[data-active-view] .shared-workspace-header .sidebar-board-section > .board-switcher > .board-attention-summary {
    display: none;
  }

  .app-shell[data-active-view] .shared-workspace-header .sidebar-board-section > .board-switcher {
    width: 0;
    min-width: 0;
  }

  .app-shell[data-active-view] .shared-workspace-header .board-scope-quick-filters {
    display: flex;
    width: 100%;
  }

  .app-shell[data-active-view] .shared-workspace-header .board-scope-chip,
  .app-shell[data-active-view] .shared-workspace-header .board-scope-overflow {
    min-height: 1.8rem;
    padding-inline: var(--space-8);
  }

  .app-shell[data-active-view] .shared-workspace-header .board-attention-host { display: none; }

  .app-shell[data-active-view] .shared-workspace-header .today-progress {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    max-width: 15rem;
    gap: var(--space-6);
    align-items: center;
    align-self: stretch;
    padding: 0 var(--space-8);
    border-left: 1px solid var(--color-border);
    background: transparent;
  }

  .app-shell[data-active-view] .shared-workspace-header .today-progress-label,
  .app-shell[data-active-view] .shared-workspace-header .today-progress-count {
    margin: 0;
    font-size: var(--text-caption);
  }

  .app-shell[data-active-view] .shared-workspace-header .today-progress-bar {
    width: 5rem;
    max-width: 5rem;
    height: 0.25rem;
    flex: 0 1 5rem;
  }

  .app-shell[data-active-view] .shared-workspace-header .today-progress-activity-menu { display: none; }

  .app-shell[data-active-view] .shared-workspace-header .sidebar-nav {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    width: auto;
    padding: 0;
  }

  .app-shell[data-active-view] .shared-workspace-header .sidebar-nav .history-button { display: none; }
  .app-shell[data-active-view] .shared-workspace-header .sidebar-nav .notification-button { left: 0; }
  .app-shell[data-active-view] .shared-workspace-header .session-card {
    grid-column: 5;
    grid-row: 1;
    justify-self: end;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-4) 0;
    overflow: visible;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent);
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav :is(.view-button, .view-overflow-trigger) {
    min-height: 2.15rem;
    padding-inline: var(--space-10);
    font-size: 0.88rem;
  }

  .app-shell[data-active-view] .shared-workspace-header .view-overflow-trigger { width: 8.5rem; }
  .app-shell[data-active-view] .shared-workspace-header .workspace-global-tools {
    min-height: 0;
    height: calc(100% - 2px);
    margin-left: auto;
    align-self: start;
  }
}


/* src/styles/pwaWindowControlsOverlay.css */
/* Chromium reports the usable title-bar rectangle, not the native Windows
   button width. The runtime derives both excluded edges from that rectangle. */
:root.window-controls-overlay-active .app-shell[data-active-view] .sidebar.shared-workspace-header {
  padding-left: max(var(--space-16), calc(var(--pwa-titlebar-left-inset) + var(--space-8)));
  padding-right: max(var(--space-16), calc(var(--pwa-titlebar-right-inset) + var(--space-8)));
}

:root.window-controls-overlay-active .app-shell[data-active-view] .shared-workspace-header :is(
  .sidebar-nav,
  .session-card,
  .header-view-nav,
  .today-progress,
  .sidebar-board-section
) {
  min-width: 0;
}

/* Native Windows title-bar controls sit above the web surface. Modal controls
   must start below that reserved strip so their close buttons remain clickable. */
:root.window-controls-overlay-active .triage-root {
  inset: var(--pwa-titlebar-height) 0 0;
}


/* src/styles/selectionStates.css */
/* Ordinary focus stays quieter than the stronger global multi-selection rule
   in hierarchyFocusContent.css. */
#task-list :is(.task-item, .outline-row, .project-hierarchy-row).selected:not(.multi-selected) {
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.planning-workspace-toolbar > .bulk-toolbar {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.planning-workspace-toolbar > .bulk-toolbar[hidden] { display: none; }

.bulk-complete-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100dvh - 2rem));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xl);
}

.bulk-complete-dialog::backdrop { background: var(--shadow-ink-42); }
.bulk-complete-dialog form { display: grid; gap: var(--space-12); padding: var(--space-16); }
.bulk-complete-dialog h2,
.bulk-complete-dialog p { margin: 0; }
.bulk-complete-dialog header { display: grid; gap: var(--space-6); }
.bulk-complete-dialog header p,
.bulk-complete-note { color: var(--color-text-secondary); font-size: var(--text-caption); }
.bulk-complete-dialog ul {
  display: grid;
  max-height: 18rem;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-28);
  overflow: auto;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}
.bulk-complete-dialog footer { display: flex; justify-content: flex-end; gap: var(--space-8); }
.bulk-complete-dialog footer button { min-height: var(--control-height); }
.bulk-complete-dialog footer .primary { background: var(--color-primary); color: var(--color-on-primary); }

.blocked-completion-dialog form { min-height: 0; }
.blocked-completion-dialog .blocked-completion-select-all,
.blocked-completion-dialog .blocked-completion-target,
.blocked-completion-dialog .blocked-completion-list label {
  display: flex;
  min-height: var(--adaptive-min-touch-target);
  align-items: flex-start;
  gap: var(--space-10);
}
.blocked-completion-dialog :is(.blocked-completion-select-all, .blocked-completion-target) {
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}
.blocked-completion-dialog .blocked-completion-list {
  padding: var(--space-8);
  list-style: none;
}
.blocked-completion-dialog .blocked-completion-list li { padding: var(--space-6); }
.blocked-completion-dialog .blocked-completion-list span,
.blocked-completion-dialog .blocked-completion-target span { display: grid; gap: var(--space-2); }
.blocked-completion-dialog small { color: var(--color-text-secondary); }
.blocked-completion-dialog input[type="checkbox"] { flex: none; margin-top: 0.2rem; }


/* src/styles/mobileTasksHeaderV5.css */
/* Mobile Tasks V5
 *
 * Phone and Fold keep the same product hierarchy while using their available
 * width differently. This file is imported last on purpose: it retires the
 * older compact command bar without duplicating its behavior in JavaScript.
 */

.view-button-icon {
  display: none;
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.personal-ai-icon {
  color: var(--color-primary);
  stroke-width: 1.75;
}

@media (max-width: 52.4375rem) {
  .app-shell[data-active-view] .app-frame {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .app-shell[data-active-view] .sidebar.shared-workspace-header {
    display: grid;
    min-width: 0;
    padding-inline: max(var(--space-8), env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .shared-workspace-header .brand {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .shared-workspace-header .brand > span:last-child {
    display: none;
  }

  .shared-workspace-header .brand-mark {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    overflow: hidden;
    background: url("../pwa/doneit-icon.svg") center / contain no-repeat;
    color: transparent;
    font-size: 0;
  }

  .shared-workspace-header .sidebar-board-section {
    width: 100%;
    min-width: 0;
    gap: 0;
  }

  .shared-workspace-header .sidebar-board-section > .sidebar-section-title,
  .shared-workspace-header .sidebar-board-section .board-menu-trigger,
  .shared-workspace-header .sidebar-board-section > .board-switcher > .board-time-suggestion,
  .shared-workspace-header .sidebar-board-section > .board-switcher > .board-attention-summary {
    display: none;
  }

  .shared-workspace-header .sidebar-board-section > .board-switcher {
    width: 0;
    min-width: 0;
  }

  .shared-workspace-header .board-scope-quick-filters {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: var(--space-2);
  }

  .shared-workspace-header .board-scope-chip,
  .shared-workspace-header .board-scope-overflow {
    min-width: 0;
    min-height: 2.75rem;
    padding-inline: var(--space-8);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
  }

  .shared-workspace-header .board-scope-chip > span:nth-child(2) {
    max-width: clamp(3.4rem, 15vw, 6.5rem);
  }

  .shared-workspace-header .board-scope-chip.active {
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
    background: var(--color-primary-soft);
    color: var(--color-primary);
    box-shadow: none;
  }

  .shared-workspace-header .board-scope-chip.primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: none;
  }

  .shared-workspace-header .board-scope-chip.primary small {
    color: color-mix(in srgb, var(--color-on-primary) 82%, transparent);
  }

  .shared-workspace-header .board-attention-host {
    display: none;
  }

  .shared-workspace-header .sidebar-nav {
    display: flex;
    width: auto;
    min-width: 0;
    gap: 0;
    justify-content: flex-end;
    overflow: visible;
  }

  #app-shell .shared-workspace-header .sidebar-nav > .nav-button {
    display: none;
  }

  #app-shell .shared-workspace-header .sidebar-nav > :is(#notification-button, #personal-ai-nav) {
    display: grid;
  }

  .shared-workspace-header .sidebar-nav .nav-button,
  .shared-workspace-header .session-card > button {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .shared-workspace-header .session-card {
    display: flex;
    min-width: 0;
    gap: 0;
    justify-content: flex-end;
  }

  .shared-workspace-header .session-card > :not(.mobile-header-menu-button):not(.mobile-dependency-finder-button):not(.account-menu) {
    display: none;
  }

  .shared-workspace-header .session-card .mobile-header-menu-button {
    display: grid;
  }

  .shared-workspace-header .session-card .mobile-dependency-finder-button {
    display: grid;
  }

  .shared-workspace-header .header-view-nav {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0;
    align-items: stretch;
    justify-content: space-between;
    padding: 0;
    overflow: visible;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent);
  }

  .shared-workspace-header .header-view-nav > :is(.view-button, .view-overflow) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .shared-workspace-header .header-view-nav :is(.view-button, .view-overflow-trigger) {
    min-width: 0;
    min-height: 2.75rem;
    gap: 0.18rem;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
  }

  .shared-workspace-header .header-view-nav .view-overflow-trigger {
    width: 100%;
  }

  .shared-workspace-header .header-view-nav .view-button.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .shared-workspace-header .header-view-nav .view-button.active::after {
    display: none;
  }

  .shared-workspace-header .header-view-nav .view-button-wissen {
    margin-left: 0;
    padding-left: var(--space-4);
    border-left: 0;
  }

  .shared-workspace-header .header-view-nav .view-button-wissen::before {
    display: none;
  }

  .shared-workspace-header .header-view-nav .view-overflow-trigger > span[aria-hidden="true"],
  .shared-workspace-header .header-view-nav .view-overflow-count,
  .shared-workspace-header .header-search-launch,
  .shared-workspace-header .workspace-global-tools {
    display: none;
  }

  .shared-workspace-header .view-button-icon {
    display: block;
  }

  .shared-workspace-header .view-overflow-menu {
    top: calc(100% + var(--space-2));
    right: 0;
    left: auto;
  }

  .shared-workspace-header .today-progress {
    display: flex;
    min-width: 0;
    min-height: 2.75rem;
    gap: var(--space-8);
    align-items: center;
    padding-inline: var(--space-10);
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .shared-workspace-header .today-progress:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--color-primary-border);
    outline-offset: -2px;
  }

  .shared-workspace-header .today-progress-label,
  .shared-workspace-header .today-progress-count {
    margin: 0;
    font-size: 0.875rem;
  }

  .shared-workspace-header .today-progress-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-strong);
    text-transform: capitalize;
  }

  .shared-workspace-header .today-progress-count {
    color: var(--color-primary);
    font-weight: var(--font-weight-strong);
  }

  .shared-workspace-header .today-progress-bar {
    width: auto;
    min-width: 2.5rem;
    max-width: 7rem;
    height: 0.25rem;
    flex: 1 1 7rem;
  }

  .shared-workspace-header .today-progress-activity-menu {
    display: none;
  }

}

@media (max-width: 37.4375rem) {
  .app-shell[data-active-view] .sidebar.shared-workspace-header {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 2.75rem 5.5rem;
    grid-template-rows: 2.75rem 2.75rem;
    gap: 0 var(--space-2);
    min-height: 5.5rem;
  }

  .shared-workspace-header .brand { grid-column: 1; grid-row: 1; }
  .shared-workspace-header .sidebar-board-section { grid-column: 2; grid-row: 1; }
  .shared-workspace-header .today-progress { grid-column: 3; grid-row: 1; }
  .shared-workspace-header .sidebar-nav { grid-column: 4; grid-row: 1; }
  .shared-workspace-header .session-card { grid-column: 5; grid-row: 1; }
  .shared-workspace-header .header-view-nav { grid-column: 1 / -1; grid-row: 2; }

  .shared-workspace-header .today-progress {
    width: clamp(4.7rem, 22vw, 5.6rem);
    min-height: 2.75rem;
    gap: var(--space-4);
    padding-inline: var(--space-4);
  }

  .shared-workspace-header .today-progress-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .shared-workspace-header .today-progress-bar {
    min-width: 1.35rem;
    max-width: 2.25rem;
    flex-basis: 2.25rem;
  }

  #app-shell .shared-workspace-header .sidebar-nav > #notification-button,
  .shared-workspace-header .session-card > :not(.mobile-header-menu-button):not(.mobile-dependency-finder-button):not(.account-menu) {
    display: none;
  }

  .shared-workspace-header .header-view-nav :is(.view-button, .view-overflow-trigger) {
    flex-direction: column;
    min-height: 2.75rem;
    font-size: 0.875rem;
    line-height: 1;
  }

  .shared-workspace-header .view-button-icon {
    width: 1rem;
    height: 1rem;
  }

  .shared-workspace-header .board-scope-chip {
    max-width: calc(100% - 2.5rem);
  }

  .shared-workspace-header .board-scope-chip:nth-of-type(n + 2) {
    display: none;
  }

  .shared-workspace-header .board-scope-chip > span:nth-child(2) {
    max-width: clamp(3rem, 17vw, 4.5rem);
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .app-frame {
    grid-template-rows: auto auto;
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .workspace > section[data-screen="tasks"]:not([hidden]) {
    min-height: calc(var(--doneit-viewport-height, 100dvh) - 5.5rem);
  }

  body:has(:is(#task-list, .unified-search-cards).overview-list) .task-work-area {
    min-height: calc(var(--doneit-viewport-height, 100dvh) - 11.25rem);
  }
}

@media (min-width: 37.5rem) and (max-width: 52.4375rem) {
  #app-shell[data-active-view] .sidebar.shared-workspace-header {
    grid-template-columns: 2.5rem minmax(9rem, 1fr) auto auto;
    grid-template-rows: 3rem 3rem;
    gap: 0 var(--space-6);
    min-height: 6rem;
  }

  #app-shell[data-active-view] .shared-workspace-header .brand { grid-column: 1; grid-row: 1; }
  #app-shell[data-active-view] .shared-workspace-header .sidebar-board-section { grid-column: 2; grid-row: 1; }
  #app-shell[data-active-view] .shared-workspace-header .sidebar-nav { grid-column: 3; grid-row: 1; }
  #app-shell[data-active-view] .shared-workspace-header .session-card { grid-column: 4; grid-row: 1; }
  #app-shell[data-active-view] .shared-workspace-header .header-view-nav {
    grid-column: 1 / 4;
    grid-row: 2;
  }
  #app-shell[data-active-view] .shared-workspace-header .today-progress {
    display: flex;
    grid-column: 4;
    grid-row: 2;
    min-width: 8.5rem;
    border-left: 1px solid var(--color-border);
  }

  .shared-workspace-header .header-view-nav :is(.view-button, .view-overflow-trigger) {
    min-height: 3rem;
    font-size: 0.875rem;
  }

  .shared-workspace-header .header-view-nav .view-button-icon {
    width: 1rem;
    height: 1rem;
  }

  .shared-workspace-header .today-progress-bar {
    max-width: 4.5rem;
  }
}


/* src/styles/mobileTasksWorkspaceV5.css */
/* Mobile Tasks V5 workspace command hierarchy. */
@media (max-width: 52.4375rem) {
  /* One stable command line: period filters at the left, Filter and Search at
     the right. Opening search replaces the whole line, never adds a line. */
  #app-shell[data-active-view="tasks"] .app-frame .workspace > section.tasks-workspace-shell[data-screen="tasks"]:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    align-content: start;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #app-shell[data-active-view="tasks"] .workspace > section[data-screen="tasks"] > .task-command-row,
  #app-shell[data-active-view="tasks"] .workspace > section[data-screen="tasks"] > .task-command-row > .task-command-primary {
    display: contents;
  }

  #app-shell[data-active-view="tasks"] .task-command-primary > .home-overview.execution-status-layout {
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 3rem;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: var(--color-surface);
    box-shadow: none;
  }

  #app-shell[data-active-view="tasks"] .home-overview.execution-status-layout > .home-summary-counters {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0.125rem 0 0.125rem max(var(--space-8), env(safe-area-inset-left, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  #app-shell[data-active-view="tasks"] .home-overview.execution-status-layout > .home-summary-counters::-webkit-scrollbar {
    display: none;
  }

  #app-shell[data-active-view="tasks"] .home-summary-counters > .home-summary-counter {
    display: inline-flex;
    min-width: max-content;
    min-height: 2.75rem;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    padding-inline: clamp(0.55rem, 2.5vw, 0.85rem);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
  }

  #app-shell[data-active-view="tasks"] .home-summary-counters > .home-summary-counter.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--font-weight-strong);
  }

  #app-shell[data-active-view="tasks"] .home-summary-counter .home-summary-icon,
  #app-shell[data-active-view="tasks"] .home-summary-counter small,
  #app-shell[data-active-view="tasks"] .home-overview.execution-status-layout > .home-daily-summary {
    display: none;
  }

  #app-shell[data-active-view="tasks"] .home-summary-counter span,
  #app-shell[data-active-view="tasks"] .home-summary-counter strong {
    color: inherit;
    font-size: 0.875rem;
    font-weight: inherit;
    line-height: 1;
  }

  #app-shell[data-active-view="tasks"] .mobile-workspace-controls {
    position: relative;
    z-index: 4;
    display: flex;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 5.5rem;
    height: 3rem;
    gap: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.125rem max(var(--space-6), env(safe-area-inset-right, 0px)) 0.125rem 0;
    border: 0;
    background: var(--color-surface);
    box-shadow: none;
  }

  .mobile-workspace-controls > button {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
  }

  .mobile-workspace-controls > button > small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mobile-workspace-controls > button svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-workspace-controls > button:hover,
  .mobile-workspace-controls > button:focus-visible,
  .mobile-workspace-controls > button[aria-pressed="true"],
  .mobile-workspace-controls > button[aria-expanded="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .app-frame[data-mobile-panel="search"] .app-shell[data-active-view="tasks"] .task-command-primary,
  .app-frame[data-mobile-panel="search"] .task-command-primary {
    display: contents;
  }

  #app-shell[data-active-view="tasks"] .app-frame[data-mobile-panel="search"] .home-overview {
    display: none;
  }

  .app-frame[data-mobile-panel="search"] .mobile-workspace-controls {
    grid-column: 1 / -1;
    width: 100%;
    padding-left: max(var(--space-8), env(safe-area-inset-left, 0px));
  }

  .app-frame[data-mobile-panel="search"] .mobile-workspace-controls > button {
    display: none;
  }

  .app-frame[data-mobile-panel="search"] .mobile-view-search:not([hidden]) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 2.75rem;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    gap: var(--space-8);
    align-items: center;
    padding-left: var(--space-12);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
    color: var(--color-primary);
  }

  .mobile-view-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.9375rem;
  }

  .mobile-view-search-close {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: 1.25rem;
  }

  #app-shell[data-active-view="tasks"] .mobile-task-filter-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #app-shell[data-active-view="tasks"] :is(.mobile-card-count, .mobile-active-selection) {
    display: none;
  }

  #app-shell[data-active-view="tasks"] #task-toolbar {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 66%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 66%, transparent);
    background: var(--color-surface);
    box-shadow: none;
  }

  #app-shell[data-active-view="tasks"] #task-toolbar > :not(#overview-quick-create-host):not(#creation-focus-filter) {
    display: none;
  }

  #app-shell[data-active-view="tasks"] .overview-quick-create-host {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    padding: 0 max(var(--space-12), env(safe-area-inset-right, 0px)) 0 max(var(--space-12), env(safe-area-inset-left, 0px));
  }

  #app-shell[data-active-view="tasks"] .overview-quick-create-host[hidden] {
    display: none;
  }

  #app-shell[data-active-view="tasks"] .overview-quick-create-host .quick-create-form:not(.editing) .column-add-trigger {
    width: auto;
    min-width: 0;
    min-height: 2.75rem;
    justify-content: flex-start;
    gap: var(--space-8);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    box-shadow: none;
  }

  #app-shell[data-active-view="tasks"] #triage-banner {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  #app-shell[data-active-view="tasks"] :is(.mobile-task-filter-field, .triage-banner-text small, .overview-mode-indicator) {
    font-size: 0.8125rem;
  }

  #app-shell[data-active-view="tasks"] .task-work-area {
    grid-column: 1 / -1;
    grid-row: 5;
    min-height: 0;
  }

  /* The Today header opens the detailed status in place. Period controls stay
     stable below it, and the panel can be dismissed with the same trigger. */
  #app-shell[data-active-view="tasks"] .app-frame[data-mobile-panel="status"] .task-command-primary > .home-overview.execution-status-layout {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    height: auto;
    max-height: min(50dvh, 24rem);
    padding: var(--space-8);
    overflow: auto;
    box-shadow: 0 0.55rem 1.2rem var(--shadow-ink-10);
  }

  .app-frame[data-mobile-panel="status"] .home-overview.execution-status-layout > .home-daily-summary {
    display: grid;
  }

  /* Full-screen menu retains account/settings access without crowding row 1. */
  .app-frame[data-mobile-panel="menu"] .shared-workspace-header .session-card {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 5;
    min-height: 3.25rem;
    justify-content: flex-start;
    padding-inline: max(var(--space-12), env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--color-border);
  }

  .app-frame[data-mobile-panel="menu"] .shared-workspace-header .session-card > .account-menu-button {
    display: grid;
  }

  .app-frame[data-mobile-panel="menu"] .shared-workspace-header .session-card > .mobile-header-menu-button {
    display: none;
  }

  .app-frame[data-mobile-panel="menu"] .shared-workspace-header .session-card > .mobile-dependency-finder-button {
    display: grid;
  }

  #app-shell .app-frame[data-mobile-panel="menu"] .shared-workspace-header .sidebar-nav > .nav-button {
    display: grid;
  }
}


/* src/styles/focus.css */
/* src/styles/focusTaskCardCore.css */
/* Minimal is the focused working view: one compact row with only completion,
   hierarchy, title, planning state, existing-content hints and one action menu. */
.creation-focus-filter {
  grid-column: 1 / -1;
  display: inline-flex;
  width: fit-content;
  min-height: 2rem;
  align-items: center;
  gap: 0.38rem;
  margin: 0.15rem 0 0;
  padding: 0.26rem 0.34rem 0.26rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
  border-radius: var(--radius-full);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.74rem;
}

.creation-focus-filter[hidden] {
  display: none !important;
}

.creation-focus-filter > button {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font: inherit;
}

.creation-focus-filter > button:hover,
.creation-focus-filter > button:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  outline: none;
}

.home-progress-activity > button {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.22rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: inherit;
  line-height: 1.15;
  white-space: nowrap;
}

.home-progress-activity > button:hover,
.home-progress-activity > button:focus-visible,
.home-progress-activity > button.active {
  color: var(--color-primary);
  text-decoration: underline;
  outline: none;
}

.home-progress-activity > button b {
  color: var(--color-text-primary);
  font-size: 0.64rem;
}

@media (max-width: 37.4375rem) {
  .creation-focus-filter {
    width: 100%;
    justify-content: center;
  }
}


:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] {
  --minimal-card-height: 6.6rem !important;
  --minimal-focus-topbar-height: var(--overview-toolbar-height, 2.05rem);
  --minimal-focus-topbar-overhang: 0.58rem;
  row-gap: 1.35rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="auto"][data-card-size="minimal"] {
  --overview-auto-card-min: 27rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.selected,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.done {
  height: auto !important;
  min-height: var(--minimal-card-height) !important;
  max-height: none !important;
  padding: 1.92rem 0.78rem 0.38rem 0.9rem !important;
  border: 1px solid color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 14%, var(--color-border)) !important;
  border-left: 0.3rem solid var(--task-project-accent, var(--color-primary)) !important;
  border-radius: var(--radius-sm) ;
  overflow: visible !important;
  background: var(--color-surface) !important;
  box-shadow: 0 0.3rem 0.85rem var(--shadow-ink-10) ;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.overdue-planned:not(.done) {
  border-left-color: var(--color-danger) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card:hover {
  box-shadow: 0 0.42rem 1.05rem var(--shadow-ink-14) ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.selected,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.multi-selected {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 68%, var(--color-border)) !important;
  border-left-color: var(--task-project-accent, var(--color-primary)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 38%, transparent), 0 0.42rem 1.05rem var(--shadow-ink-14) ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: minmax(2.45rem, 1fr) 1.65rem !important;
  align-items: center !important;
  gap: 0.08rem 0.4rem !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-header::before,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-project-icon,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-marker-column {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-minimal-focus-topbar {
  position: absolute;
  top: calc(-1 * var(--minimal-focus-topbar-overhang));
  left: 0.62rem;
  right: 0.62rem;
  z-index: 8;
  display: flex;
  height: var(--minimal-focus-topbar-height);
  align-items: center;
  gap: var(--overview-toolbar-action-gap, 0.36rem);
  padding: 0 0.62rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 96%, white);
  box-shadow: 0 0.75rem 1.75rem var(--shadow-ink-11), 0 0.125rem 0.25rem var(--shadow-ink-05);
  overflow: visible;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .minimal-focus-card.overdue-planned:not(.done) .task-minimal-focus-topbar {
  border-color: color-mix(in srgb, var(--color-danger) 32%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .minimal-focus-card.selected .task-minimal-focus-topbar,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .minimal-focus-card.multi-selected .task-minimal-focus-topbar {
  border-color: color-mix(in srgb, var(--task-project-accent, var(--color-primary)) 62%, var(--color-border));
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-done-toggle {
  position: static !important;
  flex: 0 0 var(--overview-toolbar-control, 1.08rem) !important;
  width: var(--overview-toolbar-control, 1.08rem) !important;
  min-width: var(--overview-toolbar-control, 1.08rem) !important;
  height: var(--overview-toolbar-control, 1.08rem) !important;
  min-height: var(--overview-toolbar-control, 1.08rem) !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: var(--radius-xs);
  font-size: 0.66rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-sequence-number {
  position: static !important;
  display: inline-flex !important;
  width: 1.5rem !important;
  min-width: 1.5rem;
  height: var(--overview-toolbar-control, 1.08rem) !important;
  min-height: var(--overview-toolbar-control, 1.08rem) !important;
  align-self: center !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.92rem;
  font-weight: 700;
  line-height: var(--overview-toolbar-control, 1.08rem);
  transform: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-id {
  flex: 0 0 3.65rem !important;
  width: 3.65rem !important;
  min-width: 3.65rem;
  max-width: 3.65rem;
  justify-content: flex-start;
  padding-inline: 0.18rem !important;
  overflow: hidden;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card.overdue-planned:not(.done) .task-sequence-number {
  color: var(--color-danger);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-important-toggle {
  position: static !important;
  display: grid !important;
  flex: 0 0 var(--overview-toolbar-control, 1.08rem) !important;
  width: var(--overview-toolbar-control, 1.08rem) !important;
  min-width: var(--overview-toolbar-control, 1.08rem) !important;
  height: var(--overview-toolbar-control, 1.08rem) !important;
  min-height: var(--overview-toolbar-control, 1.08rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-color: var(--color-border);
  border-radius: var(--radius-xs);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  transform: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-important-toggle[aria-pressed="true"] {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 18%, var(--color-surface));
  color: color-mix(in srgb, var(--color-warning) 72%, var(--color-warning-deep));
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-delete {
  --minimal-delete-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M8 6V4h8v2m3 0-1 14H6L5 6m5 5v5m4-5v5'/%3E%3C/svg%3E");
  position: static !important;
  display: grid !important;
  flex: 0 0 var(--overview-toolbar-control, 1.08rem) !important;
  width: var(--overview-toolbar-control, 1.08rem) !important;
  min-width: var(--overview-toolbar-control, 1.08rem) !important;
  height: var(--overview-toolbar-control, 1.08rem) !important;
  min-height: var(--overview-toolbar-control, 1.08rem) !important;
  place-items: center;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-xs);
  background: transparent !important;
  color: var(--color-danger) !important;
  font-size: 0 !important;
  cursor: pointer;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-delete::before {
  display: block;
  width: var(--overview-toolbar-icon, 1rem);
  height: var(--overview-toolbar-icon, 1rem);
  background: currentColor;
  content: "";
  -webkit-mask: var(--minimal-delete-mask) center / contain no-repeat;
  mask: var(--minimal-delete-mask) center / contain no-repeat;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-delete::after {
  content: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-delete:hover,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-delete:focus-visible {
  background: color-mix(in srgb, var(--color-danger) 11%, transparent) !important;
  outline: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-content {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid !important;
  align-content: center;
  gap: 0.22rem !important;
  min-width: 0;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.overdue-planned:not(.done) {
  border-left-color: var(--task-project-accent, var(--color-primary)) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-context {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.18rem !important;
  max-height: 0.92rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--task-project-accent, var(--color-primary));
  font-size: 0.69rem !important;
  font-weight: 500 ;
  line-height: 0.92rem !important;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-context::before {
  display: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-link,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-separator {
  min-width: 0;
  overflow: hidden;
  font-size: inherit;
  font-weight: inherit ;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-context + .task-title {
  margin-top: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-title {
  display: block !important;
  max-height: 1.18rem !important;
  overflow: hidden !important;
  color: var(--color-text-primary);
  font-size: 0.88rem !important;
  font-weight: 650;
  line-height: 1.18rem !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-overview-body {
  display: block;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
  overflow: visible !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-overview-body:empty {
  display: none;
}

.task-minimal-focus-meta,
.task-minimal-focus-indicators {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-width: 0;
}

.task-minimal-focus-date,
.task-minimal-focus-indicator {
  position: relative;
  display: inline-flex;
  min-height: 1.6rem;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.16rem 0.38rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.73rem;
  font-weight: 600;
  white-space: nowrap;
}

.task-minimal-focus-date svg,
.task-minimal-focus-indicator svg {
  width: 0.88rem;
  height: 0.88rem;
  flex: 0 0 0.88rem;
}

.task-minimal-focus-date:hover,
.task-minimal-focus-date:focus-visible,
.task-minimal-focus-indicator:hover,
.task-minimal-focus-indicator:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}

.task-minimal-focus-date.overdue {
  padding-inline: 0.46rem;
  background: color-mix(in srgb, var(--color-danger) 11%, var(--color-surface));
  color: var(--color-danger);
}

.task-minimal-focus-date.today {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
}

.task-minimal-focus-date.due-soon {
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface));
  color: color-mix(in srgb, var(--color-warning) 78%, var(--color-warning-deep));
}

.task-minimal-focus-date.waiting {
  background: color-mix(in srgb, var(--color-text-secondary) 9%, var(--color-surface));
  color: var(--color-text-secondary);
}

.task-minimal-focus-date.done {
  background: color-mix(in srgb, var(--color-success) 11%, var(--color-surface));
  color: var(--color-success);
}

.task-minimal-focus-indicator {
  padding-inline: 0.22rem;
  color: var(--color-text-tertiary);
  font-size: 0.68rem;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-actions {
  position: static !important;
  display: block !important;
  width: 6.1rem !important;
  min-width: 6.1rem !important;
  max-width: 6.1rem !important;
  height: 1.8rem !important;
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  overflow: visible !important;
  contain: none;
}

.task-minimal-focus-quick-actions {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
}

.task-minimal-focus-quick-action {
  position: relative;
  display: grid;
  width: 1.85rem;
  min-width: 1.85rem;
  height: 1.85rem;
  min-height: 1.85rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  font: inherit;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.1rem);
  transition: color 140ms ease, background-color 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.task-minimal-focus-quick-action svg {
  width: 1rem;
  height: 1rem;
}

.task-minimal-focus-quick-action:hover,
.task-minimal-focus-quick-action:focus-visible,
.task-minimal-focus-quick-action.has-content {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: none;
}


/* src/styles/focusTaskCardDensity.css */
.task-minimal-focus-quick-action.has-content,
.minimal-focus-card:hover .task-minimal-focus-quick-action,
.minimal-focus-card.selected .task-minimal-focus-quick-action,
.minimal-focus-card.multi-selected .task-minimal-focus-quick-action,
.task-minimal-focus-quick-action:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.task-minimal-focus-quick-action.notes.has-content::after {
  position: absolute;
  top: 0.25rem;
  right: 0.24rem;
  width: 0.32rem;
  height: 0.32rem;
  border: 1px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-primary);
  content: "";
}

.task-minimal-focus-quick-count {
  position: absolute;
  top: -0.18rem;
  right: -0.1rem;
  display: grid;
  min-width: 0.86rem;
  height: 0.86rem;
  place-items: center;
  padding-inline: 0.14rem;
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1;
}

/* Explicit column counts can make a minimal card far narrower than the
   viewport.  Give its meta and quick actions separate rows at that point,
   instead of allowing both fixed-width groups to overlap. */
@container (max-width: 20rem) {
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: minmax(2.45rem, 1fr) 1.65rem !important;
    gap: 0.08rem 0.2rem !important;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-overview-body {
    grid-column: 1;
    grid-row: 2;
    max-width: 100%;
    overflow: hidden !important;
  }

  .task-minimal-focus-meta {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .task-minimal-focus-date {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .task-minimal-focus-indicators {
    flex: 0 0 auto;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-actions {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .task-minimal-focus-quick-actions {
    width: auto;
  }

  .task-minimal-focus-quick-action:not(.has-content) {
    display: none;
  }
}

@container (max-width: 13rem) {
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-minimal-focus-topbar {
    left: 0.28rem;
    right: 0.28rem;
    gap: 0.25rem;
    padding-inline: 0.42rem;
  }

  .task-minimal-focus-quick-action {
    width: 1.55rem;
    min-width: 1.55rem;
    height: 1.55rem;
    min-height: 1.55rem;
  }

  .task-minimal-focus-date {
    font-size: 0.66rem;
  }
}

@media (max-width: 37.4375rem) {
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] {
    --minimal-card-height: 7rem !important;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card {
    padding: 1.98rem 0.58rem 0.38rem 0.72rem !important;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-header {
    gap: 0.38rem !important;
  }

  .task-minimal-focus-date {
    font-size: 0.68rem;
  }

  .task-minimal-focus-indicators {
    gap: 0.12rem;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-actions {
    width: 6.35rem !important;
    min-width: 6.35rem !important;
    max-width: 6.35rem !important;
  }

  .task-minimal-focus-quick-actions {
    gap: 0.28rem;
  }

  .task-minimal-focus-quick-action {
    width: 1.9rem;
    min-width: 1.9rem;
    height: 1.9rem;
    min-height: 1.9rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .task-minimal-focus-quick-action {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.dependency-finder.details-mode .dependency-finder-view-tabs {
  margin-right: 4.35rem;
}

.dependency-finder.details-mode .dependency-finder-header {
  display: flex;
  gap: 0.25rem;
}

.dependency-finder.details-mode.detail-expanded .dependency-finder-details-view {
  padding-inline: var(--space-12);
}

.dependency-finder.details-mode.detail-expanded .compact-sidebar-detail .detail-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 37.4375rem) {
  .dependency-finder.details-mode .dependency-finder-header {
    top: 0.55rem;
    right: 0.55rem;
  }

  #dependency-finder-expand {
    display: none !important;
  }

  .dependency-finder.details-mode .dependency-finder-view-tabs {
    margin-right: 2.15rem;
  }
}

/* Adaptive overview density and the 04.09.2026 minimal-card specification.
   Density expresses intent; the browser derives the achievable column count
   from the available width and the selected card variant. */
:is(#task-list, .unified-search-cards).overview-list {
  --overview-density-min: 24rem;
  --overview-column-count: 3;
  display: grid !important;
  width: min(100%, 150rem);
  max-width: 150rem;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--overview-density-min)), 1fr)) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="list"] {
  --overview-column-count: 1;
  grid-template-columns: minmax(0, 1fr) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="dense"] { --overview-column-count: 5; }

:is(#task-list, .unified-search-cards).overview-list > .bulk-toolbar,
:is(#task-list, .unified-search-cards).overview-list > .column-add-form,
:is(#task-list, .unified-search-cards).overview-list > .quick-create-form,
:is(#task-list, .unified-search-cards).overview-list > .hierarchy-task-focus {
  grid-column: 1 / -1;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] { --overview-density-min: 15.625rem; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] { --overview-density-min: 21.25rem; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] { --overview-density-min: 37.5rem; }

/* Normal overview cards use row-wise flex wrapping. The hierarchy workspace
   remains a grid of its own. This prevents size-contained cards from
   contributing only their compact intrinsic header height to CSS Grid rows. */
:is(#task-list, .unified-search-cards).overview-list:not(.hierarchy-focus-list) {
  display: flex !important;
  flex-flow: row wrap !important;
  align-content: flex-start;
  align-items: flex-start !important;
}

:is(#task-list, .unified-search-cards).overview-list:not(.hierarchy-focus-list) > .task-item {
  flex: 1 1 var(--overview-density-min) !important;
  min-width: min(100%, var(--overview-density-min));
}

:is(#task-list, .unified-search-cards).overview-list:not(.hierarchy-focus-list) > .bulk-toolbar,
:is(#task-list, .unified-search-cards).overview-list:not(.hierarchy-focus-list) > .column-add-form,
:is(#task-list, .unified-search-cards).overview-list:not(.hierarchy-focus-list) > .quick-create-form,
:is(#task-list, .unified-search-cards).overview-list:not(.hierarchy-focus-list) > .hierarchy-task-focus {
  flex: 1 0 100% !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] {
  --minimal-card-height: 4.25rem !important;
  gap: 0.5rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.selected,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.done {
  position: relative;
  height: auto !important;
  min-height: var(--minimal-card-height) !important;
  max-height: none !important;
  padding: 0.25rem 0.68rem 0.25rem 0.62rem !important;
  border: 0 !important;
  border-left: 3px solid var(--task-project-accent, var(--color-primary)) !important;
  border-radius: var(--radius-md) ;
  background: var(--color-surface) !important;
  box-shadow: 0 1px 4px var(--shadow-ink-07) ;
  overflow: hidden !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card:has(.task-important-toggle[aria-pressed="true"]) {
  box-shadow: inset 0 0 0 1.5px var(--color-warning), 0 1px 4px var(--shadow-ink-07) ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.selected,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.multi-selected {
  outline: 0 ;
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-header {
  display: grid !important;
  grid-template-columns: 1.05rem minmax(0, 1fr) 1.05rem !important;
  grid-template-rows: 0.875rem 1.8rem 0.875rem !important;
  gap: 0.0625rem 0.48rem !important;
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
  overflow: visible !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-minimal-focus-topbar,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-content {
  display: contents !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-sequence-number,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-delete,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-actions,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-project-icon,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-marker-column {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-done-toggle {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  min-height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% ;
  transform: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-important-toggle {
  position: static !important;
  grid-column: 3;
  grid-row: 1;
  display: block !important;
  width: 0.9rem !important;
  min-width: 0.9rem !important;
  height: 0.9rem !important;
  min-height: 0.9rem !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: end;
  border: 0 !important;
  border-radius: 0 ;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-important-toggle::before {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-important-toggle svg {
  display: block;
  width: 0.82rem;
  height: 0.82rem;
  color: var(--color-text-muted);
  opacity: 0;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card:hover .task-important-toggle svg,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-important-toggle:focus-visible svg { opacity: 0.42; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-important-toggle[aria-pressed="true"] svg {
  color: var(--color-warning);
  opacity: 1;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-context {
  grid-column: 2;
  grid-row: 1;
  display: block !important;
  min-width: 0;
  max-height: 0.875rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--color-text-muted) !important;
  font-size: 0.69rem !important;
  font-weight: 400 ;
  line-height: 0.875rem !important;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-context::before { display: none !important; }
.task-parent-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-parent-path-full { display: flex; }

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-title {
  grid-column: 2 / -1;
  grid-row: 2;
  display: -webkit-box !important;
  height: 1.8rem !important;
  min-height: 1.8rem !important;
  max-height: 1.8rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--color-text-primary);
  font-size: 0.88rem !important;
  font-weight: 520;
  line-height: 0.9rem !important;
  text-overflow: ellipsis;
  white-space: normal !important;
  overflow-wrap: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-overview-body {
  grid-column: 2 / -1;
  grid-row: 3;
  display: block !important;
  min-width: 0;
  min-height: 0.875rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.task-minimal-focus-meta,
.task-minimal-focus-indicators { display: flex; min-width: 0; align-items: center; }
.task-minimal-focus-meta { gap: 0.48rem; }
.task-minimal-focus-indicators { gap: 0.28rem; overflow: hidden; }
.task-minimal-focus-date,
.task-minimal-focus-indicator {
  display: inline-flex;
  min-width: 0;
  min-height: 0.875rem;
  height: 0.875rem;
  align-items: center;
  gap: 0.12rem;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 0.875rem;
  white-space: nowrap;
}
.task-minimal-focus-date.overdue { color: var(--color-danger); }
.task-minimal-focus-date.today { color: var(--color-primary); }
.task-minimal-focus-date.due-soon { color: color-mix(in srgb, var(--color-warning) 72%, var(--color-warning-deep)); }
.task-minimal-focus-indicator { flex: 0 0 auto; color: var(--color-text-muted); }
.task-minimal-focus-indicator svg { width: 0.74rem; height: 0.74rem; flex: 0 0 0.74rem; }
.task-minimal-focus-indicator span { font-size: 0.65rem; }
.task-minimal-date-label-full,
.task-minimal-date-label-narrow { display: none; }
.task-minimal-date-label-medium { display: inline; }
.task-minimal-indicator-overflow { display: none; color: var(--color-text-muted); font-size: 0.65rem; white-space: nowrap; }

@container overview-card (min-width: 32.5rem) {
  .task-minimal-date-label-medium { display: none; }
  .task-minimal-date-label-full { display: inline; }
}

@container overview-card (max-width: 20.5rem) {
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-title {
    max-height: 1.8rem !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
  }
  .task-minimal-date-label-medium { display: none; }
  .task-minimal-date-label-narrow { display: inline; }
  .task-minimal-focus-indicator:nth-of-type(n + 3) { display: none; }
  .task-minimal-indicator-overflow { display: inline; }
}

:is(#task-list, .unified-search-cards).overview-list[data-column-mode="list"] .task-minimal-date-label-medium,
:is(#task-list, .unified-search-cards).overview-list[data-column-mode="list"] .task-minimal-date-label-narrow { display: none; }
:is(#task-list, .unified-search-cards).overview-list[data-column-mode="list"] .task-parent-path-full { display: flex; }
:is(#task-list, .unified-search-cards).overview-list[data-column-mode="list"] .task-minimal-date-label-full { display: inline; }
:is(#task-list, .unified-search-cards).overview-list[data-column-mode="list"] .minimal-focus-card .task-title {
  display: block !important;
  height: 1.05rem !important;
  min-height: 1.05rem !important;
  max-height: 1.05rem !important;
  white-space: nowrap !important;
  -webkit-line-clamp: unset !important;
}

.shared-workspace-header .today-progress-bar {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text-muted) 32%, transparent);
}

.shared-workspace-header .today-progress-bar > i.is-zero {
  width: 0.42rem !important;
  min-width: 0.42rem;
}


/* src/styles/focusTaskCardLevels.css */
@media (max-width: 37.4375rem) {
  :is(#task-list, .unified-search-cards).overview-list { grid-template-columns: minmax(0, 1fr) !important; }
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-title {
    display: block !important;
    height: 1.05rem !important;
    min-height: 1.05rem !important;
    max-height: 1.05rem !important;
    white-space: nowrap !important;
    -webkit-line-clamp: unset !important;
  }
  .task-minimal-date-label-medium,
  .task-minimal-date-label-narrow { display: none !important; }
  .task-parent-path-full { display: flex !important; }
  .task-minimal-date-label-full { display: inline !important; }
  .task-minimal-focus-indicator:nth-of-type(n + 3) { display: inline-flex; }
  .task-minimal-indicator-overflow { display: none; }
}

/* Ansichtsstufen: Kompakt = überfliegen, Erweitert = lesen/abhaken,
   Vollständig = direkt in der Karte bearbeiten. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] > .task-item {
  min-height: 5rem !important;
  height: 5rem !important;
  max-height: 5rem !important;
  padding: 0.55rem 0.68rem 0.5rem 0.62rem !important;
  border: 0 !important;
  border-left: 3px solid var(--task-project-accent, var(--color-primary)) !important;
  border-radius: var(--radius-md) ;
  background: var(--color-surface) !important;
  box-shadow: 0 1px 4px var(--shadow-ink-07) ;
  overflow: hidden !important;
  outline: 0 ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] > .task-item:has(.task-important-toggle[aria-pressed="true"]) {
  box-shadow: inset 0 0 0 1.5px var(--color-warning), 0 1px 4px var(--shadow-ink-07) ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] > .task-item .task-card-header {
  display: grid !important;
  grid-template-columns: 1.05rem minmax(0, 1fr) 1.05rem !important;
  grid-template-rows: 0.92rem 1.12rem minmax(1rem, 1fr) !important;
  gap: 0.12rem 0.48rem !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-sequence-number,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-project-icon,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-card-actions {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-marker-column,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-content {
  display: contents !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-card-context-line {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-done-toggle {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  width: 1rem !important;
  min-width: 1rem !important;
  height: 1rem !important;
  min-height: 1rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% ;
  transform: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-important-toggle {
  position: static !important;
  grid-column: 3;
  grid-row: 1;
  display: block !important;
  width: 0.9rem !important;
  height: 0.9rem !important;
  padding: 0 !important;
  justify-self: end;
  border: 0 !important;
  background: transparent !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-important-toggle svg {
  width: 0.82rem;
  height: 0.82rem;
  color: var(--color-warning);
  opacity: 0;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-important-toggle[aria-pressed="true"] svg { opacity: 1; }

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-parent-context {
  grid-column: 2;
  grid-row: 1;
  display: block !important;
  min-width: 0;
  max-height: 0.92rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--color-text-muted) !important;
  font-size: 0.69rem !important;
  font-weight: 400 ;
  line-height: 0.92rem !important;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-parent-context::before { display: none !important; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-title {
  grid-column: 2 / -1;
  grid-row: 2;
  display: block !important;
  min-width: 0;
  height: 1.12rem !important;
  min-height: 1.12rem !important;
  max-height: 1.12rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 0.88rem !important;
  line-height: 1.12rem !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-body {
  grid-column: 2 / -1;
  grid-row: 3;
  display: block !important;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-facts {
  display: flex !important;
  min-width: 0;
  align-items: center;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-fact {
  display: inline-flex !important;
  min-width: 0;
  width: auto !important;
  align-items: center;
  gap: 0.18rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 0.7rem !important;
  line-height: 1rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-fact-icon { width: 0.75rem; height: 0.75rem; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-fact-label { display: none; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-fact-value {
  font-size: 0.7rem !important;
  font-weight: 400 ;
}
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-tags:empty { display: none !important; }
.task-medium-content-indicators { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.34rem; }
.task-medium-content-indicator { display: inline-flex; align-items: center; gap: 0.12rem; color: var(--color-text-muted); font-size: 0.66rem; }
.task-medium-content-indicator svg { width: 0.75rem; height: 0.75rem; }

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item.selected,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item.done {
  min-height: 12.5rem !important;
  height: auto !important;
  max-height: none !important;
  padding: 1.7rem 1rem 0.72rem !important;
  border: 0 !important;
  border-left: 3px solid var(--task-project-accent, var(--color-primary)) !important;
  border-radius: var(--radius-md) ;
  background: var(--color-surface) !important;
  box-shadow: 0 1px 5px var(--shadow-ink-08) ;
  outline: 0 ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item:has(.task-important-toggle[aria-pressed="true"]) {
  box-shadow: inset 0 0 0 1.5px var(--color-warning), 0 1px 5px var(--shadow-ink-08) ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item.overdue-planned:not(.done) {
  border-left-color: var(--task-project-accent, var(--color-primary)) !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-sequence-number { opacity: 0; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item:hover .task-sequence-number { opacity: 0.52; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-important-toggle {
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none ;
}
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-important-toggle svg {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--color-warning);
  opacity: 0;
}
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item:hover .task-important-toggle svg { opacity: 0.35; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-important-toggle[aria-pressed="true"] svg { opacity: 1; }

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-card-actions > :not(.task-menu) { display: none !important; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-card-actions .task-menu {
  opacity: 0;
  border: 0 !important;
  background: transparent !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em;
}
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item:hover .task-card-actions .task-menu,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item.selected .task-card-actions .task-menu,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-card-actions .task-menu:focus-visible { opacity: 1; }

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-parent-context { color: var(--color-text-muted) !important; }
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-facts {
  border-color: var(--color-border) !important;
}
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] button.task-fact,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-fact {
  border-color: transparent !important;
  background: transparent !important;
}
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-fact-planned.overdue .task-fact-label,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-fact-planned.overdue .task-fact-value { color: var(--color-danger) !important; }

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-detail-previews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.5rem 0 0 !important;
  border-top: 1px solid var(--color-border);
}

.task-full-overview-note {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  line-height: 1.35;
}
.task-full-overview-note button,
.task-full-overview-note a {
  display: block;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-full-overview-note a { color: var(--color-primary); text-decoration: underline; }

.task-full-overview-input-rail {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.32rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.task-full-overview-input-rail::-webkit-scrollbar { display: none; }
.task-full-overview-input-target {
  flex: 0 0 auto;
  min-height: 1.85rem;
  padding: 0 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.7rem;
  white-space: nowrap;
}
.task-full-overview-input-target.is-empty { border-style: dashed; color: var(--color-text-muted); }
.task-full-overview-input-target.has-content { border-style: solid; color: var(--color-text-primary); }
.task-full-overview-input-target:hover,
.task-full-overview-input-target:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  outline: none;
}

.task-full-overview-inline-editor {
  display: flex;
  min-height: 2rem;
  align-items: center;
}
.task-full-overview-inline-editor input[type="text"] {
  width: 100%;
  min-height: 2rem;
  padding: 0 0.55rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.76rem;
}
.task-full-overview-inline-editor label {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0 0.55rem;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: 0.76rem;
}
.task-full-overview-inline-editor input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Win over the older high-specificity compact/full card rules. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) > .task-item {
  padding: 0.55rem 0.68rem 0.5rem 0.62rem !important;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]):not([data-overview-layout="list"]) .task-card-header::before {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) .task-marker-column {
  position: static !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) > .task-item {
  padding: 0.68rem 0.9rem 0.58rem 1rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-card-header {
  display: grid !important;
  grid-template-columns: 1.15rem minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 0.42rem 0.55rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-marker-column {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  display: block !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-done-toggle {
  width: 1.05rem !important;
  min-width: 1.05rem !important;
  height: 1.05rem !important;
  min-height: 1.05rem !important;
  border-radius: 50% ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-content {
  grid-column: 2;
  grid-row: 1;
  display: grid !important;
  gap: 0.12rem !important;
  padding: 0 2.25rem 0 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-parent-context {
  margin: 0 !important;
  font-size: 0.7rem !important;
  line-height: 1rem !important;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-title {
  display: block !important;
  height: 1.2rem !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 0.92rem !important;
  font-weight: 650 ;
  line-height: 1.2rem !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-overview-body {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid !important;
  grid-template-rows: none !important;
  gap: 0.42rem !important;
  margin: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-facts {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.28rem 0.8rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-fact {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  gap: 0.25rem !important;
  padding: 0 !important;
  font-size: 0.7rem !important;
  line-height: 1rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-fact-label {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-fact-dependency {
  flex: 1 0 100%;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-full-overview-note {
  padding: 0.48rem 0.58rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-overview-tags {
  display: flex !important;
  gap: 0.3rem !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-tag-controls {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-overview-tag {
  min-height: 1.35rem !important;
  padding: 0 0.45rem !important;
  border: 0 !important;
  background: var(--color-surface-muted) !important;
  font-size: 0.68rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-overview-tag-remove {
  display: none;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-important-toggle {
  position: absolute !important;
  top: 0.5rem !important;
  right: 2.3rem !important;
  left: auto !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-card-actions {
  top: 0.45rem !important;
  right: 0.65rem !important;
  height: 1.2rem !important;
}


/* src/styles/focusWorkspaceRules.css */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-card-actions .task-menu {
  width: 1.7rem !important;
  height: 1.2rem !important;
  color: var(--color-text-muted) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-card-actions .task-menu::before {
  content: none !important;
}

/* 04.09.2026 card review: importance is visible only when it is set. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item:not(:has(.task-important-toggle[aria-pressed="true"])) {
  box-shadow: 0 1px 5px var(--shadow-ink-08) ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-important-toggle:not([aria-pressed="true"]) svg,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item:hover .task-important-toggle:not([aria-pressed="true"]) svg {
  opacity: 0 !important;
}

/* Whitespace separates the wide card sections; no band-like internal rules. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-full-overview-detail-previews {
  padding-top: 0.22rem !important;
  border-top: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-planning-panel {
  margin-top: 0 !important;
  padding: 0.1rem 0 0 !important;
  border: 0 !important;
  border-radius: 0 ;
  background: transparent !important;
}

/* Scheduling remains available, but reads like a quiet text action row. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip-list {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 1.2rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 ;
  background: transparent !important;
  color: var(--color-primary) !important;
  box-shadow: none ;
  font-size: 0.7rem !important;
  font-weight: 600 ;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip:hover,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"]:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Legacy Erweitert hover actions are neutralized by the final addendum below. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) .task-planning-panel {
  position: absolute;
  right: 0.7rem;
  bottom: 0.38rem;
  left: 2.25rem;
  z-index: 6;
  margin: 0 !important;
  padding: 0.12rem 0 !important;
  border: 0 !important;
  background: var(--color-surface) !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) > .task-item:hover .task-planning-panel,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) > .task-item:focus-within .task-planning-panel {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip-list {
  display: flex !important;
  gap: 0.8rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"]:not([data-overview-layout="list"]) .task-planning-panel .task-date-chip {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 ;
  background: transparent !important;
  color: var(--color-primary) !important;
  box-shadow: none ;
  font-size: 0.66rem !important;
}

/* The red wording already communicates overdue state; its calendar is noise. */
:is(#task-list, .unified-search-cards).overview-list .task-fact-planned.overdue .task-fact-icon {
  display: none !important;
}

/* Breadcrumbs always contain the complete path. Their actual container width,
   rather than the selected card preset, determines whether text overflows. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-parent-context {
  overflow: hidden !important;
  text-overflow: ellipsis;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-parent-path-full {
  display: flex !important;
}

@media (max-width: 37.4375rem) {
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] > .task-item {
    height: 5rem !important;
    min-height: 5rem !important;
    max-height: 5rem !important;
  }
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item { min-height: 12.5rem !important; }
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-minimal-date-label-full,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-minimal-date-label-medium,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-minimal-date-label-full,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-minimal-date-label-narrow,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-minimal-date-label-medium,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-minimal-date-label-narrow {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-minimal-date-label-narrow,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-minimal-date-label-medium,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-minimal-date-label-full {
  display: inline !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-minimal-focus-indicator:nth-of-type(n + 3) {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .task-minimal-indicator-overflow {
  display: inline !important;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="compact"], [data-card-size="full"]) .task-minimal-focus-indicator {
  display: inline-flex !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-minimal-indicator-overflow,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-minimal-indicator-overflow {
  display: none !important;
}

/* Kompakt and Erweitert are read/complete views. Editing starts in the detail
   panel or in Vollständig; completion remains available through the checkbox. */
:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="minimal"], [data-card-size="compact"]) .task-important-toggle {
  pointer-events: none !important;
  cursor: default !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-planning-panel {
  display: none !important;
}

/* Final 05.09 view-level addendum: the three levels describe visible content,
   while a measured grid packs their genuinely variable heights without holes. */
:is(#task-list, .unified-search-cards).overview-list.masonry-layout:not(.hierarchy-focus-list) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--overview-density-min)), 1fr)) !important;
  grid-auto-flow: dense;
  grid-auto-rows: 1px !important;
  gap: 0.75rem !important;
  align-items: start !important;
}

:is(#task-list, .unified-search-cards).overview-list.masonry-layout:not(.hierarchy-focus-list) > * {
  min-width: 0 !important;
  align-self: start !important;
}

:is(#task-list, .unified-search-cards).overview-list.masonry-layout:not(.hierarchy-focus-list) > .task-item {
  width: auto !important;
  flex: none !important;
}

:is(#task-list, .unified-search-cards).overview-list.masonry-layout:not(.hierarchy-focus-list) > :is(.bulk-toolbar, .column-add-form, .quick-create-form, .hierarchy-task-focus) {
  grid-column: 1 / -1 !important;
}

.overview-mode-indicator {
  position: absolute;
  z-index: 3;
  top: 0.12rem;
  left: 1.5rem;
  display: inline-flex;
  width: fit-content;
  min-height: 0;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.62rem;
  line-height: 1;
}

.task-panel:has(:is(#task-list, .unified-search-cards).overview-list) {
  position: relative;
}

@media (max-width: 47.999rem) {
  .overview-mode-indicator {
    left: 0.42rem;
  }
}

.overview-mode-indicator strong {
  color: var(--color-text-secondary);
  font-size: inherit;
  font-weight: var(--font-weight-strong);
}

/* Use the existing air between capture/banner and cards instead of spending a
   separate row on the mode label. The cleanup prompt is a compact action, not
   another content card. */
@media (min-width: 48rem) {
  .app-shell[data-active-view="tasks"] .workspace > section[data-screen="tasks"] > .task-command-row {
    margin-inline: 1.5rem;
  }

  .app-shell[data-active-view="tasks"] .overview-quick-create-host {
    padding: 0.1rem 1.5rem 0 !important;
  }

  .app-shell[data-active-view="tasks"] .overview-quick-create-host .quick-create-form:not(.editing) .column-add-trigger {
    min-height: 1.5rem;
    font-size: 0.82rem;
  }

  .app-shell[data-active-view="tasks"] .triage-banner {
    min-height: 3rem;
    margin: 0.25rem 1.5rem 0.45rem;
    padding: 0.35rem 0.75rem;
    gap: 0.45rem;
    border-left-width: 0.25rem;
    border-radius: var(--radius-md);
    box-shadow: 0 0.25rem 0.7rem var(--shadow-ink-08);
  }

  .app-shell[data-active-view="tasks"] .triage-banner-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .app-shell[data-active-view="tasks"] .triage-banner-icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .app-shell[data-active-view="tasks"] .triage-banner-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.55rem;
    margin-left: 0;
  }

  .app-shell[data-active-view="tasks"] .triage-banner-text strong {
    font-size: 0.9rem;
  }

  .app-shell[data-active-view="tasks"] .triage-banner-text small {
    font-size: 0.72rem;
  }

  .app-shell[data-active-view="tasks"] .triage-banner-start {
    margin-right: 0;
    padding-inline: 0.6rem;
    font-size: 0.82rem;
  }

  .app-shell[data-active-view="tasks"] .triage-banner-dismiss {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0;
    font-size: 1.15rem;
  }

  .app-shell[data-active-view="tasks"] .task-panel:has(:is(#task-list, .unified-search-cards).overview-list) {
    position: relative;
    padding-inline: 1.5rem;
    padding-top: 0.9rem;
  }

}

/* Mein Tag owns its search and controls inside the two work columns. Never
   leave the global Tasks toolbars behind as an empty white header or a loose
   settings icon. */
.app-shell[data-active-view="myday"] :is(.task-command-row, #task-toolbar, #triage-banner, #overview-mode-indicator) {
  display: none !important;
}

.task-parent-path {
  min-width: 0;
  max-height: 0.92rem;
  overflow: hidden;
  line-height: 0.92rem;
  white-space: nowrap !important;
}

.task-parent-path-part {
  display: flex;
  min-width: 0;
  max-width: none;
  flex: 0 1 auto;
  white-space: nowrap;
}

.task-parent-path-segment {
  display: block;
  min-width: 0;
  max-width: none;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-parent-path-separator {
  display: block;
  flex: 0 0 auto;
  margin: 0 0.24rem;
  color: color-mix(in srgb, var(--color-text-muted) 72%, transparent);
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.selected,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] > .task-item.minimal-focus-card.done,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] > .task-item,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] > .task-item {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-card-header,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] > .task-item .task-card-header {
  grid-template-rows: auto auto auto !important;
  height: auto !important;
  align-items: start !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-context,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-parent-context,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-parent-context {
  max-height: 1.84rem !important;
  white-space: normal !important;
}

:is(#task-list, .unified-search-cards).overview-list:is([data-card-size="minimal"], [data-card-size="compact"], [data-card-size="full"]) .task-title {
  display: -webkit-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 2.4rem !important;
  overflow: hidden !important;
  line-height: 1.2rem !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-title {
  max-height: 1.8rem !important;
  line-height: 0.9rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-body {
  display: grid !important;
  gap: 0.42rem !important;
  overflow: visible !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-body:empty {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] > .task-item .task-card-header:has(> .task-overview-body:empty) {
  grid-template-rows: auto auto !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-facts {
  flex-wrap: wrap;
  overflow: visible !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.3rem !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-tag-controls,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-tag-remove {
  display: none !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-tag {
  min-height: 1.3rem !important;
  padding: 0 0.42rem !important;
  border: 0 !important;
  background: var(--color-surface-muted) !important;
  font-size: 0.67rem !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-full-overview-detail-previews,
:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-full-overview-detail-previews {
  display: grid !important;
  gap: 0.45rem;
  padding: 0 !important;
  border: 0 !important;
}

.task-full-overview-detail-previews.is-extended .task-full-overview-note button,
.task-full-overview-detail-previews.is-extended .task-full-overview-note a {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.task-full-overview-detail-previews.is-complete .task-full-overview-note button,
.task-full-overview-detail-previews.is-complete .task-full-overview-note a {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-tag-controls {
  display: flex !important;
}

:is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-overview-tag-remove {
  display: inline-flex !important;
}

/* Wissen and Planung use the shared three-column workspace pattern from the
   05.09 specification. Their own toolbars replace the generic task controls. */
.app-shell:is([data-active-view="infos"], [data-active-view="projects"], [data-active-view="calendar"]) .task-command-row {
  display: none !important;
}
:root:not(.has-unified-search) .app-shell[data-active-view="calendar"] .mobile-workspace-controls {
  display: none !important;
}
@media (min-width: 37.5rem) {
  .app-shell:is([data-active-view="infos"], [data-active-view="projects"]) .app-frame {
    --task-top-stack-height: 3.6rem !important;
  }

  .app-shell[data-active-view="infos"] #dependency-finder {
    display: none !important;
  }
}


/* src/styles/knowledgeWorkspace.css */
.task-panel:has(#task-list:is(.info-list, .project-list)) {
  padding: 0;
  overflow: auto;
}

#task-list:is(.info-list, .project-list) {
  height: 100%;
  min-height: 0;
  overflow: visible;
}

#task-list:is(.info-list, .project-list) > .bulk-toolbar[hidden] {
  display: none;
}

.split-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
}

.split-workspace-toolbar {
  display: flex;
  grid-column: 1 / -1;
  gap: var(--space-12);
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding: var(--space-10) var(--space-16);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.knowledge-search,
.planning-workspace-search {
  display: flex;
  width: min(22rem, 42vw);
  min-height: 2.25rem;
  gap: var(--space-8);
  align-items: center;
  padding: 0 var(--space-10);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.knowledge-toolbar:not(.search-open) .knowledge-search { display: none; }

.knowledge-search svg,
.planning-workspace-search svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--color-text-tertiary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.knowledge-search input,
.planning-workspace-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.84rem;
}

.planning-workspace-search input {
  appearance: none;
  -webkit-appearance: none;
}

.planning-workspace-search input::-webkit-search-cancel-button,
.planning-workspace-search input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

.knowledge-mode-switch,
.planning-visibility-switch {
  display: inline-flex;
  padding: 0.15rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.knowledge-mode-switch button,
.planning-visibility-switch button {
  min-height: 1.9rem;
  padding: 0 var(--space-12);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}

.knowledge-mode-switch button.active,
.planning-visibility-switch button.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-strong);
  box-shadow: 0 1px 3px var(--shadow-ink-12);
}

.split-workspace-columns {
  display: grid;
  min-height: 0;
  overflow: hidden;
}

.split-workspace-column {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.knowledge-columns {
  grid-template-columns:
    var(--knowledge-project-width, 13.125rem)
    0.45rem
    var(--knowledge-topic-width, 16.875rem)
    0.45rem
    minmax(0, 1fr);
}
.knowledge-columns.projects-collapsed { grid-template-columns: 3.25rem 0.45rem var(--knowledge-topic-width, 16.875rem) 0.45rem minmax(0, 1fr); }
.knowledge-columns.topics-collapsed { grid-template-columns: var(--knowledge-project-width, 13.125rem) 0.45rem 3.25rem 0.45rem minmax(0, 1fr); }
.knowledge-columns.projects-collapsed.topics-collapsed { grid-template-columns: 3.25rem 0.45rem 3.25rem 0.45rem minmax(0, 1fr); }

.knowledge-navigation {
  padding: var(--space-8) 0;
}

.knowledge-project-filter {
  display: flex;
  gap: var(--space-4);
  margin: 0 var(--space-6) var(--space-8);
  padding: 0.18rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.knowledge-project-filter button {
  min-width: 0;
  min-height: 1.75rem;
  flex: 1 1 auto;
  padding: 0.2rem 0.42rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.knowledge-project-filter button:hover,
.knowledge-project-filter button:focus-visible,
.knowledge-project-filter button.active {
  background: var(--color-surface);
  color: var(--color-primary);
}

.knowledge-project-filter button.active { font-weight: var(--font-weight-strong); }

.knowledge-project-navigation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.8rem;
  align-items: center;
  padding-right: var(--space-6);
}

.knowledge-project-navigation-row > .knowledge-navigation-item {
  width: calc(100% - var(--space-6));
  margin-right: 0;
}

.knowledge-project-edit {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  font: inherit;
  cursor: pointer;
}

.knowledge-project-edit:hover,
.knowledge-project-edit:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.knowledge-column-resizer {
  position: relative;
  z-index: 2;
  min-width: 0;
  cursor: col-resize;
  touch-action: none;
}
.knowledge-column-resizer::before {
  position: absolute;
  inset: 0 0 0 50%;
  width: 1px;
  background: var(--color-border);
  content: "";
}
.knowledge-column-resizer:hover::before,
.knowledge-column-resizer:focus-visible::before { width: 2px; background: var(--color-primary); }
.knowledge-column-resizer > button {
  position: absolute;
  top: 0.65rem;
  left: 50%;
  display: grid;
  width: 1.15rem;
  height: 1.5rem;
  padding: 0;
  transform: translateX(-50%);
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}
.knowledge-column-resizer > button:hover { border-color: var(--color-primary); color: var(--color-primary); }

.knowledge-navigation-item {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  width: calc(100% - var(--space-12));
  min-height: 2.15rem;
  gap: var(--space-8);
  align-items: center;
  margin: 0 var(--space-6);
  padding: 0 var(--space-10) 0 calc(var(--space-10) + var(--knowledge-depth, 0) * 1rem);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.79rem;
  text-align: left;
  cursor: pointer;
}

.knowledge-navigation-item:hover,
.knowledge-navigation-item.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

@media (hover: none) {
  .knowledge-navigation-item:hover:not(.active) {
    background: transparent;
    color: var(--color-text-secondary);
  }
}

.knowledge-navigation-item.active { font-weight: var(--font-weight-strong); }
.knowledge-navigation-item.done .knowledge-navigation-label {
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}
.knowledge-navigation-item small { color: var(--color-text-tertiary); font-size: 0.68rem; }
.knowledge-navigation-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-navigation-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
}

.knowledge-navigation-copy .knowledge-navigation-label { flex: 1 1 auto; }

.knowledge-column-board-context {
  display: flex;
  min-width: 0;
  padding: var(--space-6) var(--space-10);
}

.knowledge-reader-path {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.knowledge-navigation-icon {
  position: relative;
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--knowledge-accent, var(--color-text-tertiary)) 12%, var(--color-surface));
  color: var(--knowledge-accent, var(--color-text-tertiary));
}

.knowledge-navigation-icon::before { content: "▱"; font-size: 0.75rem; }
.knowledge-topic-icon {
  font-size: 0.62rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.knowledge-topic-icon::before { content: none; }
.knowledge-result-task {
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
}
.knowledge-result-task::before { content: none; }
.knowledge-navigation-icon.has-project-icon::before {
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  content: "";
  mask: var(--task-project-icon-url) center / contain no-repeat;
  -webkit-mask: var(--task-project-icon-url) center / contain no-repeat;
}

.knowledge-columns:is(.projects-collapsed, .topics-collapsed) .knowledge-navigation-item { transition: padding 120ms ease; }
.knowledge-columns.projects-collapsed .knowledge-projects .knowledge-navigation-item,
.knowledge-columns.topics-collapsed .knowledge-topics .knowledge-navigation-item {
  grid-template-columns: 1fr;
  width: 2.35rem;
  justify-items: center;
  margin-inline: auto;
  padding: 0;
}
.knowledge-columns.projects-collapsed .knowledge-projects .knowledge-navigation-label,
.knowledge-columns.projects-collapsed .knowledge-projects .knowledge-navigation-item small,
.knowledge-columns.topics-collapsed .knowledge-topics .knowledge-navigation-label,
.knowledge-columns.topics-collapsed .knowledge-topics .knowledge-navigation-item small,
.knowledge-columns:is(.projects-collapsed, .topics-collapsed) .knowledge-column-empty { display: none; }
.knowledge-columns.projects-collapsed .knowledge-project-filter { display: none; }
.knowledge-column-empty { padding: 0.7rem 0.85rem; color: var(--color-text-tertiary); font-size: 0.75rem; }

.knowledge-reader {
  --knowledge-reader-inline-padding: 1.5rem;
  --knowledge-reader-block-padding: 1.2rem;
  padding: 1.2rem 1.5rem 2rem;
  border-right: 0;
}
.knowledge-topic-root {
  margin-top: 0;
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-sm);
  background: var(--knowledge-main-surface);
  box-shadow: inset 3px 0 0 var(--knowledge-main-accent);
}
.knowledge-document {
  --knowledge-main-surface: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  --knowledge-main-accent: color-mix(in srgb, var(--color-primary) 76%, var(--color-border));
  --knowledge-child-surface: color-mix(in srgb, var(--color-text-tertiary) 8%, var(--color-surface));
  --knowledge-parent-surface: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  --knowledge-parent-accent: color-mix(in srgb, var(--color-primary) 58%, var(--color-border));
}
.knowledge-document-card,
.knowledge-task-row {
  border-radius: var(--radius-sm);
  background: var(--knowledge-child-surface);
}
.knowledge-document-card.has-children,
.knowledge-task-row.has-children {
  background: var(--knowledge-parent-surface);
  box-shadow: inset 2px 0 0 var(--knowledge-parent-accent);
}
.knowledge-document-card.has-children,
.knowledge-task-row.has-children { padding-right: var(--space-8); }

.knowledge-reader-path { color: var(--color-text-tertiary); font-size: 0.72rem; }
.knowledge-reader > header { position: relative; margin-top: var(--space-6); }
.knowledge-reader > header:has(.knowledge-root-quick-actions .knowledge-quick-menu[open]) { z-index: 60; }
.knowledge-reader > header:has(.knowledge-type-control[open]) { z-index: 60; }
.knowledge-reader > header { display: grid; grid-template-columns: 1.65rem minmax(0, 1fr); align-items: flex-start; gap: var(--space-6); }
.knowledge-reader > header.has-branch-toggle { grid-template-columns: 1.35rem 1.65rem minmax(0, 1fr); }
.knowledge-reader > header.has-drag-handle { grid-template-columns: 1.15rem 1.65rem minmax(0, 1fr); }
.knowledge-reader > header.has-branch-toggle.has-drag-handle { grid-template-columns: 1.35rem 1.15rem 1.65rem minmax(0, 1fr); }
.knowledge-reader > header {
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 76%, var(--color-border));
}
.knowledge-reader > header > div { min-width: 0; }
.knowledge-reader h2 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.knowledge-reader > header h2 {
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text-primary));
}
.knowledge-reader > header small { display: block; margin-top: var(--space-6); color: var(--color-text-tertiary); font-size: 0.7rem; }
.knowledge-reader-heading-meta {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin-top: var(--space-6);
  align-items: center;
  gap: var(--space-6);
}
.knowledge-reader-heading-meta > small { flex: 0 1 auto; margin-top: 0; }
.knowledge-reader-heading-meta > .knowledge-task-date { margin-left: 0; }

.knowledge-reader h2[contenteditable="true"] {
  border-radius: var(--radius-xs);
  outline: 0;
}

.knowledge-reader h2[contenteditable="true"]:hover {
  background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
}

.knowledge-reader h2[contenteditable="true"]:focus {
  background: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
}

.knowledge-document-toolbar {
  position: sticky;
  top: calc(-1 * var(--knowledge-reader-block-padding));
  z-index: 50;
  isolation: isolate;
  box-sizing: border-box;
  width: calc(100% + (2 * var(--knowledge-reader-inline-padding)));
  max-width: none;
  margin-top: 0;
  margin-right: calc(-1 * var(--knowledge-reader-inline-padding));
  margin-bottom: var(--space-8);
  margin-left: calc(-1 * var(--knowledge-reader-inline-padding));
  padding: calc(var(--space-4) + var(--space-8)) var(--knowledge-reader-inline-padding) var(--space-4);
  background: var(--color-surface);
}

.knowledge-document-toolbar::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: calc(-1 * var(--space-8));
  left: 0;
  background: var(--color-surface);
  content: "";
  pointer-events: none;
}

.knowledge-document-toolbar .rich-notes-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  overflow: visible;
  margin: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.knowledge-document-toolbar .rich-notes-tool-group.alignment,
.knowledge-document-toolbar .rich-notes-tool:is(.font, .size, .underline, .strike),
.knowledge-document-toolbar .emphasis-dropdown,
.knowledge-document-toolbar .list-dropdown,
.knowledge-document-toolbar .icon-image,
.knowledge-document-toolbar .icon-table,
.knowledge-document-toolbar .rich-notes-more {
  display: none !important;
}


/* src/styles/knowledgeTopicsColumn.css */
/* The topic column keeps its create-topic header fixed and only scrolls its list,
   so "+ Thema" stays reachable no matter how many main topics a project has.
   Scoped to widths above the mobile single-row layout in planningResponsive.css,
   which turns this column into a horizontally swipeable strip instead. */
@media (min-width: 52.0625rem) {
  .knowledge-navigation.knowledge-topics {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
  }

  .knowledge-topics-header {
    flex: 0 0 auto;
    padding: var(--space-6) var(--space-8);
    border-bottom: 1px solid var(--color-border);
  }

  .knowledge-topics-list {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-8) 0;
    overflow: auto;
  }
}

.knowledge-topic-drop-wrap {
  position: relative;
}

.knowledge-topic-context-control {
  position: absolute;
  z-index: 20;
}
.knowledge-topic-context-control[open] { z-index: 90; }
.knowledge-topic-context-trigger { display: none; }
.knowledge-topic-context-control .knowledge-type-menu { top: 0; left: 0; }
.knowledge-topic-item { cursor: context-menu; }


/* src/styles/knowledgeEditing.css */
.knowledge-type-control {
  position: relative;
  z-index: 7;
  align-self: start;
  color: var(--color-text-tertiary);
}
.knowledge-type-control[open] { z-index: 90; }
.knowledge-type-control > summary { list-style: none; }
.knowledge-type-control > summary::-webkit-details-marker { display: none; }
.knowledge-type-trigger {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.52;
}
.knowledge-type-trigger svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.knowledge-type-control.task .knowledge-type-trigger { color: var(--color-primary); }
.knowledge-type-control:hover .knowledge-type-trigger,
.knowledge-type-control:focus-within .knowledge-type-trigger,
.knowledge-type-control[open] .knowledge-type-trigger,
.knowledge-document-card:hover > .knowledge-type-control .knowledge-type-trigger,
.knowledge-task-row:hover > .knowledge-type-control .knowledge-type-trigger,
.editor-active > .knowledge-type-control .knowledge-type-trigger {
  border-color: var(--color-border);
  background: var(--color-surface);
  opacity: 1;
}
.knowledge-document-card,
.knowledge-task-row { cursor: context-menu; }
.knowledge-document-card :is(.rich-notes-editor, [contenteditable="true"], input, textarea),
.knowledge-task-row :is(.rich-notes-editor, [contenteditable="true"], input, textarea) { cursor: text; }
.knowledge-type-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 80;
  display: grid;
  width: max-content;
  min-width: 10.5rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.knowledge-type-menu button {
  display: grid;
  min-height: 2.1rem;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
  cursor: pointer;
}
.knowledge-type-menu button:hover,
.knowledge-type-menu button:focus-visible { background: var(--color-primary-soft); outline: 0; }
.knowledge-type-menu button.active { color: var(--color-primary); font-weight: var(--font-weight-strong); }
.knowledge-type-menu button.danger { color: var(--color-danger); }
.knowledge-type-menu button.danger:hover,
.knowledge-type-menu button.danger:focus-visible {
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  color: var(--color-danger);
}
.knowledge-type-menu button:disabled { cursor: default; opacity: 0.75; }
.knowledge-type-menu hr { width: 100%; margin: var(--space-4) 0; border: 0; border-top: 1px solid var(--color-border); }

.knowledge-selection-toolbar {
  position: fixed;
  z-index: 70;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}
.knowledge-selection-toolbar[hidden] { display: none; }
.knowledge-selection-toolbar button {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-surface);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}
.knowledge-selection-toolbar button:hover,
.knowledge-selection-toolbar button:focus-visible { background: color-mix(in srgb, var(--color-surface) 18%, transparent); outline: 0; }
.knowledge-selection-toolbar .text-to-task .rich-notes-icon,
.rich-notes-tool.convert-selection-task .rich-notes-icon { width: 1.2rem; height: 1.2rem; }

.knowledge-rich-notes { position: relative; }
.knowledge-slash-menu {
  position: absolute;
  top: 1.8rem;
  left: 0;
  z-index: 18;
  display: grid;
  min-width: 10rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.knowledge-slash-menu[hidden] { display: none; }
.knowledge-slash-menu button {
  min-height: 2.1rem;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
  cursor: pointer;
}
.knowledge-slash-menu button:hover,
.knowledge-slash-menu button:focus-visible { background: var(--color-primary-soft); outline: 0; }

.knowledge-convert-task {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0 var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}

.knowledge-parent-field {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  max-width: 46rem;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}
.knowledge-parent-field select {
  min-width: 0;
  min-height: 2rem;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}

.knowledge-toolbar { flex-wrap: wrap; }
.knowledge-toolbar-actions { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: var(--space-8); }
.knowledge-completed-filter {
  flex: 0 0 auto;
}

.rich-text-task-placement-dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}

.rich-text-task-placement-dialog::backdrop {
  background: var(--shadow-ink-34);
  backdrop-filter: blur(3px);
}

.rich-text-task-placement-shell {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-20);
}

.rich-text-task-placement-shell h2,
.rich-text-task-placement-shell p { margin: 0; }
.rich-text-task-placement-shell h2 { font-size: var(--text-title); }
.rich-text-task-placement-shell p {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rich-text-task-placement-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.rich-text-task-placement-choices button,
.rich-text-task-placement-cancel {
  min-height: var(--space-44);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}

.rich-text-task-placement-choices button {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-12);
  text-align: left;
}

.rich-text-task-placement-choices button:hover,
.rich-text-task-placement-choices button:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  outline: 0;
}

.rich-text-task-placement-choices small { color: var(--color-text-secondary); }
.rich-text-task-placement-cancel { justify-self: end; padding: 0 var(--space-16); }

@media (max-width: 32rem) {
  .rich-text-task-placement-choices { grid-template-columns: minmax(0, 1fr); }
  .rich-text-task-placement-cancel { width: 100%; justify-self: stretch; }
}
.knowledge-create-form {
  display: flex;
  min-width: 0;
  min-height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.knowledge-topics-header .knowledge-create-form { width: 100%; }
.knowledge-create-form input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 var(--space-8);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
}
.knowledge-create-form button {
  padding: 0 var(--space-8);
  border: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.knowledge-reader-body {
  max-width: 46rem;
  color: var(--color-text-secondary);
  font-size: 0.86rem;
  line-height: 1.68;
}
.knowledge-reader-body[contenteditable="true"]:empty::before {
  color: var(--color-text-tertiary);
  content: attr(data-placeholder);
  pointer-events: none;
}
.knowledge-rich-notes {
  max-width: 46rem;
  margin-top: var(--space-14);
}
.knowledge-rich-notes.knowledge-shared-editor {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.knowledge-rich-notes.knowledge-shared-editor .rich-notes-editor {
  min-height: 1.35rem;
  max-height: none;
  padding: 0.05rem 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.knowledge-topic-root > .knowledge-rich-notes { margin-top: 0.15rem; }
.knowledge-rich-notes.knowledge-shared-editor .rich-notes-editor:empty::before {
  opacity: 0.72;
}
.knowledge-card-quick-actions {
  position: relative;
  z-index: 8;
  display: block;
  height: 0;
  max-width: 46rem;
  margin: 0;
  overflow: visible;
}
.knowledge-card-quick-actions:has(.knowledge-quick-menu[open]) { z-index: 30; }
.knowledge-reader:has(.knowledge-quick-menu[open]) .knowledge-quick-menu:not([open]) > summary {
  pointer-events: none;
  opacity: 0;
}
.knowledge-quick-menu {
  position: absolute;
  top: -1.45rem;
  right: 0;
}
.knowledge-quick-menu > summary {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  opacity: 0;
}
.knowledge-quick-menu > summary::-webkit-details-marker { display: none; }
.knowledge-topic-root:hover .knowledge-quick-menu > summary,
.knowledge-document-card:hover .knowledge-quick-menu > summary,
.knowledge-task-row:hover .knowledge-quick-menu > summary,
.knowledge-reader > header:hover .knowledge-root-quick-actions .knowledge-quick-menu > summary,
.knowledge-card-quick-actions:focus-within .knowledge-quick-menu > summary,
.knowledge-quick-menu[open] > summary { opacity: 1; }
.knowledge-quick-menu > summary:hover,
.knowledge-quick-menu > summary:focus-visible,
.knowledge-quick-menu[open] > summary {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: 0;
}
.knowledge-quick-menu-options {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  z-index: 31;
  display: grid;
  width: max-content;
  min-width: 10.5rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.knowledge-quick-menu-options button {
  min-height: 2.1rem;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
  text-align: left;
  cursor: pointer;
}
.knowledge-quick-menu-options button:hover,
.knowledge-quick-menu-options button:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: 0;
}
.knowledge-quick-create {
  display: flex;
  min-width: min(24rem, 100%);
  gap: var(--space-4);
}
.knowledge-quick-create[hidden] { display: none; }
.knowledge-card-quick-actions.creating {
  height: auto;
  min-height: 2.25rem;
  margin: var(--space-4) 0;
}
.knowledge-quick-create input {
  min-width: 8rem;
  min-height: 2rem;
  flex: 1 1 auto;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.75rem;
}
.knowledge-task-quick-actions {
  width: 1.55rem;
  height: 1.55rem;
  max-width: none;
  align-self: center;
}
.knowledge-task-quick-actions .knowledge-quick-menu { top: 0; right: 0; }
.knowledge-task-quick-actions .knowledge-quick-menu > summary {
  justify-items: start;
  padding-left: 0.2rem;
}
.knowledge-root-quick-actions {
  grid-column: 3;
  width: 3.35rem;
  height: 1.55rem;
  max-width: none;
  flex: 0 0 auto;
}
.knowledge-root-quick-actions .knowledge-quick-menu { top: 0; }
.knowledge-root-quick-actions .knowledge-card-move-menu { top: 0; }
.knowledge-root-quick-actions .knowledge-quick-menu-options { z-index: 61; }
.knowledge-task-controls {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 0.35rem;
}
.knowledge-task-controls > .knowledge-card-move-menu {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 1.55rem;
}
.knowledge-task-controls > .knowledge-task-date + .knowledge-task-quick-actions {
  margin-left: -0.3rem;
}


/* src/styles/knowledgeDocument.css */
@media (pointer: coarse) {
  .knowledge-root-quick-actions { width: 5.75rem; }
  .knowledge-task-quick-actions { width: 2.75rem; }
  .knowledge-quick-menu > summary {
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.6rem;
    opacity: 0.72;
  }
  .knowledge-quick-menu-options button,
  .knowledge-quick-create input { min-height: 2.75rem; }
  .knowledge-card-move-menu {
    right: 3rem;
    opacity: 0.72;
  }
  .knowledge-task-quick-actions .knowledge-quick-menu { right: 0; }
  .knowledge-task-controls > .knowledge-card-move-menu { right: auto; flex-basis: 2.75rem; }
  .knowledge-card-move-menu > .card-move-menu-trigger {
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.6rem;
  }
}
.knowledge-rich-notes.knowledge-shared-editor .rich-notes-editor:hover,
.knowledge-rich-notes.knowledge-shared-editor .rich-notes-editor:focus {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary-soft) 28%, transparent);
}
.knowledge-rich-notes .knowledge-reader-body {
  min-height: 5rem;
  max-width: none;
  margin-top: 0;
}
.knowledge-reader-body :is(h1, h2, h3, h4) { color: var(--color-text-primary); }
.knowledge-reader-body img { max-width: 100%; height: auto; }

.knowledge-reader-tags { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-14); }
.knowledge-reader-tags :is(span, button) {
  padding: 0.18rem 0.58rem;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.69rem;
}

.knowledge-relations { max-width: 46rem; margin-top: 1.25rem; padding-top: var(--space-12); border-top: 1px solid var(--color-border); }
.knowledge-relations h3 { margin: var(--space-10) 0 var(--space-4); color: var(--color-text-tertiary); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; }
.knowledge-relation {
  display: flex;
  width: 100%;
  min-height: 1.8rem;
  gap: var(--space-8);
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.77rem;
  text-align: left;
}
.knowledge-relation i { width: 0.42rem; height: 0.42rem; flex: 0 0 auto; border-radius: 50%; }

.knowledge-card-fields { display: grid; max-width: 46rem; gap: var(--space-10); margin-top: var(--space-14); }
.knowledge-card-field-group { display: grid; gap: var(--space-6); }
.knowledge-card-field-group h3 { margin: 0; color: var(--color-text-tertiary); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; }
.knowledge-card-field-list { display: grid; gap: var(--space-4); }
.knowledge-card-field-list article { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-8); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.knowledge-card-field-list :is(time, small) { color: var(--color-text-tertiary); font-size: 0.68rem; }
.knowledge-card-field-list p { margin: 0; color: var(--color-text-secondary); font-size: 0.78rem; }
.knowledge-card-field-list a { color: var(--color-primary); font-size: 0.78rem; text-decoration: none; }

.knowledge-descendant-cards {
  display: grid;
  max-width: 47.75rem;
  margin-top: var(--space-14);
}
.knowledge-document-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem 1.65rem minmax(0, 1fr);
  gap: var(--space-6);
  min-width: 0;
  margin-left: min(calc((var(--knowledge-card-depth) - 1) * 1rem), 4rem);
  padding: var(--space-8) 0 var(--space-10);
}
.knowledge-document-card-body { grid-column: 3; min-width: 0; }
.knowledge-card-drag-handle {
  width: 1.25rem;
  height: 2rem;
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.knowledge-card-drag-handle:hover,
.knowledge-card-drag-handle:focus-visible { background: var(--color-primary-soft); color: var(--color-primary); outline: 0; }
.knowledge-card-drag-handle:active { cursor: grabbing; }
.knowledge-document-card.dragging { opacity: 0.45; }
.knowledge-document-card.drag-over-before::before,
.knowledge-document-card.drag-over-after::after {
  position: absolute;
  right: 0;
  left: 1.75rem;
  z-index: 2;
  height: 2px;
  border-radius: var(--radius-hairline);
  background: var(--color-primary);
  content: "";
}
.knowledge-document-card.drag-over-before::before { top: 0; }
.knowledge-document-card.drag-over-after::after { bottom: 0; }
.knowledge-document-card-body > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--space-8);
}
.knowledge-document-card-body > header small { display: block; color: var(--color-text-tertiary); font-size: 0.66rem; }
.knowledge-document-card-body h3[contenteditable="true"] { margin: var(--space-2) 0 0; outline: 0; font-size: 1rem; line-height: 1.35; }
.knowledge-card-type { color: var(--color-text-tertiary); font-size: 0.67rem; }
.knowledge-convert-task.compact { min-height: 1.65rem; padding: 0 var(--space-6); }
.knowledge-document-card .knowledge-rich-notes {
  margin-top: var(--space-6);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.knowledge-document-card .rich-notes-header { display: none; }
.knowledge-document-card .rich-notes-toolbar { display: none; }
.knowledge-document-card .knowledge-rich-notes:focus-within .rich-notes-toolbar { display: flex; }
.knowledge-document-card .rich-notes-editor {
  min-height: 2.25rem;
  max-height: none;
  padding: var(--space-4) 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.knowledge-document-card .rich-notes-footer { display: none; }
.knowledge-document-card .knowledge-rich-notes:focus-within .rich-notes-footer { display: flex; }

.knowledge-structured-details { max-width: 46rem; margin-top: var(--space-8); color: var(--color-text-tertiary); }
.knowledge-structured-details > summary { cursor: pointer; font-size: 0.69rem; line-height: 1.4; }
.knowledge-structured-details-body { padding: var(--space-2) 0 var(--space-8) var(--space-14); }
.knowledge-tags-editor { margin-top: var(--space-12); }
.knowledge-tags-editor > strong,
.knowledge-card-field-create h3 { color: var(--color-text-tertiary); font-size: 0.68rem; }
.knowledge-tags-editor form,
.knowledge-card-field-create form,
.knowledge-relation-create,
.knowledge-child-create { display: flex; max-width: 46rem; gap: var(--space-6); margin-top: var(--space-6); }
.knowledge-tags-editor input,
.knowledge-card-field-create input,
.knowledge-relation-create select,
.knowledge-child-create input {
  min-width: 0;
  min-height: 1.9rem;
  flex: 1 1 auto;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
}
.knowledge-tags-editor form button,
.knowledge-card-field-create form button,
.knowledge-relation-create button,
.knowledge-child-create button,
.knowledge-attachment-create {
  min-height: 1.9rem;
  padding: 0 var(--space-8);
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}
.knowledge-card-field-create { display: grid; gap: var(--space-2); margin-top: var(--space-14); }
.knowledge-attachment-create { display: inline-flex; align-items: center; }
.knowledge-attachment-create input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.knowledge-child-create { margin: var(--space-10) 0 0; }
.knowledge-child-create input { border-color: transparent; border-bottom-color: var(--color-border); border-radius: 0; }

.knowledge-document {
  display: grid;
  width: 100%;
  max-width: none;
  margin-top: var(--space-4);
  padding-bottom: 2rem;
}
.knowledge-document :is(
  .knowledge-reader-body,
  .knowledge-rich-notes,
  .knowledge-card-quick-actions,
  .knowledge-structured-details,
  .knowledge-inline-metadata,
  .knowledge-relations,
  .knowledge-card-fields,
  .knowledge-child-create
) { max-width: none; }
.knowledge-document-empty { color: var(--color-text-tertiary); font-size: 0.82rem; }
.knowledge-document-end-create {
  display: flex;
  flex-wrap: wrap;
  min-height: 1.8rem;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin: 0.35rem 0 0 2.8rem;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
}
.knowledge-document > .knowledge-quick-create-row {
  display: flex;
  max-width: 36rem;
  min-width: 0;
  margin: var(--space-8) 0 var(--space-10)
    min(calc((var(--knowledge-card-depth) - 1) * 1rem + 3rem), 7rem);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.knowledge-document > .knowledge-quick-create-row[hidden] { display: none; }
.knowledge-document > .knowledge-quick-create-row input { min-width: 0; }
.knowledge-document-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.knowledge-document-end-actions[hidden] { display: none; }
.knowledge-document-end-actions button {
  min-height: 1.75rem;
  padding: 0 var(--space-6);
  border: 0;
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.knowledge-document-end-actions button:last-child { color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text-primary)); }
.knowledge-document-end-actions button.active {
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.knowledge-document-end-create form {
  display: flex;
  width: min(28rem, 100%);
  gap: var(--space-4);
}
.knowledge-document-end-create form[hidden] { display: none; }
.knowledge-document-end-create input {
  min-width: 0;
  min-height: 2rem;
  flex: 1 1 auto;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-caption);
}
.knowledge-document-end-create form button {
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  cursor: pointer;
}
.knowledge-document-card,
.knowledge-task-row {
  margin-left: min(calc((var(--knowledge-card-depth) - 1) * 1.25rem), 3.75rem);
}
.knowledge-branch-toggle {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.knowledge-branch-toggle:hover,
.knowledge-branch-toggle:focus-visible { background: var(--color-primary-soft); color: var(--color-primary); outline: 0; }
.knowledge-branch-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: transform var(--duration-fast) var(--ease-standard); }
.knowledge-branch-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.knowledge-document-card > .knowledge-branch-toggle,
.knowledge-task-row > .knowledge-branch-toggle { position: absolute; top: 0.42rem; left: -1.4rem; z-index: 2; }
.knowledge-document-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15rem 1.65rem minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.45rem 0 0.15rem;
}
.knowledge-document-card.selected::before,
.knowledge-task-row.selected::before {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: -0.45rem;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  content: "";
}
.knowledge-document-card-body > header {
  display: block;
  padding-top: 0.15rem;
}
.knowledge-document-card-body h3[contenteditable="true"] {
  margin: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.35;
}
.knowledge-document-card[style*="--knowledge-card-depth: 1"] .knowledge-document-card-body h3[contenteditable="true"] { font-size: 1.05rem; }
.knowledge-document-card[style*="--knowledge-card-depth: 2"] .knowledge-document-card-body h3[contenteditable="true"] { font-size: 0.96rem; }
.knowledge-document-card.deep .knowledge-document-card-body h3[contenteditable="true"] {
  font-size: 0.82rem;
}
.knowledge-document-card-body h3[contenteditable="true"]:hover,
.knowledge-document-card-body h3[contenteditable="true"]:focus {
  background: color-mix(in srgb, var(--color-primary-soft) 55%, transparent);
  outline: 0;
}
.knowledge-root-card.done h2[contenteditable="true"] {
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}
.knowledge-document-card .knowledge-rich-notes {
  margin-top: 0.1rem;
}
.knowledge-document-card .rich-notes-editor {
  min-height: 1.55rem;
  padding: 0.12rem 0;
  font-size: 0.79rem;
  line-height: 1.55;
}
.knowledge-document-card .rich-notes-toolbar {
  margin: 0.2rem 0;
}
.knowledge-card-drag-handle {
  width: 1.15rem;
  height: 1.55rem;
  margin: 0;
  opacity: 0.45;
}
.knowledge-document-card:hover > .knowledge-card-drag-handle,
.knowledge-task-row:hover > .knowledge-card-drag-handle,
.knowledge-card-drag-handle:focus-visible { opacity: 1; }
.knowledge-document-card.dragging,
.knowledge-task-row.dragging,
.knowledge-root-card.dragging,
.knowledge-topic-item.dragging { opacity: 0.42; }
.knowledge-document-card.drag-over-before::before,
.knowledge-document-card.drag-over-after::after,
.knowledge-task-row.drag-over-before::after,
.knowledge-task-row.drag-over-after::after {
  position: absolute;
  right: 0;
  left: 1.5rem;
  z-index: 3;
  height: 2px;
  border-radius: var(--radius-hairline);
  background: var(--color-primary);
  box-shadow: -0.3rem 0 0 0.18rem var(--color-primary);
  content: "";
}
.knowledge-document-card.drag-over-before::before,
.knowledge-task-row.drag-over-before::after { top: 0; bottom: auto; }
.knowledge-document-card.drag-over-after::after,
.knowledge-task-row.drag-over-after::after { top: auto; bottom: 0; }
.knowledge-document-card.drag-over-inside,
.knowledge-task-row.drag-over-inside,
.knowledge-root-card.drag-over-inside,
.knowledge-project-navigation-row.drag-over-inside,
.knowledge-topic-item.drag-over-inside {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary-soft) 60%, transparent);
}

.knowledge-project-navigation-row[data-knowledge-drop-target],
.knowledge-topic-item[data-knowledge-drop-target],
.knowledge-root-card[data-knowledge-drop-target],
.knowledge-document-card[data-knowledge-drop-target],
.knowledge-task-row[data-knowledge-drop-target] {
  transition: background var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

.knowledge-project-navigation-row.drag-over-inside {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.knowledge-topic-item.drag-over-before,
.knowledge-topic-item.drag-over-after,
.knowledge-root-card.drag-over-before,
.knowledge-root-card.drag-over-after {
  box-shadow: inset 0 2px 0 var(--color-primary);
}

.knowledge-topic-item.drag-over-after,
.knowledge-root-card.drag-over-after { box-shadow: inset 0 -2px 0 var(--color-primary); }

.knowledge-card-move-menu {
  position: absolute;
  top: -1.45rem;
  right: 1.8rem;
  width: 1.55rem;
  opacity: 0;
}
.knowledge-topic-root:hover .knowledge-card-move-menu,
.knowledge-document-card:hover .knowledge-card-move-menu,
.knowledge-task-row:hover .knowledge-card-move-menu,
.knowledge-reader > header:hover .knowledge-root-quick-actions .knowledge-card-move-menu,
.knowledge-card-quick-actions:focus-within .knowledge-card-move-menu,
.knowledge-card-move-menu.open { opacity: 1; }
.knowledge-card-move-menu > .card-move-menu-trigger { width: 1.55rem; height: 1.55rem; }
.knowledge-card-move-menu > .card-move-menu-panel {
  right: 0;
  left: auto;
  width: min(22rem, calc(100vw - 2rem));
}
.knowledge-drag-preview {
  position: fixed;
  top: -10rem;
  left: -10rem;
  z-index: 9999;
  max-width: 20rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
  font-size: 0.75rem;
}
.knowledge-task-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.15rem 1.65rem minmax(0, 1fr);
  min-height: 2rem;
  align-items: center;
  column-gap: 0.35rem;
  row-gap: 0.1rem;
  padding: 0.18rem 0;
  color: var(--color-text-primary);
}
.knowledge-task-row > .knowledge-card-drag-handle { grid-column: 1; grid-row: 1; }
.knowledge-task-row > .knowledge-type-control {
  grid-column: 2;
  grid-row: 1;
}
.knowledge-task-row > input[type="checkbox"] {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  appearance: none;
  border: 1px solid var(--color-border-strong, var(--color-border));
  border-radius: 50%;
  background: var(--color-surface);
  cursor: pointer;
}


/* src/styles/knowledgeDragTree.css */
.knowledge-drop-tree {
  display: grid;
  grid-column: 1 / -1;
  gap: var(--space-2);
  margin: var(--space-4) var(--space-4) var(--space-8) var(--space-8);
  padding: var(--space-4);
  border-left: 2px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-surface-muted);
  max-height: min(24rem, 62vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.knowledge-drop-tree:empty { display: none; }

.knowledge-drop-tree-row {
  display: grid;
  grid-template-columns: var(--space-20) minmax(0, 1fr);
  min-height: var(--control-height-sm);
  gap: var(--space-6);
  align-items: center;
  margin-left: calc(var(--knowledge-drop-depth, 0) * var(--space-12));
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.knowledge-drop-tree-row > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-drop-tree-marker {
  display: grid;
  color: var(--color-text-tertiary);
  place-items: center;
}

.knowledge-drop-tree-marker.task { color: var(--color-primary); }
.knowledge-drop-tree-row.drag-over-inside { background: var(--color-primary-soft); color: var(--color-text-primary); }

.knowledge-topic-drop-wrap {
  display: grid;
  min-width: 0;
}

.knowledge-topic-drop-wrap > .knowledge-topic-item { width: calc(100% - var(--space-12)); }


/* src/styles/knowledgeDocumentPolish.css */
.knowledge-reader > header { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.knowledge-reader > header::after {
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--space-4));
  left: 0;
  height: var(--space-4);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  content: "";
  pointer-events: none;
}
.knowledge-reader > header + .knowledge-document > .knowledge-topic-root:first-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.knowledge-document-card.drag-over-before::before,
.knowledge-document-card.drag-over-after::after,
.knowledge-task-row.drag-over-before::after,
.knowledge-task-row.drag-over-after::after {
  height: 4px;
  box-shadow: -0.3rem 0 0 0.22rem var(--color-primary), 0 0 0 4px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.knowledge-document-card.drag-over-inside,
.knowledge-task-row.drag-over-inside,
.knowledge-root-card.drag-over-inside,
.knowledge-project-navigation-row.drag-over-inside,
.knowledge-topic-item.drag-over-inside {
  background: color-mix(in srgb, var(--color-primary-soft) 82%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.knowledge-document-card.drag-over-inside::after,
.knowledge-task-row.drag-over-inside::after {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-4);
  z-index: 4;
  padding: 0.12rem var(--space-6);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  content: "Als Unterkarte ablegen";
  font-size: 0.65rem;
  font-weight: var(--font-weight-strong);
  pointer-events: none;
}


/* src/styles/knowledgeTasks.css */
.knowledge-task-row > input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.knowledge-task-row > input[type="checkbox"]:checked::after {
  position: absolute;
  top: 0.08rem;
  left: 0.27rem;
  width: 0.22rem;
  height: 0.43rem;
  border: solid var(--color-on-primary);
  border-width: 0 1.5px 1.5px 0;
  content: "";
  transform: rotate(45deg);
}
.knowledge-task-heading {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-column: 3 / -1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.35rem;
}
.knowledge-task-title {
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: var(--font-weight-strong);
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.knowledge-task-row[style*="--knowledge-card-depth: 1"] .knowledge-task-title { font-size: 1.05rem; }
.knowledge-task-row[style*="--knowledge-card-depth: 2"] .knowledge-task-title { font-size: 0.96rem; }
.knowledge-task-row.deep .knowledge-task-title { font-size: 0.82rem; }
.knowledge-task-title[contenteditable="true"]:focus {
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  outline: 0;
}
.knowledge-task-notes {
  grid-column: 3 / -1;
  grid-row: 2;
  width: 100%;
  margin-top: 0;
}
.knowledge-task-notes .rich-notes-editor {
  min-height: 1.5rem;
  font-size: 0.79rem;
  line-height: 1.55;
}
.knowledge-task-row.done { color: var(--color-text-tertiary); }
.knowledge-task-row.done .knowledge-task-title { color: var(--color-text-tertiary); text-decoration: line-through; }
.knowledge-task-important { color: var(--color-warning-strong); font-size: 0.8rem; }
.knowledge-task-date {
  min-width: 0;
  justify-self: end;
  margin-left: 0;
  padding: 0.08rem 0.25rem;
  border: 0;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary-soft) 52%, var(--color-surface));
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.7rem;
  white-space: nowrap;
  cursor: pointer;
}
.knowledge-task-date.empty { color: var(--color-text-tertiary); }
.knowledge-task-date:hover,
.knowledge-task-date:focus-visible { background: var(--color-primary-soft); color: var(--color-primary); outline: 0; opacity: 1; }
.knowledge-task-date.overdue { color: var(--color-danger); }
.knowledge-task-date-input {
  width: 7.7rem;
  min-height: 1.65rem;
  padding: 0.08rem 0.3rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.7rem;
}
.knowledge-task-children-action {
  grid-column: 3;
  grid-row: 3;
  min-width: 0;
  justify-self: end;
}
.knowledge-task-children-action:empty { display: none; }
.knowledge-task-children-action > button {
  padding: 0.18rem 0.42rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.66rem;
  white-space: nowrap;
  cursor: pointer;
}
.knowledge-task-children-action > button:hover,
.knowledge-task-children-action > button:focus-visible { background: var(--color-primary-soft); }
.knowledge-structured-details {
  max-width: 46rem;
  margin-top: 0.2rem;
}
.knowledge-structured-details > summary {
  display: flex;
  min-height: 1.45rem;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 0.66rem;
  list-style-position: outside;
}
.knowledge-detail-chip {
  padding: 0.12rem 0.42rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}
.knowledge-inline-metadata {
  display: flex;
  max-width: 46rem;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  margin-top: 0.15rem;
  color: var(--color-text-tertiary);
  font-size: 0.69rem;
}
.knowledge-inline-metadata[hidden] { display: none; }
.knowledge-inline-metadata.without-values:not(:has(.knowledge-inline-tag-form)) { display: none; }
.knowledge-inline-tag,
.knowledge-inline-attachment {
  min-height: 1.35rem;
  padding: 0.04rem 0.42rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.knowledge-inline-attachment:is(a) {
  cursor: pointer;
}
.knowledge-inline-attachment:is(a):hover,
.knowledge-inline-attachment:is(a):focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.knowledge-inline-tag {
  border: 0;
  font: inherit;
  cursor: pointer;
}
.knowledge-inline-tag:hover,
.knowledge-inline-tag:focus-visible { background: var(--color-primary-soft); color: var(--color-primary); outline: 0; }
.knowledge-inline-image {
  width: fit-content;
  max-width: 100%;
  flex: 0 1 100%;
  align-self: flex-start;
  margin: var(--space-4) 0;
}
.knowledge-inline-image > a {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-sm);
}
.knowledge-inline-image img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(32rem, 62vh);
  object-fit: contain;
}
.knowledge-inline-image figcaption {
  max-width: min(100%, 36rem);
  margin-top: var(--space-4);
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge-inline-tag-add {
  min-height: 1.65rem;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
  opacity: 0.62;
}
.knowledge-inline-tag-add[hidden] { display: none; }
.knowledge-inline-tag-add:hover,
.knowledge-inline-tag-add:focus-visible { background: var(--color-primary-soft); opacity: 1; outline: 0; }
.knowledge-inline-tag-form {
  display: flex;
  min-height: 1.5rem;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}
.knowledge-inline-tag-form input {
  width: 8rem;
  min-width: 4rem;
  padding: 0 var(--space-8);
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.7rem;
  outline: 0;
}
.knowledge-inline-tag-form button {
  width: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  cursor: pointer;
}
.knowledge-inline-tag-form button:hover,
.knowledge-inline-tag-form button:focus-visible { background: var(--color-primary-soft); outline: 0; }
.knowledge-inline-annotation {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  border-left: 2px solid var(--color-border-strong, var(--color-border));
  background: color-mix(in srgb, var(--color-surface-muted) 55%, transparent);
  color: var(--color-text-secondary);
  font-style: normal;
}
.knowledge-inline-annotation time { color: var(--color-text-tertiary); white-space: nowrap; }
.knowledge-task-row .knowledge-inline-metadata { grid-column: 3 / -1; }
.knowledge-structured-details-body {
  display: grid;
  gap: 0.3rem;
  padding: 0.25rem 0 0.65rem 0.8rem;
}
.knowledge-structured-details-body .knowledge-parent-field { margin-top: 0; }
.knowledge-structured-details-body .knowledge-tags-editor { margin-top: 0.35rem; }
.knowledge-task-details { grid-column: 3; grid-row: 4; width: 100%; justify-self: stretch; margin: 0; }
.knowledge-task-details > summary {
  width: 1.25rem;
  height: 1.4rem;
  overflow: hidden;
  font-size: 0;
}
.knowledge-task-details > summary > * { display: none; }
.knowledge-task-details > summary::after { color: var(--color-text-tertiary); content: "⌄"; font-size: 0.75rem; }
.knowledge-task-details[open] { grid-column: 3 / -1; width: 100%; justify-self: stretch; }
.knowledge-task-row { touch-action: pan-y pinch-zoom; }
.knowledge-task-row.swipe-input-release { pointer-events: none; }
.knowledge-task-row:is(.swiping-right, .swiping-left) > :not(.knowledge-task-swipe-feedback) {
  transform: translateX(var(--knowledge-swipe-offset, 0));
  will-change: transform;
}
.knowledge-task-row.swipe-resetting > :not(.knowledge-task-swipe-feedback) {
  transition: transform 160ms var(--ease-standard);
}
.knowledge-task-swipe-feedback {
  position: absolute;
  top: 50%;
  left: 0.4rem;
  z-index: 1;
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}
.knowledge-task-swipe-feedback.archive { right: 0.4rem; left: auto; color: var(--color-danger); }
.knowledge-task-row:is(.swiping-right, .swiping-left) {
  overflow: hidden;
}
.knowledge-task-row.swiping-right {
  background: linear-gradient(90deg, var(--color-primary-soft) 0 var(--knowledge-swipe-distance, 0), transparent var(--knowledge-swipe-distance, 0));
}
.knowledge-task-row.swiping-left {
  background: linear-gradient(270deg, color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)) 0 var(--knowledge-swipe-distance, 0), transparent var(--knowledge-swipe-distance, 0));
}
.knowledge-task-row.swipe-armed { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.knowledge-task-row.swiping-left.swipe-armed { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 35%, transparent); }
.knowledge-task-row.swiping-right .knowledge-task-swipe-feedback.status,
.knowledge-task-row.swiping-left .knowledge-task-swipe-feedback.archive { opacity: 1; }
.knowledge-task-archive-action {
  display: inline-grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.knowledge-task-archive-action svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.knowledge-task-row:hover .knowledge-task-archive-action,
.knowledge-task-archive-action:focus-visible { opacity: 1; }
.knowledge-task-archive-action:hover,
.knowledge-task-archive-action:focus-visible { background: var(--color-surface-muted); color: var(--color-text-primary); outline: 0; }
@media (hover: none), (pointer: coarse) {
  .knowledge-task-archive-action { display: inline-grid; opacity: 0.72; }
}
.knowledge-task-details[open] > summary { margin-left: auto; }
.knowledge-insert-row {
  display: block;
  margin: 0.2rem 0 0.35rem;
}
.knowledge-insert-controls {
  display: flex;
  min-height: 1.35rem;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
}
.knowledge-insert-row:hover .knowledge-insert-controls,
.knowledge-insert-row:focus-within .knowledge-insert-controls { opacity: 1; }
.knowledge-insert-controls button,
.knowledge-insert-row form button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
  white-space: nowrap;
}
.knowledge-insert-controls .knowledge-insert-open {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1;
}
.knowledge-insert-controls > span {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}
.knowledge-insert-row form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.knowledge-insert-row form[hidden],
.knowledge-insert-controls[hidden] { display: none; }
.knowledge-insert-row input {
  min-width: 0;
  min-height: 1.75rem;
  flex: 1 1 auto;
  padding: 0 0.3rem;
  border: 0;
  border-bottom: 1px solid var(--color-primary);
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.75rem;
}
.knowledge-insert-type-switch {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.knowledge-insert-row .knowledge-insert-type-switch button {
  min-height: 1.625rem;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}
.knowledge-insert-row .knowledge-insert-type-switch button + button { border-left: 1px solid var(--color-border); }
.knowledge-insert-row .knowledge-insert-type-switch button.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-strong);
}
.knowledge-insert-cancel {
  flex: 0 0 auto;
  padding: 0.25rem;
  border: 0;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
@media (hover: none), (pointer: coarse) {
  .knowledge-insert-row:not(.end-of-level) { display: none; }
  .knowledge-insert-row.end-of-level .knowledge-insert-controls { opacity: 1; }
  .knowledge-insert-row .knowledge-insert-type-switch button { min-height: 44px; padding-inline: 0.7rem; }
  .knowledge-insert-controls .knowledge-insert-open { width: 44px; height: 44px; }
}
.knowledge-attachments { margin-top: 0.4rem; }
.rich-notes-tool.convert-selection-task { color: var(--color-primary); }


/* src/styles/planningToolbar.css */
.planning-workspace {
  grid-template-columns: clamp(11rem, 20vw, 15.625rem) minmax(0, 1fr);
  min-width: 0;
}

.planning-workspace-toolbar { grid-column: 1 / -1; }
.planning-toolbar-context {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}
.planning-tag-strip {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.planning-tag-strip::-webkit-scrollbar { display: none; }
.planning-tags-toggle {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 1.8rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.planning-tags-toggle:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.planning-tags-toggle svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 140ms ease;
}
.planning-workspace-toolbar.tags-expanded { align-items: flex-start; }
.planning-workspace-toolbar.tags-expanded .planning-tag-strip {
  flex-wrap: wrap;
  overflow-x: visible;
}
.planning-workspace-toolbar.tags-expanded .planning-tags-toggle svg { transform: rotate(180deg); }

.planning-tag-chip {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 1.9rem;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-10);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.planning-tag-chip:hover,
.planning-tag-chip.active { background: var(--color-primary-soft); color: var(--color-primary); }
.planning-tag-chip small { color: var(--color-text-tertiary); font-size: 0.66rem; }
.planning-tag-chip.active small { color: inherit; }
.planning-tag-empty { color: var(--color-text-tertiary); font-size: 0.76rem; }
.planning-workspace-toolbar .planning-workspace-search {
  display: none;
  width: 100%;
  max-width: none;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.planning-workspace-toolbar:is(.search-open, .search-active) .planning-tag-strip { display: none; }
.planning-workspace-toolbar:is(.search-open, .search-active) .planning-workspace-search { display: flex; }
.planning-workspace-toolbar:is(.search-open, .search-active) :is(.planning-search-toggle, .planning-tags-toggle) { display: none; }
.planning-search-close {
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 1.6rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-tertiary);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.planning-search-close:hover { background: var(--color-surface); color: var(--color-text-primary); }
.planning-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-4);
  padding-right: var(--space-8);
  border-right: 1px solid var(--color-border);
}
.planning-toolbar-menu { position: relative; }
.planning-toolbar-menu > summary,
.planning-toolbar-icon {
  display: inline-flex;
  min-width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
}
.planning-toolbar-menu > summary::-webkit-details-marker { display: none; }
.planning-toolbar-menu > summary svg,
.planning-toolbar-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.planning-toolbar-menu > summary:hover,
.planning-toolbar-icon:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.planning-toolbar-menu[open] > summary,
.planning-toolbar-menu.active > summary,
.planning-toolbar-icon.active { background: var(--color-primary-soft); color: var(--color-primary); }
.planning-toolbar-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-6));
  right: 0;
  display: grid;
  width: 15rem;
  max-height: min(24rem, 60vh);
  gap: 0.125rem;
  overflow: auto;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.planning-toolbar-popover button {
  min-height: 2rem;
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
}
.planning-toolbar-popover button:hover,
.planning-toolbar-popover button.active { background: var(--color-primary-soft); color: var(--color-primary); }
.planning-sort-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem 2rem;
  align-items: center;
  min-height: 2rem;
  padding-left: var(--space-8);
  color: var(--color-text-secondary);
  font-size: 0.76rem;
}
.planning-sort-row button { display: grid; min-height: 1.75rem; padding: 0; place-items: center; text-align: center; }
.planning-workspace > .project-sidebar { grid-column: 1; grid-row: 2; }
.planning-workspace > .project-content { grid-column: 2; grid-row: 2; }
.planning-workspace.search-results { grid-template-rows: auto auto minmax(0, 1fr); }
.planning-workspace.search-results > .project-sidebar { grid-row: 3; }
.planning-workspace.search-results > .project-content { grid-row: 3; }


/* src/styles/planningHierarchy.css */
.planning-search-context {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 2.1rem;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-14);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary-soft) 58%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.72rem;
}
.planning-search-context button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.16rem;
  cursor: pointer;
}

.planning-workspace .project-sidebar,
.planning-workspace .project-content {
  border: 0;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

.planning-workspace .project-sidebar {
  gap: var(--space-6);
  padding: var(--space-8) 0;
}

.planning-workspace .project-sidebar > header { padding: 0 var(--space-12); }
.planning-workspace .project-sidebar h2 { color: var(--color-text-tertiary); font-size: 0.67rem; letter-spacing: 0.04em; text-transform: uppercase; }
.planning-workspace .project-sidebar-list { gap: 0; padding: 0; }
.planning-workspace .project-sidebar-new { margin-left: var(--space-8); }

.planning-workspace .project-list-item {
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  min-height: 3.35rem;
  gap: var(--space-8);
  margin: 0 var(--space-6);
  padding: 0.42rem var(--space-8);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.planning-workspace .project-list-item:hover,
.planning-workspace .project-list-item.active {
  border: 0;
  background: var(--color-primary-soft);
  box-shadow: inset 2px 0 0 var(--color-primary);
}

.planning-workspace .project-list-icon { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); }
.planning-workspace .project-list-copy { gap: 0.2rem; }
.planning-workspace .project-list-copy strong { font-size: 0.82rem; }
.project-list-progress { display: flex; gap: var(--space-6); align-items: center; }
.project-list-progress > i { width: 3.6rem; height: 0.2rem; overflow: hidden; border-radius: var(--radius-full); background: var(--color-surface-muted); }
.project-list-progress > i > b { display: block; height: 100%; border-radius: inherit; background: var(--color-success); }
.project-list-progress small { color: var(--color-text-tertiary); font-size: 0.66rem; }
.project-list-overdue { color: var(--color-danger); font-size: 0.67rem; white-space: nowrap; }

.planning-search-result {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0.2rem;
  padding: 0.58rem var(--space-14);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.planning-search-result:hover,
.planning-search-result.active {
  background: var(--color-primary-soft);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.planning-search-result small,
.planning-search-result span {
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-search-result strong {
  overflow: hidden;
  font-size: 0.79rem;
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-search-result mark,
.planning-browser-row.search-match mark {
  padding: 0 0.08rem;
  border-radius: var(--radius-hairline);
  background: var(--color-warning-soft);
  color: inherit;
}

.planning-workspace .project-content { padding: 0; overflow: auto; }
.planning-workspace .project-content-list { gap: 0; padding: var(--space-6) 0 var(--space-16); }
.planning-tree-context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-14) var(--space-6);
  color: var(--color-text-tertiary);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.planning-tree-context .board-context-badge { letter-spacing: normal; text-transform: none; }

.planning-workspace .planning-add-form {
  margin: var(--space-4) var(--space-14) var(--space-10);
}

.planning-workspace .planning-create-central {
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  padding: var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.planning-create-central > small {
  grid-column: 1 / -1;
  color: var(--color-text-tertiary);
  font-size: 0.66rem;
}

.planning-add-form .planning-create-quick,
.planning-add-form .planning-capture-add {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.planning-add-form .planning-create-quick:hover,
.planning-add-form .planning-capture-add:hover { background: var(--color-primary-hover); }

/* At rest, the capture button sits inline in the fixed context row (see
   .planning-tree-context) instead of its own bordered block, matching
   Dokument's compact "+ Thema" column header. */
.planning-tree-context .planning-add-form {
  margin: 0 0 0 auto;
  padding: 0;
  border-bottom: 0;
}

.planning-workspace .planning-capture-start {
  justify-self: start;
  min-height: 2.15rem;
  padding-inline: var(--space-10);
  border-color: transparent;
  background: transparent;
}

.planning-tree-context .planning-capture-start {
  min-height: auto;
  padding-inline: var(--space-8);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  white-space: nowrap;
}

.planning-workspace .planning-add-form.capture-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-10);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.planning-add-form.capture-active > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: center;
  color: var(--color-text-secondary);
  font-size: 0.7rem;
}

.planning-add-form.capture-active > header strong {
  color: var(--color-primary);
  font-size: 0.76rem;
}

.planning-add-form.capture-active > header span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-add-form .planning-capture-finish {
  min-height: 1.8rem;
  padding-inline: var(--space-8);
  border-color: transparent;
  background: transparent;
}

.planning-capture-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-6);
}

@media (max-width: 46rem) {
  .planning-workspace .planning-create-central,
  .planning-capture-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .planning-create-central > input,
  .planning-capture-entry > input { grid-column: 1 / -1; }
  .planning-create-central > button,
  .planning-capture-entry > button { min-height: 44px; }
}

.planning-capture-level-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-6);
}

.planning-capture-level-controls small {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-add-form button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

@media (hover: none), (pointer: coarse) {
  .planning-capture-entry > input,
  .planning-capture-entry > button,
  .planning-capture-level-controls > button,
  .planning-add-form .planning-capture-finish {
    min-height: 44px;
  }

  .planning-capture-level-controls small { display: none; }
}

.planning-workspace .planning-browser-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 2.2rem;
  margin: 0;
  padding: 0.28rem var(--space-14);
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

.planning-workspace .planning-browser-row:is(.top-level, .has-children) {
  min-height: 2.25rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}

.planning-workspace .planning-browser-row:hover,
.planning-workspace .planning-browser-row.selected {
  background: var(--color-primary-soft);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.planning-workspace .planning-browser-row.touch-multiselect-armed {
  background: color-mix(in srgb, var(--color-primary-soft) 82%, var(--color-surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 65%, transparent);
}

.planning-workspace .planning-row-topic {
  grid-template-columns: 1rem 1.1rem 1rem minmax(0, 1fr);
  gap: var(--space-6);
  padding-left: min(calc(var(--project-hierarchy-depth, 0) * 1.125rem), 7.875rem);
}
.planning-tree-context { display: flex; align-items: center; gap: var(--space-8); }
.planning-tree-toggle-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: var(--space-44);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-caption);
}
.planning-tree-toggle-all svg { width: var(--space-16); height: var(--space-16); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.planning-tree-toggle-all[aria-expanded="true"] svg { transform: rotate(180deg); }
.planning-tree-toggle-all:disabled { opacity: 0.45; }
.planning-tree-toggle-all:hover,
.planning-tree-toggle-all:focus-visible { background: var(--color-primary-soft); outline: 0; }
.planning-workspace .planning-browser-row.nested .planning-row-topic::before,
.planning-workspace .planning-browser-row.nested .planning-row-topic::after { display: none; }
.planning-workspace .planning-row-focus { display: none; }
.planning-workspace .planning-row-expand { width: 1.1rem; height: 1.1rem; border: 0; background: transparent; }
.planning-workspace .planning-row-topic .project-row-done {
  position: relative;
  z-index: 5;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  pointer-events: auto;
}
.planning-workspace .planning-row-topic .project-row-type-icon {
  width: 1rem;
  height: 1rem;
}
.planning-workspace .project-row-drag {
  position: relative;
  z-index: 4;
  width: 1rem;
  color: var(--color-border-strong);
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
}
.planning-workspace .planning-browser-row {
  user-select: none;
  -webkit-touch-callout: none;
}
.planning-workspace .planning-browser-row.touch-dragging { cursor: grabbing; }
.planning-workspace .planning-browser-row.dragging-group-member {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  box-shadow: inset 3px 0 0 var(--color-primary);
  opacity: 0.5;
}
.planning-workspace .planning-browser-row.dragging-group-lead {
  box-shadow: inset 3px 0 0 var(--color-primary), 0 10px 24px var(--shadow-ink-16);
}
.planning-workspace .planning-browser-row .project-row-title { font-size: 0.82rem; font-weight: 400; }
.planning-workspace .planning-browser-row.has-children .project-row-title,
.planning-workspace .planning-browser-row.top-level .project-row-title { font-size: 0.84rem; font-weight: var(--font-weight-strong); }

.planning-archived-project-preview {
  display: grid;
  gap: var(--space-8);
  margin: var(--space-10);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.planning-archived-project-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.planning-archived-project-preview > header > div {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
}

.planning-archived-project-preview > header span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.planning-archived-project-restore {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-12);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

.planning-archived-project-tree {
  max-height: 19rem;
  overflow: auto;
  border-top: 1px solid var(--color-border);
  opacity: 0.68;
}
.planning-workspace .planning-row-folder { display: none; }
.planning-row-time { justify-self: end; color: var(--color-text-tertiary); font-size: 0.7rem; white-space: nowrap; }
.planning-row-time.overdue { color: var(--color-danger); }
.planning-row-count { color: var(--color-text-tertiary); font-size: 0.68rem; text-align: right; }
.planning-workspace .planning-row-waiting {
  grid-column: 4;
  min-width: 0;
  overflow: hidden;
  color: var(--color-warning);
  font-size: 0.68rem;
  font-weight: var(--font-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planning-workspace .planning-row-topic { grid-column: 1; }
.planning-workspace .planning-row-count { grid-column: 2; }
.planning-workspace .planning-row-time { grid-column: 3; }
.planning-workspace .planning-row-actions {
  position: absolute;
  right: var(--space-14);
  z-index: 2;
  opacity: 0;
  background: var(--color-surface);
  pointer-events: none;
}
.planning-workspace .planning-browser-row:hover .planning-row-actions,
.planning-workspace .planning-browser-row.selected .planning-row-actions {
  opacity: 1;
  pointer-events: auto;
}
.planning-workspace .planning-browser-row:hover .planning-row-time,
.planning-workspace .planning-browser-row.selected .planning-row-time { visibility: hidden; }
.planning-workspace .planning-row-actions button {
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.planning-workspace .planning-row-actions button:hover { background: var(--color-surface); }
.planning-workspace .planning-browser-row.dragging {
  opacity: 0.72;
  box-shadow: 0 10px 24px var(--shadow-ink-16);
  transform: rotate(0.35deg);
}
.planning-workspace .planning-browser-row.drop-before::before,
.planning-workspace .planning-browser-row.drop-after::after {
  right: var(--space-14);
  left: calc(var(--space-14) + min(calc(var(--project-hierarchy-depth, 0) * 1.125rem), 7.875rem));
  height: 0.55rem;
  border-radius: 0;
  background:
    radial-gradient(circle at 0.275rem 50%, var(--color-primary) 0 0.25rem, transparent 0.27rem),
    linear-gradient(var(--color-primary), var(--color-primary)) 0.275rem 50% / calc(100% - 0.275rem) 2px no-repeat;
  box-shadow: none;
}
.planning-workspace .planning-browser-row.drop-before::before { top: -0.275rem; }
.planning-workspace .planning-browser-row.drop-after::after { bottom: -0.275rem; }
.planning-workspace .planning-browser-row.drop-inside {
  min-height: 2.2rem;
  border: 0;
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
  transform: none;
}
.planning-workspace .planning-browser-row.drop-inside::after { display: none; }


/* src/styles/planningResponsive.css */
@media (max-width: 70rem) {
  .planning-workspace .planning-browser-row {
    align-items: start;
  }

  .planning-workspace .planning-browser-row .project-row-title {
    min-width: 0;
    align-items: flex-start;
  }

  .planning-workspace .planning-browser-row .project-row-title-text {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 52rem) {
  .knowledge-workspace { height: auto; overflow-y: auto; }
  .knowledge-toolbar { flex-wrap: wrap; }
  .knowledge-search { width: 100%; }
  .knowledge-toolbar-actions { width: 100%; flex-wrap: wrap; }
  .knowledge-reader > header { align-items: start; }
  .knowledge-convert-task { align-self: flex-start; }
  .knowledge-columns,
  .knowledge-columns.projects-collapsed,
  .knowledge-columns.topics-collapsed,
  .knowledge-columns.projects-collapsed.topics-collapsed { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .knowledge-column-resizer { display: none; }
  .knowledge-navigation {
    display: flex;
    height: 3.25rem;
    max-height: none;
    flex: 0 0 3.25rem;
    gap: 0.35rem;
    padding: 0.35rem 0.45rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .knowledge-navigation::-webkit-scrollbar { display: none; }
  /* The topic column's create-topic header rejoins the same horizontally swipeable
     row as the topic items here, instead of the fixed desktop header above a
     vertically scrolling list defined in knowledgeWorkspace.css. */
  .knowledge-topics-list { display: contents; }
  .knowledge-topic-drop-wrap {
    width: min(14rem, 72vw);
    min-width: min(14rem, 72vw);
    flex: 0 0 min(14rem, 72vw);
    scroll-snap-align: start;
  }
  .knowledge-topic-drop-wrap > .knowledge-topic-item {
    width: 100%;
    min-width: 0;
  }
  .knowledge-topics-header {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    scroll-snap-align: start;
  }
  .knowledge-topics-header .knowledge-create-form { min-width: min(14rem, 72vw); }
  .knowledge-columns.projects-collapsed .knowledge-project-filter,
  .knowledge-project-filter {
    display: flex;
    min-width: max-content;
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    padding: 0.08rem;
  }
  .knowledge-project-filter button {
    min-height: 1.35rem;
    padding-block: 0.08rem;
  }
  .knowledge-project-navigation-row {
    min-width: min(16rem, 82vw);
    flex: 0 0 auto;
  }
  .knowledge-project-navigation-row > .knowledge-navigation-item { min-width: 0; }
  .knowledge-navigation .knowledge-navigation-item,
  .knowledge-columns.projects-collapsed .knowledge-projects .knowledge-navigation-item,
  .knowledge-columns.topics-collapsed .knowledge-topics .knowledge-navigation-item {
    width: auto;
    min-width: min(14rem, 72vw);
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
  }
  .knowledge-project-navigation-row > .knowledge-navigation-item {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
  .knowledge-topics { max-height: none; }
  .knowledge-columns.projects-collapsed .knowledge-projects .knowledge-navigation-item,
  .knowledge-columns.topics-collapsed .knowledge-topics .knowledge-navigation-item {
    grid-template-columns: 1.35rem minmax(0, 1fr) auto;
    width: calc(100% - var(--space-12));
    justify-items: initial;
    margin: 0 var(--space-6);
    padding: 0 var(--space-10);
  }
  .knowledge-columns.projects-collapsed .knowledge-projects .knowledge-navigation-label,
  .knowledge-columns.projects-collapsed .knowledge-projects .knowledge-navigation-item small,
  .knowledge-columns.topics-collapsed .knowledge-topics .knowledge-navigation-label,
  .knowledge-columns.topics-collapsed .knowledge-topics .knowledge-navigation-item small { display: initial; }
  .knowledge-reader {
    --knowledge-reader-inline-padding: 1rem;
    --knowledge-reader-block-padding: 0.8rem;
    min-height: 20rem;
    padding: 0.8rem 1rem 1.5rem;
  }
  .knowledge-document-toolbar { top: calc(-1 * var(--knowledge-reader-block-padding)); margin-top: 0; }
  .knowledge-reader h2 { font-size: 1.08rem; }
  .knowledge-reader-body { font-size: 0.8rem; line-height: 1.55; }
  .knowledge-reader .rich-notes-toolbar,
  .knowledge-document-card .knowledge-rich-notes:focus-within .rich-notes-toolbar {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: var(--space-4);
    overflow: visible;
  }
  .knowledge-reader .rich-notes-toolbar::before { display: none; }
  .knowledge-reader .rich-notes-tool-group { flex: 0 1 auto; order: initial; }
  .planning-workspace {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    height: auto;
    overflow: visible;
  }
  .planning-workspace-toolbar {
    grid-column: 1;
    grid-row: 1;
    flex-wrap: nowrap;
    gap: var(--space-6);
    padding-inline: var(--space-8);
  }
  .planning-workspace-search { width: auto; min-width: 0; flex: 1 1 auto; }
  .planning-toolbar-actions { gap: 0.125rem; }
  .planning-workspace > .project-sidebar { grid-column: 1; grid-row: 2; max-height: 13rem; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .planning-workspace > .project-content { grid-column: 1; grid-row: 3; border-right: 0; }
  .planning-workspace.search-results > .planning-search-context { grid-column: 1; grid-row: 2; }
  .planning-workspace.search-results > .project-sidebar { grid-row: 3; }
  .planning-workspace.search-results > .project-content { grid-row: 4; }
  .planning-workspace .planning-browser-row { grid-template-columns: minmax(0, 1fr); }
  .planning-workspace :is(.planning-row-time, .planning-row-count) { display: none; }
  .planning-workspace .planning-row-topic { min-width: 0; }
}

@media (hover: none), (pointer: coarse) {
  .knowledge-document-card,
  .knowledge-task-row {
    grid-template-columns: 1.25rem 2.75rem minmax(0, 1fr);
  }
  .knowledge-type-trigger {
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.55rem 0 -0.55rem -0.55rem;
    opacity: 1;
  }
  .knowledge-type-menu button { min-height: 2.75rem; }
  .knowledge-selection-toolbar button { width: 2.75rem; height: 2.75rem; }
  .knowledge-slash-menu button { min-height: 2.75rem; }
  .knowledge-inline-tag,
  .knowledge-inline-tag-form { min-height: 1.75rem; }
  .knowledge-inline-tag-form button { width: 2rem; }
}

@media (max-width: 52rem) {
  .knowledge-columns {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .knowledge-projects { display: none; }
  .knowledge-topics { grid-row: 2; }
  .knowledge-reader { grid-row: 3; }
  .planning-workspace > .mobile-project-picker { grid-column: 1; grid-row: 2; }
  .planning-workspace { grid-template-rows: auto auto minmax(0, 1fr); }
  .planning-workspace.search-results { grid-template-rows: auto auto auto minmax(0, 1fr); }
  .planning-workspace > .project-sidebar { display: none; }
  .planning-workspace > .project-content { grid-column: 1; grid-row: 3; }
  .planning-workspace.search-results > .planning-search-context { grid-row: 2; }
  .planning-workspace.search-results > .mobile-project-picker { grid-row: 3; }
  .planning-workspace.search-results > .project-content { grid-row: 4; }
}

@media (max-width: 37.4375rem) {
  .knowledge-task-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-4);
  }
  .knowledge-task-heading > .knowledge-task-title { grid-column: 1; grid-row: 1; }
  .knowledge-task-heading > .knowledge-task-important { grid-column: 2; grid-row: 1; }
  .knowledge-task-heading > .knowledge-task-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: 100%;
    justify-self: end;
  }
  .knowledge-document-card,
  .knowledge-task-row {
    margin-left: min(calc((var(--knowledge-card-depth) - 1) * 0.65rem), 1.95rem);
  }
  :root:not(.has-unified-search) .app-shell[data-active-view="infos"] :is(.mobile-workspace-controls, .mobile-card-count, .mobile-active-selection) {
    display: none !important;
  }
  .planning-workspace { min-width: 0; }
  .task-panel:has(#task-list.project-list) { overflow-x: hidden; }
}


/* src/styles/focusTaskOverviewRead.css */
.task-overview-read-list {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  gap: 0.28rem 0.55rem;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 0.69rem;
}

.task-overview-read-list > strong {
  color: var(--color-text-muted);
  font-size: 0.66rem;
  font-weight: 600;
}

.task-overview-read-list > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

/* Unterkarten are the important content in the extended card. Their label
   gets its own row so the actual titles do not lose 5.8rem to indentation. */
:is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-overview-read-list-subtasks {
  grid-template-columns: minmax(0, 1fr);
}

.task-overview-read-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.28rem;
}

.task-overview-read-row > svg {
  width: 0.72rem;
  height: 0.72rem;
  flex: 0 0 0.72rem;
}

.task-overview-read-state {
  width: 0.8rem;
  flex: 0 0 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
}

.task-overview-read-row.done .task-overview-read-text {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.task-overview-read-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-overview-read-row small,
.task-overview-read-more {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.64rem;
}


/* src/styles/taskBreadcrumbs.css */
/* Task-card breadcrumbs use one stable geometry at every path length. Each
   ancestor remains an individual navigation control while long labels yield
   their share of the available line through ellipsis. */
:is(#task-list, .unified-search-cards).overview-list .task-card-context-line,
:is(#task-list, .unified-search-cards).overview-list .task-parent-context,
:is(#task-list, .unified-search-cards).overview-list .task-parent-path {
  flex-wrap: nowrap !important;
  min-width: 0;
  white-space: nowrap !important;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-context-line {
  align-items: center;
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list .task-parent-context {
  display: flex !important;
  align-items: center;
  overflow: hidden !important;
}

:is(#task-list, .unified-search-cards).overview-list .task-parent-path {
  display: flex !important;
  flex: 1 1 auto;
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list .task-parent-path-part {
  min-width: 0;
  /* Divide a long path predictably instead of letting early ancestors shrink
     to zero width. Every visible breadcrumb therefore remains clickable. */
  flex: 1 1 0;
  overflow: hidden;
}

:is(#task-list, .unified-search-cards).overview-list .task-parent-path-segment,
:is(#task-list, .unified-search-cards).overview-list button.task-parent-link {
  all: unset;
  box-sizing: border-box;
  display: block;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list button.task-parent-link { cursor: pointer; }

:is(#task-list, .unified-search-cards).overview-list button.task-parent-link:hover,
:is(#task-list, .unified-search-cards).overview-list button.task-parent-link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  outline: none;
}


/* src/styles/taskTechnicalMetadata.css */
.task-card-id,
.hierarchy-focus-card-id {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(#task-list, .unified-search-cards).overview-list .task-card-id {
  width: 3.65rem;
  min-width: 3.65rem;
  max-width: 3.65rem;
  justify-content: flex-start;
  padding-inline: 0.35rem;
  font-size: 0.66rem;
}

:is(#task-list, .unified-search-cards).overview-list:not([data-overview-layout="list"]):not([data-card-size="minimal"])
  .task-sequence-number.task-card-id {
  width: 2.25rem;
  min-width: 0;
  max-width: 2.25rem;
  padding-inline: 0;
}

.hierarchy-focus-card-id {
  flex: 0 0 3.65rem;
  width: 3.65rem;
  min-width: 3.65rem;
  max-width: 3.65rem;
  justify-content: flex-start;
  font-size: 0.68rem;
}

.hierarchy-focus-actionbar {
  gap: 0.45rem;
}


/* src/styles/workspaceHeaders.css */
/*
 * Shared workspace command-header system.
 *
 * Keep cross-view dimensions and icon weight here. View styles may decide
 * which actions exist, but must not redefine their visual size independently.
 * The only exceptions are expanded search fields and content-driven tag rows.
 */
.workspace-global-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--workspace-command-height);
  margin-inline-start: auto;
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-border);
}

/* Tool sets differ by view (My Day deliberately exposes one icon while Tasks
   and Planning expose more). Reserve the same three-control slot so the nav
   does not shrink and expand as that content changes. Expanded search remains
   the explicit flexible exception. */
@media (min-width: 37.5rem) {
  .workspace-global-tools {
    box-sizing: border-box;
    flex: 0 0 calc((3 * var(--workspace-command-icon-size)) + (2 * var(--space-4)) + var(--space-8) + 1px);
    width: calc((3 * var(--workspace-command-icon-size)) + (2 * var(--space-4)) + var(--space-8) + 1px);
  }

  .workspace-global-tools:has(.task-command-tools.search-open),
  .workspace-global-tools:has(.task-command-tools.search-active),
  .workspace-global-tools:has(.task-search:focus-within),
  .workspace-global-tools:has(.calendar-toolbar-actions.search-open) {
    flex: 1 1 auto;
    width: auto;
  }
}

.workspace-global-tools[hidden] {
  display: none !important;
}

.workspace-global-tools > :is(.task-command-tools, .planning-toolbar-actions, .calendar-toolbar-actions) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* The shared header owns the single, permanently visible search trigger.
   View-local search controls may still expand their fields programmatically,
   but must not render a second magnifier in the right-hand tool group. */
.workspace-global-tools :is(.planning-search-toggle, .calendar-search-button),
.workspace-global-tools .task-command-tools:not(.search-open):not(.search-active) .task-search:not(:focus-within) {
  display: none !important;
}

/* Expanding the global Tasks search replaces the local filter rail without
   hiding the other global actions. */
.app-shell:has(.workspace-global-tools .task-search:focus-within) .task-command-row,
.app-shell:has(.workspace-global-tools .task-command-tools.search-open) .task-command-row,
.app-shell:has(.workspace-global-tools .task-command-tools.search-active) .task-command-row {
  display: none !important;
}

@media (max-width: 47.99rem) {
  .workspace-global-tools {
    display: none !important;
  }
}

.planning-workspace-toolbar {
  min-height: var(--workspace-command-height);
}

.app-shell[data-active-view="projects"] .task-panel {
  padding: 0;
}

.app-shell:is([data-active-view="projects"], [data-active-view="infos"], [data-active-view="calendar"], [data-active-view="myday"]) .task-command-row {
  display: none !important;
}

/* The legacy toolbar still has a four-pixel grid shell when all of its inner
   rows are hidden. Planning, Document and the other dedicated workspaces own
   their toolbar, so remove that shell as one centralized view exception. */
.app-shell:is([data-active-view="projects"], [data-active-view="infos"], [data-active-view="calendar"]) #task-toolbar {
  display: none !important;
}

/* My Day keeps the shared quick-create row, aligned exactly like Tasks, while
   its local day surface owns every other task-toolbar control. */
.app-shell[data-active-view="myday"] #task-toolbar {
  display: block;
  padding: 0;
  border: 0;
}

.app-shell[data-active-view="myday"] #task-toolbar > :not(.overview-quick-create-host) {
  display: none !important;
}

.app-shell[data-active-view="myday"] .overview-quick-create-host {
  width: auto;
  max-width: none;
  padding: 0.3rem var(--space-24) 0.2rem;
}

.app-shell[data-active-view="myday"] .overview-quick-create-host:has(.quick-create-form.editing) {
  padding-top: 1rem;
  padding-bottom: 0.65rem;
}

@media (min-width: 48rem) and (max-width: 95rem) {
  .app-shell[data-active-view="myday"] .overview-quick-create-host {
    padding: 0.125rem var(--space-24) 0.2rem;
  }
}

@media (max-width: 47.99rem) {
  .app-shell[data-active-view="myday"] .overview-quick-create-host {
    padding: var(--space-8) var(--space-12);
  }
}

.app-shell[data-active-view="projects"] #task-list.project-list {
  gap: 0;
}

.planning-toolbar-menu > summary,
.planning-toolbar-icon,
.workspace-tool-button,
.app-shell:not([data-active-view="myday"]) .triage-quick-start,
.app-shell:not([data-active-view="myday"]) .task-view-options > summary,
.app-shell .workspace-global-tools .task-command-tools .dependency-finder-toggle {
  display: grid;
  place-items: center;
  width: var(--workspace-command-icon-size);
  min-width: var(--workspace-command-icon-size);
  max-width: var(--workspace-command-icon-size);
  height: var(--workspace-command-icon-size);
  min-height: var(--workspace-command-icon-size);
  padding: 0;
  border: 0;
  border-radius: var(--workspace-command-icon-radius);
  background: transparent;
  box-shadow: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}

/* One compact tool group across every desktop work view. Controls keep their
   semantic order, but absent view-specific actions do not reserve empty
   columns. The context-column toggle is always the final visible control. */
.planning-toolbar-actions,
.calendar-toolbar-actions,
.app-shell:is([data-active-view="myday"], [data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-tools.c2-toolbar {
  display: flex !important;
  gap: var(--space-4);
  align-items: center;
}

.calendar-toolbar {
  min-height: var(--workspace-command-height);
  justify-content: flex-start;
  gap: var(--space-8);
  padding: 0 var(--space-16);
}

.calendar-toolbar-actions {
  flex: 0 0 auto;
  margin-left: 0;
  padding-right: var(--space-8);
  border-right: 1px solid var(--color-border);
}

.calendar-toolbar-actions .calendar-search-button { order: 1; }
.calendar-toolbar-actions .calendar-done-toggle { order: 2; }
.calendar-toolbar-actions .calendar-settings { order: 3; }
.calendar-toolbar-actions .calendar-context-toggle { order: 4; }

.calendar-toolbar > .calendar-navigation,
.calendar-toolbar > .calendar-mode-switch,
.calendar-toolbar > .calendar-workweek-toggle {
  flex: 0 0 auto;
}

.calendar-toolbar.search-open .calendar-toolbar-actions {
  display: flex !important;
  flex: 1 1 auto;
  width: 100%;
  padding-right: 0;
  border-right: 0;
}

.calendar-toolbar.search-open > .calendar-navigation,
.calendar-toolbar.search-open > .calendar-mode-switch,
.calendar-toolbar.search-open > .calendar-workweek-toggle,
.calendar-toolbar.search-open .calendar-settings {
  display: none;
}

.calendar-toolbar.search-open .calendar-search {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

.workspace-global-tools .calendar-toolbar-actions.search-open {
  flex: 1 1 auto;
  min-width: min(24rem, 42vw);
}

.workspace-global-tools .calendar-toolbar-actions.search-open .calendar-search {
  display: flex;
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

.workspace-global-tools .calendar-toolbar-actions.search-open .calendar-search-button {
  display: none;
}

.app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-tools .task-search { order: 1; }
.app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-tools .triage-quick-start { order: 2; }
.app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-tools .task-view-options { order: 3; }
.app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-tools .dependency-finder-toggle { order: 4; }

.planning-toolbar-menu > summary svg,
.planning-toolbar-icon svg,
.workspace-tool-button svg,
.app-shell:not([data-active-view="myday"]) .triage-quick-start svg,
.app-shell:not([data-active-view="myday"]) .task-view-options > summary svg,
.app-shell .workspace-global-tools .task-command-tools .dependency-finder-toggle svg,
.app-shell:not([data-active-view="myday"]) .task-command-tools .c2-control-icon,
.app-shell:not([data-active-view="myday"]) .task-command-tools .c2-control-icon::before {
  width: var(--workspace-command-glyph-size);
  min-width: var(--workspace-command-glyph-size);
  height: var(--workspace-command-glyph-size);
}

/* Exception: collapsed search behaves like an icon; its expanded state keeps
   the flexible field width defined by the search component itself. */
.app-shell:not([data-active-view="myday"]) .task-command-tools:not(.search-open):not(.search-active) .task-search:not(:focus-within) {
  width: var(--workspace-command-icon-size);
  min-width: var(--workspace-command-icon-size);
  max-width: var(--workspace-command-icon-size);
  height: var(--workspace-command-icon-size);
  min-height: var(--workspace-command-icon-size);
  border-radius: var(--workspace-command-icon-radius);
}

.planning-toolbar-menu > summary:hover,
.planning-toolbar-icon:hover,
.workspace-tool-button:hover,
.app-shell:not([data-active-view="myday"]) .triage-quick-start:hover,
.app-shell:not([data-active-view="myday"]) .task-view-options > summary:hover,
.app-shell .workspace-global-tools .task-command-tools .dependency-finder-toggle:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}

.app-shell:not([data-active-view="myday"]) .triage-quick-start-count {
  top: -0.25rem;
  right: -0.2rem;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 0.2rem;
  border-width: 1px;
  font-size: 0.55rem;
}

.planning-toolbar-menu[open] > summary,
.planning-toolbar-menu.active > summary,
.planning-toolbar-icon.active,
.workspace-tool-button.active,
.app-shell:not([data-active-view="myday"]) .task-view-options[open] > summary,
.app-shell:not([data-active-view="myday"]) .task-view-options.has-active-settings > summary,
.app-shell .workspace-global-tools .task-command-tools .dependency-finder-toggle[aria-pressed="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* Mein Tag deliberately exposes only the card-context column. Its local day
   controls already own search, completion visibility and ordering. */
.app-shell[data-active-view="myday"] .task-command-tools > :not(.dependency-finder-toggle) {
  display: none !important;
}

/* Planning's toolbar lives in the center pane while the context tabs live in
   a sibling pane. Give both the same measured header row and baseline so the
   divider reads as one uninterrupted application header. */
@media (min-width: 37.5rem) {
  /* Shared one-line command rail. In Tasks the view switcher comes first and
     its tools sit immediately beside it; flexible tags always follow last.
     Planning has no local view switcher, so its tools naturally start the row.
     Only the variable tag content scrolls horizontally. */
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .workspace > section[data-screen="tasks"] > .task-command-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: var(--workspace-command-height);
    align-items: center;
    gap: var(--space-8);
    margin: 0 !important;
    padding: 0 var(--space-16) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 ;
    background: var(--color-surface);
    box-shadow: none ;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-primary {
    display: contents !important;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-primary > .home-overview.execution-status-layout {
    display: contents !important;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-primary .home-summary-counters {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: min(38rem, 64vw);
    min-width: 0;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-primary .home-summary-counters > .home-summary-counter {
    flex: 1 1 auto;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row > .home-tag-quick-filters {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-width: 0;
    max-height: var(--workspace-command-height);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .home-tag-quick-filters .tag-filter-chips {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .home-tag-quick-filters .tag-filter-chips::-webkit-scrollbar {
    display: none;
  }

  /* Expanding Tags changes the command rail from one compact row into a
     content-sized second row. Every chip remains in normal flow; clipping and
     a fixed rail height must never hide later tags. */
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row > .home-tag-quick-filters.expanded {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    max-height: none;
    align-items: start;
    padding-block: var(--space-6) !important;
    overflow: visible;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .home-tag-quick-filters.expanded .tag-filter-chips {
    grid-column: 1;
    grid-row: 1;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .home-tag-quick-filters.expanded .tag-filter-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row .home-daily-summary {
    display: none !important;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row:has(.task-search:focus-within),
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row:has(.task-command-tools.search-open),
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row:has(.task-command-tools.search-active) {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row:has(.task-search:focus-within) .task-command-tools,
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row:has(.task-command-tools.search-open) .task-command-tools,
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row:has(.task-command-tools.search-active) .task-command-tools {
    grid-column: 1;
    display: flex !important;
    width: 100%;
    padding-right: 0 !important;
    border-right: 0 !important;
  }

  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-row:has(.task-search:focus-within) .task-search,
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-tools.search-open .task-search,
  .app-shell:is([data-active-view="tasks"], [data-active-view="timeline"], [data-active-view="dependencies"], [data-active-view="templates"], [data-active-view="archive"]) .task-command-tools.search-active .task-search {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 20rem;
    max-width: none !important;
  }

  .workspace > section[data-screen="tasks"] {
    position: relative;
  }

  .workspace > section[data-screen="tasks"]:has(.dependency-finder:not([hidden])) {
    padding-right: var(--dependency-finder-width, 22rem);
  }

  .workspace > section[data-screen="tasks"]:has(.dependency-finder:not([hidden])) > .task-work-area {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace > section[data-screen="tasks"]:has(.dependency-project-tree:not([hidden])):has(.dependency-finder:not([hidden])) > .task-work-area {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  }

  .workspace > section[data-screen="tasks"] > .task-work-area {
    position: static;
  }

  .workspace > section[data-screen="tasks"] .dependency-finder:not([hidden]) {
    position: absolute;
    z-index: 8;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--dependency-finder-width, 22rem);
  }
}

.dependency-finder {
  padding-top: 0;
  background-color: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg));
  background-image: linear-gradient(var(--color-border), var(--color-border));
  background-repeat: no-repeat;
  background-position: 0 calc(var(--workspace-command-height) - 1px);
  background-size: 100% 1px;
}

/* A normal context pane stays below account/navigation popovers. Its
   deliberately expanded rich-text editor must, however, escape that stacking
   context and behave like the modal surface it visually is. */
.dependency-finder:has(.rich-notes-expanded) {
  z-index: 120 !important;
}

.dependency-finder-view-tabs {
  box-sizing: border-box;
  align-self: start;
  min-height: 2.4rem;
  margin-top: max(0px, calc((var(--workspace-command-height) - 2.4rem) / 2));
  margin-bottom: max(0px, calc((var(--workspace-command-height) - 2.4rem) / 2));
}

/* Exception: the right-pane expand/close controls float inside that shared
   row because they operate on the pane itself, not on Planning content. */
.dependency-finder.details-mode .dependency-finder-header {
  top: calc((var(--workspace-command-height) - 1.9rem) / 2);
}

/* View exceptions, kept together:
   - Document owns its permanent three columns and does not open this pane.
   - Tasks retains its richer two-row status/tag command card in the primary
     pane, while the independent context pane still starts at the common top.
   - My Day keeps its deliberately reduced primary header.
   - Calendar and Dependencies supply their own center-pane controls. */
.app-shell[data-active-view="infos"] .dependency-finder {
  display: none !important;
}

/* The task filters remain a local rail. Once the search control in the
   right-aligned global tool group expands, that rail yields its space. This
   deliberately follows the more specific desktop rail declaration above. */
@media (min-width: 37.5rem) {
  #app-shell:has(.workspace-global-tools .task-search:focus-within) .workspace > section[data-screen="tasks"] > .task-command-row,
  #app-shell:has(.workspace-global-tools .task-command-tools.search-open) .workspace > section[data-screen="tasks"] > .task-command-row,
  #app-shell:has(.workspace-global-tools .task-command-tools.search-active) .workspace > section[data-screen="tasks"] > .task-command-row {
    display: none !important;
  }
}


/* src/styles/workspaceSurfaces.css */
/*
 * Shared surface hierarchy for every page.
 *
 * Page modules own layout and content density. Backgrounds, borders, radii
 * and elevation are defined here so switching views does not change the
 * visual language.
 */

.workspace,
.task-work-area,
.task-panel,
.my-day-view,
.ai-workbench {
  background: var(--workspace-background);
}

/* The shell is laid out before its first render so graph and masonry geometry
   can be measured, but it becomes visible only after persisted state and final
   icons have been applied. This prevents a flash of the static fallback UI. */
.app-shell.app-initializing {
  visibility: hidden;
}

/* Every view begins on the same left content line. This deliberately wins
   over legacy view-local zero/24px padding declarations. My Day already owns
   nested panels, so its former inner gutter is removed to avoid doubling it. */
.app-shell:not([data-active-view="dependencies"]) .task-panel {
  padding-right: var(--workspace-page-gutter) !important;
  padding-left: var(--workspace-page-gutter) !important;
}

.app-shell .my-day-view {
  padding-right: 0;
  padding-left: 0;
}

/* Task cards are materialized in small batches. Reserve the vertical
   scrollbar from the first batch onward so entering Tasks cannot move the
   complete canvas horizontally when later batches make it scrollable. */
@media (min-width: 37.5rem) {
  .app-shell .task-panel {
    scrollbar-gutter: stable;
  }
}

/* The view may choose a split canvas, a calendar, or cards, but the first
   content surface always starts on the same vertical and horizontal rhythm. */
.app-shell:is(
  [data-active-view="myday"],
  [data-active-view="tasks"],
  [data-active-view="timeline"],
  [data-active-view="templates"],
  [data-active-view="archive"]
) .task-panel {
  padding-top: var(--workspace-section-gap) !important;
}

/* Document has its own permanent three-column canvas. */
.app-shell[data-active-view="infos"] .task-work-area {
  padding-top: var(--workspace-section-gap);
}

.app-shell[data-active-view="infos"] .task-panel {
  padding-top: 0 !important;
}

/* My Day, Planning and Calendar use their own inner workspace components, but
   the outer frame must not change when navigating from Tasks. Keeping the
   section itself on the shared inset also keeps an open context pane fixed. */
.app-shell:is([data-active-view="myday"], [data-active-view="projects"], [data-active-view="calendar"])
.tasks-workspace-shell {
  width: calc(100% - (2 * var(--workspace-page-gutter)));
  height: calc(100% - (2 * var(--workspace-section-gap))) !important;
  min-height: 0;
  margin: var(--workspace-section-gap) var(--workspace-page-gutter);
  overflow: hidden;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.app-shell:is([data-active-view="myday"], [data-active-view="projects"], [data-active-view="calendar"])
:is(.task-work-area, .task-panel) {
  padding: 0 !important;
}

@media (min-width: 37.5rem) {
  .app-shell:is([data-active-view="projects"], [data-active-view="calendar"])
  .task-panel {
    scrollbar-gutter: auto;
  }
}

.app-shell :is(.split-workspace-toolbar, .calendar-toolbar) {
  min-height: var(--workspace-command-height);
}

.app-shell :is(.archive-workspace, .timeline-view, .task-list.template-list) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.app-shell[data-active-view="tasks"] .triage-banner {
  margin-right: var(--workspace-page-gutter) !important;
  margin-left: var(--workspace-page-gutter) !important;
}

/* Capture and transient-filter controls belong to one content line. Views
   must not invent their own offset for either element. */
.app-shell:is([data-active-view="tasks"], [data-active-view="myday"]) .overview-quick-create-host {
  padding-right: var(--workspace-content-inset) !important;
  padding-left: var(--workspace-content-inset) !important;
}

/* My Day's capture row is the first row of its shared page frame. Keep its
   content aligned with the panels below instead of treating it as a floating
   toolbar above the page. */
.app-shell[data-active-view="myday"] .overview-quick-create-host {
  padding-right: var(--workspace-panel-padding) !important;
  padding-left: var(--workspace-panel-padding) !important;
}

.app-shell[data-active-view="tasks"] .creation-focus-filter {
  max-width: calc(100% - (2 * var(--workspace-content-inset)));
  margin-right: var(--workspace-content-inset);
  margin-left: var(--workspace-content-inset);
}

@media (min-width: 48rem) {
  .task-work-area > .dependency-project-tree:not([hidden]) > header {
    padding-left: calc(var(--space-12) + var(--workspace-page-gutter));
  }

  .task-work-area > .dependency-project-tree:not([hidden]) > .dependency-project-tree-list {
    padding-left: calc(var(--space-8) + var(--workspace-page-gutter));
  }
}

/* One reusable outer shell for every large, self-contained work area. Layout
   modules own only the contents inside this component. */
.workspace-panel,
.app-shell:is(
  [data-active-view="tasks"],
  [data-active-view="timeline"],
  [data-active-view="templates"],
  [data-active-view="archive"]
) .tasks-workspace-shell {
  border: var(--workspace-panel-border);
  border-radius: var(--workspace-panel-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-panel-shadow);
}

/* My Day owns one real page component. Quick capture is moved into this
   component in the DOM, so no legacy toolbar row can reserve empty space. */
.app-shell[data-active-view="myday"] #task-toolbar {
  display: none !important;
}

.app-shell[data-active-view="myday"] .overview-quick-create-host {
  display: flex;
  min-height: 3rem;
  align-items: center;
  grid-area: auto;
  grid-column: 1 / -1;
  grid-row: 1;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 1px solid var(--color-border);
  background: var(--workspace-header-background);
}

.app-shell[data-active-view="myday"] .overview-quick-create-host:not(:has(.quick-create-form.editing)) {
  height: 3rem !important;
  max-height: 3rem;
}

.app-shell[data-active-view="myday"] .task-work-area,
.app-shell[data-active-view="myday"] .task-panel {
  background: var(--workspace-surface);
}

/* The context pane is a stable application column, not part of the active
   canvas surface. Keep its tone and outer edges identical while views change. */
.app-shell:is(
  [data-active-view="myday"],
  [data-active-view="tasks"],
  [data-active-view="projects"],
  [data-active-view="calendar"],
  [data-active-view="timeline"],
  [data-active-view="dependencies"],
  [data-active-view="templates"],
  [data-active-view="archive"]
) .dependency-finder {
  background-color: var(--workspace-background);
}

.dependency-finder :is(.dependency-finder-details-view, .dependency-finder-ai-view) {
  background: transparent;
}

.app-shell[data-active-view="myday"] .my-day-view {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--workspace-surface);
}

.app-shell[data-active-view="myday"] .my-day-layout {
  display: grid;
  grid-row: 2;
  grid-template-columns: minmax(10rem, min(var(--my-day-pool-width, 24rem), calc(100% - 20rem))) var(--space-20) minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding-top: 0;
}

@container (max-width: 44rem) {
  .app-shell[data-active-view="myday"] .my-day-layout {
    grid-template-columns: minmax(10rem, min(var(--my-day-pool-width, 24rem), calc(100% - 20rem))) var(--space-20) minmax(0, 1fr);
  }
}

@media (max-width: 37.4375rem) {
  .app-shell[data-active-view="myday"] .my-day-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell[data-active-view="myday"] .my-day-pool-resizer {
    display: none;
  }
}


/* Dependencies is an interactive split canvas, but it still uses the same
   inset page frame. Its shell deliberately stays overflow-visible so graph
   dragging and the optional context pane are not clipped by the outer radius. */
.app-shell[data-active-view="dependencies"] .tasks-workspace-shell {
  width: calc(100% - (2 * var(--workspace-page-gutter)));
  height: calc(100% - (2 * var(--workspace-section-gap))) !important;
  min-height: 0;
  margin: var(--workspace-section-gap) var(--workspace-page-gutter);
  overflow: visible;
  border: var(--workspace-panel-border);
  border-radius: var(--workspace-panel-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-panel-shadow);
}

.app-shell[data-active-view="dependencies"] .task-command-row {
  border-radius: calc(var(--workspace-panel-radius) - 1px) calc(var(--workspace-panel-radius) - 1px) 0 0;
}

.app-shell[data-active-view="dependencies"] .task-work-area {
  overflow: hidden;
  border-radius: 0 0 calc(var(--workspace-panel-radius) - 1px) calc(var(--workspace-panel-radius) - 1px);
  background: var(--workspace-surface);
}

.app-shell[data-active-view="dependencies"] .task-panel {
  background: var(--workspace-surface);
}

.dependency-focus-view.workspace-panel {
  gap: 0;
  overflow: visible;
}

.dependency-workspace-toolbar.workspace-toolbar {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: calc(var(--workspace-panel-radius) - 1px) calc(var(--workspace-panel-radius) - 1px) 0 0;
  box-shadow: none;
}

.dependency-focus-view > .dependency-focus-layout {
  border: 0;
  border-radius: 0 0 calc(var(--workspace-panel-radius) - 1px) calc(var(--workspace-panel-radius) - 1px);
  box-shadow: none;
}

@media (min-width: 48rem) {
  .app-shell[data-active-view="dependencies"] .task-work-area > .dependency-project-tree:not([hidden]) > header {
    padding-left: var(--workspace-panel-padding);
  }

  .app-shell[data-active-view="dependencies"] .task-work-area > .dependency-project-tree:not([hidden]) > .dependency-project-tree-list {
    padding-left: var(--space-8);
  }
}

/* Standard internal anatomy. Views combine these primitives; they do not
   restyle their visual level. */
.workspace-panel-header,
.workspace-toolbar {
  display: flex;
  min-width: 0;
  min-height: var(--workspace-command-height);
  align-items: center;
  gap: var(--workspace-panel-gap);
  padding: 0 var(--workspace-panel-padding);
  border-bottom: 1px solid var(--color-border);
  background: var(--workspace-header-background);
}

.workspace-panel-header {
  justify-content: space-between;
}

.workspace-panel.workspace-panel-structured {
  gap: 0;
  overflow: hidden;
}

.my-day-pool.workspace-panel {
  padding: 0;
}

.workspace-panel-header.workspace-panel-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.workspace-panel-header-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.workspace-toolbar.workspace-toolbar {
  min-height: var(--workspace-command-height);
  padding: 0 var(--workspace-panel-padding);
  border-bottom: 1px solid var(--color-border);
  background: var(--workspace-header-background);
}

.workspace-panel-content {
  min-width: 0;
  padding: var(--workspace-panel-padding);
}

.workspace-panel-content.workspace-panel-content-flush {
  padding: 0;
}

.workspace-panel .workspace-title,
.workspace-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--workspace-title-size);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
}

.workspace-copy,
.workspace-meta {
  color: var(--color-text-secondary);
}

.workspace-meta {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
}

.workspace-command-icon {
  width: var(--workspace-command-glyph-size);
  height: var(--workspace-command-glyph-size);
  flex: 0 0 auto;
}

/* Tasks is one coherent workspace too: command row, capture, transient state,
   triage and cards share one outer surface instead of floating separately on
   the page background. */
.app-shell:is(
  [data-active-view="tasks"],
  [data-active-view="timeline"],
  [data-active-view="templates"],
  [data-active-view="archive"]
) .tasks-workspace-shell {
  width: calc(100% - (2 * var(--workspace-page-gutter)));
  height: auto !important;
  margin: var(--workspace-section-gap) var(--workspace-page-gutter);
  overflow: hidden;
}

/* Views with the shared command rail keep their complete working area on the
   same surface instead of reintroducing view-specific canvas colors. */
.app-shell:is(
  [data-active-view="tasks"],
  [data-active-view="timeline"],
  [data-active-view="templates"],
  [data-active-view="archive"]
) :is(.task-work-area, .task-panel) {
  background: var(--workspace-surface);
}

:is(
  .settings-group,
  .auth-panel,
  .admin-panel
) {
  border: var(--workspace-panel-border);
  border-radius: var(--workspace-panel-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-panel-shadow);
}

:is(.split-workspace-toolbar, .split-workspace-column) {
  background: var(--workspace-surface);
}

/* Repeating content surfaces use one quieter level than page panels. */
:is(
  .task-item,
  .template-card,
  .ai-stat,
  .ai-provider-card,
  .ai-preferences-card,
  .ai-panel,
  .ai-suggestion,
  .ai-empty,
  .ai-error,
  .admin-entity-row,
  .card-width-preview-card,
  .dependency-graph-card
) {
  border: var(--workspace-card-border);
  border-radius: var(--workspace-card-radius);
  background: var(--workspace-surface);
  box-shadow: var(--workspace-card-shadow);
}

/* Toolbars are structurally visible but do not float above their page. */
:is(.dependency-graph-toolbar, .knowledge-document-toolbar) {
  border-color: var(--color-border);
  border-radius: var(--workspace-card-radius);
  background: var(--workspace-surface);
  box-shadow: var(--shadow-subtle);
}

/* The Document editor is a sticky opaque band, not a floating card. Its
   inner rich-text control keeps the control border; the band itself joins the
   reader edges without radius or elevation. */
.knowledge-document-toolbar {
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 47.99rem) {
  .workspace-panel-header,
  .workspace-toolbar.workspace-toolbar {
    min-height: 3rem;
    padding-right: var(--space-12);
    padding-left: var(--space-12);
  }

  .workspace-panel-header.workspace-panel-header-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .workspace-panel-content {
    padding: var(--space-12);
  }

  .workspace-panel-content.workspace-panel-content-flush {
    padding: 0;
  }
}

/* Dialogs are the strongest surface and share one shape/elevation. */
:is(
  dialog,
  .share-dialog,
  .overview-card-dialog,
  .shortcut-help-dialog,
  .rich-notes.rich-notes-expanded
) {
  border: var(--workspace-panel-border);
  border-radius: var(--workspace-panel-radius);
  background: var(--workspace-surface);
  box-shadow: var(--shadow-modal);
}


/* src/styles/phoneDetailNavigation.css */
/* Compact navigation: the existing context pane becomes a separate screen.
   Keep the underlying task list mounted so closing it preserves list state. */
.finder-close-phone {
  display: none;
}

:root[data-layout-size="compact"] .workspace > section[data-screen="tasks"] .dependency-finder:not([hidden]) {
  position: fixed;
  z-index: 300;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  width: 100%;
  height: var(--doneit-viewport-height, 100dvh);
  min-height: 0;
  padding: calc(var(--adaptive-safe-area-top) + var(--space-8))
    calc(var(--adaptive-safe-area-right) + var(--workspace-content-inset))
    calc(var(--adaptive-safe-area-bottom) + var(--space-8))
    calc(var(--adaptive-safe-area-left) + var(--workspace-content-inset));
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
  overflow: clip;
  overscroll-behavior: contain;
}

:root[data-layout-size="compact"] .dependency-finder:not([hidden]) .dependency-finder-view-tabs {
  min-width: 0;
  min-height: var(--adaptive-min-touch-target);
  margin-right: 0;
}

:root[data-layout-size="compact"] .dependency-finder.details-mode .dependency-finder-view-tabs {
  margin-right: 6.5rem;
}

:root[data-layout-size="compact"] .dependency-finder:not([hidden]) .dependency-finder-header {
  align-items: center;
  min-height: var(--adaptive-min-touch-target);
}

:root[data-layout-size="compact"] .dependency-finder:not([hidden]) #dependency-finder-close {
  width: auto;
  min-width: var(--adaptive-min-touch-target);
  height: var(--adaptive-min-touch-target);
  min-height: var(--adaptive-min-touch-target);
  padding-inline: var(--space-8);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--text-body);
  white-space: nowrap;
}

:root[data-layout-size="compact"] .dependency-finder:not([hidden]) .finder-close-desktop {
  display: none;
}

:root[data-layout-size="compact"] .dependency-finder:not([hidden]) .finder-close-phone {
  display: inline;
}

:root[data-layout-size="compact"] .dependency-finder.details-mode .dependency-finder-header {
  top: calc(var(--adaptive-safe-area-top) + var(--space-8));
  right: calc(var(--adaptive-safe-area-right) + var(--workspace-content-inset));
  margin: 0;
}

:root[data-layout-size="compact"] .dependency-finder:not([hidden]) .dependency-finder-view {
  min-height: 0;
  overscroll-behavior: contain;
}

:root[data-layout-size="compact"] .dependency-finder:not([hidden]) :is(
  .dependency-finder-details-view,
  .dependency-finder-ai-view,
  .dependency-finder-list,
  .dependency-finder-graph-view
) {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

:root[data-layout-size="compact"] .dependency-finder-scroll-top {
  display: none;
}


/* src/styles/adaptiveMediumTaskPanes.css */
/* Medium adaptive windows keep task list and context visible together. This includes
   the 600–672px band formerly swallowed by the old Phone override. */
:root[data-layout-size="medium"] .app-shell[data-active-view="tasks"]
  .workspace > section[data-screen="tasks"]:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

:root[data-layout-size="medium"] .app-shell[data-active-view="tasks"]
  .workspace > section[data-screen="tasks"]:has(.dependency-finder:not([hidden])) {
  padding-right: 0;
}

:root[data-layout-size="medium"] .app-shell[data-active-view="tasks"]
  .workspace > section[data-screen="tasks"] > .task-work-area:has(.dependency-finder:not([hidden])) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(16rem, var(--dependency-finder-width, 22rem), 42vw);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

:root[data-layout-size="medium"] .app-shell[data-active-view="tasks"]
  .task-work-area:has(.dependency-finder:not([hidden])) > .task-panel {
  display: grid;
  min-width: 0;
}

:root[data-layout-size="medium"] .app-shell[data-active-view="tasks"]
  .task-work-area > .dependency-finder:not([hidden]) {
  position: relative;
  z-index: auto;
  inset: auto;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  min-height: 0;
  border-top: 0;
  box-shadow: none;
}


/* src/styles/viewOverflowSplit.css */
/* The dynamic view slot has two independent targets: the label opens the
   displayed view directly, while only the arrow opens the view picker. */
.app-shell[data-active-view] .shared-workspace-header .header-view-nav .view-overflow-trigger {
  gap: 0;
  padding-inline: 0;
}

.view-overflow-label {
  align-self: stretch;
  padding-inline: var(--space-12);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  cursor: pointer;
}

.view-overflow-label:hover,
.view-overflow-label:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-primary);
  outline: none;
}

.view-overflow-trigger > span[aria-hidden="true"] {
  align-self: center;
  justify-content: center;
  width: 2rem;
  min-height: 1.35rem;
  border-left: 1px solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.app-shell[data-active-view] .shared-workspace-header .header-view-nav .view-overflow-trigger:hover {
  background: transparent;
}


/* src/styles/planningRelief.css */
.planning-relief-shell {
  display: flex;
  flex-direction: column;
  width: min(64rem, 100%);
  max-height: calc(100dvh - (2 * var(--space-24)));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.planning-relief-shell > header,
.planning-relief-shell > footer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
}

.planning-relief-shell > header { position: relative; z-index: 3; align-items: flex-start; border-bottom: 1px solid var(--color-border); }
.planning-relief-shell > header > div { min-width: 0; }
.planning-relief-shell > footer { border-top: 1px solid var(--color-border); }
.planning-relief-shell > header h2 { margin: 0; font-size: var(--text-heading); }
.planning-relief-shell > header p { margin: var(--space-4) 0 0; color: var(--color-text-secondary); }
.planning-relief-shell > footer > span { color: var(--color-text-secondary); font-size: var(--text-caption); }

.planning-relief-live-summary {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  flex: none;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-20);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-primary-soft);
}

.planning-relief-live-summary strong { color: var(--color-primary); }
.planning-relief-live-summary span { color: var(--color-text-secondary); font-size: var(--text-caption); }

.planning-relief-target {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.planning-relief-target > div:first-child { display: grid; gap: var(--space-4); }
.planning-relief-target > div:first-child span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.planning-relief-target > div:last-child { display: flex; gap: var(--space-10); }
.planning-relief-target label { display: grid; gap: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-caption); }
.planning-relief-target :is(input, select) {
  min-height: var(--control-height-md);
  padding-inline: var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.planning-relief-blocks,
.planning-relief-review-list {
  min-height: 0;
  padding: var(--space-12) var(--space-20);
  overflow: auto;
}

.planning-relief-block-wrap { margin-left: calc(var(--relief-depth, 0) * var(--space-20)); }
.planning-relief-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 4.25rem;
  margin-bottom: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.planning-relief-block.selected { border-color: var(--color-primary); background: var(--color-primary-soft); }
.planning-relief-block > div:first-child { display: grid; min-width: 0; gap: var(--space-4); }
.planning-relief-block > div:first-child strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-relief-block > div:first-child span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.planning-relief-block > div:last-child { display: flex; flex: none; gap: var(--space-8); }
.planning-relief-block-children { border-left: 1px solid var(--color-border); }
.planning-relief-partial { color: var(--color-text-secondary); }
.planning-relief-empty { padding: var(--space-24); color: var(--color-text-secondary); text-align: center; }

.planning-relief-review-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex: none;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.planning-relief-review-group {
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.planning-relief-review-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 3.25rem;
  padding: var(--space-10) var(--space-14);
  cursor: pointer;
}

.planning-relief-review-group > summary span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.planning-relief-review-rows { border-top: 1px solid var(--color-border); }
.planning-relief-review-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: center;
  gap: var(--space-12);
  min-height: 4.5rem;
  padding: var(--space-10) var(--space-14);
  border-bottom: 1px solid var(--color-border);
}

.planning-relief-review-row:last-child { border-bottom: 0; }
.planning-relief-review-row.manual { background: color-mix(in srgb, var(--color-primary-soft) 62%, white); }
.planning-relief-review-row.excluded { opacity: 0.68; }
.planning-relief-review-row.conflict { box-shadow: inset 3px 0 0 var(--color-warning-strong); }
.planning-relief-review-row > div:first-child { display: grid; min-width: 0; gap: var(--space-2); }
.planning-relief-review-row > div:first-child > span { overflow: hidden; color: var(--color-text-secondary); font-size: var(--text-caption); text-overflow: ellipsis; white-space: nowrap; }
.planning-relief-date-change { display: grid; grid-template-columns: auto auto minmax(8rem, auto); align-items: center; gap: var(--space-8); }
.planning-relief-date-change > span { color: var(--color-text-secondary); font-size: var(--text-caption); }
.planning-relief-date-change input {
  min-height: var(--control-height-md);
  padding-inline: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.planning-relief-row-actions { display: flex; gap: var(--space-6); }
.planning-relief-row-actions .button { min-height: var(--control-height-md); white-space: nowrap; }
.planning-relief-conflict { margin: var(--space-4) 0 0; color: var(--color-warning-strong); font-size: var(--text-caption); }

@media (max-width: 50rem) {
  .planning-relief-target { align-items: stretch; flex-direction: column; }
  .planning-relief-target > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .planning-relief-review-row { grid-template-columns: minmax(0, 1fr); }
  .planning-relief-row-actions { flex-wrap: wrap; }
}

@media (max-width: 37.4375rem) {
  .planning-relief-shell { max-height: 100dvh; border-radius: 0; }
  .planning-relief-shell > header,
  .planning-relief-shell > footer,
  .planning-relief-live-summary,
  .planning-relief-target,
  .planning-relief-blocks,
  .planning-relief-review-controls,
  .planning-relief-review-list { padding-inline: var(--space-12); }
  .planning-relief-shell > footer { align-items: stretch; flex-direction: column; }
  .planning-relief-block { align-items: stretch; flex-direction: column; }
  .planning-relief-block > div:last-child { justify-content: flex-end; }
  .planning-relief-block-wrap { margin-left: calc(var(--relief-depth, 0) * var(--space-10)); }
  .planning-relief-review-controls { grid-template-columns: 1fr; }
  .planning-relief-date-change { grid-template-columns: auto auto minmax(0, 1fr); }
}


/* src/styles/mobileHeaderCompactV6.css */
/* Mobile header V6: two persistent rows.
   Filter/search occupy the navigation row instead of creating a third band. */
@media (max-width: 52.4375rem) {
  /* Board context is explicit here: every selected board remains visible as
     a compact initial chip. The detailed counts live in the context line. */
  .shared-workspace-header .board-scope-quick-filters {
    gap: var(--space-4);
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .shared-workspace-header .board-scope-quick-filters::-webkit-scrollbar {
    display: none;
  }

  .shared-workspace-header .board-scope-chip-initial {
    display: inline-flex;
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-strong);
  }

  .shared-workspace-header .board-scope-chip-initial.primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

  .shared-workspace-header .board-scope-chip-initial .board-scope-chip-check {
    display: none;
  }

  .shared-workspace-header .board-scope-chip-initial > span:nth-child(2) {
    max-width: none;
  }

  .shared-workspace-header .board-scope-overflow {
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }

  /* The wide status block competed with the board scope. On touch layouts it
     is rendered in the context line below the period controls instead. */
  #app-shell[data-active-view] .shared-workspace-header .today-progress {
    display: none;
  }

  #app-shell[data-active-view="tasks"] .mobile-active-selection {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 1.75rem;
    padding-inline: max(var(--space-8), env(safe-area-inset-left, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--color-surface);
    text-overflow: clip;
    white-space: nowrap;
    scrollbar-width: none;
  }

  #app-shell[data-active-view="tasks"] .mobile-active-selection::-webkit-scrollbar {
    display: none;
  }

  .session-card .account-menu .mobile-account-route {
    display: flex;
  }

  .session-card .account-menu .account-menu-route > span {
    display: inline;
  }

  .session-card .account-menu .account-menu-route > :is(svg, span:first-child:not(:last-child)) {
    width: 1.1rem;
    min-width: 1.1rem;
    height: 1.1rem;
    text-align: center;
  }

  .session-card .account-menu .account-menu-route > svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .shared-workspace-header .session-card .mobile-header-menu-button .account-icon {
    width: 1.45rem;
    height: 1.45rem;
  }

  .shared-workspace-header .session-card .mobile-header-menu-button[aria-expanded="true"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .shared-workspace-header .account-menu {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 2.75rem);
    right: max(var(--space-8), env(safe-area-inset-right, 0px));
    max-height: calc(var(--doneit-viewport-height, 100dvh) - 3.5rem);
    overflow-y: auto;
  }

  /* Stronger, consistently sized view symbols. */
  .shared-workspace-header .header-view-nav .view-button-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
  }

  .shared-workspace-header .header-view-nav :is(.view-button, .view-overflow-trigger) {
    gap: var(--space-4);
  }

  .shared-workspace-header .header-view-nav .view-overflow-trigger {
    position: relative;
    padding-right: 0.9rem;
  }

  .shared-workspace-header .header-view-nav .view-overflow-trigger > span[aria-hidden="true"] {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: -0.12rem;
    color: currentColor;
    font-size: 0.72rem;
    line-height: 1;
  }

  .shared-workspace-header .header-view-nav .view-overflow-chevron {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }

  #app-shell[data-active-view="tasks"] .app-frame .workspace > section.tasks-workspace-shell[data-screen="tasks"]:not([hidden]) {
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  }

  #app-shell[data-active-view="tasks"] .mobile-task-filter-panel {
    grid-row: 3;
  }

  #app-shell[data-active-view="tasks"] #task-toolbar {
    grid-row: 4;
  }

  #app-shell[data-active-view="tasks"] #triage-banner {
    grid-row: 5;
  }

  #app-shell[data-active-view="tasks"] .task-work-area {
    grid-row: 6;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav {
    padding-right: 5.5rem;
  }

  #app-shell[data-active-view] .mobile-workspace-controls {
    position: fixed;
    top: 3rem;
    right: 0;
    z-index: 24;
    width: 5.5rem;
    min-width: 5.5rem;
    height: 3rem;
    padding: 0.125rem max(var(--space-6), env(safe-area-inset-right, 0px)) 0.125rem 0;
    border: 0;
    background: var(--color-surface);
    box-shadow: none;
  }

  #app-shell[data-active-view="infos"] .mobile-workspace-controls {
    display: flex;
  }

  #app-shell[data-active-view] .app-frame[data-mobile-panel="search"] .mobile-workspace-controls {
    right: 0;
    left: 0;
    width: 100%;
    padding-left: max(var(--space-8), env(safe-area-inset-left, 0px));
  }

  /* Mein Tag: the panel switcher and quick-add share one compact row. */
  .app-shell[data-active-view="myday"] .my-day-view.workspace-panel {
    position: relative;
    grid-template-rows: 2.75rem minmax(0, 1fr);
  }

  .app-shell[data-active-view="myday"] .my-day-mobile-switcher {
    grid-row: 1;
    min-height: 2.75rem;
    padding: 0 calc(2.75rem + var(--space-8)) 0 var(--space-8);
  }

  .app-shell[data-active-view="myday"] .my-day-mobile-switcher button {
    min-height: 2.75rem;
  }

  .app-shell[data-active-view="myday"] .my-day-quick-create-host {
    position: absolute;
    top: 0;
    right: var(--space-4);
    z-index: 5;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
  }

  .app-shell[data-active-view="myday"] .my-day-quick-create-host .quick-create-form:not(.editing) .column-add-trigger {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  .app-shell[data-active-view="myday"] .my-day-quick-create-host .quick-create-form:not(.editing) .column-add-trigger::before {
    color: var(--color-primary);
    content: "+";
    font-size: 1.2rem;
  }

  .app-shell[data-active-view="myday"] .my-day-view .my-day-layout {
    grid-row: 2;
  }

  .app-shell[data-active-view="myday"] .my-day-pool-resizer {
    display: none;
  }

  .app-shell[data-active-view="myday"] .my-day-workspace {
    grid-template-rows: 2.75rem minmax(0, 1fr);
    gap: var(--space-4);
    padding: 0 var(--space-8) var(--space-8);
  }

  .app-shell[data-active-view="myday"] .my-day-workspace:has(> .my-day-ai-guidance) {
    grid-template-rows: 2.75rem 2.75rem minmax(0, 1fr);
  }

  .app-shell[data-active-view="myday"] .my-day-workspace > header {
    height: 2.75rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
    padding-inline: 0;
  }

  .app-shell[data-active-view="myday"] .my-day-header-controls button {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .app-shell[data-active-view="myday"] .my-day-ai-guidance {
    min-height: 2.75rem;
    padding: var(--space-4) var(--space-8);
  }

  .app-shell[data-active-view="myday"] .my-day-ai-guidance strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell[data-active-view="myday"] .my-day-ai-guidance :is(span, small) {
    display: none;
  }

  /* Dokument: project and topic selection share one row; the redundant
     completed toolbar moves into the global Filter control. */
  .app-shell[data-active-view="infos"] .knowledge-workspace {
    grid-template-rows: minmax(0, 1fr);
  }

  .app-shell[data-active-view="infos"] .knowledge-toolbar {
    display: none;
  }

  .app-shell[data-active-view="infos"] .knowledge-columns,
  .app-shell[data-active-view="infos"] .knowledge-columns:is(.projects-collapsed, .topics-collapsed, .projects-collapsed.topics-collapsed) {
    grid-template-columns: minmax(8rem, 42%) minmax(0, 1fr);
    grid-template-rows: 2.75rem minmax(0, 1fr);
  }

  .app-shell[data-active-view="infos"] .mobile-project-picker {
    grid-column: 1;
    grid-row: 1;
    padding-inline: var(--space-4);
  }

  .app-shell[data-active-view="infos"] .mobile-project-picker-trigger {
    min-height: 2.75rem;
    grid-template-columns: 1.35rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    padding-inline: var(--space-4);
  }

  .app-shell[data-active-view="infos"] .mobile-project-picker-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .app-shell[data-active-view="infos"] .mobile-project-picker-count {
    display: none;
  }

  .app-shell[data-active-view="infos"] .knowledge-topics {
    grid-column: 2;
    grid-row: 1;
    height: 2.75rem;
    flex-basis: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border-left: 1px solid var(--color-border);
  }

  .app-shell[data-active-view="infos"] .knowledge-topics-header .knowledge-create-form {
    width: min(10rem, 65vw);
    min-width: min(10rem, 65vw);
  }

  .app-shell[data-active-view="infos"] .knowledge-reader {
    --knowledge-reader-inline-padding: var(--space-8);
    --knowledge-reader-block-padding: var(--space-6);
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    padding: var(--space-6) var(--space-8) var(--space-12);
  }

  .app-shell[data-active-view="infos"] .knowledge-document-toolbar {
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--knowledge-reader-inline-padding);
  }

  .app-shell[data-active-view="infos"] .knowledge-document-toolbar .rich-notes-toolbar {
    min-height: 2.75rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .app-shell[data-active-view="infos"] .knowledge-document-toolbar .rich-notes-toolbar::-webkit-scrollbar {
    display: none;
  }

  .app-shell[data-active-view="infos"] .knowledge-document-toolbar .rich-notes-tool-group {
    flex: 0 0 auto;
  }
}

@media (max-width: 37.4375rem) {
  .app-shell[data-active-view] .sidebar.shared-workspace-header {
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem 5.5rem;
  }

  .shared-workspace-header .brand { grid-column: 1; }
  .shared-workspace-header .sidebar-board-section { grid-column: 2; }
  .shared-workspace-header .sidebar-nav { grid-column: 3; }
  .shared-workspace-header .session-card { grid-column: 4; }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav {
    gap: var(--space-2);
    justify-content: space-evenly;
    padding-right: 5.5rem;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav::-webkit-scrollbar {
    display: none;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav > :is(.view-button, .view-overflow) {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    flex: 0 0 2.75rem;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav > .view-overflow {
    min-width: 3rem;
    flex-basis: 3rem;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav > :is(.view-button.active, .view-button.view-pending, .view-overflow.active) {
    width: auto;
    max-width: 7rem;
    flex-basis: auto;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav :is(.view-button, .view-overflow-trigger) {
    flex-direction: row;
    min-height: 2.75rem;
    padding-inline: 0;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav > .view-button > span,
  .app-shell[data-active-view] .shared-workspace-header .view-overflow-label {
    display: none;
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav > :is(.view-button.active, .view-button.view-pending) {
    gap: var(--space-4);
    padding-inline: var(--space-8);
  }

  .app-shell[data-active-view] .shared-workspace-header .header-view-nav > :is(.view-button.active, .view-button.view-pending) > span,
  .app-shell[data-active-view] .shared-workspace-header .view-overflow.active .view-overflow-label {
    display: inline-flex;
    min-width: 0;
    padding-inline: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell[data-active-view] .shared-workspace-header .view-overflow.active .view-overflow-trigger {
    gap: var(--space-4);
    padding-inline: var(--space-8);
  }

  .shared-workspace-header .board-scope-chip:nth-of-type(n + 2) {
    display: inline-flex;
  }

  #app-shell[data-active-view] .mobile-workspace-controls {
    top: 2.75rem;
    height: 2.75rem;
    padding-block: 0;
  }
}


/* src/styles/mobileReadableTypography.css */
/* Final Phone type floor.
   This file intentionally loads after the density/view-level styles, which
   otherwise shrink card copy below a comfortable handheld reading size. */
@media (max-width: 37.4375rem) {
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-title,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-title,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-title {
    height: auto;
    min-height: 1.2rem;
    max-height: 2.4rem;
    font-size: 1rem;
    line-height: 1.2rem;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size="minimal"] .minimal-focus-card .task-parent-context,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="compact"] .task-parent-context,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size="full"] .task-parent-context,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-parent-link,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-parent-separator {
    max-height: 1rem;
    font-size: 0.8125rem;
    line-height: 1rem;
  }

  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-fact,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-fact-label,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-fact-value,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-tag-heading,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-overview-tag,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-overview-tag-input,
  :is(#task-list, .unified-search-cards).overview-list[data-card-size] .task-planning-panel .task-date-chip {
    font-size: 0.8125rem;
    line-height: 1.2;
  }
}


/* src/styles/detailFrameCollapse.css */
.detail-main-panel {
  container-type: inline-size;
}

.detail-collapsible-frame {
  display: grid;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: clip;
}

.detail-collapsible-frame:has(> .detail-frame-body > [hidden]) {
  display: none;
}

.detail-frame-toggle {
  display: flex;
  width: 100%;
  min-height: var(--space-44);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-strong);
  text-align: left;
}

.detail-frame-toggle:hover,
.detail-frame-toggle:focus-visible {
  background: var(--color-surface-muted);
}

.detail-frame-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.detail-frame-chevron {
  color: var(--color-text-secondary);
  font-size: var(--text-title);
  line-height: 1;
  transform: rotate(0deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.detail-frame-body {
  min-width: 0;
  padding: var(--space-12);
}

.detail-collapsible-frame:has(.rich-notes) .detail-frame-body {
  padding: 0;
}

.detail-collapsible-frame.is-collapsed .detail-frame-toggle {
  border-bottom-color: transparent;
}

.detail-collapsible-frame.is-collapsed .detail-frame-chevron {
  transform: rotate(-90deg);
}

.detail-collapsible-frame.is-collapsed .detail-frame-body {
  display: none;
}

.detail-frame-body :is(.detail-section-title, .detail-subtasks-header > h2, .detail-template-tools > h2) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.detail-frame-body > :is(.detail-section, .detail-template-tools, .detail-dependencies, .detail-attachments) {
  padding-top: 0;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .detail-frame-chevron { transition: none; }
}


/* src/styles/dragPlacementFeedback.css */
/* Reordering uses a physical insertion slot: surrounding cards move out of the
   way, while the dragged card remains visible at the pointer. */
.task-drop-preview {
  min-height: var(--space-44);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 72%, transparent), var(--shadow-card);
}

.task-drop-preview-marker {
  background: var(--color-text-tertiary);
}

.task-drop-preview small {
  color: var(--color-text-secondary);
}

.planning-workspace .planning-browser-row.drop-before::before,
.planning-workspace .planning-browser-row.drop-after::after,
.task-child.drop-before::before,
.task-child.drop-after::after {
  content: none;
}

.planning-workspace .task-drop-preview {
  margin-inline: var(--space-8);
  min-height: var(--space-40);
  padding-block: var(--space-6);
}

:is(.subtask-item, .planning-project-hover-target).drop-before,
:is(.knowledge-document-card, .knowledge-task-row, .knowledge-topic-item, .knowledge-root-card).drag-over-before,
:is(.dependency-stage, .dependency-arrange-stage).stage-drop-before {
  margin-top: var(--space-44);
}

:is(.subtask-item, .planning-project-hover-target).drop-after,
:is(.knowledge-document-card, .knowledge-task-row, .knowledge-topic-item, .knowledge-root-card).drag-over-after,
:is(.dependency-stage, .dependency-arrange-stage).stage-drop-after {
  margin-bottom: var(--space-44);
}

:is(.subtask-item, .planning-project-hover-target).drop-before::before,
:is(.knowledge-document-card, .knowledge-topic-item, .knowledge-root-card).drag-over-before::before,
:is(.dependency-stage, .dependency-arrange-stage).stage-drop-before::before,
:is(.subtask-item, .planning-project-hover-target).drop-after::after,
:is(.knowledge-document-card, .knowledge-task-row, .knowledge-topic-item, .knowledge-root-card).drag-over-after::after,
:is(.dependency-stage, .dependency-arrange-stage).stage-drop-after::after,
.knowledge-task-row.drag-over-before::after {
  position: absolute;
  right: var(--space-4);
  left: var(--space-4);
  z-index: 4;
  display: grid;
  height: var(--space-36);
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-card);
  color: var(--color-text-secondary);
  content: "Hier ablegen";
  font-size: var(--text-caption);
  font-weight: var(--font-weight-strong);
  pointer-events: none;
}

:is(.subtask-item, .planning-project-hover-target).drop-before::before,
:is(.knowledge-document-card, .knowledge-topic-item, .knowledge-root-card).drag-over-before::before,
:is(.dependency-stage, .dependency-arrange-stage).stage-drop-before::before,
.knowledge-task-row.drag-over-before::after {
  top: calc(var(--space-40) * -1);
  bottom: auto;
}

:is(.subtask-item, .planning-project-hover-target).drop-after::after,
:is(.knowledge-document-card, .knowledge-task-row, .knowledge-topic-item, .knowledge-root-card).drag-over-after::after,
:is(.dependency-stage, .dependency-arrange-stage).stage-drop-after::after {
  top: auto;
  bottom: calc(var(--space-40) * -1);
}

.overview-modal-subcard-row.drop-before::before,
.overview-modal-subcard-row.drop-after::after {
  border-style: solid;
  border-color: var(--color-border-strong);
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-card);
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .task-drop-preview { animation: none; }
}


/* src/styles/erfassenFinden.css */
/* Shared capture/search controls; native workspace renderers keep their features. */
.has-unified-search .global-search-launch,
.has-unified-search .task-search,
.has-unified-search .planning-workspace-search,
.has-unified-search .planning-search-toggle,
.has-unified-search .calendar-search,
.has-unified-search .calendar-search-toggle,
.has-unified-search .knowledge-search,
.has-unified-search .my-day-search,
.has-unified-search #mobile-view-search,
.has-unified-search #overview-quick-create-host,
.has-unified-search .overview-quick-create-host,
.has-unified-search .quick-create-form,
.has-unified-search .planning-add-form,
.has-unified-search .knowledge-create-form,
.has-unified-search .column-add-form,
.has-unified-search .search-create-item { display: none; }
.unified-search-input { display: flex; align-items: center; min-width: 0; width: min(28ch, 100%); min-height: var(--space-44); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-muted); margin-left: auto; }
.unified-search-input input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--color-text-primary); padding: var(--space-12); font: inherit; outline: none; }
.unified-search-input:focus-within { outline: var(--focus-ring); }
.unified-search-input input::-webkit-search-cancel-button { appearance: none; }
.unified-search-input .icon-button { flex-shrink: 0; border: 0; background: transparent; min-width: var(--space-44); min-height: var(--space-44); }
.header-view-nav > .unified-search-input { order: 7; flex: 0 1 28ch; margin-left: 0; }
.header-view-nav > .workspace-global-tools { order: 8; }
.item-capture-dialog { box-sizing: border-box; width: min(520px, calc(100vw - 16px)); max-width: none; padding: 0; overflow: visible; }
.item-capture-dialog.is-anchored { position: fixed; margin: 0; inset: auto; z-index: 80; }
.item-capture-dialog form { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.item-capture-dialog .item-create-title { width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: var(--space-16); }
.item-capture-dialog .item-create-context { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; gap: var(--space-6); padding: 0 var(--space-16) var(--space-16); }
.item-capture-dialog .item-create-type-value { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.item-create-type-segment { display: inline-flex; padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.item-create-type-segment button { min-height: var(--space-32); padding: 0 var(--space-10); }
.item-create-type-segment button[aria-pressed="true"] { background: var(--color-surface); box-shadow: var(--shadow-card); }
.item-capture-dialog .item-destination { position: relative; flex: 0 1 auto; min-width: 0; }
.item-capture-dialog .item-destination-target { display: flex; align-items: center; gap: var(--space-4); max-width: 100%; white-space: nowrap; }
.item-destination-project-name { overflow: hidden; text-overflow: ellipsis; }
.item-destination-dot { width: var(--space-8); height: var(--space-8); flex: none; border-radius: var(--radius-full); background: var(--color-accent-blue); }
.item-capture-dialog .item-destination-panel { position: absolute; z-index: 4; top: calc(100% + var(--space-4)); left: 0; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; margin: 0; padding: var(--space-8); }
.item-destination-boards { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.item-destination-boards > button { flex: 0 0 auto; }
.item-capture-dialog .item-destination-boards { flex-wrap: nowrap; overflow-x: auto; }
.item-destination-panel > input { width: 100%; box-sizing: border-box; }
.item-destination-heading { display: block; padding: var(--space-8); color: var(--color-text-secondary); }
.item-destination-options { overflow-y: auto; }
.item-destination-row { display: flex; align-items: center; border-top: 1px solid var(--color-border); }
.item-destination-row.is-topic { padding-left: var(--space-24); }
.item-destination-row .item-destination-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex: 1 1 auto; }
.item-destination-option small { color: var(--color-text-secondary); text-align: right; }
.item-destination-option-title { display: inline-flex; align-items: center; gap: var(--space-8); min-width: 0; }
.item-destination-option-title svg { width: var(--space-16); height: var(--space-16); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.item-capture-dialog .item-destination-boards > button { display: inline-flex; align-items: center; gap: var(--space-4); }
.item-destination-expand { flex: none; border: 0; background: transparent; color: var(--color-text-secondary); padding: var(--space-8); cursor: pointer; }
.item-create-date { position: relative; }
.item-create-date-menu { position: absolute; z-index: 5; top: 100%; left: 0; display: grid; min-width: 12rem; padding: var(--space-8); }
.item-create-date-menu[hidden] { display: none; }
.item-create-date-menu label { display: grid; gap: var(--space-4); padding: var(--space-8); }
.item-capture-dialog .item-create-actions { justify-content: space-between; padding: var(--space-8) var(--space-16); border-top: 1px solid var(--color-border); }
.item-capture-dialog .item-create-actions > button { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: var(--space-4); white-space: nowrap; }
.item-create-shortcut { font-size: var(--text-caption); opacity: 0.75; }
.item-capture-dialog [role="alert"] { margin: 0; padding: var(--space-8) var(--space-16); color: var(--color-danger); }
.has-unified-search .global-item-create { min-height: var(--space-44); flex-shrink: 0; white-space: nowrap; }
.global-item-create-icon { display: none; }
.item-create-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.item-destination { grid-column: 1 / -1; min-width: 0; }
.item-destination-target { max-width: 100%; min-height: var(--space-44); white-space: normal; text-align: left; overflow-wrap: anywhere; }
.item-destination-panel { padding: var(--space-12); margin-top: var(--space-8); }
.item-destination-panel > input { width: 100%; min-width: 0; }
.item-destination-boards { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
.item-destination-boards button { min-height: var(--space-44); }
.item-destination-options { max-height: min(35svh, 320px); overflow-y: auto; margin-top: var(--space-8); }
.item-destination-option { display: block; width: 100%; min-height: var(--space-44); text-align: left; border: 0; background: transparent; color: var(--color-text-primary); padding: var(--space-8); }
.item-destination-option.is-topic { padding-left: var(--space-28); }
.item-destination-option.selected, .item-destination-option:hover { background: var(--color-primary-soft); }
.unified-search-active #task-toolbar,
.unified-search-active .task-context-controls,
.unified-search-active #home-overview,
.unified-search-active .triage-banner { display: none; }
.has-unified-search #app-shell.unified-search-active :is(.mobile-card-count, .mobile-active-selection, .toolbar-result-count-search) { display: none; }
#task-list.unified-search-results { display: block; min-width: 0; }
.unified-search-workspace { min-width: 0; container: search-workspace / inline-size; }
.unified-search-header { padding: var(--space-16) var(--workspace-content-inset); }
.unified-search-header h1 { font-size: var(--workspace-title-size); }
.unified-search-summary { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); min-width: 0; color: var(--color-text-secondary); font-size: var(--text-caption); }
.unified-search-summary > * { flex-shrink: 0; }
.unified-search-summary button, .unified-search-project-picker { min-height: var(--space-44); }
.unified-search-project-picker { display: none; max-width: 24ch; }
.unified-search-columns { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.unified-search-project-nav { display: flex; flex-direction: column; min-width: 0; padding: var(--space-12); border-right: 1px solid var(--color-border); }
.unified-search-project-nav .project-link { text-align: left; white-space: normal; min-height: var(--space-44); }
.unified-search-project-nav .active { background: var(--color-primary-soft); color: var(--color-primary); }
.unified-search-body, .unified-search-project-group { padding: var(--space-16) var(--workspace-content-inset); }
.unified-search-body { display: grid; gap: var(--space-16); }
.unified-search-project-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-12); }
.unified-search-project-heading h2 { font-size: var(--text-section); }
.unified-search-project-group + .unified-search-project-group { border-top: 1px solid var(--color-border); }
.unified-search-cards { min-width: 0; }
.unified-search-columns > .unified-search-cards, .unified-search-result-list { display: flex; flex-direction: column; }
.has-unified-search .calendar-toolbar { flex-wrap: wrap; }
.has-unified-search .calendar-mode-switch { display: flex; }
.unified-search-body > .unified-search-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-16); }
.unified-search-cards > .task-item { list-style: none; }
.unified-search-ancestor .project-row-title { color: var(--color-text-secondary); }
.unified-search-infos .unified-search-columns { grid-template-columns: 210px minmax(280px, 1fr) minmax(320px, 1.3fr); }
.unified-search-projects .unified-search-columns { grid-template-columns: 220px minmax(0, 1fr); }
.knowledge-navigation-item.unified-document-result { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); width: 100%; text-align: left; padding: var(--space-16); color: var(--color-text-primary); white-space: normal; }
.unified-document-result strong { overflow-wrap: anywhere; color: var(--color-text-primary); }
.unified-document-result small { color: var(--color-text-secondary); white-space: normal; }
.unified-document-result > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.unified-document-result.active { background: var(--color-primary-soft); }
.unified-search-reader { position: sticky; top: 0; max-height: 75svh; min-width: 0; overflow: auto; border-left: 1px solid var(--color-border); padding: var(--space-16); }
.unified-search-reader .knowledge-reader { min-width: 0; }
.unified-search-empty { padding: var(--space-16) var(--workspace-content-inset); color: var(--color-text-secondary); }
.document-search-occurrences { position: sticky; top: 0; background: var(--workspace-surface); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-8); z-index: 2; }
.document-search-occurrences button { min-width: var(--space-44); min-height: var(--space-44); }
::highlight(doneit-search) { background: var(--color-primary-soft); color: var(--color-text-primary); }
::highlight(doneit-search-active) { background: var(--color-primary); color: var(--color-on-primary); }
.unified-reader-back { display: none; }
.has-unified-search .planning-row-actions { opacity: 0; pointer-events: none; }
.has-unified-search .planning-browser-row:hover .planning-row-actions,
.has-unified-search .planning-browser-row:focus-within .planning-row-actions,
.has-unified-search .planning-browser-row.selected .planning-row-actions { opacity: 1; pointer-events: auto; }
.planning-order-trigger { min-height: var(--space-44); }
.planning-order-bar { position: fixed; bottom: var(--space-16); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-8); max-width: calc(100% - var(--space-24)); z-index: 24; padding: var(--space-8); }
.planning-order-bar button { min-height: var(--space-44); white-space: nowrap; }
.planning-order-mode .bulk-toolbar { display: none; }
.planning-order-mode .planning-browser-row { position: relative; cursor: pointer; }
.planning-order-mode .planning-browser-row.order-selected { background: var(--color-primary-soft); }
.planning-order-mode .planning-row-topic { padding-right: var(--space-44); }
.planning-order-mode .planning-row-topic .task-drag-handle { position: absolute; right: 0; top: 0; display: grid; opacity: 1; min-width: var(--space-44); min-height: var(--space-44); touch-action: none; }
.planning-order-mode .planning-row-actions, .planning-order-mode .planning-row-time,
.planning-order-mode .planning-row-context-menu { visibility: hidden; pointer-events: none; }
.planning-order-mode .project-row-done, .planning-order-mode .project-row-type-icon { border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--workspace-surface); }
.planning-order-mode .order-selected .project-row-done,
.planning-order-mode .order-selected .project-row-type-icon { background: var(--color-primary); color: var(--color-on-primary); }
.planning-touch-input:not(.planning-order-mode) .planning-browser-row .task-drag-handle { display: none; }
.has-unified-search .task-drop-preview:not(.drop-committed) { border-style: dashed; }
.planning-browser-row.drop-before::before, .planning-browser-row.drop-after::after { content: none; }
.has-unified-search .planning-workspace-toolbar .planning-toolbar-context { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-12); }
.has-unified-search .planning-workspace .project-content-list { grid-auto-rows: max-content; gap: 0; }
.planning-project-title { font-size: var(--workspace-title-size); color: var(--color-text-primary); }
.has-unified-search .planning-tree-context > small { font-size: var(--text-caption); letter-spacing: normal; text-transform: none; }
.planning-row-count { display: inline-flex; align-items: center; gap: var(--space-8); }
.planning-row-count progress { width: var(--space-44); height: var(--space-4); accent-color: var(--color-primary); }
.has-unified-search .planning-browser-row.has-children .planning-row-time.overdue { color: var(--color-danger); }
.has-unified-search .planning-workspace .planning-browser-row.top-level:not(:first-child) { margin-top: 0; }
.has-unified-search .planning-browser-row .planning-row-time.overdue { color: var(--color-text-secondary); }
.has-unified-search .planning-row-time.overdue::before { content: ""; display: inline-block; width: var(--space-4); height: var(--space-4); margin-right: var(--space-6); border-radius: var(--radius-full); background: var(--color-danger); vertical-align: middle; }
.unified-search-workspace mark { background: var(--color-primary-soft); color: inherit; }
.planning-order-mode .planning-row-topic { position: static; }
.has-unified-search #app-shell:is(.planning-order-mode, .planning-touch-input) .planning-row-topic { grid-template-columns: var(--space-24) var(--space-24) minmax(0, 1fr); }
#app-shell:is(.planning-order-mode, .planning-touch-input) .planning-row-expand { grid-column: 1; }
#app-shell:is(.planning-order-mode, .planning-touch-input) :is(.project-row-done, .project-row-type-icon) { grid-column: 2; }
#app-shell:is(.planning-order-mode, .planning-touch-input) .project-row-title { grid-column: 3; min-width: 0; }
#app-shell:is(.planning-order-mode, .planning-touch-input) .planning-row-waiting { grid-column: 3; }
.has-unified-search .planning-order-mode .planning-browser-row.order-selected { border: 0; box-shadow: none; outline: none; }
.has-unified-search .planning-browser-row:is(.drop-before, .drop-after, .drop-inside) { border-color: transparent; outline: none; box-shadow: none; }
.has-unified-search #app-shell:is([data-active-view="projects"], [data-active-view="infos"]) :is(.mobile-card-count, .mobile-active-selection) { display: none; }
.has-unified-search body:has(.planning-order-mode) .app-undo-toast { bottom: calc(2 * var(--space-64) + var(--space-24)); }
.unified-search-tree .project-hierarchy-row.planning-browser-row { grid-template-columns: minmax(0, 1fr) auto auto; min-width: 0; min-height: var(--space-44); margin: 0; padding: var(--space-8); border: 0; border-radius: 0; background: var(--color-surface); box-shadow: none; }
.unified-search-tree .planning-browser-row.selected { background: var(--color-primary-soft); }
.unified-search-tree .planning-row-topic { grid-template-columns: auto auto auto minmax(0, 1fr); gap: var(--space-6); padding-left: min(calc(var(--project-hierarchy-depth, 0) * var(--space-16)), var(--space-64)); }
.unified-search-tree .planning-row-focus { display: none; }
.unified-search-tree .planning-row-topic::before, .unified-search-tree .planning-row-topic::after { display: none; }
.unified-search-tree .project-row-title-text { white-space: normal; overflow-wrap: anywhere; }
.unified-search-tree .planning-row-actions { display: none; }
@media (max-width: 52rem) {
  .has-unified-search .planning-workspace .planning-browser-row { min-height: var(--space-44); padding-block: 0; }
  .has-unified-search .planning-workspace .planning-row-expand { min-width: var(--space-44); min-height: var(--space-44); }
  .has-unified-search .app-shell:not(.planning-order-mode) .planning-workspace .planning-row-topic { grid-template-columns: auto auto auto minmax(0, 1fr); }
  .has-unified-search .planning-workspace .planning-project-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .has-unified-search .planning-workspace .mobile-project-picker { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; }
  .has-unified-search .planning-workspace .mobile-project-picker-trigger { min-height: var(--space-44); }
  .has-unified-search .planning-workspace .planning-tree-toggle-all { width: var(--space-44); padding: 0; }
  .has-unified-search .planning-workspace .planning-expand-all-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .has-unified-search .planning-workspace { grid-template-rows: auto minmax(0, 1fr); }
  .has-unified-search .planning-workspace > .project-content { grid-row: 2; }
  .has-unified-search .planning-workspace.search-results { grid-template-rows: auto auto minmax(0, 1fr); }
  .has-unified-search .planning-workspace.search-results > .project-content { grid-row: 3; }
}
@media (min-width: 75rem) {
  .has-unified-search .app-shell[data-active-view] .sidebar.shared-workspace-header {
    grid-template-columns: 2.75rem minmax(15rem, 1fr) minmax(14rem, 20rem) minmax(8rem, 0.7fr) 5.5rem auto;
  }
  .has-unified-search .app-shell[data-active-view] .shared-workspace-header .today-progress { grid-column: 3; grid-row: 1; }
  .has-unified-search .app-shell[data-active-view] .shared-workspace-header .board-attention-host { grid-column: 4; }
}
@media (pointer: coarse) {
  .app-shell:not(.planning-order-mode) .planning-browser-row .task-drag-handle { display: none; }
  .has-unified-search #app-shell:not(.planning-order-mode) .planning-row-topic { grid-template-columns: var(--space-24) var(--space-24) minmax(0, 1fr); }
  .app-shell:not(.planning-order-mode) .planning-row-expand { grid-column: 1; }
  .app-shell:not(.planning-order-mode) :is(.project-row-done, .project-row-type-icon) { grid-column: 2; }
  .app-shell:not(.planning-order-mode) .project-row-title { grid-column: 3; }
  .app-shell:not(.planning-order-mode) .planning-row-waiting { grid-column: 3; }
}
@media (hover: hover) and (pointer: fine) {
  .planning-workspace .planning-browser-row .project-row-drag { opacity: 0; }
  .planning-workspace .planning-browser-row:is(:hover, :focus-within, .dragging, .dragging-group-lead, .dragging-group-member) .project-row-drag { opacity: 1; }
}
@container search-workspace (max-width: 1100px) {
  .unified-search-infos .unified-search-columns { grid-template-columns: 190px minmax(0, 1fr); }
  .unified-search-reader { grid-column: 2; position: static; max-height: none; border-top: 1px solid var(--color-border); }
  .unified-reader-back { display: inline-grid; }
}
@container search-workspace (max-width: 700px) {
  .unified-search-header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-4); }
  .unified-search-header h1 { grid-column: 1; grid-row: 1; }
  .unified-search-header .planning-tree-toggle-all { grid-column: 2; grid-row: 1; width: var(--space-44); padding: 0; }
  .unified-search-header .planning-expand-all-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .unified-search-header .planning-order-trigger { grid-column: 3; grid-row: 1; }
  .unified-search-summary { grid-column: 1 / -1; grid-row: 2; }
  .unified-search-summary { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
  .unified-search-summary.has-overflow { mask-image: linear-gradient(to right, black calc(100% - var(--space-24)), transparent); }
  .unified-search-project-picker { display: inline-block; order: -1; }
  .unified-search-columns, .unified-search-infos .unified-search-columns { display: block; }
  .unified-search-columns > .unified-search-project-nav { display: none; }
  .unified-search-reader { border-left: 0; }
  .unified-search-tree .planning-browser-row { grid-template-columns: minmax(0, 1fr) auto; }
  .unified-search-tree :is(.planning-row-count, .planning-row-time, .planning-row-folder) { display: none; }
}
@media (max-width: 839px) {
  .item-capture-dialog { position: fixed; inset: auto 0 var(--item-keyboard-inset, 0px); width: 100%; max-width: 100%; max-height: min(90dvh, 700px); margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .item-capture-dialog::backdrop { background: var(--shadow-ink-42); }
  .item-capture-dialog .item-create-context { flex-wrap: nowrap; }
  .item-capture-dialog .item-create-type-segment { flex: none; }
  .item-capture-dialog .item-create-type-segment button { min-height: var(--space-44); padding-inline: var(--space-6); }
  .item-capture-dialog .item-destination { flex: 1 1 auto; }
  .item-capture-dialog .item-destination-target { box-sizing: border-box; width: 100%; min-width: 0; padding-inline: var(--space-8); }
  .item-capture-dialog .item-create-date-trigger { padding-inline: var(--space-8); }
  .item-capture-dialog .item-create-shortcut { display: none; }
  .item-capture-dialog .item-destination-board-name { display: none; }
  .item-capture-dialog.destination-open { height: min(75dvh, 620px); }
  .item-capture-dialog.destination-open .item-destination { position: static; }
  .item-capture-dialog.destination-open form { height: 100%; grid-template-rows: auto auto 1fr auto; }
  .item-capture-dialog.destination-open .item-create-actions { grid-row: 4; }
  .item-capture-dialog.destination-open .item-destination-panel { position: absolute; inset: 112px 0 58px; width: 100%; max-height: none; display: flex; flex-direction: column; border: 0; box-shadow: none; }
  .item-capture-dialog.destination-open .item-destination-panel > :not(.item-destination-options) { flex: 0 0 auto; }
  .item-capture-dialog.destination-open .item-destination-panel[hidden] { display: none; }
  .item-capture-dialog.destination-open .item-destination-options { max-height: none; flex: 1 1 auto; }
  .item-capture-dialog .item-create-actions { padding-bottom: max(var(--space-8), env(safe-area-inset-bottom)); }
  .has-unified-search #app-shell[data-active-view] .mobile-workspace-controls { box-sizing: border-box; display: flex; position: fixed; top: auto; bottom: max(var(--space-12), env(safe-area-inset-bottom)); left: max(var(--space-12), env(safe-area-inset-left)); right: max(var(--space-12), env(safe-area-inset-right)); gap: var(--space-8); width: auto; min-width: 0; height: auto; padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); z-index: 25; }
  .has-unified-search .mobile-workspace-controls > :not(.unified-search-input):not(.global-item-create) { display: none; }
  .has-unified-search #app-shell .mobile-workspace-controls .unified-search-input { box-sizing: border-box; order: -1; width: 0; min-width: 0; flex: 1 1 0%; margin: 0; }
  .has-unified-search .header-view-nav .global-item-create { display: none; }
  .has-unified-search #app-shell .mobile-workspace-controls .global-item-create { box-sizing: border-box; display: inline-flex; width: var(--space-44); height: var(--space-44); min-width: var(--space-44); min-height: var(--space-44); max-width: var(--space-44); padding: 0; flex: 0 0 var(--space-44); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); }
  .mobile-workspace-controls .global-item-create-label { display: none; }
  .mobile-workspace-controls .global-item-create-icon { display: inline; }
  .has-unified-search .task-panel { padding-bottom: var(--space-64); }
  .has-unified-search .planning-workspace .project-content-list { padding-bottom: calc(var(--space-64) + var(--space-16) + env(safe-area-inset-bottom)); }
  .has-unified-search .planning-order-mode .planning-workspace .project-content-list { padding-bottom: calc(2 * var(--space-64) + var(--space-16) + env(safe-area-inset-bottom)); }
  .planning-order-bar { bottom: calc(var(--space-64) + var(--space-16) + env(safe-area-inset-bottom)); gap: var(--space-4); }
  .planning-order-bar button { padding-inline: var(--space-8); font-size: var(--text-caption); }
  .has-unified-search .calendar-toolbar > .calendar-mode-switch { display: flex; }
  .has-unified-search .calendar-mode-switch button { min-height: var(--space-44); }
  .has-unified-search .app-undo-toast { bottom: calc(var(--space-64) + var(--space-16)); }
}