/* OpenWorldEngineer: function page layout (artifacts-page-layout.html, assets/art/page-layout.js). Builds on styles.css
   (tokens, .card, .seg, .select, .note); adds only pl- classes. Page maps: one square per 4 KiB page; touched pages take
   a one-hue ordinal ramp by the first checkpoint that touches them (checkpoint 1 counts four times, so it is the
   heaviest step: darkest on light, lightest on dark; validated as an ordinal ramp against each sheet), untouched pages
   one of two greys (code that ran in a training startup, code that never did). The ramp is the site's indigo
   (2026-11-11, at the user's request; it was orange-red): Tailwind indigo 950 / 800 / 600 / 400 on light,
   200 / 400 / 500 / 700 on dark. */

.pl {
  container-type: inline-size;
  --pl-cp-1: #1E1B4B; --pl-cp-2: #3730A3; --pl-cp-3: #4F46E5; --pl-cp-4: #818CF8;
  --pl-warm: #C3C7CC;              /* untouched, holds code a training startup ran */
  --pl-cold: #E6E8EB;              /* untouched, code no training startup ran */
  display: grid; gap: 16px; min-width: 0; color: var(--ink); font-size: var(--fs-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pl {
    --pl-cp-1: #C7D2FE; --pl-cp-2: #818CF8; --pl-cp-3: #6366F1; --pl-cp-4: #4338CA;
    --pl-warm: #4A4E55; --pl-cold: #26282C;
  }
}
:root[data-theme="dark"] .pl {
  --pl-cp-1: #C7D2FE; --pl-cp-2: #818CF8; --pl-cp-3: #6366F1; --pl-cp-4: #4338CA;
  --pl-warm: #4A4E55; --pl-cold: #26282C;
}
.pl-head p { max-width: 74ch; }
.pl-quiet { margin: 0; padding: 18px 0; color: var(--muted); }

/* set switch + startup picker */
.pl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
.pl-seg button { padding: 6px 13px; font-size: 0.8125rem; }
.pl-pick { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pl-pick-k { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.pl-select { min-width: 0; max-width: 100%; font-family: var(--font-mono); font-size: 0.8125rem; }

.pl-card { padding: 16px; min-width: 0; }
.pl-title { margin: 0; font-family: var(--font-sans); font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pl-sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); }
.pl-h3 { margin: 0; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.02em; }

/* the two maps */
.pl-maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 14px; }
.pl-map { margin: 0; min-width: 0; }
.pl-cap { font-size: 0.875rem; line-height: 1.3; margin-bottom: 8px; overflow-wrap: anywhere; }
.pl-cap-n { font-weight: 650; }
.pl-cap-a { color: var(--muted); }
.pl-mapbox { min-width: 0; }
.pl-canvas { display: block; cursor: crosshair; touch-action: pan-y; }
.pl-stat { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
.pl-stat b { font-family: var(--font-mono); font-weight: 640; color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.75rem; color: var(--muted); }
.pl-legend-g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pl-legend-t { color: var(--ink-2); }
.pl-k { display: inline-flex; align-items: center; gap: 5px; }
.pl-sw { display: inline-block; width: 11px; height: 11px; border-radius: 0; flex: none; }
.pl-legend-foot { margin: 8px 0 0; max-width: 92ch; }

/* lower row: the count and the attempts */
.pl-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }

.pl-tbl { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: var(--fs-small); }
.pl-tbl th, .pl-tbl td { padding: 6px 6px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.pl-tbl th:first-child { padding-left: 0; white-space: normal; }
.pl-tbl td:last-child, .pl-tbl th:last-child { padding-right: 0; }
.pl-tbl thead th { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.pl-tbl tbody th { font-weight: 560; color: var(--ink-2); }
.pl-tbl .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pl-tbl .pl-sum { font-weight: 650; color: var(--ink); }
.pl-tbl tr.is-sel th { color: var(--ink); font-weight: 650; }
.pl-sym { font-family: var(--font-mono); font-weight: 500; color: var(--muted); }

.pl-track { margin-top: 18px; }
.pl-track[hidden] { display: none; }
.pl-track-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; color: var(--muted); }
.pl-track-ends b { font-family: var(--font-mono); font-weight: 640; color: var(--ink-2); }
.pl-track-bar { position: relative; height: 10px; margin: 8px 0 22px; border-radius: 0; background: var(--hover); box-shadow: inset 0 0 0 1px var(--rule); }
.pl-track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.pl-tick { position: absolute; top: -3px; width: 2px; height: 16px; margin-left: -1px; border-radius: 0; background: var(--line-on); opacity: 0.75; }
.pl-track-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--sheet); }
.pl-track-lbl { position: absolute; top: 15px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 640; color: var(--ink); white-space: nowrap; }
.pl-track-lbl.is-r { transform: translateX(-100%); }
.pl-track-lbl.is-l { transform: none; }
.pl-track-key { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); }
.pl-tick-k { display: inline-block; width: 2px; height: 12px; border-radius: 0; background: var(--line-on); opacity: 0.75; }
.pl-formula { margin: 12px 0 0; font-size: var(--fs-small); color: var(--ink-2); }
.pl-formula b { font-family: var(--font-mono); color: var(--ink); }
.pl-math { font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pl-graded { margin: 6px 0 0; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-graded:empty { display: none; }
.pl-graded .is-bad { color: var(--accent-ink); font-weight: 600; }
.pl-foot { margin: 12px 0 0; }
.pl-foot a { color: var(--link); }

/* attempts: one row per model, best and median side by side */
.pl-grid { display: grid; gap: 6px; margin-top: 12px; }
.pl-grow { display: grid; grid-template-columns: minmax(96px, 0.9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: stretch; }
.pl-gname { align-self: center; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); line-height: 1.25; overflow-wrap: anywhere; }
.pl-cell {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 6px 9px 9px;
  min-width: 0; text-align: left; cursor: pointer; overflow: hidden; font: inherit;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--sheet); color: var(--ink-2);
  transition: border-color 140ms;
}
.pl-cell:hover { border-color: var(--accent); color: var(--ink); }
.pl-cell[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.pl-cell.is-empty { cursor: default; place-items: center; color: var(--muted); }
.pl-cell-a { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.pl-cell-role { font-weight: 500; color: var(--muted); }
.pl-cell-v { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 640; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pl-cell-s { grid-column: 1 / -1; font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-cell-ne { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); }
.pl-cell-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--s, 0) * 100%); background: var(--line-on); }
.pl-cell[aria-checked="true"] .pl-cell-bar { background: var(--accent); }

.pl-tip-h { font-weight: 650; margin-bottom: 2px; }
#tip .pl-tip-h + div, #tip .pl-tip-h ~ div { font-size: 0.75rem; }

@container (max-width: 860px) {
  .pl-lower { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 620px) {
  .pl-maps { grid-template-columns: minmax(0, 1fr); }
  .pl-card { padding: 12px; }
  .pl-grow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pl-gname { grid-column: 1 / -1; margin-top: 4px; }
  .pl-cell-r { display: none; }
  .pl-tbl th, .pl-tbl td { padding: 6px 4px; }
  .pl-controls { gap: 10px; }
  .pl-pick { width: 100%; }
  .pl-select { flex: 1 1 auto; }
}