/* SPDX-License-Identifier: Apache-2.0 */
.tasks-page { --fg: var(--ink); --muted: var(--ink-muted); --bg: var(--paper); background: var(--paper); color: var(--ink); max-width: var(--w-wide); margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.tasks-page h1 { font-size: var(--t-h1); line-height: 1.06; max-width: var(--w-read-display); overflow-wrap: anywhere; }
.tasks-page h2 { overflow-wrap: anywhere; }
.task-breadcrumb { margin: 0 0 1rem; }
.tasks-hero { padding: 1rem 0 2rem; border-bottom: 1px solid var(--rule); }
.tasks-hero .lede { max-width: var(--w-text); font-size: var(--t-lede); line-height: 1.5; }
.task-eyebrow { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.task-repo { color: var(--muted); font-family: var(--mono); font-size: var(--t-mono); overflow-wrap: anywhere; }
.task-description { line-height: 1.65; overflow-wrap: anywhere; }
.task-index-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; padding-top: 2rem; }
.task-index-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; min-width: 0; background: var(--paper-2); }
.task-index-card h2 { margin: .25rem 0 .5rem; font-size: var(--t-verdict); }
.task-index-card .task-description { flex-grow: 1; }
.task-jumps { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.5rem 0; }
.task-jumps a, .task-copy-actions button { border: 1px solid var(--rule); border-radius: var(--radius); padding: .65rem .9rem; min-height: var(--touch); overflow-wrap: anywhere; }
.task-jumps a { background: var(--paper-2); }
.task { border-top: 3px solid var(--accent-ink); padding-top: 2rem; margin: 3.5rem 0; scroll-margin-top: 2rem; }
.task-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .6rem 1.5rem; }
.task-heading .task-eyebrow, .task-heading .toc-anchor { grid-column: 1 / -1; margin-bottom: 0; }
.task-heading .toc-anchor { display: block; height: 0; }
.task-heading h2 { font-size: var(--t-h2); margin: 0; overflow-wrap: normal; }
.task-heading a { justify-self: end; }
.task-scope, .task-origin, .task-copy-note { color: var(--muted); font-size: var(--t-fine); }
.task-prompt-panel { margin: 1.5rem 0; padding: 1.5rem; background: var(--paper-2); border: 1px solid var(--rule); border-left: .3rem solid var(--accent-ink); border-radius: var(--radius); }
.task-prompt-panel h3 { margin-top: 0; }
.task-prompt-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--t-body); line-height: 1.8; padding: 0; border: 0; background: transparent; margin-bottom: 0; }
.task-guide { border: 1px solid var(--rule); padding: 1.2rem; border-radius: var(--radius); }
.task-guide summary { cursor: pointer; font-weight: 700; min-height: var(--touch); }
.task-guide [data-copy-source] { overflow-wrap: anywhere; line-height: 1.75; }
.task-guide [data-copy-source] span { display: block; margin: .65rem 0; }
.task-guide [data-copy-source] span:first-child { color: var(--muted); font-size: var(--t-fine); }
.task-try { margin: 2rem 0; padding: 0 0 1rem; }
.task-copy-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.task-copy-actions button { cursor: pointer; font: inherit; font-weight: 700; background: var(--ink); color: var(--bg); }
.task-status:empty { display: none; }
.task-status:not(:empty) { position: sticky; bottom: 1rem; top: 1rem; background: var(--bg); border: 1px solid var(--rule); padding: 1rem; z-index: 2; }
.task-report { border: 1px solid var(--rule); margin: 1rem 0; border-radius: var(--radius); }
.task-report summary { padding: 1.2rem; cursor: pointer; min-height: var(--touch); }
.task-report summary span { display: inline; }
.task-report summary span:last-child { display: block; font-size: var(--t-fine); color: var(--muted); margin-top: .3rem; }
.task-model { font-weight: 700; font-size: var(--t-lede); }
.task-report-body { padding: 0 1.2rem 1.2rem; overflow-wrap: anywhere; }
.task-comparison-label { font-weight: 700; margin-bottom: .4rem; }
.task-fake, .task-none { line-height: 1.75; }
.task-caveats { border-top: 1px solid var(--rule); padding: 1rem 0 0 1.2rem; font-size: var(--t-fine); line-height: 1.7; }
.task-caveats li { margin: .65rem 0; }
.task-links { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.task-links a { padding: .5rem 0; }
.task-qualification, .router-qualification, .handoff-note { border-left: 3px solid var(--accent-ink); padding-left: 1rem; }
.task-source { border-top: 1px solid var(--rule); padding-top: 2rem; }
.tasks-page :focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
@media (max-width: 600px) { .task-index-grid { grid-template-columns: 1fr; } .tasks-page { padding-inline: 1rem; } .task-prompt-panel { padding: 1rem; } .task-heading { grid-template-columns: 1fr; } .task-heading a { justify-self: start; } }

.tasks-page :is(h1, h2, h3, h4, pre) { color: var(--ink); }
.tasks-page a { color: var(--accent-ink); }

.page-grid > main.tasks-page { padding: 2rem; }
.tasks-page .lede { color: var(--ink-muted); }
.tasks-page .task-heading h2 { margin: 0; text-align: left; }
@media (max-width: 600px) { .page-grid > main.tasks-page { padding: 1rem; } }