/* Self-hosted Exo 2 replaces Rajdhani (Google v17 woff2 triggers Firefox glyf bbox warnings) */

@font-face {
font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/exo2-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;
}

@keyframes syncPulse {
0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

@keyframes slideIn {
from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes completedPulse {
0%   { box-shadow: 0 0 0 0 var(--hud-glow); }
  50%  { box-shadow: 0 0 0 12px rgba(0, 212, 255, 0); }
  100% { box-shadow: none; }
}

@keyframes confettiFall {
0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(200px) rotate(720deg); opacity: 0; }
}

@keyframes priorityOverduePulse {
0%, 100% { box-shadow: 0 0 12px rgba(255, 61, 90, 0.1), inset 0 1px 0 rgba(0, 229, 255, 0.12); }
  50% { box-shadow: 0 0 22px rgba(255, 61, 90, 0.22), inset 0 1px 0 rgba(0, 229, 255, 0.14); }
}

@keyframes overdueLabelPulse {
0%, 100% { box-shadow: 0 0 0 rgba(255, 61, 90, 0); }
  50% { box-shadow: 0 0 14px rgba(255, 61, 90, 0.22); }
}

@keyframes statusChipPulse {
0%, 100% { box-shadow: 0 0 12px rgba(255, 61, 90, 0.3); }
  50% { box-shadow: 0 0 16px rgba(255, 61, 90, 0.45); }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --surface-base: rgba(4, 14, 32, 0.58);
  --surface-panel: rgba(12, 22, 42, 0.68);
  --surface-inset: rgba(8, 16, 32, 0.86);
  --surface-elevated: rgba(0, 48, 80, 0.32);
  --surface-track: rgba(6, 14, 28, 0.78);
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-default: rgba(0, 229, 255, 0.26);
  --border-strong: rgba(0, 229, 255, 0.42);
  --border-focus: rgba(0, 229, 255, 0.72);
  --accent-primary: var(--hud-cyan);
  --accent-glow: var(--hud-glow-soft);
  --accent-muted: rgba(0, 229, 255, 0.1);
  --color-success: #00e896;
  --color-danger: #ff4d6a;
  --color-warning: #ffb020;
  --color-success-subtle: rgba(0, 232, 150, 0.14);
  --color-danger-subtle: rgba(255, 77, 106, 0.14);
  --color-warning-subtle: rgba(255, 176, 32, 0.14);
  --text-muted: rgba(186, 218, 238, 0.72);
  --text-on-accent: #041018;
  --tag-work: #818cf8;
  --tag-personal: #f472b6;
  --tag-shopping: #fbbf24;
  --tag-condo: var(--hud-cyan);
  --tag-automation: #f0c040;
  --tag-smoke-test: #4ade80;
  --tag-dip: #c084fc;
  --tag-ops: #fb923c;
  --tag-needs-operator: #f87171;
  --tag-needs-login: #eab308;
  --tag-needs-config: #2dd4bf;
  --tag-needs-secrets: #a3e635;
  --tag-orchestrator-attention: #f43f5e;
  --tag-todolist: #818cf8;
  --tag-mesk8: #38bdf8;
  --tag-lightwave: #c084fc;
  --control-height: 44px;
  --control-height-lg: 44px;
  --control-pad-x: var(--space-3);
  --control-bg: var(--surface-inset);
  --control-border: var(--border-default);
  --control-text: var(--text-primary);
  --control-placeholder: var(--text-muted);
  --control-focus-ring: 0 0 0 1px var(--border-focus), 0 0 14px var(--accent-glow);
  --btn-primary-bg: linear-gradient(135deg, rgba(0, 120, 220, 0.62), rgba(0, 200, 255, 0.42));
  --btn-primary-border: var(--border-strong);
  --btn-primary-text: var(--text-primary);
  --btn-primary-hover-shadow: 0 0 22px var(--accent-glow), inset 0 0 14px rgba(0, 212, 255, 0.12);
  --btn-secondary-bg: rgba(0, 36, 64, 0.42);
  --btn-secondary-border: var(--border-default);
  --btn-secondary-text: var(--text-secondary);
  --btn-ghost-bg: rgba(255, 255, 255, 0.03);
  --btn-ghost-border: var(--border-subtle);
  --btn-ghost-text: var(--text-secondary);
  --track-bg: var(--surface-track);
  --track-border: var(--border-subtle);
  --track-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  --icon-dot: 6px;
  --icon-symbol-sm: 14px;
  --icon-symbol-md: 20px;
  --icon-symbol-lg: 18px;
  --icon-glyph: 1.125em;
  --focus-ring-width: 2px;
  --focus-ring-color: var(--border-focus);
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
  --header-divider: rgba(0, 229, 255, 0.18);
  --header-widget-min: 148px;
  --header-forecast-min: 170px;
  --bg-deep: #020408;
  --bg-navy: #060c18;
  --hud-cyan: #00e5ff;
  --hud-blue: #0088ff;
  --hud-electric: #22d3ee;
  --hud-glow: rgba(0, 229, 255, 0.5);
  --hud-glow-soft: rgba(0, 229, 255, 0.14);
  --hud-gold: #f0c040;
  --card: rgba(4, 18, 36, 0.62);
  --card-border: rgba(0, 229, 255, 0.32);
  --glass: rgba(0, 48, 80, 0.28);
  --text: #e8f6ff;
  --muted: #5a8fb8;
  --accent: #00d4ff;
  --accent2: #0088ff;
  --danger: #ff3d5a;
  --warn: #ffaa22;
  --ok: #00ffaa;
  --input-bg: rgba(0, 24, 48, 0.72);
  --radius: 3px;
  --card-shadow: 0 0 24px rgba(0, 136, 255, 0.12), inset 0 0 40px rgba(0, 212, 255, 0.04);
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Exo 2', 'Segoe UI', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}

html {
  height: 100%;
  min-height: 100vh;
  background-color: var(--bg-deep);
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--bg-deep);
  background-image: url('../images/dashboard-bg.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  pointer-events: none;
}

.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 4, 8, 0.72) 0%, rgba(6, 12, 28, 0.45) 45%, rgba(2, 4, 12, 0.78) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(0, 136, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 229, 255, 0.06) 0%, transparent 45%);
}

.hud-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
}

.hud-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 85%);
}

.hud-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* hud-scanlines removed — animated scan drift fought steady hover (Jarvis glitch) */

.hud-frame {
  position: absolute;
  inset: 12px;
}

.hud-corner {
  position: absolute;
  width: 48px;
  height: 48px;
  border-color: var(--hud-cyan);
  border-style: solid;
  opacity: 0.55;
  box-shadow: 0 0 12px var(--hud-glow-soft);
}

.hud-corner-tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.hud-corner-tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.hud-corner-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.hud-corner-br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  margin: 0;
  color: var(--text);
  padding: var(--gap-layout) var(--gap-component) var(--gap-section);
  transition: color 0.3s;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  letter-spacing: 0.02em;
  --space-base: 8px;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --rhythm-1: var(--space-1);
  --rhythm-2: var(--space-2);
  --rhythm-3: var(--space-3);
  --rhythm-4: var(--space-4);
  --rhythm-5: var(--space-5);
  --rhythm-6: var(--space-6);
  --rhythm-7: var(--space-7);
  --gap-micro: var(--space-1);
  --gap-tight: var(--space-2);
  --gap-element: var(--space-3);
  --gap-component: var(--space-4);
  --gap-section: var(--space-5);
  --gap-layout: var(--space-6);
  --pad-inset-sm: var(--space-1) var(--space-2);
  --pad-inset: var(--space-2) var(--space-3);
  --pad-card: var(--space-3);
  --pad-card-x: var(--space-3) var(--space-4);
  --pad-panel: var(--space-4);
  --radius-panel: 0;
  --radius-chip: 0;
  --radius-control: 2px;
  --type-2xs: 0.667em;
  --type-xs: 0.733em;
  --type-sm: 0.8em;
  --type-base: 0.933em;
  --type-md: 1em;
  --type-lg: 1.2em;
  --type-xl: 1.467em;
  --type-2xl: 1.867em;
  --type-3xl: clamp(1.4em, 3vw, 2em);
  --type-4xl: clamp(1.75em, 4.5vw, 2.5em);
  --type-kicker: var(--type-xs);
  --type-label: var(--type-xs);
  --type-caption: var(--type-sm);
  --type-body: var(--type-sm);
  --type-title-sm: var(--type-sm);
  --type-title: var(--type-base);
  --type-heading: var(--type-lg);
  --type-task-primary: var(--type-md);
  --type-task-secondary: var(--type-base);
  --track-tight: 0.02em;
  --track-normal: 0.06em;
  --track-wide: 0.1em;
  --track-wider: 0.14em;
  --track-display: 0.08em;
  --track-label: var(--track-wide);
  --track-kicker: var(--track-wider);
  --track-title: var(--track-wider);
  --line-none: 1;
  --line-tight: 1.2;
  --line-snug: 1.35;
  --line-body: 1.5;
  --line-relaxed: 1.6;
  --text-primary: #e8f6ff;
  --text-display: #a5f3fc;
  --text-secondary: rgba(224, 247, 255, 0.88);
  --text-muted: rgba(200, 230, 248, 0.78);
  --panel-blur: blur(18px) saturate(1.55);
  line-height: var(--line-body);
}

.container {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  padding-left: var(--gap-component);
  padding-right: var(--gap-component);
  box-sizing: border-box;
}

.dashboard-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, 0.68fr);
  gap: var(--gap-element);
  align-items: start;
}

.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-element);
  min-width: 0;
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gap-element);
  min-width: 0;
  position: sticky;
  top: var(--gap-component);
}

.glass {
  position: relative;
  background: var(--surface-panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.55);
  border-radius: var(--radius-panel);
  box-shadow:
    0 12px 42px rgba(0, 229, 255, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(0, 229, 255, 0.1),
    

    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28);
  border-color: var(--border-default);
}

.glass::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(220, 242, 255, 0.52);
  border-style: solid;
  opacity: 0.65;
  pointer-events: none;
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
  box-shadow: -2px -2px 8px var(--hud-glow-soft);
}

.glass::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(220, 242, 255, 0.52);
  border-style: solid;
  opacity: 0.65;
  pointer-events: none;
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
  box-shadow: 2px 2px 8px var(--hud-glow-soft);
}

.header-card {
  margin-top: var(--rhythm-2) !important;
  margin-bottom: var(--gap-component);
  padding: var(--pad-panel) var(--gap-component) var(--gap-element);
  display: flex;
  align-items: stretch;
  gap: var(--gap-element);
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--radius-panel);
}

.header-card .header-widgets {
  display: flex;
  align-items: stretch;
  gap: var(--gap-element);
  flex: 1 1 auto;
  min-width: 0;
}

.header-card .header-weather-group {
  display: flex;
  align-items: stretch;
  gap: var(--gap-tight);
  min-width: 0;
}

.header-card .hc-title {
  flex: 0 0 auto;
  min-width: 0;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header-card .hc-metric {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.header-card .hc-forecast {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: var(--header-forecast-min);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  overflow: hidden;
}

.header-card .hc-time {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  margin-left: auto;
}

.header-card .header-weather-group .hc-forecast, .new-task-meta-bar .tag-picker-track, .controls-row > .btn-clear, .controls-row > .btn-add, .controls-row > button[id$="Btn"] {
  flex: 1 1 auto;
  min-width: 0;
}

.header-card .hc-title h1 {
  font-size: var(--type-4xl);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: var(--line-tight);
  color: var(--hud-cyan);
  text-shadow: 0 0 18px var(--hud-glow-soft), 0 0 32px rgba(0, 229, 255, 0.18);
}

.header-card .hc-title .header-kicker {
  font-size: 0.53125rem;
}

.header-widgets .hc-title + .hc-metric, .header-card .header-widgets + .hc-time {
  border-left: 1px solid var(--header-divider);
  padding-left: var(--space-3);
}

.header-widgets .hc-metric + .header-weather-group {
  border-left: 1px solid var(--header-divider);
  padding-left: var(--gap-tight);
}

.header-weather-group .hc-metric + .hc-forecast {
  border-left: none;
  padding-left: 0;
}

.header-card h1 {
  font-size: var(--type-4xl);
  letter-spacing: var(--track-display);
  line-height: var(--line-tight);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--hud-cyan);
  text-shadow: 0 0 18px var(--hud-glow-soft), 0 0 32px rgba(0, 229, 255, 0.18);
}

.header-card .header-kicker {
  font-size: 0.5rem;
  margin-bottom: 1px;
  letter-spacing: 0.1em;
}

h1 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--hud-cyan);
  text-shadow: 0 0 14px var(--hud-glow-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.header-kicker {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: var(--type-kicker);
  font-weight: 400;
  letter-spacing: var(--track-kicker);
  margin-bottom: 2px;
  text-transform: uppercase;
  line-height: var(--line-tight);
}

.sync-dot {
  width: var(--icon-dot);
  height: var(--icon-dot);
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
  flex-shrink: 0;
  margin-left: var(--gap-micro);
  align-self: center;
}

.sync-dot.loading {
  background: var(--warn);
  box-shadow: 0 0 6px var(--warn);
  animation: syncPulse 1s ease-in-out infinite;
}

.sync-dot.error {
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
}

.clock-time {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--hud-cyan);
  line-height: 1.1;
}

.clock-date-sm {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.w-temp {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--hud-cyan);
}

.w-cond-sm {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.w-forecast {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: thin;
}

.w-forecast::-webkit-scrollbar {
  height: 3px;
}

.w-forecast::-webkit-scrollbar-thumb, .calendar-strip::-webkit-scrollbar-thumb {
  background: var(--accent);
}

.w-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 4px 6px;
  font-size: 0.5625rem;
  background: rgba(0, 48, 80, 0.45);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.w-day-name {
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.w-day-icon {
  font-size: 0.875rem;
  line-height: 1;
}

.w-day-hi {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--hud-cyan);
}

.w-day-lo {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--muted);
}

.btc-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--hud-cyan);
}

.btc-change {
  font-size: 0.7rem;
}

.btc-change.btc-up, .header-card .btc-change.btc-up {
  color: var(--color-success);
}

.btc-change.btc-down, .header-card .btc-change.btc-down {
  color: var(--color-danger);
}

.clock-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.btc-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.header-card .btc-price, .header-card .w-temp {
  font-size: var(--type-xl);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
  letter-spacing: var(--track-tight);
  line-height: var(--line-none);
}

.header-card .btc-change {
  font-size: var(--type-sm);
  letter-spacing: var(--track-tight);
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: var(--line-tight);
  color: var(--text-muted);
}

.header-card .btc-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-wrap: wrap;
}

.header-card .w-cond-sm {
  font-size: var(--type-sm);
  color: var(--text-muted);
  letter-spacing: var(--track-tight);
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: var(--line-tight);
}

.header-card .clock-time {
  font-size: var(--type-xl);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  line-height: var(--line-none);
}

.header-card .clock-date-sm {
  font-size: var(--type-sm);
  color: var(--text-muted);
  letter-spacing: var(--track-tight);
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: var(--line-tight);
}

.header-card .clock-value {
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
}

.header-card .sync-dot {
  width: var(--icon-dot);
  height: var(--icon-dot);
  margin-left: var(--gap-micro);
  align-self: center;
  flex-shrink: 0;
}

.header-card .w-forecast {
  display: flex;
  align-items: stretch;
  gap: var(--gap-tight);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
  margin-top: var(--gap-micro);
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gap-tight);
  padding-bottom: var(--space-1);
}

.header-card .w-forecast::-webkit-scrollbar, .task-list--cards .task-card .task-meta::-webkit-scrollbar, .task-panel__toolbar.filter-bar--v2::before, .task-panel__toolbar.filter-bar--v2::after {
  display: none;
}

.header-card .w-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  padding: var(--pad-inset-sm);
  font-size: 0.8125rem;
  line-height: 1;
  background: var(--surface-elevated);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: var(--radius-chip);
  flex-shrink: 0;
  text-align: center;
  border-color: var(--border-default);
  scroll-snap-align: start;
}

.header-card .w-day-name {
  font-size: var(--type-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 400;
}

.header-card .w-day-icon {
  font-size: var(--icon-symbol-lg);
  line-height: var(--line-none);
  margin: var(--gap-micro) 0;
  display: block;
}

.header-card .w-day-hi {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 600;
  color: var(--text-display);
}

.header-card .w-day-lo {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  color: var(--text-muted);
  font-weight: 400;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  align-items: stretch;
}

.stat-card {
  padding: var(--gap-component) var(--gap-component);
  min-height: 92px;
  transition: transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.22s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.18s ease;
  border-radius: var(--radius-panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-label {
  font-family: var(--font-display);
  color: var(--text-secondary);
  font-size: var(--type-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: var(--line-tight);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: var(--type-2xl);
  font-weight: 600;
  line-height: var(--line-none);
  margin-top: var(--space-2);
  color: var(--text-display);
  text-shadow: 0 0 16px var(--accent-glow);
}

.stat-note {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--type-caption);
  margin-top: var(--gap-element);
  letter-spacing: var(--track-tight);
  font-weight: 400;
  line-height: var(--line-snug);
}

.header-card .hc-metric .stat-value, .header-card .hc-forecast .stat-value, .header-card .hc-metric .stat-label {
  text-align: center;
}

.header-card .stat-value {
  font-size: var(--type-xl);
  margin-top: var(--space-1);
  font-weight: 600;
  line-height: var(--line-none);
}

.header-card .hc-forecast .stat-label {
  text-align: center;
  margin-bottom: var(--gap-micro);
}

.header-card .stat-label {
  font-size: var(--type-sm);
  margin-bottom: var(--space-1);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: var(--track-wider);
  line-height: var(--line-tight);
  color: var(--text-secondary);
}

.mini-task-title {
  color: var(--text-primary);
  font-size: var(--type-task-secondary);
  font-weight: 400;
  line-height: var(--line-relaxed);
  word-break: break-word;
  font-family: var(--font-body);
}

.mini-task .mini-task-meta {
  color: #e8f6ff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mini-task {
  background: linear-gradient(135deg, rgba(0, 56, 96, 0.2) 0%, var(--surface-base) 100%);
  padding: var(--gap-tight) var(--gap-element);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-left: 2px solid var(--hud-cyan);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  box-shadow:
    0 0 14px rgba(0, 229, 255, 0.07),
    inset 0 1px 0 rgba(0, 229, 255, 0.14);
}

.task-meta {
  color: var(--text-secondary);
  display: flex;
  gap: var(--gap-micro);
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

.deadline-label {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.task-tag {
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.16s ease, 
              border-color 0.16s ease, 
              opacity 0.16s ease;
}

.new-task-label {
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: var(--line-snug);
}

.schedule-panel-title {
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0;
  line-height: var(--line-snug);
}

.schedule-sublabel {
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--type-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  margin-bottom: 6px;
  display: block;
  line-height: var(--line-tight);
}

.new-task-input {
  background: var(--control-bg);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--control-text);
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: var(--gap-tight) var(--control-pad-x);
  border: 1px solid var(--control-border);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.new-task-select {
  background: var(--control-bg);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--control-text);
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: var(--gap-tight) var(--control-pad-x);
  border: 1px solid var(--control-border);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  --select-chevron:
    linear-gradient(45deg, transparent 50%, var(--accent-primary) 50%),
    linear-gradient(135deg, var(--accent-primary) 50%, transparent 50%);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: var(--select-chevron);
  background-position:
    calc(100% - 18px) calc(50% + 2px),
    calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.panel-title-row {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-element);
  align-items: center;
  margin-bottom: var(--gap-element);
}

.panel-title-row .section-title, .schedule-panel-body, .new-task-step__head--inline, .task-panel__footer.controls-row, .dashboard-sidebar > .sync-status:not(.show) {
  margin-bottom: 0;
}

.panel-count {
  font-family: var(--font-mono);
  color: var(--text-display);
  font-size: var(--type-caption);
  font-weight: 400;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-chip);
  box-shadow: 0 0 8px var(--hud-glow-soft);
  letter-spacing: var(--track-tight);
  line-height: var(--line-tight);
}

.mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
}

.mini-list--clamp2 {
  --mini-clamp-gap: var(--gap-tight);
  min-height: 0;
  max-height: calc(var(--mini-clamp-row) * 2 + var(--mini-clamp-gap));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hud-cyan) transparent;
  padding-right: var(--space-1);
}

#todayList.mini-list--clamp2, #overdueList.mini-list--clamp2, #upcomingList.mini-list--clamp2 {
  --mini-clamp-row: 84px;
  --mini-clamp-gap: var(--gap-tight);
  min-height: 0;
}

#recentCompletedList.mini-list--clamp2 {
  --mini-clamp-row: 88px;
}

#recentCompletedList .mini-task--completed-history {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  justify-content: flex-start;
}

#recentCompletedList.mini-list--clamp2 .mini-task--completed-history .mini-task-title {
  -webkit-line-clamp: 1;
}

#recentCompletedList .mini-task--completed-history .mini-task-meta {
  margin-top: 0;
  flex: 0 0 auto;
}

#recentCompletedList .mini-task-meta .completed-at {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: rgba(0, 255, 170, 0.85);
  white-space: nowrap;
}

.mini-list--clamp2 .mini-task {
  flex: 0 0 var(--mini-clamp-row);
  max-height: var(--mini-clamp-row);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}

.mini-list--clamp2 .mini-task-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.mini-list--clamp2::-webkit-scrollbar {
  width: 4px;
}

.mini-list--clamp2::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.45);
  border-radius: 2px;
}

.mini-task-meta {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--type-caption);
  margin-top: var(--gap-tight);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: var(--line-tight);
}

.mini-empty {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--type-caption);
  padding: var(--rhythm-2) 0;
}

.progress-wrap, .dashboard-sidebar > .sync-status {
  margin-bottom: var(--gap-tight);
}

.progress-label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-muted);
  margin-bottom: var(--gap-tight);
  display: flex;
  justify-content: space-between;
  letter-spacing: var(--track-normal);
  text-transform: uppercase;
  font-weight: 400;
  line-height: var(--line-tight);
}

.progress-bar-track {
  height: 8px;
  background: rgba(0, 40, 70, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 0;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--hud-cyan));
  border-radius: 0;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 16px var(--hud-glow);
  width: var(--progress-pct, 0%);
}

.calendar-strip {
  display: flex;
  gap: var(--gap-tight);
  overflow-x: hidden;
  padding: 14px;
  scrollbar-width: thin;
}

.add-form .calendar-strip--inline {
  padding: 0;
  margin-top: 0;
}

.calendar-strip::-webkit-scrollbar, .calendar-strip--scroll::-webkit-scrollbar {
  height: 4px;
}

.day {
  min-width: 56px;
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  border: 1px solid rgba(0, 212, 255, 0.15);
  background: var(--glass);
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), 
              border-color 0.16s ease, 
              background 0.16s ease, 
              color 0.16s ease,
              box-shadow 0.16s ease;
}

.day.today {
  background: linear-gradient(135deg, rgba(0, 136, 255, 0.35), rgba(0, 212, 255, 0.25));
  color: var(--hud-cyan);
  font-weight: 700;
  border-color: var(--hud-cyan);
  box-shadow: 0 0 16px var(--hud-glow-soft), inset 0 0 12px rgba(0, 212, 255, 0.1);
}

.day:hover:not(.today) {
  border-color: var(--hud-cyan);
  color: var(--text);
  transform: translateY(-1px);
}

.day.selected:not(.today) {
  border-color: var(--hud-cyan);
  background: rgba(0, 136, 255, 0.15);
  color: var(--hud-cyan);
  font-weight: 700;
  transform: scale(1.01);
}

.day-num {
  font-size: 1.125rem;
  font-weight: 700;
}

.add-form {
  padding: 16px;
}

.add-form.add-form--v2 {
  padding: 12px 14px;
}

.add-form.add-form--polished {
  padding: 14px 16px 14px;
}

.add-form--v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-form--polished {
  gap: 0;
}

.new-task-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.new-task-form > .new-task-section--schedule:first-child, .new-task-form > .new-task-section--schedule:first-child .schedule-panel, .task-panel .active-tag-filter, .inline-handoff-completed .section-card + .section-card, .task-panel__list .task-card + .task-card, .task-panel__list .task-item.task-card + .task-item.task-card {
  margin-top: 0;
}

.new-task-section--task {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0, 56, 96, 0.24) 0%, var(--surface-base) 100%);
  border-left: 2px solid rgba(0, 229, 255, 0.55);
  border-left-color: var(--border-strong);
}

.new-task-label--sm {
  font-size: 0.625rem;
  color: var(--muted);
  margin: 0;
}

.new-task-input-row, .schedule-datetime {
  display: flex;
  gap: var(--gap-tight);
  align-items: stretch;
}

.new-task-input-row .new-task-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 0.9375rem;
  border-radius: var(--radius);
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.new-task-input-row .new-task-input:focus {
  border-color: var(--hud-cyan);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.25), 0 0 16px var(--hud-glow-soft);
  outline: none;
}

.new-task-input-row .new-task-input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.add-form--polished .btn-add-task {
  padding: 12px 20px;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  align-self: stretch;
  white-space: nowrap;
}

.tag-picker-track {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--gap-micro);
  flex: 1;
  min-width: 180px;
  box-sizing: border-box;
  padding: var(--space-1);
  background: var(--track-bg);
  border: 1px solid var(--track-border);
  border-radius: var(--radius-chip);
  box-shadow: var(--track-inset-highlight);
}

.tag-picker-track .tag-picker {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 4px;
  gap: var(--gap-tight);
}

/* PR-401: grouped Work/Personal tag dropdowns replacing flat pills in New Task intake. */
.tag-picker-track .tag-group-picker {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-element);
  padding: 2px 4px;
}

.tag-group-field {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
}

.tag-group-field__label {
  font-family: var(--font-display);
  font-size: var(--type-label);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-weight: 700;
}

.new-task-select--tag-group {
  min-width: 130px;
}

.new-task-form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--gap-tight) var(--gap-component) var(--gap-element);
  margin: 0;
  border: none;
  background: transparent;
  max-width: 100%;
}

.new-task-form-footer .btn-add-task {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: var(--gap-tight) var(--gap-element);
  font-size: 0.6875rem;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
}

.schedule-panel {
  background: rgba(0, 20, 40, 0.45);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: var(--radius-panel);
  padding: 14px 16px 16px;
  box-shadow: inset 0 0 24px rgba(0, 136, 255, 0.04);
}

.schedule-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

.schedule-panel-hint {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-muted);
  letter-spacing: var(--track-normal);
  font-weight: 400;
  line-height: var(--line-body);
}

.schedule-sublabel--aligned {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
  margin: 0 0 8px;
}

.schedule-sublabel--quick, .schedule-sublabel--datetime {
  color: var(--hud-cyan);
  text-shadow: 0 0 10px var(--hud-glow-soft);
}

.schedule-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(200px, 1fr);
  column-gap: var(--gap-component);
  row-gap: var(--gap-tight);
  align-items: start;
  width: 100%;
}

.schedule-panel-grid .schedule-sublabel--quick {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.schedule-panel-grid .schedule-sublabel--datetime {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}

.schedule-panel-grid .add-form-col--calendar {
  min-width: 0;
  width: 100%;
  grid-column: 1;
  grid-row: 2;
}

.schedule-panel-grid .add-form-col--schedule {
  min-width: 0;
  grid-column: 2;
  grid-row: 2;
}

.add-form--polished .schedule-datetime {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.schedule-datetime input[type="date"], .schedule-datetime input[type="time"] {
  padding: 10px 12px;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  flex: 1 1 0;
  min-width: 0;
}

.add-form--polished .schedule-datetime input[type="date"] {
  flex: 1.35 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 13px 12px;
  font-size: var(--type-md);
  font-family: var(--font-mono);
  font-weight: 400;
}

.add-form--polished .schedule-datetime input[type="time"] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 13px 12px;
  font-size: var(--type-md);
  font-family: var(--font-mono);
  font-weight: 400;
}

.schedule-datetime input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--control-focus-ring);
  transition: border-color 0.2s ease, box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.new-task-meta-bar {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 14px;
  margin-top: 2px;
  border-top: 1px solid rgba(0, 212, 255, 0.12);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.new-task-meta-bar .add-priority-group--inline {
  flex: 0 0 auto;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
}

.new-task-meta-bar .add-priority-group--inline select {
  width: auto;
  min-width: 118px;
  align-self: center;
}

.new-task-meta-bar .new-task-form-footer {
  flex: 0 0 auto;
  margin-left: auto;
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
}

.new-task-meta-bar .new-task-tags {
  flex: 1;
  min-width: 0;
  align-items: center;
}

.new-task-meta-bar .tag-picker-label {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-right: 4px;
}

.add-form--polished .new-task-select {
  padding: 8px 12px;
  font-size: 0.8125rem;
  min-width: 128px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.add-form--polished .new-task-select:focus {
  border-color: var(--hud-cyan);
  box-shadow: 0 0 10px var(--hud-glow-soft);
}

.add-form--polished .calendar-strip--compact .day--compact {
  border-radius: var(--radius-chip);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  min-height: 56px;
  padding: var(--pad-inset-sm);
  gap: 2px;
  background: rgba(0, 48, 80, 0.55);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-color: var(--border-default);
}

.add-form--polished .calendar-strip--compact .day--compact:hover:not(.today):not(.selected) {
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: none;
}

.add-form--polished .calendar-strip--compact .day--compact:active, .btn-add:active, .filter-pill:active, .btn-clear:active, .btn-share-stream:active, .btn-add-task:active, .filter-pill.active:active, .task-list--cards .task-card .btn-edit:active, .task-list--cards .task-card .btn-delete:active, .filter-bar--v2 .filter-pill:active, .filter-bar--v2 .filter-pill.active:active, .btn-edit:active, .btn-delete:active, .btn-save-edit:active, .btn-cancel-edit:active, .add-form .calendar-strip .day:active, .share-stream-item:active {
  transform: scale(0.98);
}

.add-form--polished .calendar-strip--compact .day--compact.selected {
  border-color: var(--border-focus);
  background: linear-gradient(145deg, rgba(0, 136, 255, 0.45), rgba(0, 212, 255, 0.28));
  color: var(--hud-cyan);
  font-weight: 700;
  box-shadow: 0 0 12px var(--accent-glow), inset 0 0 8px var(--accent-muted);
}

.add-form--polished .calendar-strip--compact .day--compact.today.selected {
  box-shadow: 0 0 20px var(--hud-glow), inset 0 0 14px rgba(0, 212, 255, 0.15);
}

.add-form--polished .tag-pill {
  opacity: 0.65;
  transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.add-form--polished .tag-pill:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.add-form--polished .tag-pill.selected {
  opacity: 1;
  box-shadow: 0 0 12px var(--hud-glow-soft);
}

.add-form--polished .calendar-strip--scroll {
  --quick-pick-day: 44px;
  --quick-pick-gap: 4px;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: var(--quick-pick-gap, 4px);
  overflow-x: auto;
  overflow-y: hidden;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  scrollbar-width: thin;
}

.add-form--polished .calendar-strip--compact .day--compact .day-label {
  font-size: var(--type-2xs);
  font-family: var(--font-mono);
  letter-spacing: var(--track-wide);
}

.add-form--polished .calendar-strip--compact .day--compact .day-num {
  font-size: var(--type-lg);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--line-none);
}

.add-form-col--schedule {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  flex-shrink: 0;
}

.add-form-col--calendar {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  min-width: 0;
}

.add-datetime-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.add-datetime-inline input[type="date"], .add-datetime-inline input[type="time"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: 136px;
}

.add-priority-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.add-priority-group--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.add-priority-group select {
  align-self: flex-start;
  min-width: 160px;
}

.add-priority-group--inline select {
  min-width: 118px;
  align-self: center;
}

.add-form--v2 input[type="text"], .add-form--v2 input[type="date"], .add-form--v2 input[type="time"], .add-form--v2 select {
  padding: 8px 11px;
  font-size: 0.875rem;
}

.add-form--v2 .btn-add {
  padding: 8px 16px;
  font-size: 0.6875rem;
}

.calendar-strip--compact {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}

.calendar-strip--scroll {
  --quick-pick-day: 44px;
  --quick-pick-gap: 4px;
  --quick-pick-visible: 5;
  width: 100% !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 4px;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: var(--quick-pick-gap, 4px);
  min-width: 0;
}

.calendar-strip--scroll::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 0;
}

.calendar-strip--compact .day--compact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: var(--quick-pick-day, 84px);
  min-width: var(--quick-pick-day, 84px);
  min-height: 72px;
  padding: 10px 8px;
  text-align: center;
  flex-shrink: 0;
}

.calendar-strip--compact .day--compact .day-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.calendar-strip--compact .day--compact .day-num {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
}

input[type="text"] {
  font-family: var(--font-body);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  border-radius: var(--radius-control);
  padding: var(--gap-tight) var(--control-pad-x);
  font-size: var(--type-md);
  font-weight: 400;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  flex: 1;
  line-height: var(--line-body);
  min-height: var(--control-height);
}

input[type="date"], input[type="time"] {
  font-family: var(--font-body);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  border-radius: var(--radius-control);
  padding: var(--gap-tight) var(--control-pad-x);
  font-size: var(--type-md);
  font-weight: 400;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  flex: 0 0 auto;
  line-height: var(--line-body);
  min-height: var(--control-height);
}

select {
  font-family: var(--font-body);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  border-radius: var(--radius-control);
  padding: var(--gap-tight) var(--control-pad-x);
  font-size: var(--type-md);
  font-weight: 400;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  flex: 0 0 auto;
  cursor: pointer;
  line-height: var(--line-body);
  min-height: var(--control-height);
}

input[type="text"]:focus, input[type="date"]:focus, input[type="time"]:focus, select:focus, .search-input:focus, .task-edit-text:focus, .task-edit-row input:focus, .task-edit-row select:focus, .task-panel .search-input:focus, .task-panel .search-input:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--control-focus-ring);
  outline: none;
}

input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.72) sepia(1) saturate(4) hue-rotate(160deg);
  cursor: pointer;
  opacity: 0.85;
}

.btn-add {
  font-family: var(--font-display);
  padding: var(--gap-tight) var(--space-4);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  box-shadow: 0 0 14px var(--accent-glow);
  line-height: var(--line-tight);
  min-height: var(--control-height);
}

.btn-add:hover {
  box-shadow: var(--btn-primary-hover-shadow);
  border-color: var(--border-focus);
  transform: none;
}

.tag-picker, .task-edit-row {
  display: flex;
  gap: var(--gap-tight);
  flex-wrap: wrap;
  align-items: center;
}

.tag-picker-label {
  font-family: var(--font-display);
  font-size: var(--type-label);
  color: var(--muted);
  margin-right: 2px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-weight: 700;
}

.tag-pill {
  padding: 4px 12px;
  border-radius: var(--radius-chip);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: 0.78;
  transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.16s ease, 
              border-color 0.16s ease, 
              opacity 0.16s ease;
  user-select: none;
  margin: 0;
  font-family: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.tag-pill.selected {
  opacity: 1;
  border-color: currentColor;
  box-shadow: 0 0 10px var(--hud-glow-soft);
}

@media (hover: none), (pointer: coarse) {
.tag-pill:hover {
  transform: none;
}

.add-form--polished .tag-pill:hover {
  opacity: inherit;
  transform: none;
}

.tag-picker-track .tag-pill:hover {
  opacity: inherit;
  border-color: inherit;
  background: inherit;
}

.tag-pill:active {
  transform: scale(0.97);
}
}

.filter-bar {
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}

.search-wrap svg {
  position: absolute;
  left: var(--gap-element);
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-primary);
  opacity: 0.7;
  pointer-events: none;
  width: var(--icon-symbol-sm);
  height: var(--icon-symbol-sm);
  flex-shrink: 0;
}

.search-input {
  width: 100%;
  padding-left: calc(var(--control-pad-x) + 20px) !important;
  font-family: var(--font-body);
  font-size: var(--type-md);
  font-weight: 400;
  line-height: var(--line-body);
  color: var(--control-text);
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: var(--gap-tight) var(--control-pad-x);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-pill {
  font-family: var(--font-display);
  padding: var(--pad-inset-sm);
  border-radius: var(--radius-chip);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--btn-ghost-border);
  background: var(--btn-ghost-bg);
  color: var(--text-secondary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-micro);
  border-color: rgba(255, 255, 255, 0.1);
  line-height: var(--line-tight);
  justify-content: center;
  min-height: var(--control-height);
}

.filter-pill:hover {
  border-color: var(--hud-cyan);
  color: var(--hud-cyan);
  transform: translateY(-1px);
}

.filter-pill.active {
  background: var(--btn-primary-bg);
  color: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: 0 0 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: none;
}

#taskList {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-item {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(0, 40, 72, 0.25) 0%, rgba(4, 14, 28, 0.5) 100%);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-left: 2px solid var(--hud-cyan);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Default arrow — grab only on .drag-handle so chips can use help/pointer. */
  cursor: default;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.18s ease,
              opacity 0.2s ease;
  animation: slideIn 0.25s ease;
  position: relative;
  box-shadow: 0 0 12px rgba(0, 136, 255, 0.06);
}

.task-item.dragging,
.task-item.dragging:active {
  cursor: grabbing;
}

.task-item.dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

.task-item.drag-over {
  box-shadow: 0 0 0 1px var(--hud-cyan), 0 0 20px var(--hud-glow-soft);
  transform: translateY(-2px);
}

.task-item.completed-flash {
  animation: completedPulse 0.4s ease;
}

.drag-handle {
  font-family: var(--font-mono);
  color: var(--hud-cyan);
  opacity: 0.35;
  font-size: var(--icon-symbol-sm);
  margin-top: var(--gap-micro);
  cursor: grab;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  user-select: none;
  touch-action: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-symbol-sm);
  line-height: var(--line-none);
  align-self: flex-start;
}

.task-check {
  width: var(--icon-symbol-md);
  height: var(--icon-symbol-md);
  border-radius: 2px;
  border: 2px solid var(--card-border);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: var(--gap-micro);
  background: transparent;
  transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.task-check:checked {
  background: linear-gradient(135deg, var(--accent2), var(--hud-cyan));
  border-color: var(--hud-cyan);
  box-shadow: 0 0 10px var(--hud-glow-soft);
}

.task-check:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid var(--bg-deep);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.task-body {
  flex: 1;
  min-width: 0;
}

.task-text {
  font-size: 0.9375rem;
  transition: opacity 0.2s, color 0.15s;
  word-break: break-word;
  cursor: default;
  user-select: text;
}

.task-text:hover:not(.done) {
  color: inherit;
}

.task-text.done {
  text-decoration: line-through;
  opacity: 0.4;
  color: var(--muted);
  cursor: default;
}

.task-text.done:hover {
  opacity: 0.55;
}

.priority-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  padding: 2px 9px;
  border-radius: var(--radius-chip);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  gap: var(--gap-micro);
}

.priority-badge.high {
  background: rgba(255, 61, 90, 0.12);
  color: var(--danger);
}

.priority-badge.medium {
  background: rgba(255, 170, 34, 0.12);
  color: var(--warn);
}

.priority-badge.low {
  background: rgba(0, 255, 170, 0.1);
  color: var(--ok);
}

.deadline-label.overdue {
  color: var(--danger);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 61, 90, 0.4);
}

.task-tags {
  display: flex;
  gap: var(--gap-micro);
  flex-wrap: wrap;
  margin-top: var(--gap-tight);
}

.task-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 1px;
}

.btn-edit {
  font-family: var(--font-mono);
  background: var(--btn-ghost-bg);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--gap-element);
  font-size: var(--icon-glyph);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  border: 1px solid var(--border-default);
  color: var(--text-display);
  min-height: 32px;
  line-height: var(--line-none);
}

.btn-delete {
  font-family: var(--font-mono);
  background: var(--btn-ghost-bg);
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--gap-element);
  font-size: var(--icon-glyph);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  border: 1px solid rgba(255, 77, 106, 0.4);
  color: var(--color-danger);
  min-height: 32px;
  line-height: var(--line-none);
}

.btn-edit:hover {
  background: var(--accent-muted);
  box-shadow: 0 0 10px var(--accent-glow);
  border-color: var(--border-strong);
  transform: none;
}

.btn-delete:hover {
  background: var(--color-danger-subtle);
  box-shadow: 0 0 10px rgba(255, 77, 106, 0.18);
  transform: none;
}

.task-item.is-editing {
  cursor: default;
  border-color: var(--hud-cyan);
  box-shadow: 0 0 20px var(--hud-glow-soft), inset 0 0 24px rgba(0, 212, 255, 0.06);
}

.task-edit-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  width: 100%;
}

.task-edit-text {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--gap-tight) var(--control-pad-x);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  border-radius: var(--radius-control);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.task-edit-row input[type="date"], .task-edit-row input[type="time"] {
  flex: 0 0 auto;
}

.task-edit-row select {
  flex: 0 0 auto;
  min-height: var(--control-height);
  padding: var(--gap-tight) var(--control-pad-x);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  border-radius: var(--radius-control);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.task-edit-tags {
  margin-top: 2px;
}

.task-edit-actions {
  display: flex;
  gap: var(--gap-tight);
  flex-wrap: wrap;
  margin-top: var(--gap-tight);
}

.btn-save-edit {
  padding: var(--space-1) var(--gap-element);
  font-size: var(--type-sm);
  border-radius: var(--radius-control);
  min-height: 32px;
  font-family: var(--font-mono);
  cursor: pointer;
  background: var(--btn-ghost-bg);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  border: 1px solid var(--border-default);
  color: var(--text-display);
}

.btn-cancel-edit {
  padding: var(--space-1) var(--gap-element);
  border-radius: var(--radius-control);
  min-height: 32px;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  cursor: pointer;
  background: var(--btn-ghost-bg);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.controls-row {
  display: flex;
  gap: var(--gap-tight);
  margin-bottom: var(--gap-component);
  flex-wrap: wrap;
  margin-top: var(--gap-tight);
  align-items: stretch;
}

.btn-clear {
  font-family: var(--font-display);
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  padding: var(--gap-tight) var(--control-pad-x);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  line-height: var(--line-tight);
  min-height: var(--control-height);
}

.btn-clear:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  box-shadow: 0 0 12px rgba(255, 77, 106, 0.15);
  transform: none;
}

#completeAllBtn:hover {
  border-color: var(--color-success);
  color: var(--color-success);
  box-shadow: 0 0 12px rgba(0, 232, 150, 0.15);
  transform: none;
}

.empty-state {
  font-family: var(--font-mono);
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-5) var(--gap-component);
  font-size: var(--type-base);
  letter-spacing: var(--track-normal);
  font-weight: 400;
}

.sync-status {
  display: none;
  margin-bottom: 0;
  padding: var(--gap-element) var(--space-3);
  border-radius: var(--radius-panel);
  border: 1px solid var(--card-border);
  background: var(--surface-panel);
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--type-caption);
  line-height: var(--line-body);
  margin-top: var(--gap-element);
  border-color: var(--border-default);
}

.sync-status.show {
  display: block;
}

.sync-status.error {
  border-color: rgba(255, 77, 106, 0.45);
  color: var(--color-danger);
  background: var(--color-danger-subtle);
}

.sync-status.ok {
  border-color: rgba(0, 232, 150, 0.4);
  color: var(--color-success);
  background: var(--color-success-subtle);
}

.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  contain: strict;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 0;
  animation: confettiFall 1s ease forwards;
}

.section-card {
  padding: var(--gap-component);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: var(--radius-panel);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--type-title-sm);
  font-weight: 700;
  margin-bottom: var(--rhythm-2);
  color: var(--text-display);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  text-shadow: 0 0 12px var(--accent-glow);
  line-height: var(--line-tight);
}

.share-stream-card {
  padding: var(--gap-component);
  overflow: visible;
  border-radius: var(--radius-panel);
}

.share-stream-card .section-title, .dashboard-sidebar > .sync-status.show {
  margin-bottom: var(--gap-element);
}

.share-stream-wrap {
  position: relative;
}

.inline-handoff-completed {
  position: relative;
  gap: var(--gap-element);
  display: flex;
  flex-direction: column;
}

.share-stream-card:has(.btn-share-stream.is-open) {
  z-index: 10;
}

.btn-share-stream {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-micro);
  font-family: var(--font-display);
  padding: var(--pad-inset);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  box-shadow: 0 0 14px var(--accent-glow);
  line-height: var(--line-tight);
  min-height: var(--control-height);
  box-sizing: border-box;
}

.btn-share-stream:hover, .btn-share-stream.is-open, .btn-add-task:hover {
  border-color: var(--border-focus);
  box-shadow: var(--btn-primary-hover-shadow);
  transform: none;
}

.share-stream-chevron {
  font-size: var(--type-xs);
  line-height: var(--line-none);
  transition: transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-symbol-sm);
  flex-shrink: 0;
}

.btn-share-stream.is-open .share-stream-chevron {
  transform: rotate(180deg);
}

.share-stream-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--gap-tight));
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--gap-tight);
  background: rgba(4, 14, 28, 0.96);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-chip);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 0 20px var(--hud-glow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.share-stream-item {
  font-family: var(--font-body);
  text-align: left;
  padding: var(--pad-inset);
  background: var(--btn-ghost-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  font-size: var(--type-base);
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  line-height: var(--line-body);
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  box-sizing: border-box;
}

.share-stream-item:hover {
  border-color: var(--border-default);
  background: var(--accent-muted);
  color: var(--text-primary);
  box-shadow: 0 0 10px var(--accent-glow);
  outline: none;
  transform: none;
}

.share-stream-item:focus-visible {
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 136, 255, 0.18);
  color: var(--hud-cyan);
  box-shadow: 0 0 12px var(--hud-glow-soft);
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.is-hidden {
  display: none !important;
}

.btn-add.is-loading {
  opacity: 0.7;
}

.active-tag-filter {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  margin-top: var(--gap-tight);
  gap: var(--gap-tight);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  padding: var(--gap-tight) 0 0;
}

.active-tag-filter__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-micro);
}

/* PR-88: count chips — multi-select filter (body) + sort arrow (default newest / ↓)
   Two locked rows: tags first, status always second (no wrap-mix of dip/on hold). */
.filter-status-counts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--type-base);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding: 2px 0 0;
}

.filter-status-counts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  width: 100%;
  min-width: 0;
}

.filter-status-counts__row--tags {
  order: 1;
}

/* Status options always second row — matches status dropdown set */
.filter-status-counts__row--status {
  order: 2;
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px solid rgba(0, 212, 255, 0.16);
}

.filter-status-counts .fhs-stat {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin: 0 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  white-space: nowrap;
  background: transparent;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-status-counts .fhs-stat.is-selected {
  border-color: rgba(0, 212, 255, 0.45);
  background: rgba(0, 136, 255, 0.14);
  box-shadow: 0 0 12px var(--hud-glow-soft, var(--accent-glow));
}

.filter-status-counts .fhs-stat__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 4px 2px 4px 6px;
  border: 0;
  border-radius: var(--radius-control) 0 0 var(--radius-control);
  background: transparent;
  color: var(--hud-cyan, var(--text-display));
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  text-shadow: 0 0 10px var(--hud-glow-soft);
  cursor: pointer;
}

.filter-status-counts .fhs-stat__arrow:hover {
  background: var(--accent-muted);
  color: var(--text-primary);
}

.filter-status-counts .fhs-stat__arrow:focus-visible,
.filter-status-counts .fhs-stat__filter:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  z-index: 1;
}

.filter-status-counts[data-sort="asc"] .fhs-stat__arrow {
  color: var(--text-display);
  text-shadow: none;
}

.filter-status-counts .fhs-stat__filter {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px 4px 4px;
  border: 0;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.filter-status-counts .fhs-stat__filter:hover {
  color: var(--text-primary);
}

.filter-status-counts .fhs-stat strong {
  color: var(--text-display);
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow:
    0 0 1px #000,
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 10px rgba(0, 0, 0, 0.45);
}

.filter-status-counts .fhs-stat__label {
  color: inherit;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.95em;
}

.filter-status-counts .fhs-stat__filter {
  text-transform: none;
}

.active-tag-filter__label {
  font-size: var(--type-md);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.active-tag-filter__name {
  font-size: var(--type-lg);
  font-weight: 800;
  text-shadow: 0 0 14px var(--hud-glow-soft);
}

.active-tag-filter__name[data-tag="all-directives"] {
  color: var(--hud-cyan);
}

.active-tag-filter__count {
  font-size: 1.35rem;
  font-weight: 500;
  color: #f2f7ff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow:
    0 0 1px #000,
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 212, 255, 0.35);
}

.filter-handoff-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--type-base);
  color: var(--text-muted);
  margin-left: 0;
  gap: 0;
  font-variant-numeric: tabular-nums;
}

.filter-handoff-summary > * + *::before {
  content: "\00b7";
  margin: 0 8px;
}

.filter-handoff-summary__title {
  color: var(--text-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 14px var(--hud-glow-soft);
}

.active-tag-filter__clear {
  background: var(--btn-ghost-bg);
  border: 1px solid var(--border-subtle);
  color: var(--text-display);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-left: var(--gap-tight);
  min-height: 28px;
  padding: var(--space-1) var(--gap-tight);
  border-radius: var(--radius-control);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tag-pill[data-tag="work"], .task-tag[data-tag="work"] {
  color: var(--tag-work);
  background: rgba(99,102,241,0.15);
}

.active-tag-filter__name[data-tag="work"] {
  color: #6366f1;
}

.tag-pill[data-tag="personal"], .task-tag[data-tag="personal"] {
  color: var(--tag-personal);
  background: rgba(236,72,153,0.15);
}

.active-tag-filter__name[data-tag="personal"] {
  color: #ec4899;
}

.tag-pill[data-tag="shopping"], .task-tag[data-tag="shopping"] {
  color: var(--tag-shopping);
  background: rgba(245,158,11,0.15);
}

.active-tag-filter__name[data-tag="shopping"] {
  color: #f59e0b;
}

.tag-pill[data-tag="condo"], .task-tag[data-tag="condo"] {
  color: var(--tag-condo);
  background: rgba(0, 229, 255, 0.15);
}

.active-tag-filter__name[data-tag="condo"] {
  color: var(--hud-cyan);
}

.tag-pill[data-tag="automation"], .task-tag[data-tag="automation"] {
  color: var(--tag-automation);
  background: rgba(240, 192, 64, 0.15);
}

.active-tag-filter__name[data-tag="automation"] {
  color: var(--tag-automation);
}

.task-panel__list .task-item.task-card.task-card--automation {
  border-left: 3px solid var(--tag-automation);
  background:
    linear-gradient(135deg, rgba(64, 48, 8, 0.18) 0%, rgba(4, 14, 32, 0.32) 100%),
    linear-gradient(90deg, rgba(240, 192, 64, 0.07) 0%, transparent 40%);
}

.tag-pill[data-tag="smoke-test"], .task-tag[data-tag="smoke-test"] {
  color: var(--tag-smoke-test);
  background: rgba(74, 222, 128, 0.15);
}

.active-tag-filter__name[data-tag="smoke-test"] {
  color: var(--tag-smoke-test);
}

.task-panel__list .task-item.task-card.task-card--smoke-test {
  border-left: 3px solid var(--tag-smoke-test);
  background:
    linear-gradient(135deg, rgba(8, 48, 24, 0.22) 0%, rgba(4, 14, 32, 0.32) 100%),
    linear-gradient(90deg, rgba(74, 222, 128, 0.08) 0%, transparent 40%);
}

.tag-pill[data-tag="dip"], .task-tag[data-tag="dip"] {
  color: var(--tag-dip);
  background: rgba(192, 132, 252, 0.15);
}

.active-tag-filter__name[data-tag="dip"] {
  color: var(--tag-dip);
}

.task-status--dip {
  color: var(--tag-dip);
  border-color: rgba(192, 132, 252, 0.45);
  background: rgba(192, 132, 252, 0.12);
  cursor: pointer;
}

.task-status--dip:hover {
  background: rgba(192, 132, 252, 0.22);
}

.task-panel__list .task-item.task-card.task-card--dip:not(.task-card--automation):not(.task-card--smoke-test) {
  border-left: 3px solid var(--tag-dip);
  background:
    linear-gradient(135deg, rgba(48, 24, 64, 0.2) 0%, rgba(4, 14, 32, 0.32) 100%),
    linear-gradient(90deg, rgba(192, 132, 252, 0.07) 0%, transparent 40%);
}

.tag-pill[data-tag="ops"], .task-tag[data-tag="ops"] {
  color: var(--tag-ops);
  background: rgba(251, 146, 60, 0.15);
}

.active-tag-filter__name[data-tag="ops"] {
  color: var(--tag-ops);
}

.tag-pill[data-tag="needs-operator"], .task-tag[data-tag="needs-operator"] {
  color: var(--tag-needs-operator);
  background: rgba(248, 113, 113, 0.15);
}

.active-tag-filter__name[data-tag="needs-operator"] {
  color: var(--tag-needs-operator);
}

.tag-pill[data-tag="needs-login"], .task-tag[data-tag="needs-login"] {
  color: var(--tag-needs-login);
  background: rgba(234, 179, 8, 0.15);
}

.active-tag-filter__name[data-tag="needs-login"] {
  color: var(--tag-needs-login);
}

.tag-pill[data-tag="needs-config"], .task-tag[data-tag="needs-config"] {
  color: var(--tag-needs-config);
  background: rgba(45, 212, 191, 0.15);
}

.active-tag-filter__name[data-tag="needs-config"] {
  color: var(--tag-needs-config);
}

.tag-pill[data-tag="needs-secrets"], .task-tag[data-tag="needs-secrets"] {
  color: var(--tag-needs-secrets);
  background: rgba(163, 230, 53, 0.15);
}

.active-tag-filter__name[data-tag="needs-secrets"] {
  color: var(--tag-needs-secrets);
}

.tag-pill[data-tag="orchestrator-attention"], .task-tag[data-tag="orchestrator-attention"] {
  color: var(--tag-orchestrator-attention);
  background: rgba(244, 63, 94, 0.16);
}

.active-tag-filter__name[data-tag="orchestrator-attention"] {
  color: var(--tag-orchestrator-attention);
}

/* PR-401: Work-group tags (Todolist/MESK8/Lightwave), picked via the New Task Work dropdown. */
.tag-pill[data-tag="todolist"], .task-tag[data-tag="todolist"] {
  color: var(--tag-todolist);
  background: rgba(129, 140, 248, 0.15);
}

.active-tag-filter__name[data-tag="todolist"] {
  color: var(--tag-todolist);
}

.tag-pill[data-tag="mesk8"], .task-tag[data-tag="mesk8"] {
  color: var(--tag-mesk8);
  background: rgba(56, 189, 248, 0.15);
}

.active-tag-filter__name[data-tag="mesk8"] {
  color: var(--tag-mesk8);
}

.tag-pill[data-tag="lightwave"], .task-tag[data-tag="lightwave"] {
  color: var(--tag-lightwave);
  background: rgba(192, 132, 252, 0.15);
}

.active-tag-filter__name[data-tag="lightwave"] {
  color: var(--tag-lightwave);
}

.task-list--cards {
  gap: var(--gap-element);
  padding: var(--gap-micro);
  display: flex;
  flex-direction: column;
}

.task-list--cards .task-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--gap-tight);
  row-gap: 0;
  padding: var(--gap-element) var(--gap-component);
  margin: 0;
  border-radius: var(--radius-panel);
  border: 1px solid var(--border-default);
  background: linear-gradient(135deg, rgba(0, 56, 96, 0.2) 0%, var(--surface-base) 100%);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 14px rgba(0, 229, 255, 0.07),
    inset 0 1px 0 rgba(0, 229, 255, 0.14);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
  --status-accent: var(--hud-cyan);
}

.task-item.task-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--gap-tight);
  row-gap: 0;
  padding: var(--gap-element) var(--gap-component);
  margin: 0;
  border-radius: var(--radius-panel);
  border: 1px solid var(--border-default);
  background: linear-gradient(135deg, rgba(0, 56, 96, 0.2) 0%, var(--surface-base) 100%);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 14px rgba(0, 229, 255, 0.07),
    inset 0 1px 0 rgba(0, 229, 255, 0.14);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.task-panel__list .task-card, .task-panel__list .task-item.task-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--gap-tight);
  row-gap: 0;
  padding: var(--gap-element) var(--gap-component);
  margin: 0;
  border-radius: var(--radius-panel, var(--radius));
  border: 1px solid var(--border-default);
  background: linear-gradient(135deg, rgba(0, 56, 96, 0.18) 0%, rgba(4, 14, 32, 0.32) 100%);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 8px rgba(0, 229, 255, 0.05),
    inset 0 1px 0 rgba(0, 229, 255, 0.08);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    opacity 0.25s ease;
  border-color: var(--border-default);
}

.task-list--cards .task-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.06) 0%, transparent 38%);
  pointer-events: none;
  opacity: 0.45;
}

.task-list--cards .task-card:hover:not(.is-editing):not(.dragging), .task-item.task-card:hover:not(.is-editing):not(.dragging) {
  transform: none;
  border-color: var(--border-strong);
  box-shadow:
    0 0 22px rgba(0, 229, 255, 0.14),
    0 0 0 1px rgba(0, 229, 255, 0.08),
    inset 0 1px 0 rgba(0, 229, 255, 0.18);
}

.task-list--cards .task-card.is-completed {
  opacity: 0.62;
  border-color: rgba(0, 229, 255, 0.14);
  background: linear-gradient(135deg, rgba(0, 48, 64, 0.12) 0%, rgba(4, 12, 28, 0.22) 100%);
  box-shadow:
    0 0 8px rgba(0, 229, 255, 0.04),
    inset 0 1px 0 rgba(0, 229, 255, 0.08);
  --status-accent: var(--ok);
  --priority-accent: rgba(0, 255, 170, 0.45);
}

.task-list--cards .task-card.is-completed:hover:not(.is-editing) {
  opacity: 0.78;
  transform: none;
  box-shadow:
    0 0 16px rgba(0, 229, 255, 0.1),
    inset 0 1px 0 rgba(0, 229, 255, 0.12);
}

.task-list--cards .task-card .drag-handle {
  order: 1;
  flex: 0 0 auto;
  margin-top: var(--gap-micro);
  opacity: 0.45;
  font-size: var(--icon-symbol-sm);
  transition: opacity 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-symbol-sm);
  line-height: var(--line-none);
  align-self: flex-start;
  flex-shrink: 0;
}

.task-item.task-card .drag-handle {
  order: 1;
  flex: 0 0 auto;
  margin-top: 4px;
  opacity: 0.45;
  font-size: 0.9375rem;
  transition: opacity 0.2s, color 0.2s;
}

.task-list--cards .task-card:hover .drag-handle {
  opacity: 0.85;
  color: var(--text-display);
}

.task-list--cards .task-card .task-check-group, .task-item.task-card .task-check-group {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-micro);
  flex: 0 0 auto;
  margin-top: var(--gap-micro);
  flex-shrink: 0;
}

.task-item.task-card .task-check-group {
  margin-top: 4px;
}

.task-list--cards .task-card .task-check-group .task-check, .task-item.task-card .task-check-group .task-check {
  order: unset;
  margin-top: 0;
}

.task-list--cards .task-card .task-check {
  flex: 0 0 auto;
  width: var(--icon-symbol-md);
  height: var(--icon-symbol-md);
  border-radius: var(--radius-control);
  flex-shrink: 0;
}

.task-item.task-card .task-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 4px;
}

.task-list--cards .task-card .completed-at, .task-item.task-card .completed-at {
  font-family: var(--font-mono, var(--font-body));
  font-size: var(--type-caption, 0.75rem);
  font-weight: 500;
  line-height: var(--line-tight, 1.2);
  letter-spacing: var(--track-wide, 0.02em);
  color: var(--ok);
  white-space: nowrap;
  opacity: 0.85;
}

.task-list--cards .task-card.is-completed .completed-at, .task-item.task-card.is-completed .completed-at {
  opacity: 0.95;
}

/* Close attribution: Operator website Approve vs AI agent API close */
.task-state .close-stamp,
.task-list--cards .task-card .close-stamp,
.task-item.task-card .close-stamp {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.close-stamp--operator,
.history-verified:not(.history-verified--agent):not(.history-verified--failed) {
  color: #e8f0ff;
  background: rgba(232, 240, 255, 0.1);
  border: 1px solid rgba(232, 240, 255, 0.28);
}
.close-stamp--agent,
.history-verified--agent {
  color: #9b7bff;
  background: rgba(155, 123, 255, 0.12);
  border: 1px solid rgba(155, 123, 255, 0.35);
}
.close-stamp--fresh {
  animation: closeStampIn 0.55s ease-out;
  box-shadow: 0 0 0 1px rgba(155, 123, 255, 0.55), 0 0 12px rgba(155, 123, 255, 0.35);
}
@keyframes closeStampIn {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .close-stamp--fresh { animation: none; }
}
.history-verified--agent {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.history-plan {
  font-family: var(--font-mono, var(--font-body));
  font-size: 0.72rem;
  color: var(--hud-gold, #e8b84a);
  opacity: 0.95;
}

.task-list--cards .task-card .task-body, .task-item.task-card .task-body {
  display: contents;
}

.task-list--cards .task-card .task-text, .task-item.task-card .task-text {
  order: 3;
  flex: 1 1 calc(100% - 48px);
  min-width: 0;
  width: auto;
  max-width: 100%;
  margin-bottom: var(--gap-tight);
  padding-right: 0;
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-task-primary);
  font-weight: 400;
  line-height: var(--line-relaxed);
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.task-list--cards .task-card .task-text.done, .task-item.task-card .task-text.done {
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(90, 143, 184, 0.65);
  text-decoration-thickness: 1.5px;
  opacity: 0.5;
  color: var(--text-muted);
}

.task-list--cards .task-card .task-meta, .task-item.task-card .task-meta {
  order: 4;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--gap-micro);
  margin: 0;
  padding: var(--gap-tight) 0 0;
  border-top: 1px solid var(--border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.task-list--cards .task-card .task-tags {
  display: inline-flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: var(--gap-micro);
  margin: 0;
  padding: 0;
}

.task-list--cards .task-card .task-tag {
  flex-shrink: 0;
  font-size: var(--type-caption);
  font-weight: 600;
  padding: var(--space-1) var(--gap-element);
  border: 1px solid rgba(0, 212, 255, 0.15);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  font-family: var(--font-body);
  border-radius: var(--radius-chip);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  letter-spacing: var(--track-tight);
  line-height: var(--line-tight);
  box-sizing: border-box;
  white-space: nowrap;
}

.task-list--cards .task-card .task-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px var(--hud-glow-soft);
}

.task-list--cards .task-card .task-actions, .task-item.task-card .task-actions {
  order: 4;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-micro);
  margin: 0;
  padding: var(--gap-tight) 0 0;
  border-top: 1px solid var(--border-subtle);
  min-width: auto;
  width: auto;
}

.task-list--cards .task-card .task-status {
  display: inline-flex;
  flex-shrink: 0;
  min-height: 22px;
  padding: var(--space-1) var(--gap-element);
  font-size: var(--type-caption);
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: var(--line-tight);
  border-radius: var(--radius-chip);
  box-sizing: border-box;
  white-space: nowrap;
}

.task-list--cards .task-card .priority-badge {
  flex-shrink: 0;
  font-size: var(--type-2xs);
  font-weight: 700;
  padding: var(--space-1) var(--gap-element) var(--space-1) var(--gap-tight);
  letter-spacing: var(--track-wide);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-micro);
  font-family: var(--font-display);
  border-radius: var(--radius-chip);
  border: 1px solid currentColor;
  justify-content: center;
  min-height: 22px;
  line-height: var(--line-tight);
  box-sizing: border-box;
  white-space: nowrap;
  text-transform: uppercase;
}

.task-list--cards .task-card .deadline-label {
  flex-shrink: 0;
  font-size: var(--type-caption);
  letter-spacing: var(--track-tight);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--text-muted);
}

.task-list--cards .task-card .task-status-time {
  flex-shrink: 0;
  font-size: var(--type-caption);
  letter-spacing: var(--track-tight);
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, 0.03);
  font-weight: 400;
}

.task-list--cards .task-card .task-status-time--agent {
  border-color: rgba(0, 229, 255, 0.35);
  background: rgba(0, 229, 255, 0.07);
}

.task-list--cards .task-card .task-status-time--review {
  border-color: rgba(240, 192, 64, 0.35);
  background: rgba(240, 192, 64, 0.07);
}

.task-list--cards .task-card .task-status-time--blocked {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.07);
}

.task-list--cards .task-card .btn-edit, .task-list--cards .task-card .btn-delete {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-glyph);
  border-radius: var(--radius-control);
  flex-shrink: 0;
  min-height: 34px;
  line-height: var(--line-none);
}

.task-list--cards .task-card .btn-edit:hover, .task-list--cards .task-card .btn-delete:hover {
  transform: none;
}

.task-list--cards .task-card.drag-over {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 32px rgba(0, 212, 255, 0.2);
}

.task-list--cards .task-card.is-editing {
  padding: var(--gap-component);
  transform: none;
}

.filter-bar--v2 {
  padding: var(--gap-element) var(--gap-component);
  gap: var(--gap-element);
  align-items: center;
  border-radius: var(--radius-panel);
  flex-wrap: wrap;
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tight);
  align-items: center;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.filter-pill-track {
  padding: var(--space-1);
  background: var(--track-bg);
  border: 1px solid var(--track-border);
  border-radius: var(--radius-chip);
  box-shadow: var(--track-inset-highlight);
}

.filter-pill-track .filter-pills {
  gap: var(--gap-micro);
}

.filter-pill:hover:not(.active) {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--accent-muted);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: none;
}

.filter-pill[data-filter="active"].active {
  background: linear-gradient(135deg, rgba(0, 100, 220, 0.5), rgba(0, 180, 255, 0.3));
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.filter-pill[data-filter="done"].active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(0, 255, 170, 0.22));
  border-color: rgba(34, 197, 94, 0.65);
  color: #d4ffe8;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.filter-pill[data-filter="overdue"].active {
  background: linear-gradient(135deg, rgba(255, 61, 90, 0.42), rgba(220, 38, 38, 0.28));
  border-color: rgba(255, 61, 90, 0.72);
  color: #ffe4e8;
  box-shadow: 0 0 16px rgba(255, 61, 90, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.filter-pill:focus-visible, .active-tag-filter__clear:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.filter-pill--priority {
  padding: var(--gap-tight) var(--gap-element);
  min-width: 52px;
  justify-content: center;
  border-radius: var(--radius-chip);
}

.filter-pill--priority[data-priority="high"].active {
  background: linear-gradient(135deg, rgba(255, 61, 90, 0.45), rgba(220, 38, 38, 0.28));
  border-color: rgba(255, 61, 90, 0.75);
  color: #ffe8ec;
  box-shadow: 0 0 14px rgba(255, 61, 90, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.filter-pill--priority[data-priority="medium"].active {
  background: linear-gradient(135deg, rgba(255, 170, 34, 0.42), rgba(245, 158, 11, 0.26));
  border-color: rgba(255, 170, 34, 0.72);
  color: #fff4dc;
  box-shadow: 0 0 14px rgba(255, 170, 34, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.filter-pill--priority[data-priority="low"].active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.38), rgba(0, 255, 170, 0.22));
  border-color: rgba(34, 197, 94, 0.68);
  color: #d8ffe8;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(0, 229, 255, 0.18), 0 0 22px rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.28);
}

.glass.dashboard-card {
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  padding: var(--gap-component);
  border-radius: var(--radius-panel);
}

.section-card:hover, .glass.dashboard-card:hover {
  transform: translateY(-2px);
}

.mini-task:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow:
    0 0 18px rgba(0, 229, 255, 0.12),
    inset 0 1px 0 rgba(0, 229, 255, 0.16);
}

.priority-badge:hover {
  transform: scale(1.04);
}

.tag-pill:hover, .task-tag:hover {
  transform: translateY(-1px);
}

.task-card {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.18s ease,
              opacity 0.2s ease;
}

.task-check:active {
  transform: scale(0.92);
}

.new-task-input:focus, .new-task-select:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  border-color: var(--border-focus);
  box-shadow: var(--control-focus-ring);
  outline: none;
}

.add-form--flow {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-panel);
}

.new-task-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-element) var(--gap-component);
  padding: var(--gap-element) var(--gap-component) var(--gap-tight);
  border-bottom: 1px solid rgba(0, 212, 255, 0.14);
  background: linear-gradient(180deg, rgba(0, 48, 80, 0.28) 0%, rgba(0, 20, 40, 0.12) 100%);
}

.new-task-header__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-kicker);
  font-weight: 400;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-display);
  margin-bottom: var(--space-1);
  line-height: var(--line-tight);
  opacity: 0.88;
}

.new-task-header__heading {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  font-weight: 700;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
  line-height: var(--line-tight);
}

/* DIP-0190: Next ID badge - only shown while the New Task Work dropdown is active. */
.next-id-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: var(--radius-sm, 4px);
  background: rgba(0, 20, 40, 0.35);
  font-family: var(--font-mono);
}

.next-id-badge.is-hidden {
  display: none;
}

.next-id-badge__label {
  font-size: var(--type-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-display);
  opacity: 0.75;
}

.next-id-badge__value {
  color: var(--hud-cyan);
  font-weight: 700;
  text-shadow: 0 0 12px var(--hud-glow-soft);
}

.next-id-badge__reserve {
  font-family: var(--font-mono);
  font-size: var(--type-kicker);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--hud-cyan);
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.4);
  border-radius: var(--radius-sm, 4px);
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.next-id-badge__reserve:hover {
  background: rgba(0, 212, 255, 0.2);
  box-shadow: 0 0 10px var(--hud-glow-soft);
}

.next-id-badge__reserve:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

.next-id-badge.is-reserved .next-id-badge__value {
  color: var(--hud-gold);
  text-shadow: 0 0 12px rgba(240, 192, 64, 0.35);
}

.new-task-flow-steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.flow-step {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-micro);
  font-family: var(--font-display);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--gap-tight) var(--space-2);
  border-radius: var(--radius-chip);
  transition: color 0.2s ease, background 0.2s ease;
  line-height: var(--line-tight);
}

.flow-step--active {
  color: var(--text-primary);
  background: var(--accent-muted);
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.06);
}

.flow-step__num {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 400;
  color: var(--hud-cyan);
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--icon-symbol-sm);
  line-height: var(--line-none);
  letter-spacing: var(--track-tight);
}

.flow-step--active .flow-step__num {
  opacity: 1;
}

.flow-step__connector {
  width: var(--space-3);
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), var(--border-subtle));
  flex-shrink: 0;
}

.new-task-form--flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.new-task-step {
  padding: var(--gap-element) var(--gap-component);
  border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}

.new-task-step:last-child {
  border-bottom: none;
}

.new-task-step__head {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  margin-bottom: var(--gap-tight);
}

.new-task-step__badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  color: var(--text-display);
  padding: var(--space-1) var(--gap-tight);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: var(--radius-chip);
  background: var(--surface-elevated);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.12);
  border-color: var(--border-strong);
}

.new-task-section--task .new-task-input-row .new-task-input {
  padding: var(--gap-element) var(--control-pad-x);
  font-size: var(--type-md);
  background: var(--control-bg);
  border-color: var(--control-border);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--line-body);
  color: var(--text-primary);
  min-height: var(--control-height-lg);
}

.add-form--flow .btn-add-task {
  padding: var(--gap-element) var(--space-4);
  font-size: 0.6875rem;
  min-width: 118px;
  min-height: var(--control-height-lg);
}

.add-form--flow .new-task-form-footer .btn-add-task {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: var(--gap-tight) var(--gap-element);
  box-sizing: border-box;
}

.new-task-section--schedule .schedule-panel {
  background: var(--surface-inset);
  border-color: var(--border-default);
  padding: var(--gap-element) var(--gap-component) var(--gap-component);
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.new-task-section--schedule .schedule-panel-header {
  margin-bottom: var(--gap-tight);
  padding-bottom: var(--gap-tight);
  gap: var(--gap-tight) var(--gap-element);
}

.new-task-section--meta {
  background: var(--surface-base);
}

.new-task-section--meta .new-task-meta-bar {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  gap: var(--gap-element) var(--gap-component);
  flex-flow: row nowrap;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.priority-pill-track {
  padding: var(--space-1);
  background: var(--track-bg);
  border: 1px solid var(--track-border);
  border-radius: var(--radius-chip);
  box-shadow: var(--track-inset-highlight);
  display: inline-flex;
  gap: var(--gap-micro);
}

.new-task-select--priority {
  min-width: 140px;
  padding: var(--gap-tight) 32px var(--gap-tight) var(--gap-element);
  font-family: var(--font-display);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border: 1px solid var(--btn-ghost-border);
  border-radius: calc(var(--radius) - 1px);
  color: var(--control-text);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  min-height: var(--control-height);
  background-color: var(--btn-ghost-bg);
  --select-chevron:
    linear-gradient(45deg, transparent 50%, var(--accent-primary) 50%),
    linear-gradient(135deg, var(--accent-primary) 50%, transparent 50%);
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-position:
    calc(100% - 18px) calc(50% + 2px),
    calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.new-task-select--priority:hover {
  border-color: var(--border-strong);
  background-color: var(--accent-muted);
  background-image: var(--select-chevron);
}

.new-task-select--priority:focus {
  border-color: var(--border-focus);
  box-shadow: var(--control-focus-ring);
}

.tag-picker-track .tag-pill {
  padding: var(--gap-tight) var(--gap-element);
  font-size: var(--type-caption);
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid var(--btn-ghost-border);
  background: var(--btn-ghost-bg);
  opacity: 0.82;
  font-family: var(--font-body);
  font-weight: 600;
  min-height: 30px;
  color: inherit;
}

.tag-picker-track .tag-pill:hover {
  opacity: 1;
  border-color: var(--border-strong);
  background: var(--accent-muted);
}

.tag-picker-track .tag-pill.selected {
  opacity: 1;
  border-color: var(--border-strong);
  background: var(--accent-muted);
  box-shadow: 0 0 10px var(--accent-glow);
}

.task-list--cards .task-card:has(.priority-badge.high) {
  --priority-accent: var(--danger);
}

.task-list--cards .task-card:has(.priority-badge.medium) {
  --priority-accent: var(--warn);
}

.task-list--cards .task-card:has(.priority-badge.low) {
  --priority-accent: var(--ok);
}

.task-list--cards .task-card:not(.is-completed):not(:has(.deadline-label.overdue)) {
  --status-accent: var(--hud-electric);
}

.task-list--cards .task-card:has(.deadline-label.overdue):not(.is-completed) {
  --status-accent: var(--danger);
  background:
    linear-gradient(135deg, rgba(48, 16, 24, 0.22) 0%, rgba(4, 14, 32, 0.32) 100%),
    linear-gradient(90deg, rgba(255, 61, 90, 0.08) 0%, transparent 42%);
  box-shadow:
    0 0 16px rgba(255, 61, 90, 0.1),
    inset 0 1px 0 rgba(0, 229, 255, 0.12);
}

.task-list--cards .task-card:has(.priority-badge.high):has(.deadline-label.overdue):not(.is-completed) {
  animation: priorityOverduePulse 3s ease-in-out infinite;
}

.task-list--cards .task-card::after {
  content: none;
  display: none;
}

.task-list--cards .task-card .priority-badge::before {
  content: '';
  width: var(--icon-dot);
  height: var(--icon-dot);
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}

.task-list--cards .task-card .priority-badge.high {
  background: linear-gradient(135deg, rgba(255, 61, 90, 0.28), rgba(220, 38, 38, 0.16));
  color: #ffc8d2;
  border-color: rgba(255, 61, 90, 0.65);
  box-shadow: 0 0 12px rgba(255, 61, 90, 0.22);
}

.task-list--cards .task-card .priority-badge.medium {
  background: linear-gradient(135deg, rgba(255, 170, 34, 0.26), rgba(245, 158, 11, 0.14));
  color: #ffe8b8;
  border-color: rgba(255, 170, 34, 0.62);
  box-shadow: 0 0 10px rgba(255, 170, 34, 0.18);
}

.task-list--cards .task-card .priority-badge.low {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.24), rgba(0, 255, 170, 0.12));
  color: #c8ffe0;
  border-color: rgba(34, 197, 94, 0.58);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.16);
}

.task-list--cards .task-card .deadline-label.overdue {
  color: #ffc4cc;
  border-color: rgba(255, 61, 90, 0.45);
  background: rgba(255, 61, 90, 0.14);
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 61, 90, 0.35);
  animation: overdueLabelPulse 2.8s ease-in-out infinite;
}

.task-list--cards .task-card.is-completed .priority-badge {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.task-list--cards .task-card.is-completed .deadline-label {
  opacity: 0.45;
}

#overdueList .mini-task {
  border-left-color: var(--danger);
  background:
    linear-gradient(135deg, rgba(48, 16, 24, 0.2) 0%, rgba(4, 14, 32, 0.32) 100%),
    linear-gradient(90deg, rgba(255, 61, 90, 0.06) 0%, transparent 40%);
}

#todayList .mini-task {
  border-left-color: var(--hud-electric);
  background:
    linear-gradient(135deg, rgba(0, 56, 96, 0.18) 0%, rgba(4, 14, 32, 0.32) 100%),
    linear-gradient(90deg, rgba(0, 229, 255, 0.08) 0%, transparent 40%);
}

#recentCompletedList .mini-task {
  border-left-color: rgba(0, 255, 170, 0.4);
  opacity: 0.75;
  background: linear-gradient(135deg, rgba(0, 48, 48, 0.12) 0%, rgba(4, 12, 28, 0.24) 100%);
}

#overdueList .mini-task .mini-task-meta::before {
  content: 'Overdue';
  font-size: var(--type-2xs);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #ffc4cc;
  padding: 2px 6px;
  border-radius: var(--radius-chip);
  border: 1px solid rgba(255, 61, 90, 0.45);
  background: rgba(255, 61, 90, 0.18);
  font-family: var(--font-mono);
}

#todayList .mini-task .mini-task-meta::before {
  content: 'Today';
  font-size: var(--type-2xs);
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #d8f8ff;
  padding: 2px 6px;
  border-radius: var(--radius-chip);
  border: 1px solid rgba(0, 229, 255, 0.38);
  background: rgba(0, 229, 255, 0.1);
  font-family: var(--font-mono);
}

.dashboard-sidebar .mini-task {
  padding: var(--rhythm-3);
}

.dashboard-sidebar .mini-task-title {
  font-size: var(--type-task-secondary);
  font-weight: 400;
}

.dashboard-sidebar .mini-task-meta {
  font-size: var(--type-caption);
}

#upcomingList .mini-task {
  background:
    linear-gradient(135deg, rgba(0, 56, 96, 0.18) 0%, rgba(4, 14, 32, 0.32) 100%),
    linear-gradient(90deg, rgba(0, 229, 255, 0.06) 0%, transparent 40%);
  border-color: rgba(0, 229, 255, 0.26);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  box-shadow:
    0 0 14px rgba(0, 229, 255, 0.07),
    inset 0 1px 0 rgba(0, 229, 255, 0.14);
}

#upcomingList .mini-task-title {
  font-size: var(--type-task-secondary);
  font-weight: 400;
  color: #f4fbff;
  line-height: var(--line-relaxed);
}

#upcomingList .mini-task-meta {
  color: rgba(220, 245, 255, 0.94);
}

.new-task-form-error {
  margin: 0 var(--rhythm-4);
  padding: var(--rhythm-2) var(--rhythm-3);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: var(--track-tight);
  line-height: var(--line-body);
  color: #ffd4da;
  background: var(--color-danger-subtle);
  border: 1px solid rgba(255, 61, 90, 0.45);
  border-left: 3px solid var(--danger);
  box-shadow: 0 0 12px rgba(255, 61, 90, 0.12);
}

.new-task-form-error:not(.is-hidden) {
  margin-top: var(--rhythm-2);
  margin-bottom: calc(var(--rhythm-2) * -1);
}

.new-task-field-error {
  margin: var(--rhythm-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: var(--track-tight);
  line-height: var(--line-tight);
  color: #ffb8c4;
}

.new-task-field-error:not(.is-hidden) + .schedule-panel, .new-task-input-row + .new-task-field-error:not(.is-hidden) {
  margin-top: var(--rhythm-2);
}

.new-task-input.is-invalid, input.is-invalid, select.is-invalid {
  border-color: rgba(255, 77, 106, 0.65) !important;
  box-shadow: 0 0 12px rgba(255, 77, 106, 0.18), inset 0 0 8px rgba(255, 77, 106, 0.06);
}

.new-task-section.is-invalid {
  border-left-color: rgba(255, 61, 90, 0.55);
}

.new-task-section--schedule.is-invalid .schedule-panel {
  border-color: rgba(255, 61, 90, 0.4);
  box-shadow: 0 0 10px rgba(255, 61, 90, 0.1);
}

.btn-add-task.is-loading {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

.stats-grid .stat-value {
  font-size: var(--type-2xl);
  font-weight: 700;
}

.stats-grid .stat-label {
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  color: var(--text-secondary);
}

.stats-grid .stat-note {
  color: var(--text-muted);
  font-weight: 400;
}

.btn-add-task {
  font-family: var(--font-display);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  line-height: var(--line-tight);
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: var(--gap-tight) var(--space-4);
  background: var(--btn-primary-bg);
  border: 1px solid var(--btn-primary-border);
  color: var(--btn-primary-text);
  cursor: pointer;
  box-shadow: 0 0 14px var(--accent-glow);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.task-panel {
  border-radius: var(--radius-panel);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.schedule-datetime input {
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: var(--gap-tight) var(--control-pad-x);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.task-edit-row input {
  min-height: var(--control-height);
  padding: var(--gap-tight) var(--control-pad-x);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  border-radius: var(--radius-control);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.new-task-input::placeholder, .search-input::placeholder, input[type="text"]::placeholder, .task-panel .search-input::placeholder {
  color: var(--control-placeholder);
  opacity: 1;
}

.new-task-input:hover, .new-task-select:hover, .search-input:hover, input[type="text"]:hover, input[type="date"]:hover, input[type="time"]:hover, select:hover, .schedule-datetime input:hover, .task-edit-text:hover, .task-edit-row input:hover, .task-edit-row select:hover, .task-panel .search-input:hover {
  border-color: var(--border-strong);
}

.btn-save-edit:hover {
  background: var(--accent-muted);
  border-color: var(--border-strong);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: none;
}

.btn-cancel-edit:hover {
  border-color: var(--border-default);
  color: var(--text-secondary);
  transform: none;
}

select option {
  background: var(--surface-inset);
  color: var(--text-primary);
}

.new-task-input:focus-visible, .search-input:focus-visible, input[type="text"]:focus-visible, input[type="date"]:focus-visible, input[type="time"]:focus-visible, select:focus-visible, .btn-add:focus-visible, .btn-add-task:focus-visible, .btn-clear:focus-visible, .btn-share-stream:focus-visible, .btn-edit:focus-visible, .btn-delete:focus-visible, .btn-save-edit:focus-visible, .btn-cancel-edit:focus-visible, .tag-pill:focus-visible, .task-check:focus-visible, .filter-bar--v2 .filter-pill:focus-visible, .add-form .calendar-strip .day:focus-visible, .add-form--polished .calendar-strip--compact .day--compact:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.new-task-form--flow > .new-task-step {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  grid-column: auto;
  grid-row: auto;
}

.new-task-section--schedule, .new-task-section--schedule .schedule-panel-body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.active-tag-filter__clear:hover {
  border-color: var(--border-strong);
  background: var(--accent-muted);
  color: var(--text-primary);
}

.dashboard-main > .add-form.glass.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.task-panel__tag-bar {
  margin-top: 0;
  flex-shrink: 0;
  margin: 0;
  padding: var(--gap-tight) var(--gap-component);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base);
}

.task-panel__toolbar.filter-bar--v2 {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-element);
  padding: var(--gap-element) var(--gap-component);
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0, 48, 80, 0.22) 0%, rgba(4, 14, 32, 0.08) 100%);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.task-panel .search-wrap {
  position: relative;
  display: block;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
  align-self: center;
  height: auto;
}

.task-panel .search-wrap svg {
  position: absolute;
  left: var(--gap-element);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 15px;
  height: 15px;
  opacity: 0.9;
  color: var(--accent-primary);
  pointer-events: none;
}

.task-panel .search-input {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  height: auto;
  max-height: none;
  padding: var(--pad-inset) !important;
  padding-left: calc(var(--gap-element) + 22px) !important;
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: 400;
  line-height: var(--line-tight);
  color: var(--control-text);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.task-panel .filter-controls {
  flex: 1 1 auto;
  align-items: center;
}

.task-panel__tag-bar:not(.is-hidden) + .task-panel__list {
  padding-top: var(--gap-tight);
}

.task-panel__list {
  list-style: none;
  flex: 1 1 auto;
  margin: 0;
  padding: var(--gap-tight) var(--gap-component) var(--gap-element);
  gap: var(--gap-element);
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.task-panel__list .empty-state {
  padding: var(--gap-component) var(--gap-element);
  margin: 0;
}

.task-panel__footer {
  flex-shrink: 0;
  margin: 0;
  padding: var(--gap-element) var(--gap-component);
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(0deg, rgba(0, 36, 64, 0.18) 0%, transparent 100%);
  gap: var(--gap-tight);
}

.task-panel__toolbar .filter-pill-track {
  border-radius: var(--radius-chip);
}

.task-status {
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: max-content;
  overflow: visible;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

.task-status--active {
  color: #d8f8ff;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.38);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.14);
}

.task-status--done {
  color: #d4ffe8;
  background: rgba(34, 197, 94, 0.22);
  border: 1px solid rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.16);
}

.task-status--overdue {
  color: #ffe4e8;
  background: rgba(255, 61, 90, 0.22);
  border: 1px solid rgba(255, 61, 90, 0.5);
  box-shadow: 0 0 8px rgba(255, 61, 90, 0.18);
  animation: statusChipPulse 2.2s ease-in-out infinite;
}

.task-status--agent {
  color: #d8f8ff;
  background: rgba(0, 229, 255, 0.22);
  border: 1px solid rgba(0, 229, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.28);
  animation: statusChipPulse 1.6s ease-in-out infinite;
}

.task-status--review {
  color: #fff3d0;
  background: rgba(240, 192, 64, 0.2);
  border: 1px solid rgba(240, 192, 64, 0.55);
  box-shadow: 0 0 8px rgba(240, 192, 64, 0.22);
}

/* Status wrap — all open statuses: body + chevron menu */
.task-status-wrap {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border-radius: var(--radius-chip, 4px);
}

.task-status-wrap > .task-status {
  border-radius: var(--radius-chip, 4px) 0 0 var(--radius-chip, 4px);
  border-right: 0;
  cursor: pointer;
}

.task-status__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0 0.3rem;
  margin: 0;
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 0 var(--radius-chip, 4px) var(--radius-chip, 4px) 0;
  background: rgba(0, 80, 120, 0.28);
  color: var(--hud-cyan, #3de0ff);
  font-size: 0.55rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.task-status__menu-btn:hover,
.task-status-wrap.is-open .task-status__menu-btn {
  background: rgba(0, 136, 255, 0.28);
  color: #e8f8ff;
}

/* On Hold wrap — amber rail on the split control */
.task-status--on-hold-wrap {
  box-shadow: 0 0 8px rgba(180, 140, 60, 0.16);
}

.task-status--on-hold-wrap .task-status--on-hold {
  border-radius: var(--radius-chip, 4px) 0 0 var(--radius-chip, 4px);
  border-right: 0;
  box-shadow: none;
}

.task-status--on-hold-wrap .task-status__menu-btn {
  border-color: rgba(200, 160, 80, 0.5);
  background: rgba(180, 140, 60, 0.22);
  color: #f5e6c8;
}

.task-status--on-hold-wrap .task-status__menu-btn:hover,
.task-status--on-hold-wrap.is-open .task-status__menu-btn {
  background: rgba(200, 160, 80, 0.35);
  color: #fff8e8;
}

.status-menu,
.on-hold-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 90;
  min-width: 11.5rem;
  padding: 0.25rem;
  border-radius: var(--radius-control, 6px);
  border: 1px solid rgba(0, 212, 255, 0.4);
  background: rgba(8, 14, 24, 0.98);
  box-shadow: 0 0 18px rgba(0, 136, 255, 0.22), 0 8px 22px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-status--on-hold-wrap .status-menu,
.task-status--on-hold-wrap .on-hold-menu {
  border-color: rgba(200, 160, 80, 0.55);
  box-shadow: 0 0 18px rgba(180, 140, 60, 0.28), 0 8px 22px rgba(0, 0, 0, 0.5);
}

.status-menu__item,
.on-hold-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #e8f0f8;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
}

.status-menu__item:hover,
.status-menu__item:focus-visible,
.on-hold-menu__item:hover,
.on-hold-menu__item:focus-visible {
  background: rgba(0, 136, 255, 0.18);
  color: #fff;
  outline: none;
}

.status-menu__item.is-current,
.on-hold-menu__item.is-current {
  color: var(--hud-cyan, #3de0ff);
  background: rgba(0, 136, 255, 0.1);
}

/* On Hold — parked for usage reset (not smoke queue). Idle amber, no pulse. */
.task-status--on-hold {
  position: relative;
  z-index: 6;
  color: #f5e6c8;
  background: rgba(180, 140, 60, 0.16);
  border: 1px solid rgba(200, 160, 80, 0.5);
  box-shadow: 0 0 8px rgba(180, 140, 60, 0.16);
  /* help cursor = "hover for reason"; click resumes */
  cursor: pointer !important;
  pointer-events: auto;
}

.task-tag--on-hold {
  position: relative;
  border: 1px solid rgba(200, 160, 80, 0.55);
  border-color: rgba(200, 160, 80, 0.55);
  color: #f0d9a8;
  background: rgba(180, 140, 60, 0.12);
  cursor: help !important;
  z-index: 3;
  pointer-events: auto;
}

.task-card--on-hold {
  border-left-color: rgba(200, 160, 80, 0.55);
}

/* Stack stage: footer/status above panels so hover hits ON HOLD, not a covered layer. */
.task-item.task-card .task-body {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.task-item.task-card .task-footer {
  position: relative;
  z-index: 4;
  overflow: visible;
}
.task-item.task-card .task-state {
  position: relative;
  z-index: 5;
  overflow: visible;
  pointer-events: auto;
}
.task-item.task-card .task-panels-stack,
.task-item.task-card .smoke-note {
  position: relative;
  z-index: 1;
}

/* Body-level pop-out (JS #onHoldReasonTip) — never clipped by card overflow. */
.on-hold-reason-tip {
  position: fixed;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 11rem;
  max-width: min(18rem, 80vw);
  padding: 8px 12px;
  border-radius: var(--radius-control, 6px);
  border: 1px solid rgba(200, 160, 80, 0.65);
  background: rgba(8, 14, 24, 0.98);
  color: #f5e6c8;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  box-shadow:
    0 0 20px rgba(180, 140, 60, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.on-hold-reason-tip.is-hidden {
  display: none;
}
.on-hold-reason-tip__label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(240, 192, 64, 0.95);
}
.on-hold-reason-tip__text {
  font-weight: 600;
  color: #f5e6c8;
  white-space: normal;
}

.task-status[data-filter-tag],
.task-status[data-status-filter] {
  cursor: pointer;
}
.task-status[data-filter-tag]:hover,
.task-status[data-status-filter]:hover {
  filter: brightness(1.12);
}

.active-tag-filter__hint {
  font-size: 0.72rem;
  opacity: 0.75;
  color: var(--text-muted, rgba(186, 218, 238, 0.72));
  white-space: nowrap;
}
.active-tag-filter__hint.is-hidden {
  display: none;
}

/* Not authorized to act — a DIP that was never promoted to a PR. Slate rather
   than red: it's a governance stop, not a failure. Deliberately not pulsing. */
.task-status--blocked {
  color: #dbe4f0;
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 0 8px rgba(148, 163, 184, 0.14);
}

/* PR-89 / DIP-173: multi-project board key chip */
.task-status--project {
  color: #e8ddff;
  background: rgba(167, 139, 250, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.14);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* PR-90: visible task id + timeline (promoted vs due) — click copies full id */
.task-id {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, "Share Tech Mono", Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: rgba(186, 218, 238, 0.78);
  background: rgba(0, 20, 40, 0.35);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  white-space: nowrap;
  cursor: pointer;
  max-width: 100%;
  margin: 0;
  line-height: 1.3;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.task-id:hover {
  color: var(--hud-cyan, #3de0ff);
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
}
.task-id:focus-visible {
  outline: var(--focus-ring, 2px solid #3de0ff);
  outline-offset: 2px;
}
.task-id.is-copied {
  color: var(--ok, #3dff9a);
  border-color: rgba(61, 255, 154, 0.5);
  background: rgba(0, 40, 24, 0.45);
}
.task-timeline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.task-timeline__item {
  font-size: 0.65rem;
  color: rgba(186, 218, 238, 0.72);
  white-space: nowrap;
}
.task-timeline__item--promoted {
  color: rgba(196, 181, 253, 0.95);
}
.task-timeline__item--created {
  opacity: 0.75;
  font-style: italic;
}
.deadline-label {
  font-weight: 500;
}

/* ── SMOKE NOTE + COMPLETED HISTORY (PR-83) ──────────────────── */

/* Agent handover: what it did, and what to check. Collapsed by default so a
   parked card stays the same height as every other card. */
.smoke-note {
  margin-top: var(--gap-tight);
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

.smoke-note__toggle {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: rgba(240, 192, 64, 0.9);
}

.smoke-note__toggle::-webkit-details-marker { display: none; }
.smoke-note__toggle::before { content: "\25B8"; font-size: 0.8em; }
.smoke-note[open] .smoke-note__toggle::before { content: "\25BE"; }
.smoke-note__toggle:hover { color: var(--warn); }

.smoke-note__summary {
  margin: 6px 0 4px;
  color: var(--text-secondary);
  line-height: var(--line-normal, 1.45);
}

.smoke-note__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.smoke-note__list li { line-height: var(--line-normal, 1.45); }

/* PR-0208: Features and Welcome Intro side-by-side on MC sidebar */
.section-title-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.45rem;
  margin: 0 0 0.45rem;
}
.section-title-pair .section-title--link {
  margin: 0;
}
.section-title__and {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted, #7a8899);
  opacity: 0.9;
}
.section-title--link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.section-title--link:hover { color: var(--accent-cyan, #00e5ff); }
.section-title__chev { opacity: 0.6; }

.history-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-card__text { color: var(--text); }
.history-card--empty { color: var(--text-secondary); }

.history-agent,
.history-verified {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.history-agent { color: rgba(0, 229, 255, 0.85); }
.history-verified { color: var(--ok, #00ffaa); }
.history-verified--failed { color: var(--danger, #ff3d5a); }

/* History breadcrumbs — page the completed log in blocks of 100 (#history).
   Additive: only dashboard-test.html renders #historyCrumbs, so prod
   dashboard.html is unaffected by these rules even though the sheet is shared.
   Wraps rather than scrolls: at 500 entries that is 5 crumbs, not a strip. */
.history-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}

.history-crumb__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-right: 2px;
}

.history-crumb {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.history-crumb:hover {
  color: var(--text);
  border-color: rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.08);
}

.history-crumb:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.7);
  outline-offset: 2px;
}

.history-crumb.is-current {
  color: #06070d;
  background: rgba(0, 229, 255, 0.85);
  border-color: rgba(0, 229, 255, 0.85);
  cursor: default;
}

/* Agent claim / review stamps — sit in the meta row beside the deadline chip,
   deliberately outside the status pill so the badge stays narrow on mobile. */
.task-status-time {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-status-time--agent { color: rgba(0, 229, 255, 0.85); }
.task-status-time--review { color: rgba(240, 192, 64, 0.9); }
.task-status-time--blocked { color: rgba(148, 163, 184, 0.95); }

.add-form .new-task-input, .add-form .new-task-select, .add-form .new-task-select--priority, .add-form .schedule-datetime input[type="date"], .add-form .schedule-datetime input[type="time"] {
  min-height: var(--control-height);
  padding: var(--pad-inset);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  color: var(--control-text);
  box-sizing: border-box;
}

.add-form .new-task-section--task .new-task-input-row .new-task-input {
  min-height: var(--control-height-lg);
  padding: var(--pad-inset);
}

.add-form .btn-add-task, .task-panel__footer .btn-clear, .controls-row .btn-clear {
  min-height: var(--control-height);
  padding: var(--pad-inset);
  border-radius: var(--radius-control);
  box-sizing: border-box;
}

.add-form .new-task-form-footer .btn-add-task {
  width: auto;
  min-width: 0;
  min-height: 30px;
  flex-shrink: 0;
}

.add-form .calendar-strip .day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--pad-inset-sm);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.add-form .calendar-strip--compact .day--compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--pad-inset-sm);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  box-sizing: border-box;
}

.add-form .calendar-strip--scroll.calendar-strip--compact .day--compact {
  flex: 0 0 var(--quick-pick-day);
  width: var(--quick-pick-day);
  min-width: var(--quick-pick-day);
  max-width: var(--quick-pick-day);
}

.filter-bar--v2 .search-input {
  min-height: var(--control-height);
  padding: var(--pad-inset) !important;
  padding-left: calc(var(--gap-element) + 22px) !important;
  border-radius: var(--radius-control);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  box-sizing: border-box;
}

.filter-bar--v2 .filter-pill {
  min-height: var(--control-height);
  padding: var(--pad-inset-sm);
  border-radius: var(--radius-control);
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

.filter-bar--v2 .filter-pill--priority {
  padding: var(--pad-inset-sm);
}

.filter-bar--v2 .filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-tight);
}

.filter-bar--v2 .filter-pill:hover:not(.active) {
  transform: none;
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--accent-muted);
  box-shadow: 0 0 12px var(--accent-glow);
}

.filter-bar--v2 .filter-pill.active:hover {
  transform: none;
  box-shadow: 0 0 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.add-form .calendar-strip .day:hover:not(.today):not(.selected) {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 12px var(--accent-glow);
}

.add-form .calendar-strip .day.selected:hover, .add-form--polished .calendar-strip--compact .day--compact.selected:hover {
  transform: none;
  box-shadow: 0 0 14px var(--accent-glow), inset 0 0 8px var(--accent-muted);
}

.header-card .hc-time .stat-label {
  margin-bottom: var(--gap-micro);
}

.header-card .hc-time .stat-value.clock-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--gap-micro);
  line-height: var(--line-none);
}

.inline-handoff-completed > .glass.section-card {
  min-width: 0;
}

.controls-row.task-panel__footer {
  padding: var(--gap-element) var(--gap-component);
  margin: 0;
  border-top: 1px solid var(--border-subtle);
}

.glass.header-card {
  padding: var(--pad-panel) var(--gap-component) var(--gap-element);
}

.glass.stat-card {
  padding: var(--pad-card-x);
}

.glass.section-card, .glass.dashboard-card:not(.header-card):not(.add-form), .glass.share-stream-card, .glass.progress-wrap.section-card {
  padding: var(--pad-panel);
}

.glass.add-form.dashboard-card {
  padding: 0;
}

@media (max-width: 980px) {
.dashboard-shell {
  grid-template-columns: 1fr;
  gap: var(--gap-element);
  display: flex;
  flex-direction: column;
}

.dashboard-sidebar {
  position: static;
  display: contents;
}

.stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hud-frame {
  inset: 8px;
}

.hud-corner {
  width: 32px;
  height: 32px;
}

.header-card {
  gap: var(--gap-tight);
  padding: var(--gap-element) var(--gap-element) var(--gap-tight);
  flex-wrap: wrap;
  align-items: stretch;
  display: flex;
  overflow: hidden;
}

.header-card .hc-title {
  min-width: 0;
  padding-right: 0;
  flex: 1 1 100%;
}

.header-card .hc-forecast {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.header-card .hc-metric {
  min-width: 0;
}

.header-card .hc-time {
  min-width: 0;
  margin-left: 0;
  flex: 1 1 auto;
}

.header-card .header-widgets {
  gap: var(--gap-tight);
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  min-width: 0;
}

.header-card .header-weather-group {
  gap: var(--gap-tight);
  flex: 1 1 100%;
  flex-wrap: nowrap;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}

.header-card .w-day {
  min-width: 32px;
  padding: 2px 3px;
  font-size: 0.625rem;
  flex-shrink: 0;
}

.header-card .w-day-icon {
  font-size: 0.875rem;
}

.add-form--polished .calendar-strip--compact .day--compact {
  min-height: 44px;
  padding: 2px 3px;
  background: rgba(0, 48, 80, 0.55);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-radius: 3px;
}

.add-form--polished .calendar-strip--compact .day--compact .day-label {
  font-size: 0.5rem;
}

.add-form--polished .calendar-strip--compact .day--compact .day-num {
  font-size: 0.9375rem;
}

.header-widgets .hc-title + .hc-metric, .header-widgets .hc-metric + .header-weather-group, .header-card .header-widgets + .hc-time {
  border-left: none;
  padding-left: 0;
}

.header-card .w-forecast {
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  justify-content: flex-start;
}

.filter-bar--v2 {
  align-items: stretch;
}

.filter-controls {
  justify-content: stretch;
  width: 100%;
}

.dashboard-main {
  display: contents;
}

.dashboard-main > .add-form {
  order: 1;
  width: 100%;
}

.progress-wrap {
  order: 2;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: var(--gap-element) var(--gap-component);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow:
      0 0 14px rgba(0, 229, 255, 0.07),
      inset 0 1px 0 rgba(0, 229, 255, 0.14);
}

.task-panel {
  order: 3;
  flex-shrink: 0;
  width: 100%;
  margin-top: calc(-1 * var(--gap-element));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.sync-status {
  order: 4;
  width: 100%;
}

.dashboard-sidebar > .section-card.dashboard-card:not(.progress-wrap) {
  order: 5;
  width: 100%;
}

.inline-handoff-completed {
  order: 6;
  width: 100%;
}

.progress-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-tight);
  margin-bottom: var(--gap-tight);
  min-width: 0;
}

.progress-label #progressText {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-label #progressPct {
  flex-shrink: 0;
}

.progress-bar-track {
  width: 100%;
}
}

@media (min-width: 1400px) {
.stats-grid {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-shell {
  gap: var(--gap-component);
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, 0.72fr);
}

.section-card {
  padding: var(--space-3);
}

.stat-card {
  padding: var(--gap-element) var(--space-3);
  min-height: 88px;
}

body {
  padding: 20px 1.5vw 40px;
  font-size: 1.125rem;
}

.header-card {
  gap: var(--gap-element);
  padding: var(--space-3) var(--space-3) var(--gap-element);
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.header-card .hc-title {
  min-width: var(--header-widget-min);
  flex: 0 1 auto;
  padding-right: 0;
}

.header-card .hc-forecast {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.header-card .stat-value {
  font-size: calc(var(--type-xl) * 1.05);
}

.header-card .header-widgets {
  gap: var(--gap-element);
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.header-card .header-weather-group {
  gap: var(--gap-tight);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.header-card .header-weather-group .hc-forecast {
  min-width: 0;
  flex: 1 1 auto;
}

.header-card .w-forecast {
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.header-card .hc-time {
  margin-left: auto;
  flex: 0 0 auto;
}

.container {
  padding-left: var(--gap-component);
  padding-right: var(--gap-component);
}

.dashboard-shell > .dashboard-main, .dashboard-shell > .dashboard-sidebar, .task-list--cards, .task-panel__list, .mini-list, .task-panel__toolbar.filter-bar--v2 {
  gap: var(--gap-element);
}
}

@media (min-width: 2560px) {
.container {
  max-width: 90vw;
}

.dashboard-shell {
  grid-template-columns: 50vw 25vw;
  gap: var(--gap-component);
}

.dashboard-main, .dashboard-sidebar {
  min-width: 0;
}

.add-form--polished .new-task-form {
  gap: var(--gap-element) var(--gap-component);
}

.new-task-section {
  margin: 0;
}

.schedule-panel {
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.filter-bar {
  margin-top: var(--gap-tight);
}

#taskList {
  max-width: 100%;
}

.header-card .w-forecast {
  gap: var(--gap-tight);
}

.header-card .w-day {
  min-width: 58px;
  padding: var(--gap-tight) var(--gap-tight);
  font-size: 0.9375rem;
  background: rgba(0, 48, 80, 0.65);
  border: 1px solid rgba(0, 229, 255, 0.28);
  border-radius: 4px;
}

.header-card .w-day-name {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.header-card .w-day-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.header-card .w-day-hi {
  font-size: 1rem;
  font-weight: 700;
}

.header-card .w-day-lo {
  font-size: 0.6875rem;
}

.inline-handoff-completed {
  display: flex;
  gap: var(--gap-element);
  flex-direction: row;
  align-items: stretch;
}

.inline-handoff-completed > .glass.section-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.inline-handoff-completed .section-title {
  margin-bottom: var(--gap-tight);
}

.add-form--flow .new-task-form--flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.add-form--flow .new-task-section--schedule {
  border-bottom: 1px solid rgba(0, 212, 255, 0.08);
  border-right: none;
  width: 100%;
}

.add-form--flow .new-task-section--schedule .schedule-panel {
  width: 100%;
}
}

@media (max-width: 720px) {
body {
  padding: var(--gap-element) 0 var(--space-5);
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.new-task-input-row {
  flex-direction: column;
}

.intake-row {
  flex-direction: column;
  align-items: stretch;
}

.intake-col,
.intake-col--dt {
  flex: none;
  width: 100%;
}

.intake-row--classify .tag-picker-track {
  flex: none;
  width: 100%;
}

.intake-row--classify .new-task-form-footer {
  width: 100%;
}

.schedule-panel-grid {
  grid-template-columns: 1fr;
  row-gap: var(--gap-element);
}

.schedule-panel-grid .schedule-sublabel--quick, .schedule-panel-grid .schedule-sublabel--datetime, .schedule-panel-grid .add-form-col--calendar, .schedule-panel-grid .add-form-col--schedule {
  grid-column: 1;
  grid-row: auto;
}

.add-form--polished .btn-add-task, .add-form-col--schedule, .filter-pill-track, .header-card .hc-metric, .header-card .hc-forecast {
  width: 100%;
}

.add-form--polished .new-task-form-footer .btn-add-task {
  width: auto;
}

.new-task-meta-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--gap-element);
  align-items: center;
  flex-flow: unset;
}

.new-task-meta-bar .add-priority-group--inline {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
  width: auto;
  flex-direction: row;
  align-items: center;
}

.new-task-meta-bar .new-task-form-footer {
  grid-column: 2;
  grid-row: 1;
  margin-left: 0;
  justify-self: end;
  flex: unset;
}

.new-task-meta-bar .tag-picker-track {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  flex: unset;
}

.new-task-meta-bar .tag-picker-track .tag-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-tight);
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.new-task-meta-bar .tag-picker-track .tag-picker-label {
  grid-column: 1 / -1;
  margin-bottom: var(--gap-micro);
}

.new-task-meta-bar .tag-picker-track .tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: unset;
  width: 100%;
  min-width: 0;
  text-align: center;
  box-sizing: border-box;
}

.add-datetime-inline {
  flex-wrap: wrap;
}

.add-datetime-inline input[type="date"], .add-datetime-inline input[type="time"] {
  max-width: none;
  flex: 1;
}

.btn-add {
  width: 100%;
  min-height: 38px;
  padding-top: var(--gap-tight);
  padding-bottom: var(--gap-tight);
}

h1 {
  font-size: 1.35rem;
}

.filter-bar--v2, .filter-controls {
  flex-direction: column;
  align-items: stretch;
}

.clock-time, .w-temp, .btc-price {
  font-size: 1.05rem;
}

.stat-value {
  font-size: 1.6rem;
}

.stat-card {
  padding: var(--gap-tight) var(--gap-tight);
  min-height: 64px;
}

.filter-pill, .btn-clear, button[id$="Btn"] {
  min-height: 38px;
  padding-top: var(--gap-tight);
  padding-bottom: var(--gap-tight);
}

.filter-pill-track .filter-pills {
  flex-wrap: wrap;
  justify-content: center;
}

.new-task-header {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--gap-element) var(--gap-element) var(--gap-tight);
}

.new-task-flow-steps {
  width: 100%;
  justify-content: space-between;
  gap: var(--space-1);
}

.flow-step__connector {
  width: 10px;
}

.new-task-section--meta .new-task-meta-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--gap-tight) var(--gap-element);
  align-items: center;
  flex-flow: unset;
}

.new-task-meta-bar .priority-pill-track {
  flex: 0 0 auto;
}

.new-task-meta-bar .new-task-select--priority {
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.task-list--cards .task-card .task-text, .task-item.task-card .task-text {
  font-family: var(--font-body);
  font-size: var(--type-task-secondary);
  font-weight: 400;
  line-height: var(--line-relaxed);
  letter-spacing: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  padding-left: var(--gap-tight);
  padding-right: var(--gap-tight);
}

.mini-task-title, .dashboard-sidebar .mini-task-title, #upcomingList .mini-task-title, #todayList .mini-task-title {
  font-family: var(--font-body);
  font-size: var(--type-task-secondary);
  font-weight: 400;
  line-height: var(--line-relaxed);
  letter-spacing: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.task-list--cards .task-card {
  padding: var(--gap-tight) 0;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

.header-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--gap-element);
}

.header-card .header-widgets {
  flex-direction: column;
  width: 100%;
  display: flex;
  gap: 0;
}

.header-card .header-weather-group {
  flex-direction: column;
  width: 100%;
  align-items: stretch;
  order: 3;
  display: flex;
  gap: var(--gap-tight);
}

.header-card .hc-time {
  width: 100%;
  border-top: 1px solid var(--header-divider);
  padding-top: var(--gap-element);
  margin-top: var(--gap-tight);
  order: 4;
  margin-left: 0;
  border-left: none;
  padding: var(--gap-element) 0 0;
}

.header-widgets .hc-title + .hc-metric, .header-widgets .hc-metric + .header-weather-group {
  border-top: 1px solid var(--header-divider);
  padding-top: var(--gap-element);
  margin-top: var(--gap-tight);
  border-left: none;
  padding-left: 0;
}

.header-card .w-forecast {
  justify-content: flex-start;
  width: 100%;
}

.controls-row, .mini-list {
  gap: var(--gap-tight);
}

.task-panel__toolbar.filter-bar--v2, .filter-bar--v2 .filter-controls {
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-tight);
}

.task-panel .search-wrap {
  flex: 1 1 auto;
  width: 100%;
}

.task-panel .filter-controls {
  width: 100%;
  justify-content: stretch;
}

.container {
  padding-left: var(--gap-tight);
  padding-right: var(--gap-tight);
}

.task-list--cards, .task-panel__list {
  gap: var(--gap-tight);
  padding-left: 0;
  padding-right: 0;
}

.header-card .w-day-icon {
  font-size: var(--icon-symbol-sm);
}

.header-card .hc-title, .header-card .header-weather-group .hc-metric {
  order: 1;
}

.header-card .header-widgets > .hc-metric, .header-card .header-weather-group .hc-forecast {
  order: 2;
}

.header-card .header-widgets + .hc-time {
  border-left: none;
  padding-left: 0;
}

.inline-handoff-completed {
  gap: var(--gap-element);
}

.controls-row.task-panel__footer {
  padding: var(--gap-tight) var(--gap-element);
}

.task-panel.dashboard-card {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

.task-item.task-card, .task-panel__list .task-card, .task-panel__list .task-item.task-card {
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

.task-list--cards .task-card .task-meta, .task-item.task-card .task-meta {
  padding: var(--gap-tight) 0 0 var(--gap-tight);
}

.task-list--cards .task-card .task-actions, .task-item.task-card .task-actions {
  padding: var(--gap-tight) var(--gap-tight) 0 0;
}

.task-list--cards .task-card .drag-handle, .task-item.task-card .drag-handle, .task-list--cards .task-card .task-check, .task-item.task-card .task-check {
  margin-left: var(--gap-tight);
}
}

@media (max-width: 560px) {
.add-datetime-inline input[type="date"], .add-datetime-inline input[type="time"] {
  max-width: none;
  width: 100%;
}

.add-priority-group--inline {
  flex-direction: column;
  align-items: stretch;
}

input[type="date"], input[type="time"] {
  width: 100%;
}

.add-priority-group select, .add-priority-group--inline select {
  width: 100%;
  align-self: stretch;
}
}

@media (min-width: 720px) {
body {
  font-size: 1rem;
}
}

@media (max-width: 719px) {
.header-card .btc-price, .header-card .w-temp, .header-card .clock-time, .header-card .stat-value {
  font-size: var(--type-xl);
}

.stats-grid .stat-value {
  font-size: var(--type-2xl);
}
}

@media (min-width: 981px) and (max-width: 1399px) {
.header-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
      "title clock"
      "btc weather";
  align-items: center;
  column-gap: var(--gap-element);
  row-gap: var(--gap-tight);
  overflow: hidden;
}

.header-card .header-widgets {
  display: contents;
}

.header-card .hc-title {
  grid-area: title;
  min-width: 0;
  padding-right: 0;
  align-self: center;
}

.header-card .hc-title h1 {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  overflow-wrap: break-word;
}

.header-card .header-widgets > .hc-metric {
  grid-area: btc;
  align-self: center;
  border-top: 1px solid var(--header-divider);
  padding-top: var(--gap-tight);
  margin-top: var(--space-1);
}

.header-card .header-weather-group {
  grid-area: weather;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: var(--gap-tight);
  border-top: 1px solid var(--header-divider);
  padding-top: var(--gap-tight);
  margin-top: var(--space-1);
  overflow: hidden;
}

.header-card .hc-time {
  grid-area: clock;
  margin-left: 0;
  justify-self: end;
  align-self: center;
}

.header-card .hc-forecast {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.header-card .w-forecast {
  overflow-x: auto;
  flex-wrap: nowrap;
  max-width: 100%;
}

.header-card .w-day {
  min-width: 34px;
  flex-shrink: 0;
  padding: 2px 4px;
}

.header-card .w-day-icon {
  font-size: 0.875rem;
}

.header-widgets .hc-title + .hc-metric, .header-widgets .hc-metric + .header-weather-group, .header-card .header-widgets + .hc-time {
  border-left: none;
  padding-left: 0;
}
}

@media (min-width: 1600px) {
.header-card .hc-title {
  padding-right: 0;
  min-width: 148px;
  flex: 0 0 auto;
}

.container {
  max-width: 1680px;
  padding-left: var(--gap-component);
  padding-right: var(--gap-component);
}

.stats-grid {
  gap: 18px;
}

.dashboard-shell {
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 0.75fr);
  gap: var(--gap-section);
}
}

@media (max-width: 480px) {
.header-card .w-forecast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  width: 100%;
}

.header-card .w-day {
  min-width: 0;
  width: 100%;
  padding: var(--space-1);
}
}

@media (prefers-reduced-motion: reduce) {
.btn-add, .btn-add-task, .btn-clear, .btn-share-stream, .filter-pill, .tag-pill, .task-list--cards .task-card .btn-edit, .task-list--cards .task-card .btn-delete, .task-list--cards .task-card, .task-item.task-card, .mini-task, .filter-bar--v2 .filter-pill, .btn-edit, .btn-delete, .add-form .calendar-strip .day, .add-form--polished .calendar-strip--compact .day--compact, .share-stream-item {
  transition: none;
}

.filter-pill:hover, .filter-pill.active, .task-list--cards .task-card .btn-edit:hover, .task-list--cards .task-card .btn-delete:hover, .filter-bar--v2 .filter-pill:active, .filter-bar--v2 .filter-pill.active:active, .btn-add:active, .btn-add-task:active, .btn-share-stream:active, .btn-clear:active, .btn-edit:active, .btn-delete:active, .add-form .calendar-strip .day:active, .add-form--polished .calendar-strip--compact .day--compact:active, .share-stream-item:active {
  transform: none;
}
}

@media (min-width: 721px) {
.controls-row > .btn-clear, .controls-row > .btn-add, .controls-row > button[id$="Btn"] {
  flex: 0 1 auto;
}
}

@media (min-width: 981px) {
.dashboard-main, .dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gap-element);
  min-width: 0;
}
}

@media (min-width: 721px) and (max-width: 1399px) {
.dashboard-shell {
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.7fr);
  gap: var(--gap-element);
}
}

/* ── DIP-10: Compact Intake Form (dashboard-test.html) ─────────────────── */
.intake-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  padding: var(--gap-element) var(--gap-component);
}

.intake-row {
  display: flex;
  align-items: center;
  gap: var(--gap-element);
}

.intake-row--schedule {
  align-items: flex-start;
  gap: var(--gap-element);
}

.intake-row--classify {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--gap-tight);
  gap: var(--gap-element);
}

.intake-label {
  font-size: var(--type-kicker);
  font-family: var(--font-mono);
  letter-spacing: var(--track-kicker);
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 9rem;
}

.intake-sublabel {
  display: block;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: var(--gap-tight);
}

.intake-col {
  flex: 1;
  min-width: 0;
}

.intake-col--dt {
  flex: 0 0 auto;
}

.intake-row--task .new-task-input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.intake-row--classify .tag-picker-track {
  flex: 1;
  min-width: 0;
}

.intake-row--classify .btn-add-task {
  flex-shrink: 0;
}

.intake-row--classify .new-task-form-footer {
  width: auto;
  padding: 0;
  flex-shrink: 0;
}

/* ── DIP-21: Header three-column layout ────────────────────────────────── */
.header-widgets--three-col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: var(--gap-element);
}

.header-widgets--three-col .hc-title {
  justify-self: start;
}

.hc-weather-center {
  justify-self: center;
  text-align: center;
}

.hc-forecast-right {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
}

.hc-forecast-right .w-forecast {
  justify-content: flex-end;
}

/* ── DIP-21: Filter count badge inside pill buttons ────────────────────── */
.filter-count {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  opacity: 0.75;
  margin-left: 0.2rem;
}

/* ── DIP-21: Sidebar Filter Panel ──────────────────────────────────────── */
.sidebar-search-wrap {
  margin: var(--gap-tight) 0;
  width: 100%;
}

.sidebar-search-wrap .search-input {
  width: 100%;
  box-sizing: border-box;
  padding-left: calc(var(--gap-element) + 22px) !important;
}

.sidebar-filter-controls {
  display: flex;
  flex-direction: column;
  gap: var(--gap-element);
  padding-top: var(--gap-tight);
}

.sidebar-filter-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
}

.sidebar-filter-label {
  font-family: var(--font-mono);
  font-size: var(--type-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: none;
  color: var(--muted);
}

/* Lowercase filter labels/notes for consistency with status menu */
.sidebar-filter-card .stat-label {
  text-transform: none !important;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.sidebar-filter-card .stat-note {
  text-transform: none !important;
  letter-spacing: 0.01em;
}

/* filter by tag: locked two-block stack — tags row 1, status row 2 (never side-by-side) */
.filter-by-tag-stack,
#tagFilterPills.filter-by-tag-stack {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
}

.filter-by-tag-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

/* Row 1 — tags only */
.filter-by-tag-row--tags {
  order: 1;
}

/* Row 2 — status filters always below tags */
.filter-by-tag-row--status {
  order: 2;
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 212, 255, 0.14);
}

.filter-by-tag-stack .filter-pills--tag-row,
.filter-by-tag-stack .filter-pills--status-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
  width: 100% !important;
  flex-wrap: unset !important;
  justify-content: stretch !important;
}

.sidebar-filter-label--sub {
  margin: 0;
  opacity: 0.85;
  font-size: 0.65rem;
}

/* Filtering by tag bar: never force DIP / tags to CAPS */
.active-tag-filter__name,
.active-tag-filter__name[data-tag],
.active-tag-filter__name[data-tag="dip"],
.active-tag-filter__name[data-tag="smoke-test"],
.active-tag-filter__name[data-tag="on-hold"] {
  text-transform: none !important;
}

.sidebar-filter-track .filter-pills--card-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* dir-card: Handoff stat-card parity (dashboard-test.html) */
.dir-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left;
  padding: var(--gap-component) !important;
  min-height: 92px !important;
  height: auto !important;
  width: 100%;
  gap: 0 !important;
  border-radius: var(--radius-panel) !important;
  border: 1px solid var(--border-default) !important;
  background:
    linear-gradient(135deg, rgba(0, 229, 255, 0.08) 0%, transparent 46%),
    var(--surface-panel) !important;
  backdrop-filter: blur(18px) saturate(1.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.55);
  box-shadow:
    0 12px 42px rgba(0, 229, 255, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.38),
    0 0 28px rgba(0, 229, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28) !important;
  overflow: hidden !important;
  cursor: pointer;
  font-size: inherit;
  text-transform: none;
  color: var(--text-primary);
  isolation: isolate;
  transition:
    transform 0.22s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.22s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.18s ease;
}

.dir-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(220, 242, 255, 0.52);
  border-right: none;
  border-bottom: none;
  opacity: 0.65;
  pointer-events: none;
  box-shadow: -2px -2px 8px var(--hud-glow-soft);
  z-index: 2;
}

.dir-card::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(220, 242, 255, 0.52);
  border-left: none;
  border-top: none;
  opacity: 0.65;
  pointer-events: none;
  box-shadow: 2px 2px 8px var(--hud-glow-soft);
  z-index: 2;
}

.dir-card .stat-label,
.dir-card .stat-value,
.dir-card .stat-note {
  position: relative;
  z-index: 2;
}

/* Match .stats-grid stat-card typography from dashboard.html */
.dir-card .stat-label {
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  color: var(--text-secondary);
  text-transform: uppercase;
  line-height: var(--line-tight);
}

.dir-card .stat-value {
  font-family: var(--font-mono);
  font-size: var(--type-2xl);
  font-weight: 700;
  line-height: var(--line-none);
  margin-top: var(--space-2);
  color: var(--text-display);
  text-shadow: 0 0 16px var(--accent-glow);
}

.dir-card .stat-note {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--text-muted);
  font-weight: 400;
  margin-top: var(--gap-element);
  letter-spacing: var(--track-tight);
  line-height: var(--line-snug);
  text-transform: none;
}

.dir-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 229, 255, 0.42) !important;
  box-shadow:
    0 18px 48px rgba(0, 229, 255, 0.22),
    0 0 28px rgba(0, 229, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  color: var(--text-primary);
}

.dir-card:hover .stat-label {
  color: var(--text-secondary);
}

.dir-card:hover .stat-value {
  color: var(--text-display);
}

.dir-card.active {
  border-color: var(--border-strong) !important;
  box-shadow:
    0 0 14px var(--accent-glow),
    0 12px 42px rgba(0, 229, 255, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transform: none;
}

.dir-card.filter-pill.active {
  background:
    linear-gradient(135deg, rgba(0, 120, 220, 0.28), rgba(0, 200, 255, 0.14)),
    var(--surface-panel) !important;
  color: var(--text-primary);
}

.dir-card.filter-pill[data-filter="active"].active {
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(0, 200, 255, 0.12)),
    var(--surface-panel) !important;
}

.dir-card.filter-pill[data-filter="done"].active {
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(0, 255, 170, 0.12)),
    var(--surface-panel) !important;
}

.dir-card.filter-pill[data-filter="overdue"].active {
  background:
    linear-gradient(135deg, rgba(255, 61, 90, 0.3), rgba(220, 38, 38, 0.16)),
    var(--surface-panel) !important;
}

.dir-card.filter-pill--priority[data-priority="high"].active {
  background:
    linear-gradient(135deg, rgba(255, 61, 90, 0.3), rgba(220, 38, 38, 0.16)),
    var(--surface-panel) !important;
}

.dir-card.filter-pill--priority[data-priority="medium"].active {
  background:
    linear-gradient(135deg, rgba(255, 170, 34, 0.28), rgba(245, 158, 11, 0.14)),
    var(--surface-panel) !important;
}

.dir-card.filter-pill--priority[data-priority="low"].active {
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.26), rgba(0, 255, 170, 0.12)),
    var(--surface-panel) !important;
}

.dir-card .stat-value--overdue {
  color: #ff6b82;
  text-shadow:
    0 0 8px rgba(255, 61, 90, 0.55),
    0 0 18px rgba(255, 77, 106, 0.4),
    0 0 28px rgba(255, 61, 90, 0.22);
}

.dir-card .stat-value--high {
  color: #ff6b82;
  text-shadow:
    0 0 8px rgba(255, 61, 90, 0.55),
    0 0 18px rgba(255, 77, 106, 0.4),
    0 0 28px rgba(255, 61, 90, 0.22);
}

.dir-card .stat-value--medium {
  color: #ffc44d;
  text-shadow:
    0 0 8px rgba(255, 170, 34, 0.5),
    0 0 18px rgba(240, 165, 0, 0.38),
    0 0 28px rgba(255, 176, 32, 0.2);
}

.dir-card .stat-value--low {
  color: rgba(186, 218, 238, 0.78);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.08);
}

.stat-value--overdue { color: var(--danger, #ff4d4d); text-shadow: 0 0 12px rgba(255,77,77,0.4); }
.stat-value--high    { color: var(--danger, #ff4d4d); text-shadow: 0 0 12px rgba(255,77,77,0.4); }
.stat-value--medium  { color: var(--warn, #f0a500);   text-shadow: 0 0 12px rgba(240,165,0,0.35); }
.stat-value--low     { color: var(--muted);            text-shadow: none; }

/* ── DIP-21: Scan Objectives (right panel) ─────────────────────────────── */
.scan-objectives-list {
  list-style: none;
  margin: 0;
  padding: var(--gap-tight) 0 0;
}

.scan-obj-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.scan-obj-row:last-child {
  border-bottom: none;
}

.scan-obj-label {
  font-family: var(--font-mono);
  font-size: var(--type-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--muted);
}

.scan-obj-count {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.scan-obj-count--overdue {
  color: var(--danger, #ff4d4d);
}

.scan-obj-count--today {
  color: var(--warn, #f0a500);
}

/* ── DIP-21: Dashboard Footer ───────────────────────────────────────────── */
.dashboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.5rem;
  margin: var(--gap-element) auto 0;
  max-width: var(--container-max, 1600px);
  width: 100%;
  box-sizing: border-box;
  gap: 1rem;
}

.footer-left {
  flex: 1;
}

.footer-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
}

.footer-center .btc-change {
  font-size: 0.72rem;
}

.footer-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-family: var(--font-mono);
}

.footer-right .clock-time {
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.footer-right .clock-date-sm {
  font-size: 0.7rem;
  color: var(--muted);
}

.footer-right .sync-dot {
  margin-left: 0.25rem;
}

.dashboard-footer .hc-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard-footer .stat-value {
  font-size: var(--type-xl);
  margin-top: var(--space-1);
}

.dashboard-footer .btc-price {
  font-size: var(--type-xl);
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
  letter-spacing: var(--track-tight);
  line-height: var(--line-none);
}

.dashboard-footer .btc-change {
  font-size: var(--type-sm);
  font-family: var(--font-mono);
  font-weight: 400;
}

.dashboard-footer .clock-time {
  font-size: var(--type-xl);
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
}

.dashboard-footer .clock-date-sm {
  font-size: var(--type-sm);
  color: var(--text-muted);
}

/* ── PR-68 / DIP-100: Persistent footer (dashboard-test.html only) ─────── */
body.dashboard-test-page {
  --footer-bar-height: 4.85rem;
  padding-bottom: calc(var(--footer-bar-height) + env(safe-area-inset-bottom, 0px));
}

/* Match original dashboard mini-list HUD scrollbar (thin cyan) */
html:has(body.dashboard-test-page),
body.dashboard-test-page,
body.dashboard-test-page .dashboard-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--hud-cyan, #00e5ff) transparent;
}

html:has(body.dashboard-test-page)::-webkit-scrollbar,
body.dashboard-test-page::-webkit-scrollbar,
body.dashboard-test-page .dashboard-sidebar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

html:has(body.dashboard-test-page)::-webkit-scrollbar-track,
body.dashboard-test-page::-webkit-scrollbar-track,
body.dashboard-test-page .dashboard-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

html:has(body.dashboard-test-page)::-webkit-scrollbar-thumb,
body.dashboard-test-page::-webkit-scrollbar-thumb,
body.dashboard-test-page .dashboard-sidebar::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.45);
  border-radius: 2px;
}

html:has(body.dashboard-test-page)::-webkit-scrollbar-thumb:hover,
body.dashboard-test-page::-webkit-scrollbar-thumb:hover,
body.dashboard-test-page .dashboard-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.7);
}

body.dashboard-test-page .dashboard-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  margin: 0;
  max-width: none;
  width: 100%;
  border-radius: 0;
  padding: 0.55rem var(--gap-component, 1.5rem);
  padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  box-shadow:
    0 -10px 28px rgba(0, 8, 20, 0.45),
    0 -1px 0 rgba(0, 229, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.55);
}

/* PR-0203 / DIP-0213: one document scroll — sidebar moves with the page.
   No nested sidebar scrollport (no second bar on Directives).
   No sticky pin: rail must scroll together with task list (not locked on REPORTS
   until the list end, then jump to bottom). */
body.dashboard-test-page .dashboard-sidebar {
  max-height: none;
  overflow-x: visible;
  overflow-y: visible;
  overscroll-behavior: auto;
  position: static;
  top: auto;
  align-self: start;
  padding-bottom: 0.25rem;
}

/* ── PR-0203: Back to top (long task lists) ─────────────────────────────── */
body.dashboard-test-page .scroll-top-btn {
  position: fixed;
  z-index: 45;
  right: max(0.85rem, env(safe-area-inset-right, 0px));
  bottom: calc(var(--footer-bar-height, 4.85rem) + 0.85rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(4, 16, 32, 0.88);
  color: var(--hud-cyan, #00e5ff);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(0, 229, 255, 0.18);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s ease, background 0.15s ease;
}

body.dashboard-test-page .scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.dashboard-test-page .scroll-top-btn:hover,
body.dashboard-test-page .scroll-top-btn:focus-visible {
  border-color: rgba(0, 229, 255, 0.85);
  background: rgba(0, 40, 64, 0.95);
  outline: none;
}

body.dashboard-test-page .scroll-top-btn__icon {
  font-size: 0.95rem;
  line-height: 1;
}

body.dashboard-test-page .btn-scroll-top-inline {
  margin-left: auto;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(0, 40, 64, 0.35);
  color: var(--hud-cyan, #00e5ff);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
}

body.dashboard-test-page .btn-scroll-top-inline:hover,
body.dashboard-test-page .btn-scroll-top-inline:focus-visible {
  border-color: rgba(0, 229, 255, 0.65);
  background: rgba(0, 50, 80, 0.55);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-test-page .scroll-top-btn {
    transition: none;
  }
}

@media (max-width: 720px) {
  body.dashboard-test-page {
    --footer-bar-height: 5.75rem;
  }

  body.dashboard-test-page .dashboard-footer {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 1.25rem;
    padding: 0.5rem var(--gap-tight, 0.75rem);
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  body.dashboard-test-page .footer-left {
    display: none;
  }

  body.dashboard-test-page .footer-center,
  body.dashboard-test-page .footer-right {
    flex: 0 1 auto;
  }
}

/* ── DIP-19: Visual consistency (dashboard-test.html only) ─────────────── */
body.dashboard-test-page .intake-row--classify .btn-add-task,
body.dashboard-test-page .new-task-form-footer .btn-add-task {
  box-shadow: 0 0 14px var(--accent-glow);
}

body.dashboard-test-page .intake-row--classify .btn-add-task:hover,
body.dashboard-test-page .new-task-form-footer .btn-add-task:hover {
  box-shadow: var(--btn-primary-hover-shadow);
}

body.dashboard-test-page .task-panel__footer .btn-clear {
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

body.dashboard-test-page .btn-share-stream {
  box-shadow: 0 0 10px var(--hud-glow-soft);
}

body.dashboard-test-page .btn-share-stream:hover,
body.dashboard-test-page .btn-share-stream.is-open {
  box-shadow: 0 0 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.dashboard-test-page .add-form--polished .calendar-strip--compact .day--compact.active {
  box-shadow: 0 0 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.dashboard-test-page .glass .section-title,
body.dashboard-test-page .sidebar-filter-label {
  color: var(--hud-cyan);
  text-shadow: 0 0 16px var(--hud-glow-soft), 0 0 8px rgba(0, 229, 255, 0.12);
}

body.dashboard-test-page .glass .section-title {
  letter-spacing: var(--track-wider);
  border-bottom: 1px solid rgba(0, 229, 255, 0.14);
  padding-bottom: 6px;
}

/* ── DIP-31: Visual Polish Pass (dashboard-test.html only) ──────────────── */

/* Change 1 — MISSION CONTROL title boost */
body.dashboard-test-page .header-card .hc-title h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  text-shadow: 0 0 24px var(--hud-glow), 0 0 48px rgba(0, 229, 255, 0.25);
}

/* Change 2 — Sidebar container glass glow */
body.dashboard-test-page .dashboard-sidebar {
  background: rgba(0, 48, 80, 0.10);
  border: 1px solid rgba(0, 229, 255, 0.09);
  border-radius: var(--radius-panel);
  padding: var(--gap-tight);
  box-shadow:
    0 0 32px rgba(0, 229, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Change 4 — Panel count badges + progress label typography */
body.dashboard-test-page .panel-count {
  color: var(--hud-cyan);
  font-weight: 700;
  text-shadow: 0 0 10px var(--hud-glow-soft);
}

body.dashboard-test-page .progress-label {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-test-page .dir-card {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  body.dashboard-test-page .dir-card:hover {
    transform: none;
  }

}

/* ===================================================================
   PR-92 / DIP-176 — Task card layout v2
   Card read order mirrors the intake form:
     row 1  ID + project + Due          (intake: Due Date / Quick Pick)
     row 2  description                 (intake: What needs to be done?)
     row 3  priority + tags | Created + status   (intake: Classify)
   Edit/delete sit inline on row 1, top right, beside the checkbox.
   Scoped to [data-card-layout="v2"] so prod dashboard.html is untouched.
   =================================================================== */

/* Three columns only. A 4th intrinsic column would absorb the min-content of any
   row that spans it, inflating the actions cell to hundreds of px — so the header
   and footer rows are flex containers inside a single content column instead. */
body[data-card-layout="v2"] .task-item.task-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "handle check head"
    ".      .     title"
    ".      .     footer"
    ".      .     panels"
    ".      .     smoke";
  align-items: start;
  column-gap: var(--gap-element);
  row-gap: var(--gap-micro);
  border-left: 3px solid var(--priority-accent, var(--border-default));
}

/* The legacy flex card set order:3/order:4 on these; inside the new flex
   header and footer rows that would reverse them. Reset to DOM order. */
body[data-card-layout="v2"] .task-item.task-card .task-ident,
body[data-card-layout="v2"] .task-item.task-card .task-actions,
body[data-card-layout="v2"] .task-item.task-card .task-text,
body[data-card-layout="v2"] .task-item.task-card .task-meta,
body[data-card-layout="v2"] .task-item.task-card .task-state {
  order: 0;
}

body[data-card-layout="v2"] .task-item.task-card > .drag-handle { grid-area: handle; }
body[data-card-layout="v2"] .task-item.task-card > .task-check-group { grid-area: check; }
body[data-card-layout="v2"] .task-item.task-card .task-head { grid-area: head; }
body[data-card-layout="v2"] .task-item.task-card .task-text { grid-area: title; }
body[data-card-layout="v2"] .task-item.task-card .task-footer { grid-area: footer; }
body[data-card-layout="v2"] .task-item.task-card .task-panels-stack { grid-area: panels; }
body[data-card-layout="v2"] .task-item.task-card .smoke-note { grid-area: smoke; }

/* PR-0199 — Specs + Checklist as separate collapsibles (each default closed) */
.task-panels-stack {
  margin-top: var(--gap-tight);
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-panels {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border-subtle, rgba(0, 212, 255, 0.12));
  border-radius: var(--radius-control, 6px);
  background: rgba(0, 20, 40, 0.35);
  overflow: hidden;
}

.task-panels__toggle {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #7a8899);
  background: rgba(0, 12, 28, 0.45);
  user-select: none;
}

.task-panels__toggle::-webkit-details-marker { display: none; }
.task-panels__toggle::before {
  content: "\25B8";
  font-size: 0.85em;
  color: var(--hud-cyan, #3de0ff);
  flex-shrink: 0;
}
.task-panels--check .task-panels__toggle::before {
  color: var(--hud-gold, #e8b84a);
}
.task-panels[open] .task-panels__toggle::before { content: "\25BE"; }
.task-panels__toggle:hover { color: var(--hud-cyan, #3de0ff); }
.task-panels--check .task-panels__toggle:hover { color: var(--hud-gold, #e8b84a); }

.task-panels__body {
  border-top: 1px solid var(--border-subtle, rgba(0, 212, 255, 0.12));
  padding: 0.55rem 0.7rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary, #b0bec5);
}

/* Text-only pulse on each collapsible label (independent) */
@keyframes task-panels-text-cyan {
  0%, 100% {
    color: rgba(122, 136, 153, 0.85);
    text-shadow: 0 0 0 transparent;
    letter-spacing: 0.04em;
  }
  40%, 55% {
    color: #7af0ff;
    text-shadow:
      0 0 4px rgba(61, 224, 255, 0.95),
      0 0 12px rgba(61, 224, 255, 0.85),
      0 0 22px rgba(61, 224, 255, 0.55),
      0 0 36px rgba(61, 224, 255, 0.3);
    letter-spacing: 0.06em;
  }
}

@keyframes task-panels-text-gold {
  0%, 100% {
    color: rgba(122, 136, 153, 0.85);
    text-shadow: 0 0 0 transparent;
    letter-spacing: 0.04em;
  }
  40%, 55% {
    color: #ffd76a;
    text-shadow:
      0 0 4px rgba(232, 184, 74, 0.95),
      0 0 12px rgba(232, 184, 74, 0.8),
      0 0 22px rgba(232, 184, 74, 0.5),
      0 0 36px rgba(232, 184, 74, 0.28);
    letter-spacing: 0.06em;
  }
}

/* needs_promotion → Specs label only (static — no pulse; pulse fought hover + felt like collapse) */
.task-panels__toggle--attn-specs {
  color: #7af0ff;
  text-shadow: 0 0 10px rgba(61, 224, 255, 0.55);
  font-weight: 700;
}

/* SMOKE TEST → Checklist label only (static gold) */
.task-panels__toggle--attn-check {
  color: #ffd76a;
  text-shadow: 0 0 10px rgba(232, 184, 74, 0.5);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .task-panels__toggle--attn-specs {
    color: #7af0ff;
    text-shadow: 0 0 10px rgba(61, 224, 255, 0.7);
    font-weight: 700;
  }
  .task-panels__toggle--attn-check {
    color: #ffd76a;
    text-shadow: 0 0 10px rgba(232, 184, 74, 0.65);
    font-weight: 700;
  }
}

.task-panels__list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.task-panels__list--check {
  list-style: none;
  padding-left: 0;
}

.task-panels__list--check li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.task-panels__list--check li.is-done {
  opacity: 0.72;
}

.task-panels__list--check li.is-done .task-panels__check-text {
  text-decoration: line-through;
  color: var(--text-muted, #7a8899);
}

.task-panels__check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  cursor: pointer;
  width: 100%;
  min-width: 0;
}

.task-panels__check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0.12rem 0 0;
  border: 1px solid rgba(61, 224, 255, 0.55);
  border-radius: 3px;
  background: rgba(0, 20, 40, 0.65);
  cursor: pointer;
  position: relative;
}

.task-panels__check:hover {
  border-color: var(--hud-cyan, #3de0ff);
  box-shadow: 0 0 8px rgba(61, 224, 255, 0.25);
}

.task-panels__check:focus-visible {
  outline: 2px solid var(--hud-cyan, #3de0ff);
  outline-offset: 2px;
}

.task-panels__check:checked {
  background: rgba(61, 224, 255, 0.2);
  border-color: var(--hud-cyan, #3de0ff);
}

.task-panels__check:checked::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.05rem;
  width: 0.28rem;
  height: 0.52rem;
  border: solid var(--hud-cyan, #3de0ff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.task-panels__check-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.task-panels__box {
  font-family: var(--font-mono);
  flex-shrink: 0;
  color: var(--hud-cyan, #3de0ff);
}

.task-panels__kind {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hud-gold, #e8b84a);
  margin-left: 0.25rem;
}

.task-panels__empty {
  margin: 0;
  color: var(--text-muted, #7a8899);
  font-style: italic;
}

.task-panels__smoke-sum {
  margin: 0.45rem 0 0;
  color: var(--text-secondary, #b0bec5);
}

.task-panels__kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hud-gold, #e8b84a);
  margin-right: 0.35rem;
}

.task-panels__link-row {
  margin: 0.5rem 0 0;
}

.task-panels__link {
  color: var(--hud-cyan, #3de0ff);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.task-panels__link:hover {
  text-decoration: underline;
}

.task-panels__agent-hint {
  margin: 0.35rem 0 0;
  font-size: 0.65rem;
  color: var(--text-muted, #7a8899);
  font-family: var(--font-mono);
}

.task-panels__agent-hint code {
  color: var(--text-secondary, #b0bec5);
  font-size: inherit;
}

.task-panels__actions {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.task-panels__copy {
  appearance: none;
  border: 1px solid rgba(61, 224, 255, 0.35);
  background: rgba(61, 224, 255, 0.08);
  color: var(--hud-cyan, #3de0ff);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
}

.task-panels__copy:hover {
  background: rgba(61, 224, 255, 0.16);
  border-color: rgba(61, 224, 255, 0.55);
}

/* Row 1 reads as one band: handle, checkbox, identity, actions on a shared centre line. */
body[data-card-layout="v2"] .task-item.task-card > .drag-handle,
body[data-card-layout="v2"] .task-item.task-card > .task-check-group,
body[data-card-layout="v2"] .task-item.task-card .task-head {
  align-self: center;
  margin-top: 0;
}

body[data-card-layout="v2"] .task-item.task-card .task-head,
body[data-card-layout="v2"] .task-item.task-card .task-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-element);
  min-width: 0;
}

body[data-card-layout="v2"] .task-item.task-card .task-ident {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-element);
  min-width: 0;
}

/* Row 2 carries the single divider — it spans ident + actions, so no seam. */
body[data-card-layout="v2"] .task-item.task-card .task-text {
  margin: 0;
  padding-bottom: var(--gap-tight);
  border-bottom: 1px solid var(--border-subtle);
}

body[data-card-layout="v2"] .task-item.task-card .task-meta,
body[data-card-layout="v2"] .task-item.task-card .task-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-micro);
  margin: 0;
  padding: 0;
  border-top: 0;
  overflow: visible;
}

body[data-card-layout="v2"] .task-item.task-card .task-state {
  justify-content: flex-end;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

body[data-card-layout="v2"] .task-item.task-card .task-footer {
  position: relative;
  z-index: 4;
  overflow: visible;
}

body[data-card-layout="v2"] .task-item.task-card .task-status--on-hold {
  position: relative;
  z-index: 6;
  cursor: help !important;
}

body[data-card-layout="v2"] .task-item.task-card .task-text {
  cursor: default;
}

body[data-card-layout="v2"] .task-item.task-card .task-panels-stack,
body[data-card-layout="v2"] .task-item.task-card .smoke-note {
  position: relative;
  z-index: 1;
}

/* In the state row this sits beside "Created ~", so label it or the two
   bare timestamps read as the same kind of thing. */
body[data-card-layout="v2"] .task-item.task-card .completed-at {
  font-size: var(--type-caption);
  white-space: nowrap;
}

body[data-card-layout="v2"] .task-item.task-card .completed-at::before {
  content: 'Done: ';
  opacity: 0.75;
}

/* Chip tier 3 — data, not badges: ID, Due, Created, claim/park stamps. */
body[data-card-layout="v2"] .task-item.task-card .task-id,
body[data-card-layout="v2"] .task-item.task-card .deadline-label,
body[data-card-layout="v2"] .task-item.task-card .task-timeline,
body[data-card-layout="v2"] .task-item.task-card .task-status-time {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: var(--line-tight);
  white-space: nowrap;
}

body[data-card-layout="v2"] .task-item.task-card .task-id,
body[data-card-layout="v2"] .task-item.task-card .task-timeline {
  color: var(--text-muted);
}

/* Due is set first on intake, so it reads first on the card. */
body[data-card-layout="v2"] .task-item.task-card .deadline-label {
  color: var(--text-secondary);
}

body[data-card-layout="v2"] .task-item.task-card .deadline-label.overdue {
  color: var(--danger);
  font-weight: 500;
}

/* Chip tiers 1 + 2 — one height for every badge on the card. */
body[data-card-layout="v2"] .task-item.task-card .priority-badge,
body[data-card-layout="v2"] .task-item.task-card .task-tag,
body[data-card-layout="v2"] .task-item.task-card .task-status {
  min-height: 22px;
  height: 22px;
  line-height: var(--line-tight);
  box-sizing: border-box;
}

body[data-card-layout="v2"] .task-item.task-card .task-actions {
  flex: 0 0 auto;
  gap: var(--gap-micro);
  margin: 0;
  padding: 0;
  border-top: 0;
}

body[data-card-layout="v2"] .task-item.task-card .btn-edit,
body[data-card-layout="v2"] .task-item.task-card .btn-delete {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
}

/* The edit form replaces the card body wholesale — opt it out of the grid. */
body[data-card-layout="v2"] .task-item.task-card.is-editing {
  display: block;
}

@media (max-width: 700px) {
  body[data-card-layout="v2"] .task-item.task-card .task-footer {
    flex-wrap: wrap;
    row-gap: var(--gap-tight);
  }

  /* The ident chips wrap to 2-3 lines here; keep the buttons in the corner
     rather than letting them centre against a tall header. */
  body[data-card-layout="v2"] .task-item.task-card .task-head {
    align-items: flex-start;
  }

  body[data-card-layout="v2"] .task-item.task-card .task-state {
    justify-content: flex-start;
  }
}