/* tasks.css — task pages and the task catalog.
   Pairs with tokens.css, base.css, and explore.css (linked before this file).
   Task articles and the catalog use the same 60rem width as the top bar.
   Square controls, one accent, open sections, and hairline table rows. */

.task-page {
  max-width: 60rem;
  margin-inline: auto;
  padding: 48px 24px 72px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
}
.task-page h1 {
  max-width: 22ch;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0 0 0.4em;
}
.task-page h2 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.28rem;
  margin: 2.4em 0 0.8em;
  padding-bottom: 0.45em;
}
.task-page h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  margin: 1.6em 0 0.55em;
}
.task-page .lede {
  max-width: 52rem;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 2em;
}
.article-section,
.article-references,
.article-related,
.article-source-status,
.task-about {
  scroll-margin-top: 5rem;
}
.article-section > p,
.article-section > ul,
.article-section > ol,
.article-section > blockquote {
  max-width: none;
}
.article-preamble {
  margin-bottom: 2.2rem;
}
.article-preamble > p:first-child {
  font-size: 1.06em;
}
.article-section h2,
.article-references h2,
.article-related h2,
.article-source-status h2,
.task-about h2 {
  border-bottom: 1px solid var(--rule);
}
.article-section code,
.article-source-status code,
.task-about code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
.article-section pre,
.task-about pre {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--bg-subtle);
}
.article-section blockquote {
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-subtle);
}
.article-section blockquote p {
  margin: 0;
}
.citation {
  white-space: nowrap;
}
.article-table-wrap {
  margin: 1.5rem 0 1.8rem;
  overflow-x: auto;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.91em;
  font-variant-numeric: tabular-nums;
}
.article-table th,
.article-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.article-table th {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}
.article-table tbody tr:last-child td {
  border-bottom: 0;
}
.article-figure {
  margin: 2rem 0;
}
.article-figure img {
  display: block;
  width: 100%;
  max-height: 34rem;
  object-fit: contain;
  border: 1px solid var(--rule);
  background: var(--bg-subtle);
}
.article-figure figcaption {
  max-width: 48rem;
  margin-top: 0.55rem;
  color: var(--text-muted);
  font-size: 0.84em;
  line-height: 1.45;
}
.figure-credit {
  display: block;
}
.article-source-status {
  margin-top: 2.5rem;
  padding: 0.1rem 1rem 0.5rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-subtle);
}
.article-source-status h2 {
  margin-top: 0.8rem;
}
.reference-list {
  max-width: 52rem;
  padding-left: 1.4rem;
}
.reference-list li {
  padding: 0.45rem 0 0.7rem 0.25rem;
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
}
.reference-list cite {
  font-style: italic;
}
.task-about {
  margin-top: 3.5rem;
  padding-top: 0.25rem;
  border-top: 2px solid var(--rule-strong);
}
.candidate-status {
  max-width: 48rem;
  color: var(--text-muted);
}
.task-page section > p,
.task-page section > ul {
  max-width: none;
}
.task-page ul {
  padding-left: 1.25em;
}
.task-page li {
  margin: 0 0 0.55em;
}
.task-page .eyebrow,
.topbar .brand,
.topnav a {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.task-page a:focus-visible,
.task-footer a:focus-visible,
.topbar a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.task-equation {
  margin: 1.6em 0 1.8em;
  padding: 1.15em 0;
  overflow-x: auto;
  color: var(--text-strong);
}
.task-equation > div {
  min-width: max-content;
  font-size: 1.08em;
}
.task-page mjx-container {
  color: var(--text-strong);
}
.task-equation mjx-container[display="true"] {
  margin: 0.35em 0 0.7em;
  text-align: center;
}
.task-equation figcaption {
  max-width: 52rem;
  margin-top: 0.7em;
  color: var(--text-muted);
  font-size: 0.88em;
}

.task-statement {
  white-space: pre-wrap;
  font-size: 0.88em;
  line-height: 1.6;
}

.task-facts {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  gap: 8px 24px;
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}
.task-facts dt {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 3px;
}
.task-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ref-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}
.ref-list li {
  border-top: 1px solid var(--rule);
  padding: 6px 0;
}
.ref-list li:last-child {
  border-bottom: 1px solid var(--rule);
}
.ref-use {
  display: block;
  color: var(--text-muted);
  font-size: 0.9em;
}

.pilot-table,
.catalog-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.pilot-table th,
.pilot-table td,
.catalog-table th,
.catalog-table td {
  text-align: left;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.pilot-table thead th,
.catalog-table thead th {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--rule-strong);
  font-weight: 600;
}
.pilot-table th[scope="row"] {
  font-weight: 600;
  color: var(--text-strong);
}
.pilot-table {
  font-size: 0.9em;
}
.catalog-table td.mono {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.82em;
  color: var(--text-muted);
}
.catalog-table td:first-child a {
  font-weight: 600;
}

.task-page .catalog-section h2 .count {
  font-weight: 400;
  color: var(--text-muted);
}
.catalog-controls {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin: 8px 0 24px;
}
.catalog-controls label {
  display: grid;
  gap: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-muted);
}
.catalog-controls input {
  font: inherit;
  font-size: 14px;
  text-transform: none;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 0.4em 0.6em;
  min-width: 16rem;
}
.catalog-controls input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.catalog-controls .note {
  margin: 0 0 0.5em;
}

.task-footer {
  max-width: 60rem;
  margin-inline: auto;
  padding: 16px 24px 40px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
}
.task-footer a {
  border-bottom: 0;
}
.task-footer a:hover {
  color: var(--accent);
}

/* The explorer row control that opens a task page. A small square link,
   sized to its text, that sits after the task name. */
.task-more {
  display: inline-block;
  margin-left: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-strong);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 1px 6px;
  line-height: 1.5;
  vertical-align: 2px;
  white-space: nowrap;
}
.task-more:hover {
  background: var(--bg-subtle);
  border-color: var(--accent);
  color: var(--text-strong);
}
.task-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.task-catalog-link {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .task-page {
    padding: 24px 14px 48px;
    font-size: 16px;
    line-height: 1.58;
  }
  .task-page h1 {
    font-size: 2rem;
  }
  .task-page h2 {
    margin-top: 2em;
  }
  .task-page .lede {
    font-size: 1.08rem;
  }
  .task-equation {
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .article-table-wrap {
    margin-inline: -14px;
  }
  .article-table th,
  .article-table td {
    padding: 0.5rem 0.65rem;
  }
  .article-source-status {
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .task-facts {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .task-facts dd {
    margin-bottom: 8px;
  }
  .catalog-table thead {
    display: none;
  }
  .catalog-table tr {
    display: grid;
    grid-template-columns: 1fr;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule);
  }
  .catalog-table td {
    border: 0;
    padding: 1px 0;
  }
  .catalog-controls input {
    min-width: 0;
    width: 100%;
  }
  .task-more {
    margin-left: 8px;
    margin-top: 4px;
  }
}