/* OpenWorldEngineer: the chess artifacts page (artifacts-chess.html, assets/art/chess.js). Builds on styles.css
   (tokens, .card, .seg, .select, .btn, .note); adds only chs- classes. The board is the same in both themes, a
   light object on the page, so the pieces keep their contrast. */

.chs {
  --chs-sq-l: #ECEEF0; --chs-sq-d: #B4BAC2; --chs-coord-l: #7B818A; --chs-coord-d: #F4F5F6;
  --chs-last: color-mix(in srgb, var(--accent) 30%, transparent);
  --chs-play: var(--accent); --chs-exp: #2D3136; --chs-reply: #5E636A;
  container-type: inline-size; 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"]) .chs { --chs-sq-l: #C9CDD3; --chs-sq-d: #8E959E; --chs-coord-l: #5E636A; --chs-coord-d: #EEF0F2; }
}
:root[data-theme="dark"] .chs { --chs-sq-l: #C9CDD3; --chs-sq-d: #8E959E; --chs-coord-l: #5E636A; --chs-coord-d: #EEF0F2; }
.chs-head p { max-width: 78ch; }

/* the set switch: hidden test puzzles | public dev puzzles */
.chs-setbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.chs-setbar .seg { flex: none; }
.chs-setnote { flex: 1 1 360px; max-width: 92ch; }

/* the viewer takes the full width, the overview of every puzzle follows it */
.chs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.chs-viewer { display: grid; gap: 16px; padding: 16px 18px 18px; min-width: 0; }
.chs-viewer:focus:not(:focus-visible) { outline: none; }
.chs-list { min-width: 0; padding: 16px 18px 14px; }
.chs-k { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.chs-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* puzzle head: navigation, what the puzzle is, the stored solution */
.chs-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chs-nav .select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.chs-iconbtn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--sheet); color: var(--ink); cursor: pointer; }
.chs-iconbtn:hover:not(:disabled) { border-color: var(--accent); }
.chs-iconbtn:disabled { opacity: 0.4; cursor: default; }
.chs-iconbtn svg { width: 16px; height: 16px; }
.chs-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.chs-title h2 { font-size: 1.25rem; line-height: 1.25; font-weight: 660; }
.chs-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--fs-small); color: var(--muted); }
.chs-meta a { color: var(--muted); }
.chs-meta a:hover { color: var(--link-hover); }
.chs-sol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.875rem; }
.chs-line { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-2); word-spacing: 0.1em; }
.chs-line b { color: var(--ink); font-weight: 640; }

/* panes: one or two policies on the same puzzle, stepped together */
.chs-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-top: 1px solid var(--rule); padding-top: 14px; }
.chs-step-l { font-size: 0.875rem; font-weight: 600; min-width: 9ch; }
.chs-step .note { margin-left: auto; }
.chs-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.chs-panes.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chs-pane { display: grid; grid-template-columns: minmax(280px, 600px) minmax(0, 1fr); grid-template-areas: "head head" "board text"; gap: 10px 22px; min-width: 0; align-content: start; }
.chs-panes.is-two .chs-pane { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "board" "text"; }
.chs-pane-head { grid-area: head; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; }
.chs-picks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chs-pick { flex: 1 1 200px; min-width: 0; max-width: 100%; font-weight: 600; }
.chs-pane-head .note a { color: var(--muted); }
.chs-pane-head .note a:hover { color: var(--link-hover); }
.chs-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.chs-badge.is-ok { color: var(--ink); }
.chs-badge svg { width: 12px; height: 12px; }
.chs-boardwrap { grid-area: board; display: grid; gap: 8px; align-content: start; min-width: 0; }
.chs-panes.is-two .chs-boardwrap { max-width: 600px; }
.chs-board { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; overflow: hidden; user-select: none; }
.chs-board .sq-l { fill: var(--chs-sq-l); }
.chs-board .sq-d { fill: var(--chs-sq-d); }
.chs-board .co-l { fill: var(--chs-coord-l); }
.chs-board .co-d { fill: var(--chs-coord-d); }
.chs-board .hl { fill: var(--chs-last); }
.chs-board .ar-play { fill: var(--chs-play); stroke: var(--chs-play); }
.chs-board .ar-exp { fill: none; stroke: var(--chs-exp); }
.chs-board .ar-exp-head { fill: var(--chs-exp); }
.chs-board .ar-reply { fill: var(--chs-reply); stroke: var(--chs-reply); }
.chs-cap { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); }
.chs-cap b { font-family: var(--font-mono); font-weight: 640; color: var(--ink); }
.chs-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.75rem; color: var(--muted); }
.chs-legend i { display: inline-block; width: 20px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 0;
  background: linear-gradient(var(--chs-play), var(--chs-play)) center / 14px 3px no-repeat, var(--chs-sq-l); }
.chs-legend i.exp { background: repeating-linear-gradient(90deg, var(--chs-exp) 0 4px, transparent 4px 7px) center / 14px 2px no-repeat, var(--chs-sq-l); }
.chs-legend i.last { width: 12px; background: linear-gradient(var(--chs-last), var(--chs-last)), var(--chs-sq-l); }

.chs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chs-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 0; background: var(--sheet); color: var(--ink-2); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 560; cursor: pointer; }
.chs-chip:hover { border-color: var(--accent); color: var(--ink); }
.chs-chip[aria-current="step"] { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.chs-chip svg { width: 11px; height: 11px; }
.chs-chip.is-bad { border-style: dashed; color: var(--muted); }

/* the turns of the current step: Qwen's reasoning, its tool call, the tool's answer */
.chs-text { grid-area: text; display: grid; gap: 10px; align-content: start; min-width: 0; }
.chs-turn { display: grid; gap: 6px; min-width: 0; }
.chs-turn-h { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.chs-think {
  margin: 0; max-height: 560px; overflow: auto; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--code-bg); color: var(--ink-2); font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chs-panes.is-two .chs-think { max-height: 420px; }
.chs-cut { display: block; margin: 8px 0; padding: 4px 0; border-block: 1px dashed var(--rule-strong); color: var(--muted); font-size: 0.75rem; font-style: italic; text-align: center; }
.chs-nothink { font-size: 0.8125rem; color: var(--muted); font-style: italic; }
.chs-call { margin: 0; padding: 6px 10px; border-radius: 0; background: var(--code-bg); font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.chs-res { font-size: 0.8125rem; color: var(--ink-2); }
.chs-res.is-bad { color: var(--muted); }
.chs-ended { font-size: 0.8125rem; color: var(--muted); }

/* the overview below the viewer: every puzzle against every policy, with the graded rates beside the re-run results */
.chs-list h2 { font-size: 1rem; font-weight: 660; }
.chs-list-head { display: grid; gap: 4px; padding: 0 0 12px; }
.chs-list-head .note { max-width: 100ch; }
/* column widths: --cp is the puzzle column's least width, --cm a single policy column (the base model's on the hidden
   set), --ch one of a best | median pair, --cn the "Solved by" column; --nm and --nh (the counts) come from chess.js.
   Past the minimum the table scrolls inside .chs-mx-scroll with the puzzle column held at the left */
.chs-mx-scroll { overflow-x: auto; min-width: 0; }
.chs-mx {
  --cp: 220px; --cm: 60px; --ch: 33px; --cn: 56px;
  width: max(100%, calc(var(--cp) + var(--nm, 0) * var(--cm) + var(--nh, 0) * var(--ch) + var(--cn)));
  border-collapse: separate; border-spacing: 0; font-size: 0.75rem; table-layout: fixed;
}
.chs-mx col.c-p { width: auto; }
.chs-mx col.c-m { width: var(--cm); }
.chs-mx col.c-h { width: var(--ch); }
.chs-mx col.c-n { width: var(--cn); }
.chs-mx tr:not(.roles) > th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.chs-mx tbody tr.p:hover > th, .chs-mx tbody tr.p.is-on > th { background: var(--hover); }
.chs-mx-scroll.is-scrolled .chs-mx tr:not(.roles) > th:first-child { box-shadow: inset -1px 0 0 var(--rule-strong); }
.chs-mx-scroll.is-scrolled .chs-mx tbody tr.p.is-on > th { box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--rule-strong); }
.chs-mx th, .chs-mx td { padding: 0; text-align: center; font-weight: 500; }
.chs-mx thead th { padding: 4px 3px; vertical-align: bottom; font-size: 0.6875rem; line-height: 1.3; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.chs-mx thead th.is-a { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.chs-mx thead th:first-child, .chs-mx tbody th, .chs-mx tfoot th { text-align: left; }
.chs-mx thead th:first-child { padding-left: 6px; }
.chs-mx .nm-short { display: none; }
.chs-mx .sum td, .chs-mx .sum th, .chs-mx tfoot td, .chs-mx tfoot th { padding: 6px 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.chs-mx .sum th, .chs-mx tfoot th { font-family: var(--font-sans); color: var(--muted); font-weight: 600; padding-left: 6px; }
.chs-mx .sum td, .chs-mx .sum th { border-bottom: 1px solid var(--rule); vertical-align: middle; }
.chs-mx thead tr:first-child th { border-bottom: 1px solid var(--rule-strong); }
.chs-mx.is-pairs thead tr:first-child th[colspan] { border-bottom-color: var(--rule); }
.chs-mx tfoot td, .chs-mx tfoot th { border-top: 1px solid var(--rule); font-weight: 500; }
.chs-mx tfoot tr + tr > * { border-top: 0; }
.chs-mx .tier > * { padding: 14px 0 4px; border-bottom: 1px solid var(--rule); font-size: 0.6875rem; font-weight: 600; color: var(--muted); }
.chs-mx .tier th { padding-left: 6px; }
.chs-mx .tier td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.chs-mx tbody tr.p { cursor: pointer; }
.chs-mx tbody tr.p > * { border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
.chs-mx tbody tr.p:hover > * { background: var(--hover); }
.chs-mx tbody tr.p.is-on > * { background: var(--hover); }
.chs-mx tbody tr.p.is-on > th { box-shadow: inset 3px 0 0 var(--accent); }
.chs-mx-pb { display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 40px; padding: 6px 6px 6px 8px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.75rem; text-align: left; cursor: pointer; }
.chs-mx-pb .r { flex: none; width: 4ch; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chs-mx-pb .d { display: grid; gap: 1px; min-width: 0; }
.chs-mx-pb .m { font-weight: 600; }
.chs-mx-pb .t { font-size: 0.6875rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chs-mx-c { height: 40px; color: var(--muted); vertical-align: middle; }
.chs-mx-g { display: grid; place-items: center; width: 22px; height: 22px; margin: auto; border-radius: 0; }
.chs-mx-g svg { width: 12px; height: 12px; }
.chs-mx-c.is-ok { color: var(--ink); }
.chs-mx-c.is-ok .chs-mx-g { background: var(--mark-off-fill); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.chs-mx-c.is-a { background: color-mix(in srgb, var(--hover) 60%, transparent); }
.chs-mx-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); vertical-align: middle; }
.chs-mx .c-n-cell { box-shadow: inset 1px 0 0 var(--rule-strong); }
.chs-list > .note { padding: 10px 6px 2px; }
/* hidden set: best | median pairs per model; the role row reads best | med (b | m when narrow) */
.chs-mx thead .roles th { padding: 3px 0 5px; font-size: 0; font-weight: 500; border-bottom: 1px solid var(--rule-strong); }
.chs-mx thead .roles th::after { content: attr(data-mid); font-size: 0.625rem; }
.chs-mx thead .roles th:nth-of-type(odd), .chs-mx.is-pairs thead th[colspan], .chs-mx.is-pairs thead th[rowspan]:not(:first-child) { box-shadow: inset 1px 0 0 var(--rule); }
.chs-mx.is-pairs thead th.c-n-cell { box-shadow: inset 1px 0 0 var(--rule-strong); }
.chs-mx.is-pairs td.g0, .chs-mx.is-pairs .sum td.g0, .chs-mx.is-pairs tfoot td.g0, .chs-mx.is-pairs .tier td.g0 { box-shadow: inset 1px 0 0 var(--rule); }

.chs-load { padding: 28px 18px; }

@container (max-width: 1040px) {
  .chs-pane { grid-template-columns: minmax(260px, 480px) minmax(0, 1fr); }
  .chs-mx { --cp: 200px; --cm: 52px; --ch: 30px; --cn: 48px; }
  .chs-mx.is-pairs { --cm: 48px; }
}
@container (max-width: 760px) {
  .chs-pane { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "board" "text"; }
  .chs-boardwrap { max-width: 560px; }
  .chs-panes.is-two { grid-template-columns: minmax(0, 1fr); }
  .chs-mx .nm-full, .chs-mx-pb .t { display: none; }
  .chs-mx .nm-short { display: inline; }
  .chs-mx { --cp: 150px; --cm: 46px; --ch: 30px; --cn: 46px; }
  .chs-mx.is-pairs { --cm: 40px; }
  .chs-mx thead .roles th { font-size: 0; }
  .chs-mx thead .roles th::after { content: attr(data-short); font-size: 0.625rem; }
}
@container (max-width: 560px) {
  .chs-viewer, .chs-list { padding: 14px; }
  .chs-list { padding-inline: 4px; }
  .chs-mx { --cp: 150px; --cm: 40px; --ch: 27px; --cn: 0px; }
  .chs-mx.is-pairs { --cp: 72px; --cm: 36px; }
  .chs-mx .c-n-cell { display: none; }  /* its col stays, 0 wide: the dev set's tier rows span it */
  .chs-mx.is-pairs .chs-mx-pb .d { display: none; }
  .chs-mx .chs-rr, .chs-mx .chs-tg { display: none; }
  .chs-mx thead th { font-size: 0.65rem; padding-inline: 1px; }
  .chs-mx-pb { gap: 8px; min-height: 34px; padding-inline: 6px; }
  .chs-mx-c { height: 34px; }
}
@media (pointer: coarse) { .chs-keys { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .chs-chip, .chs-iconbtn { transition: border-color 140ms, color 140ms, background-color 140ms; }
}