/* Task pages (Ask, Verify, Watch): a persistent workspace and domain objects instead of a
   generic narrow page of sections. Loaded after styles.css and site.css; shell and navigation
   stay in site.css. Square corners, no shadows, gold only as a hint. */
.task-page { flex: 1; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 40px 0 96px; display: block; }
.task-intro { display: grid; justify-items: center; gap: 14px; max-width: 720px; margin: 0 auto; padding: 46px 0 42px; text-align: center; }
.task-eyebrow, .task-label { margin: 0; font: 600 var(--type-meta)/1.3 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.task-eyebrow { color: var(--accent); }
.task-intro h1 { margin: 0; font: 500 clamp(38px, 5vw, 62px)/1.08 var(--font-serif); letter-spacing: -0.02em; color: var(--text); }
.task-lede { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.55; color: var(--text-2); }

.task-bench-slot { display: block; }
.task-workbench { display: grid; gap: 16px; padding: 28px; background: var(--bg); border: 1px solid var(--border-strong); transition: border-color 140ms ease; }
.task-workbench:focus-within { border-color: var(--text-3); box-shadow: inset 0 -2px 0 var(--accent); }
.task-workbench textarea { min-height: 96px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 19px/1.55 var(--font-sans); resize: vertical; }
.task-workbench textarea::placeholder { color: var(--text-3); }
.task-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.task-foot-left { display: grid; gap: 6px; }
.task-hint { margin: 0; font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--text-3); }
.task-count { margin: 0; font: 400 12px/1.4 var(--font-mono); color: var(--status-warning); }
.task-foot-right { display: flex; align-items: center; gap: 20px; }
.task-submit { white-space: nowrap; }
.task-submit::after { content: ' →'; }

.task-output { display: grid; gap: 40px; margin-top: 40px; }
.task-output:empty { display: none; }
.task-state { display: grid; grid-template-columns: 8px 1fr; column-gap: 12px; row-gap: 5px; align-items: start; margin: 0; padding: 22px 0 8px; font: 600 12px/1.5 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.task-state-detail { grid-column: 2; font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--text-3); }
.task-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.task-state.is-failure .task-dot { background: var(--status-danger); }
.task-state.is-caution .task-dot { background: var(--status-warning); }
.task-state.is-working .task-dot { animation: task-pulse 1.2s ease-in-out infinite; }
@keyframes task-pulse { 50% { opacity: 0.35; } }







@media (prefers-reduced-motion: reduce) {
  .task-workbench { transition: none; }
  .task-state.is-working .task-dot { animation: none; }
}
@media (max-width: 720px) {
  .task-page { width: calc(100% - 32px); padding: 16px 0 72px; }
  .task-intro { padding: 28px 0 28px; }
  .task-workbench { padding: 20px; }
  .task-foot { align-items: stretch; flex-direction: column; }
  .task-foot-right { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .task-submit { width: 100%; }
}