/* Compatible visual layer for the existing remote Task build.
   Approved blue palette; original JS, metrics, status colors and callbacks stay unchanged. */
html[data-euni-visual="task"] {
  --ev-brand: #1261d7; --ev-brand-dark: #0d4fae; --ev-soft: #edf4ff;
  --ev-ink: #183049; --ev-muted: #62758a; --ev-line: #e2e9ef;
  --ev-page: #f3f6fa; --ev-paper: #fff;
  --color-primary: var(--ev-brand); --color-primary-foreground: #fff;
  --color-background: var(--ev-page); --color-foreground: var(--ev-ink);
  --color-card: var(--ev-paper); --color-border: var(--ev-line);
  --color-muted: #f8fafc; --color-muted-foreground: var(--ev-muted);
  --color-ring: var(--ev-brand); color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}
html[data-euni-visual="task"] body { color: var(--ev-ink); background: var(--ev-page); }
html[data-euni-visual="task"] #root > .h-screen.flex { background: var(--ev-page); }
html[data-euni-visual="task"] #root > .h-screen > aside {
  width: 256px; min-width: 256px; flex-shrink: 0;
  border-color: var(--ev-line); background: var(--ev-paper);
}
html[data-euni-visual="task"] aside > div:first-child {
  height: 72px; min-height: 72px; padding-inline: 24px; border-color: var(--ev-line);
}
html[data-euni-visual="task"] aside > div:first-child > div:first-child {
  width: 100%; min-height: 38px; background: url("./eunitask-wordmark.svg") left center / contain no-repeat;
}
html[data-euni-visual="task"] aside > div:first-child > div:first-child > * { visibility: hidden; }
/* The accepted Task shell stays 256px expanded. Old toggle code is retained but not presented. */
html[data-euni-visual="task"] aside button[aria-label="Toggle sidebar"] { display: none; }
html[data-euni-visual="task"] aside nav { padding: 24px 16px; }
html[data-euni-visual="task"] aside nav a {
  min-height: 44px; border-radius: 10px; padding-inline: 14px; font-size: 14px;
  color: var(--ev-muted); margin-bottom: 5px;
}
html[data-euni-visual="task"] aside nav a:hover { background: #f5f8fc; color: var(--ev-brand); }
html[data-euni-visual="task"] aside nav a.text-primary {
  background: var(--ev-soft); color: var(--ev-brand); box-shadow: inset 3px 0 var(--ev-brand);
}
html[data-euni-visual="task"] aside .nav-icon { flex-shrink: 0; }
html[data-euni-visual="task"] .app-header {
  min-height: 72px; height: 72px; padding-inline: 28px; gap: 20px;
  background: var(--ev-paper); border-color: var(--ev-line); flex-shrink: 0;
}
html[data-euni-visual="task"] .app-header h1 { font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
html[data-euni-visual="task"] .app-header .user-menu > button {
  width: auto; min-width: 48px; max-width: 180px; border: 1px solid var(--ev-line);
  background: var(--ev-soft); color: var(--ev-brand);
}
html[data-euni-visual="task"] main > .flex-1 { min-height: 0; background: var(--ev-page); }
html[data-euni-visual="task"] main .max-w-4xl { max-width: 1280px; }
html[data-euni-visual="task"] main .grid > .bg-white.rounded-lg,
html[data-euni-visual="task"] main .space-y-6 > .bg-white.rounded-lg {
  border-color: var(--ev-line); border-radius: 16px;
  box-shadow: 0 4px 18px #233e5508; padding: 24px;
}
html[data-euni-visual="task"] main .grid > .bg-white.rounded-lg {
  min-height: 174px; box-shadow: inset 0 3px var(--ev-brand), 0 4px 18px #233e5508;
}
html[data-euni-visual="task"] main .grid > .bg-white.rounded-lg:nth-child(2) { box-shadow: inset 0 3px #2f806c, 0 4px 18px #233e5508; }
html[data-euni-visual="task"] main .grid > .bg-white.rounded-lg:nth-child(3) { box-shadow: inset 0 3px #6a82b5, 0 4px 18px #233e5508; }
html[data-euni-visual="task"] main .grid > .bg-white.rounded-lg > p.text-3xl {
  margin-block: 12px; color: var(--ev-ink); font-size: 36px; letter-spacing: -.04em; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
html[data-euni-visual="task"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-radius: 8px; accent-color: var(--ev-brand);
}
html[data-euni-visual="task"] :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ev-brand); outline-offset: 3px;
}
html[data-euni-visual="task"] button { border-radius: 8px; }
html[data-euni-visual="task"] button[type="submit"] { background: var(--ev-brand); }
html[data-euni-visual="task"] button[type="submit"]:hover:not(:disabled) { background: var(--ev-brand-dark); }
html[data-euni-visual="task"] table { font-size: 14px; }
html[data-euni-visual="task"] table th { color: var(--ev-muted); background: #f8fafc; font-weight: 550; }
html[data-euni-visual="task"] table td, html[data-euni-visual="task"] table th { border-color: var(--ev-line); }
html[data-euni-visual="task"] table tbody tr:hover { background: #f5f8fc; }
html[data-euni-visual="task"] .fixed.inset-0 > .bg-white.rounded-lg {
  border-radius: 16px; border-color: var(--ev-line); box-shadow: 0 24px 80px #0b1d3b30;
}
html[data-euni-visual="task"] #root > .min-h-screen {
  background: radial-gradient(ellipse at top right, #e6f0ff, transparent 58%), var(--ev-page);
}
@media (max-width: 900px) {
  html[data-euni-visual="task"] .app-header { padding-inline: 18px; }
  html[data-euni-visual="task"] main .grid > .bg-white.rounded-lg { min-height: 150px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-euni-visual="task"] :where(button, a, input, select, textarea) { transition: none !important; }
}