/* ============================================================================
   Vibe Dashboard v2 — Tasks screen
   Ported from _specs/dashboard-v2-ref.vibe/Vibe Dashboard.dc.html
   (data-screen-label="Tasks"). Presentation only — every flow (expand/
   collapse, tweet/video verify, education bridge, error-report modal) lives
   in src/dashboard/tasks.jsx untouched. dashboard.html links this file after
   styles/dashboard.css, so these rules win on the shared .task-* classnames
   without editing that file.
   ============================================================================ */

.view-tasks { display: flex; flex-direction: column; gap: 18px; }

/* ---- page head ---- */
.tasks-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.tasks-page-title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.6px; color: var(--v-text); }
.tasks-page-sub { margin: 5px 0 0; font-size: 14.5px; color: var(--v-text-2); }
.tasks-page-count {
  flex-shrink: 0;
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-text-2);
  font-variant-numeric: tabular-nums;
}
.tasks-page-count.is-done { color: var(--v-green); }

/* ---- progress hero ---- */
.tasks-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid var(--v-border);
  background: var(--v-surface);
  border-radius: var(--v-r-card);
}
.tasks-hero.is-done {
  border-color: color-mix(in srgb, var(--v-green) 22%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--v-green) 6%, transparent), var(--v-surface) 60%);
}
.tasks-hero-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tasks-hero-kicker { font-family: var(--v-font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--v-text-2); }
.tasks-hero.is-done .tasks-hero-kicker { color: var(--v-green); }
.tasks-hero-copy h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--v-text); }
.tasks-hero-copy p { margin: 0; font-size: 13.5px; color: var(--v-text-2); }
.tasks-hero-copy p strong { color: var(--v-text); font-weight: 600; }
.tasks-hero-copy p span { color: var(--v-link); font-weight: 600; font-variant-numeric: tabular-nums; }
/* D28: the mock renders "All complete · …" flat, in the paragraph grey. */
.tasks-hero-copy p .tasks-all-done { color: inherit; font-weight: inherit; }
.tasks-progress-bar {
  height: 6px;
  margin-top: 4px;
  max-width: 420px;
  border-radius: var(--v-r-pill);
  background: var(--v-border); /* token gap: no dedicated progress-track-bg token; --v-border is the exact rgba(255,255,255,.07) match */
  overflow: hidden;
}
.tasks-progress-bar-fill {
  height: 100%;
  border-radius: var(--v-r-pill);
  background: linear-gradient(90deg, var(--v-green-deep), var(--v-green));
  transition: width .5s cubic-bezier(.3, .8, .3, 1);
}
.tasks-hero-progress { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tasks-progress-count { font-size: 38px; font-weight: 700; line-height: 1; color: var(--v-text); font-variant-numeric: tabular-nums; }
.tasks-progress-count small { font-size: 20px; font-weight: 600; color: var(--v-text-2); }
.tasks-progress-label { font-size: 12px; color: var(--v-text-2); }

/* ---- task list ---- */
.task-stepper { display: flex; flex-direction: column; gap: 18px; }

/* Horizontal layout: node on the left, header/desc/done-state stacked in a
   content column on the right — matches the v4 mock's `display:flex; gap:16px`
   card with a `flex:1; flex-direction:column` content child. */
.task-card { display: flex; gap: 16px; padding: 20px 22px; border: 1px solid var(--v-border); background: var(--v-surface); border-radius: var(--v-r-card); transition: border-color .2s; }
.task-card::before { display: none; } /* retire legacy pink/green left accent bar */
.task-card.current { border-color: var(--v-border-blue); }
/* Match the reference 1:1: a done card is visually identical to a plain card —
   normal surface + neutral border. Only the check node goes green. Override the
   legacy green border + green-gradient body from dashboard.css. */
.task-card.done { border-color: var(--v-border); background: var(--v-surface); }

/* No flex `gap` here: task-collapse animates open/closed via grid-template-rows
   (must stay 0-height when collapsed) — a parent gap would add stray space in
   that state. Children carry their own top margins instead (task-desc,
   task-body, task-done-banner). */
.task-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.task-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.task-node {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--v-r-pill);
  border: 1px solid var(--v-border);
  background: var(--v-inset);
  color: var(--v-text-2);
  font-family: var(--v-font-mono);
  font-size: 12px;
  font-weight: 600;
}
.task-card.current .task-node { color: var(--v-link); border-color: var(--v-border-blue); background: var(--v-blue-tint); }
.task-card.done .task-node { color: var(--v-green); border-color: color-mix(in srgb, var(--v-green) 40%, transparent); background: color-mix(in srgb, var(--v-green) 14%, transparent); }
.task-node svg { display: block; }

.task-card-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.task-kicker { font-family: var(--v-font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-text-2); }
/* Reference keeps the kicker gray on done cards — override legacy's green
   (.task-card.done .task-kicker in dashboard.css). Equal specificity, later file wins. */
.task-card.done .task-kicker { color: var(--v-text-2); }
.task-title { font-size: 16px; font-weight: 600; color: var(--v-text); }

.task-rewards { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; gap: 7px; flex-wrap: nowrap; justify-content: flex-end; } /* flex-direction:row overrides legacy dashboard.css column stacking */
/* Reward pill metrics match the reference exactly — bigger + squarer than the
   shared .v2-badge default, so override per-instance rather than touch the
   shared shell rule other screens rely on. */
.task-rewards .v2-badge { font-size: 11.5px; font-weight: 500; letter-spacing: 0; padding: 4px 9px; border-radius: 6px; }

.task-chevron {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0; /* kill legacy dashboard.css chevron box (bg + border) — reference chevron is bare */
  background: transparent;
  border-radius: var(--v-r-icon);
  color: var(--v-text-3);
  transition: transform .25s cubic-bezier(.3, .8, .3, 1), color .15s;
}
.task-card-row:hover .task-chevron { color: var(--v-text-2); }
.task-card-row:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }
.task-card-row:disabled { cursor: default; }
.task-card.collapsed .task-chevron { transform: rotate(-90deg); }

/* F5 / D6: a done task is a flat card (kicker, title, reward pills,
   description, completion note — never collapsed). An incomplete task keeps
   the accordion: the row shows kicker, title, reward pills; the description and
   the CTA live inside .task-collapse below it. */
/* D29: full width — also resets legacy dashboard.css `.task-desc { max-width: 58ch }`. */
.task-desc { margin: 8px 0 0; max-width: none; font-size: 13.5px; line-height: 1.55; color: var(--v-text-2); }
.task-collapse { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s cubic-bezier(.3, .8, .3, 1), opacity .2s ease; }
.task-card.collapsed .task-collapse { grid-template-rows: 0fr; opacity: 0; }
.task-card-inner { overflow: hidden; }

.task-body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.task-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.task-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--v-btn-h);
  padding: 0 18px;
  border: none;
  border-radius: var(--v-r-btn);
  background: var(--v-blue);
  color: var(--v-text);
  font-family: var(--v-font-nav);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none; /* kill legacy pink glow (dashboard.css .task-action-btn) */
}
.task-action-btn:hover { background: var(--v-blue-hover); box-shadow: none; transform: none; }
.task-action-btn:focus-visible { outline: 2px solid var(--v-text); outline-offset: 2px; }
.task-action-btn.ghost { border: 1px solid var(--v-border-blue); background: transparent; color: var(--v-link); }
.task-action-btn.ghost:hover { background: var(--v-blue-tint); border-color: var(--v-blue); }

.task-sync-note { font-size: 12.5px; color: var(--v-text-2); line-height: 1.5; }
.task-err { font-size: 13px; font-weight: 600; color: var(--v-amber); }

.task-done-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--v-border-soft);
  font-size: 12.5px;
  color: var(--v-text-table);
}
.task-done-check { display: inline-flex; flex-shrink: 0; color: var(--v-green); }
.task-done-check svg { display: block; }
.task-done-label { min-width: 0; }
/* D30: proportional date — overrides legacy dashboard.css mono. */
.task-done-when { margin-left: auto; font-family: var(--v-font); font-size: 12px; color: var(--v-text-3); white-space: nowrap; }

/* Completed-card "revisit" affordance — a compact refresh-icon pill that sits
   inline at the end of the done-banner row (right of the timestamp), matching
   the reference. Distinct from the big .task-action-btn primary CTA used on
   incomplete tasks. */
.task-revisit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--v-border-blue);
  border-radius: var(--v-r-btn);
  background: transparent;
  color: var(--v-link);
  font-family: var(--v-font-nav);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.task-revisit-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.task-revisit-btn:hover { background: var(--v-blue-tint); border-color: var(--v-blue); color: var(--v-link-hover); }
.task-revisit-btn:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }

.task-verify-row { display: flex; gap: 10px; flex-wrap: wrap; max-width: 640px; }
.task-verify-input {
  flex: 1 1 280px;
  min-width: 0;
  height: var(--v-btn-h);
  padding: 0 14px;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-btn);
  outline: none;
  background: var(--v-input);
  color: var(--v-text);
  font-family: var(--v-font-mono);
  font-size: 13px;
  box-sizing: border-box;
}
.task-verify-input:focus { border-color: var(--v-border-blue); background: var(--v-input-focus); }
.task-verify-input:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }
.task-verify-input::placeholder { color: var(--v-text-3); }
.task-verify-btn {
  flex-shrink: 0;
  height: var(--v-btn-h);
  padding: 0 18px;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-btn);
  background: var(--v-disabled);
  color: var(--v-text-3);
  font-family: var(--v-font-nav);
  font-size: 13.5px;
  font-weight: 600;
  cursor: not-allowed;
}
.task-verify-btn.ready { border-color: transparent; background: var(--v-blue); color: var(--v-text); cursor: pointer; }
.task-verify-btn.ready:hover { background: var(--v-blue-hover); }
.task-verify-btn.ready:focus-visible { outline: 2px solid var(--v-text); outline-offset: 2px; }

/* S8: the tasks footnote is the shared PointsDisclaimer (ui.jsx, .v2-disclaimer in v2-shell.css). */

/* ---- error-report / report modal ---- */
.error-report { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--v-border-amber); color: var(--v-text-2); font-size: 12.5px; line-height: 1.5; }
.error-report-row { margin-top: 4px; }
.error-report code { color: var(--v-text); background: var(--v-border-soft); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
.error-report-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.error-report-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--v-btn-h);
  padding: 0 18px;
  border-radius: var(--v-r-btn);
  background: var(--v-blue);
  color: var(--v-text);
  border: 0;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--v-font-nav);
  text-decoration: none;
  cursor: pointer;
}
.error-report-primary:hover { background: var(--v-blue-hover); }
.error-report-primary:focus-visible { outline: 2px solid var(--v-text); outline-offset: 2px; }
.error-report-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--v-btn-h);
  padding: 0 16px;
  border-radius: var(--v-r-btn);
  border: 1px solid var(--v-border-blue);
  background: transparent;
  color: var(--v-link);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.error-report-secondary:hover { background: var(--v-blue-tint); }
.error-report-secondary:disabled { opacity: .5; cursor: not-allowed; }
.error-report-secondary:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }
.error-report-box {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: var(--v-r-btn);
  border: 1px solid var(--v-border);
  background: var(--v-elevated);
  color: var(--v-text);
  font: 11.5px/1.45 var(--v-font-mono);
  resize: vertical;
  box-sizing: border-box;
}

.report-modal-overlay { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 22px; background: color-mix(in srgb, var(--v-bg-deep) 72%, transparent); /* token gap: no scrim token, --v-bg-deep is nearest to rgba(3,7,18,.72) */ backdrop-filter: blur(10px); }
.report-modal { position: relative; width: min(460px, 94vw); padding: 24px; border-radius: var(--v-r-card); border: 1px solid var(--v-border); background: var(--v-surface); box-shadow: 0 26px 80px color-mix(in srgb, var(--v-bg-deep) 48%, transparent); /* token gap: no pure-black shadow token */ }
.report-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-icon);
  background: var(--v-elevated);
  color: var(--v-text-2);
  font: inherit;
  cursor: pointer;
}
.report-modal-x:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }
.report-modal-kicker { font-family: var(--v-font-mono); color: var(--v-link); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.report-modal h3 { margin: 8px 34px 8px 0; color: var(--v-text); font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.report-modal p { margin: 0; color: var(--v-text-2); font-size: 13.5px; line-height: 1.5; }
.field-label { display: block; margin-top: 14px; font-size: 12.5px; color: var(--v-text-2); }
.report-message-box { margin-top: 8px !important; min-height: 88px; }
.report-choice-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.report-modal-ok, .report-modal-error { margin-top: 12px; padding: 10px 12px; border-radius: var(--v-r-btn); font-size: 12.5px; font-weight: 600; }
.report-modal-ok { border: 1px solid color-mix(in srgb, var(--v-green) 34%, transparent); background: var(--v-green-tint); color: var(--v-green); }
.report-modal-error { border: 1px solid var(--v-border-amber); background: var(--v-amber-tint); color: var(--v-amber); }

/* ---- mobile (≤760px) — operator ruling "full mobile": the Tasks body keeps
   its desktop mock metrics at 390px. No shrink rules here by design. ---- */
@media (max-width: 760px) {
  /* P-TK-3: the hero keeps its desktop row at 390 — copy left, count block
     right-aligned on the right (base rules already mock-exact). */
  /* P-TK-4: task cards keep desktop pad 20/22, gap 16, 28px node (base). */
  /* P-TK-5: reward pills wrap to their own left-aligned row under the title
     instead of pinning right beside it. */
  .task-rewards { flex-wrap: wrap; justify-content: flex-start; }
  /* P-TK-6: the Revisit / Post again / Rewatch pill drops to its own
     full-width line under the ✓ + label + date banner row, so the label
     never crushes. */
  .task-done-banner { flex-wrap: wrap; row-gap: 10px; }
  .task-done-banner .task-revisit-btn { flex: 1 1 100%; justify-content: center; }
  /* P-TK-7: open-task states keep desktop card metrics (P-TK-4) + 14px CTA
     (base .task-action-btn) — nothing further to shrink. */
}