/* Tasks page - mirrors the prof's whiteboard:
   AgiMo → A/B/C → projects on top, tasks below, bridges drawn between
   tasks and the projects they apply to. */

.tasks-hierarchy-panel {
  padding: 26px 26px 32px;
}

/* ---------- stat strip ---------- */

.tasks-stat-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.tasks-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.tasks-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1;
}

.tasks-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 700;
}

/* ---------- board: container for tree + bridges + task list ---------- */

.tasks-board {
  position: relative;
}

/* Everything above the board base in the z-stack so chips/cards receive
   pointer events, but the bridge paths still appear visually behind
   them via stroke-opacity. */
.tasks-tree,
.tasks-board-tasks {
  position: relative;
  z-index: 2;
}

/* ---------- AgiMo root + areas ---------- */

.tasks-tree {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 24px;
}

.tasks-tree-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.tasks-tree-root-pill {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #111827, #1e3a8a 56%, #312e81);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 9px 24px;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(15, 23, 42, 0.18);
}

.tasks-tree-root-line {
  width: 1.5px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.05));
}

/* Tree connector below the AgiMo CRC pill: a centered trunk drops down
   and meets a horizontal spine spanning the centers of the outer area
   columns, so all three area cards visually hang from the same trunk.
   The vertical drop into each card is the existing .tasks-tree-area::before. */
.tasks-tree-connector {
  position: relative;
  width: 100%;
  height: 22px;
}

.tasks-tree-connector-trunk {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.22));
}

.tasks-tree-connector-spine {
  position: absolute;
  bottom: 0;
  /* gap between .tasks-tree-areas grid columns is 16px → 32px total.
     Center of the first/last column sits at (100% - 32px)/6 from the edge. */
  left: calc((100% - 32px) / 6);
  right: calc((100% - 32px) / 6);
  height: 1.5px;
  background: rgba(15, 23, 42, 0.28);
}

.tasks-tree-areas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.tasks-tree-area {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 18px;
  background: linear-gradient(180deg, #ffffff, #fafbfd);
  position: relative;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--t-base, 0.22s) var(--ease-out, ease),
              border-color var(--t-base, 0.22s) var(--ease-out, ease);
}

.tasks-tree-area:hover {
  box-shadow: var(--shadow);
  border-color: rgba(203, 213, 225, 0.95);
}

.tasks-tree-area::before {
  /* small connecting tick from the trunk line to each area card */
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 10px;
  background: rgba(15, 23, 42, 0.18);
}

.tasks-tree-area-head {
  --area-color: var(--blue);
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--area-color);
  margin-bottom: 12px;
}

.tasks-tree-area-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--area-color);
  letter-spacing: -0.01em;
}

.tasks-tree-area-name {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.tasks-tree-projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 8px;
}

.tasks-tree-chip {
  --chip-color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--chip-color);
  color: white;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tasks-tree-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}

/* Highlight state during hover on a task */
.tasks-tree-chip.is-bridged {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.28);
  border-color: white;
}

.tasks-tree-chip.is-faded {
  opacity: 0.28;
}

.tasks-tree-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- tasks list ---------- */

.tasks-board-tasks-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 8px 0 14px;
  flex-wrap: wrap;
}

.tasks-board-tasks-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ---------- dropdown filter bar ---------- */

.tasks-filter-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.tasks-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tasks-filter-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  font-family: var(--font-display, "Inter", sans-serif);
}

.tasks-filter-select {
  font-family: inherit;
  font-size: 13.5px;
  color: #0f172a;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.tasks-filter-select:focus {
  outline: 2px solid #94a3b8;
  outline-offset: 1px;
}

.tasks-filter-count {
  font-size: 12.5px;
  color: #64748b;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

.tasks-filter-reset {
  margin-left: auto;
  font-family: inherit;
  font-size: 12.5px;
  color: #475569;
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}
.tasks-filter-reset:hover { background: #e2e8f0; }

/* Hidden by the dropdown filter. */
.task-row.is-filtered-out { display: none; }
/* Section headers ("Working drafts") don't reflect a filtered subset. */
.tasks-board.is-filtering .task-section-header { display: none; }

.tasks-board-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}

/* Section headers split the list into "Working drafts" and "Scope
   examples" in the default view. They hide when the pin filter is
   active (since the pinned reorder spans both sections). */
.task-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 2px;
  margin-top: 8px;
  border-bottom: 1px solid #e2e8f0;
  font-family: var(--font-display, "Space Grotesk", "Inter", sans-serif);
}
.task-section-header:first-child {
  margin-top: 0;
}
.task-section-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.task-section-header-meta {
  font-size: 12.5px;
  color: #64748b;
  font-family: var(--font-display, "Inter", sans-serif);
}
.task-section-header--example .task-section-header-title { color: #92400e; }
.tasks-board.is-pinned .task-section-header { display: none; }

.task-row {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color var(--t-base, 0.22s) var(--ease-out, ease),
              box-shadow var(--t-base, 0.22s) var(--ease-out, ease),
              transform var(--t-base, 0.22s) var(--ease-out, ease);
}

.task-row:hover {
  border-color: #cbd5e1;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 14px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

/* Whole-card click affordance: shows that anywhere on the card opens
   the task modal, not just the title text. Applied only to rows with
   a real prompt (placeholders aren't clickable). */
.task-row--clickable {
  cursor: pointer;
}
.task-row--clickable:hover .task-row-title-link {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}
.task-row--clickable:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Bridge anchor - invisible 1×1 point at the task row's top, where
   bridge curves end. JS reads its bounding rect. */
.task-row-anchor {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1px;
}

.task-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.task-row-title-wrap {
  flex: 1;
  min-width: 280px;
}

.task-row-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.3;
}

.task-row-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.task-row-title-link:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}

.task-row-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.task-row-projects {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* Hover state - the active task itself */
.task-row.is-active {
  border-color: #0f172a;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.task-row.is-faded {
  opacity: 0.42;
}

/* Example tasks get a small "Example" pill in the meta row and a
   slightly tinted background. No banner, no oversized markers - real
   tasks should read as the default and examples as a quiet variant. */
.task-pill-example {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.task-row--placeholder {
  background: #fffdf5;
}
.task-row--placeholder .task-row-title {
  color: #475569;
  font-weight: 500;
}

/* Pinned state: triggered by clicking a chip / row. Tasks matching the
   pinned project move up via DOM reorder AND keep full size; non-matching
   tasks collapse to a single thin line at low opacity so the user can
   see "ok, the other 20 are still here" without having to scroll past
   20 full-height cards. */
.tasks-board.is-pinned .task-row:not(.is-pinned-match) {
  opacity: 0.45;
  padding: 6px 14px;
  border-style: dotted;
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: none;
}
.tasks-board.is-pinned .task-row:not(.is-pinned-match) .task-row-head {
  align-items: center;
  gap: 8px;
}
.tasks-board.is-pinned .task-row:not(.is-pinned-match) .task-row-title {
  font-size: 13px;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tasks-board.is-pinned .task-row:not(.is-pinned-match) .task-row-meta,
.tasks-board.is-pinned .task-row:not(.is-pinned-match) .task-kind-banner {
  display: none;
}
.tasks-board.is-pinned .task-row:not(.is-pinned-match) .task-row-projects {
  gap: 4px;
}
.tasks-board.is-pinned .task-row:not(.is-pinned-match) .project-chip {
  font-size: 11px;
  padding: 1px 6px;
}
/* Subtle separator above the collapsed block so it visually reads as
   "everything below = not relevant to your pin". */
.tasks-board.is-pinned .task-row.is-pinned-match + .task-row:not(.is-pinned-match) {
  margin-top: 18px;
  border-top: 1px dashed #cbd5e1;
  padding-top: 12px;
}

.tasks-board.is-pinned .task-row.is-pinned-match {
  border-color: #0f172a;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  border-style: solid;
}
.tasks-tree-chip.is-pinned {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.3);
  outline: 2px solid #0f172a;
  outline-offset: 2px;
}
.tasks-board.is-pinned .tasks-tree-chip:not(.is-pinned):not(.is-bridged) {
  opacity: 0.4;
}

/* Hover suppression while pinned: don't let mouseover override the pin. */
.tasks-board.is-pinned .task-row:hover {
  transform: none;
  box-shadow: none;
}
.tasks-board.is-pinned .task-row.is-pinned-match:hover {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.tasks-clear-pin {
  display: none;
  margin-left: auto;
  font-size: 12.5px;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}
.tasks-clear-pin:hover { background: #e2e8f0; }
.tasks-board.is-pinned ~ .tasks-clear-pin,
.tasks-board.is-pinned .tasks-clear-pin {
  display: inline-flex;
}

@media (max-width: 980px) {
  .tasks-tree-areas {
    grid-template-columns: 1fr;
  }
  .tasks-stat-row { gap: 12px; }
  .tasks-stat-value { font-size: 22px; }
  /* Horizontal spine is meaningless when areas stack vertically. */
  .tasks-tree-connector-spine { display: none; }
  .tasks-tree-area::before { display: none; }
}

/* Inline tip that explains the click-to-pin interaction. The hierarchy
   tree alone doesn't telegraph that chips are clickable, so this sits
   right between the tree and the task list where the user's eye lands. */
.tasks-tree-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(99, 102, 241, 0.06));
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #1e3a8a;
  position: relative;
  z-index: 2;
}

.tasks-tree-hint.is-hidden { display: none; }

.tasks-tree-hint-arrow {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
  font-weight: 700;
  font-size: 13px;
}

.tasks-tree-hint kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

.tasks-tree-hint-dismiss {
  margin-left: auto;
  background: transparent;
  border: none;
  color: rgba(30, 58, 138, 0.6);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.tasks-tree-hint-dismiss:hover {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

/* Hierarchy section header - more breathing room between the title
   block and the right-aligned stat row so it doesn't read as one
   clumped run of text. */
.tasks-hierarchy-panel .section-heading {
  gap: 28px;
  margin-bottom: 26px;
}

.tasks-hierarchy-panel .section-heading > div:first-child {
  max-width: 56ch;
}

.tasks-hierarchy-panel .section-heading h2 {
  margin-bottom: 6px;
}

.tasks-hierarchy-panel .section-heading p.muted {
  line-height: 1.55;
}

/* ============================================================
   Tasks polish - additive only.
   ============================================================ */

/* Filter bar - subtle inner highlight + crisper focus. */
.tasks-filter-bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.tasks-filter-select {
  transition: border-color var(--t-fast, 0.15s) var(--ease-out, ease),
              box-shadow var(--t-fast, 0.15s) var(--ease-out, ease);
}

.tasks-filter-select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tasks-filter-reset {
  transition: background var(--t-fast, 0.15s) var(--ease-out, ease),
              border-color var(--t-fast, 0.15s) var(--ease-out, ease);
}

/* Hierarchy chip - subtle inner highlight so the colored chips read
   like glass tiles. */
.tasks-tree-chip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Soft pulse on a freshly pinned chip. CSS-only - tiny, single play. */
@keyframes pinned-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 23, 42, 0.25); }
  100% { box-shadow: 0 0 0 12px rgba(15, 23, 42, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .tasks-tree-chip.is-pinned {
    animation: pinned-pulse 0.55s var(--ease-out, ease) 1;
  }
}

/* Section header - tighter tracking for the meta text. */
.task-section-header-meta {
  letter-spacing: 0.01em;
}

/* Entrance animation - the hierarchy areas and task rows fade in. */
@media (prefers-reduced-motion: no-preference) {
  .tasks-tree-area,
  .task-row {
    animation: tasks-rise 0.5s var(--ease-out, ease) backwards;
  }
  .tasks-tree-areas .tasks-tree-area:nth-child(1) { animation-delay: 0.05s; }
  .tasks-tree-areas .tasks-tree-area:nth-child(2) { animation-delay: 0.12s; }
  .tasks-tree-areas .tasks-tree-area:nth-child(3) { animation-delay: 0.19s; }
  .tasks-board-list .task-row:nth-child(1)  { animation-delay: 0.10s; }
  .tasks-board-list .task-row:nth-child(2)  { animation-delay: 0.13s; }
  .tasks-board-list .task-row:nth-child(3)  { animation-delay: 0.16s; }
  .tasks-board-list .task-row:nth-child(4)  { animation-delay: 0.19s; }
  .tasks-board-list .task-row:nth-child(n+5) { animation-delay: 0.22s; }
}

@keyframes tasks-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}