/* Validation page and paper list: layout and tables only. Type and color come from landing.css. */

.doc { max-width: 760px; padding-top: 32px; padding-bottom: 64px; }
.doc p, .doc li, .doc dd, .doc td { overflow-wrap: anywhere; }
.doc h2 { margin: 40px 0 12px; }

.sub { display: block; font-size: .85em; }
.crumbs { margin: 0 0 12px; }
.prelim { padding: 8px 0 8px 12px; border-left: 3px solid currentColor; }
.scores dd { margin: 4px 0 12px; }

.fig { margin: 24px 0; }
.fig svg { width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.fig.wide svg { max-width: 600px; }
.fig figcaption { margin-top: 8px; font-size: .9em; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; }
caption { text-align: left; caption-side: top; padding-bottom: 8px; font-size: .9em; }
th, td { text-align: left; vertical-align: top; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
thead th { border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
tfoot td { border-bottom: 1px solid currentColor; }
.num { text-align: right; white-space: nowrap; }
td code { overflow-wrap: anywhere; }


.refs li { margin-bottom: 6px; }

/* Paper list */

.fields ul { columns: 3; }
@media (max-width: 600px) { .fields ul { columns: 1; } }

.fsec h2 { max-width: none; display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid currentColor; }
.fsec h2 img { width: 48px; height: 48px; flex: none; }

.paper { padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
.paper h3 { margin: 4px 0 2px; }
.paper .phead p { margin: 0; }
.paper em { font-style: normal; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; }
.pmeters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0; }
@media (max-width: 600px) { .pmeters { grid-template-columns: 1fr; } }
.pm .row { display: flex; justify-content: space-between; gap: 8px; }
.pm meter { display: block; width: 100%; height: 8px; margin-top: 4px; }
.pm .ans { font-size: .85em; }
.paper summary { cursor: pointer; }
.plinks { margin: 8px 0 0; }
b.ok, b.no { font-weight: 700; }
b.no { text-decoration: underline; }

@media (max-width: 700px) {
  .vtable thead, .totals thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vtable table, .vtable tbody, .vtable tr, .vtable td,
  .totals tbody, .totals tr, .totals td { display: block; width: 100%; }
  .vtable caption { display: block; }
  .vtable tr, .totals tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .vtable td, .totals td { border: 0; padding: 2px 0; text-align: left; white-space: normal; }
  .vtable td[data-label]::before, .totals td[data-label]::before { content: attr(data-label) ": "; }
}

@media (max-width: 600px) {
  table.data { font-size: .9em; }
  table.data th, table.data .num { white-space: normal; }
}

/* Paper list: use the full page width on wide screens */
.doc:has(.plist) { max-width: 1240px; }
.doc:has(.plist) > p, .doc:has(.plist) > .prelim, .doc:has(.plist) > .totals, .doc:has(.plist) > h1 { max-width: 820px; }
@media (min-width: 1000px) {
  .plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
  .fields ul { columns: 4; }
}
.fsec h2 img { filter: invert(1) hue-rotate(180deg) contrast(.92); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fsec h2 img { filter: none; } }
:root[data-theme="dark"] .fsec h2 img { filter: none; }

/* Fig. 1, stages of a run */
.vflow svg { max-width: none; width: 100%; height: auto; font-family: var(--sans); }
.vflow .vf-tall { display: none; max-width: 420px; }
@media (max-width: 640px) { .vflow .vf-wide { display: none; } .vflow .vf-tall { display: block; } }
.vflow .vb { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
.vflow .vk { font: 700 13px var(--sans); fill: var(--accent); }
.vflow .vt { font: 700 11px var(--sans); letter-spacing: .08em; fill: var(--ink); }
.vflow .vd { font: 12px var(--sans); fill: var(--muted); }
.vflow .va { fill: none; stroke: var(--ink); stroke-width: 1.2; }

/* Article pages: one alignment, left */
.doc, .doc .lede, .doc h1, .doc h2, .doc .sub { text-align: left; }
.doc .lede { margin-left: 0; margin-right: 0; max-width: 820px; }
.doc h1 { margin-left: 0; margin-right: 0; }

/* Paper list: the top is centered, the field sections are left-aligned */
.doc:has(.plist) > :not(.fsec) { text-align: center; margin-left: auto; margin-right: auto; }
.doc:has(.plist) > .lede { text-align: center; }
.doc:has(.plist) > h1, .doc:has(.plist) > h2 { text-align: center; max-width: none; }
.doc:has(.plist) > .prelim { border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.doc:has(.plist) table { margin-left: auto; margin-right: auto; max-width: 820px; }
.doc:has(.plist) table th, .doc:has(.plist) table td { text-align: left; }
.doc:has(.plist) table .num { text-align: right; }
.doc:has(.plist) > ul { list-style: none; padding: 0; max-width: 820px; }
.doc:has(.plist) > .fields ul { columns: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; font: 15px/1.4 var(--sans); }
.doc:has(.plist) > .fields ul span { display: none; }
.doc:has(.plist) > .fields a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.doc:has(.plist) > .fields a:hover { border-bottom-color: var(--ink); }
.doc:has(.plist) caption { text-align: center; }
.doc:has(.plist) > .fields h2 { text-align: center; max-width: none; }

/* Table 2 */
table.results { margin: 20px 0 12px; }
table.results th, table.results td { padding: 14px 20px 14px 0; }
table.results th:last-child, table.results td:last-child { padding-right: 0; }
table.results td:first-child { font-weight: 600; }
table.results td:first-child .sub { font-weight: 400; color: var(--muted); margin-top: 2px; }
table.results td.num { font: 600 18px/1.3 var(--sans); }
table.results th { font: 700 12px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Field menu stays at the top while the list scrolls */
.doc:has(.plist) > .fields { position: sticky; top: 58px; z-index: 20; max-width: none; margin: 24px -16px 0; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.doc:has(.plist) > .fields h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.doc:has(.plist) > .fields ul { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; scrollbar-width: none; }
.doc:has(.plist) > .fields ul::-webkit-scrollbar { display: none; }
.doc:has(.plist) > .fields li { flex: none; }
.doc:has(.plist) > .fields a[aria-current] { border-bottom: 2px solid var(--accent); }
.fsec { scroll-margin-top: 120px; }
.h1-link { color: inherit; text-decoration: none; border-bottom: 2px solid var(--line); } .h1-link:hover { border-bottom-color: var(--ink); }

/* One rule between field sections: the line above the heading */
.doc .fsec { border-bottom: 0; padding: 40px 0 0; }
.plist .paper:last-child { border-bottom: 0; }
@media (min-width: 1000px) { .plist .paper:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }

/* Two scores, laid out as a table */
dl.scores { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; margin: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
dl.scores dt { font: 700 16px/1.4 var(--sans); padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line); }
dl.scores dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
dl.scores dt:last-of-type, dl.scores dd:last-of-type { border-bottom: 0; }
@media (max-width: 600px) {
  dl.scores { grid-template-columns: 1fr; }
  dl.scores dt { padding-bottom: 4px; border-bottom: 0; }
  dl.scores dd { padding-top: 0; }
}

/* Readability audit fixes */
@media (max-width: 600px) {
  table.results th.num { white-space: normal; }
  table.results th, table.results td { padding: 10px 8px 10px 0; }
  table.results td.num { font-size: 16px; }
  table.results td:first-child { overflow-wrap: normal; }
}
.vflow .vt { font-size: 12px; }
.vflow .vd { font-size: 12px; }
sup a { padding: 10px 6px; margin: -10px -2px; }

/* Paper list: model cells in "Show each value" */
:root { --v-ok: #1f6b3d; --v-no: #b3123f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v-ok: #6cc493; --v-no: #f06a8e; } }
:root[data-theme="dark"] { --v-ok: #6cc493; --v-no: #f06a8e; }
.vcell .vline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vcell .vnum { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; background: none; padding: 0; white-space: nowrap; overflow-wrap: normal; }
.vmark { font: 600 13px/1.3 var(--sans); white-space: nowrap; }
.vmark.ok { color: var(--v-ok); }
.vmark.no { color: var(--v-no); }
.vcell .vans { display: block; margin-top: 2px; font: 13px/1.35 var(--sans); color: var(--muted); }
.vcell .vnone { font: 13px/1.35 var(--sans); color: var(--muted); }
.vlegend { font: 14px/1.5 var(--sans); color: var(--muted); }
.vlegend .vmark, .vlegend .vlegend-k { font-weight: 600; }
.vlegend .vlegend-k { color: var(--ink); }

/* Author credit on the paper list */
.paper .phead .authors { margin: 2px 0 2px; font: 600 17px/1.4 var(--serif); color: var(--ink); }
.paper .phead .ref { margin: 0 0 6px; font: 15px/1.5 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.paper .phead .ref cite { font-style: italic; }
.paper .phead .ref.also { margin-top: -2px; font-size: 14px; color: var(--muted); }
.thanks { font-style: italic; }

/* Papers audit fixes */
@media (min-width: 1000px) { .plist .paper:has(details[open]) { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .vtable td.num, .totals td.num { text-align: left; }
  .doc .lede, .doc .thanks, .doc .prelim, .doc caption { text-align: left; }
}

/* Papers page: left-aligned content below the top block, terms list */
.doc:has(.plist) > :not(h1):not(.lede):not(.thanks):not(.fields) { text-align: left; margin-left: 0; margin-right: 0; }
.doc:has(.plist) > .prelim { border-top: 1px solid var(--line); border-bottom: 0; padding: 16px 0 0; margin-top: 24px; }
.doc:has(.plist) table { margin-left: 0; margin-right: 0; }
.doc:has(.plist) caption { text-align: left; }
dl.terms { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; max-width: 820px; margin: 20px 0; font: 15px/1.5 var(--sans); }
dl.terms dt { font-weight: 700; }
dl.terms dd { margin: 0; }
@media (max-width: 600px) { dl.terms { grid-template-columns: 1fr; gap: 0; } dl.terms dd { margin: 0 0 10px; } }
@media (max-width: 600px) {
  table.results td.num { white-space: normal; font-size: 15px; }
  table.results th, table.results td { padding-right: 6px; }
  table.results td:first-child .sub { font-size: 12px; }
}

/* Totals on a phone: the model on one line, then the four numbers in two columns */
@media (max-width: 700px) {
  .totals tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 10px 0; }
  .totals td:first-child { grid-column: 1 / -1; }
  .totals td:first-child .sub { display: inline; margin-left: 8px; }
  .totals td.num, .doc:has(.plist) .totals td.num { text-align: left; font-variant-numeric: tabular-nums; }
  .totals td[data-label]::before { content: attr(data-label); display: block; font: 12px/1.3 var(--sans); color: var(--muted); }
}

/* Paper cards on a phone: smaller model results */
@media (max-width: 600px) {
  .pmeters { gap: 12px; }
  .pm { font: 15px/1.4 var(--sans); }
  .pm .row { justify-content: flex-start; flex-wrap: wrap; column-gap: 8px; }
  .pm .ans { font-size: 14px; color: var(--muted); }
}