/* OpenWorldEngineer: Oxilite query costs (artifacts-oxilite.html, assets/art/oxilite.js). Builds on styles.css
   (tokens, .card, .seg, .select, .note, .tip); adds only ox- classes.

   Cost-ratio colours (original / submitted, so above 1 is cheaper) form one diverging scale: a grey midpoint for
   "about the same", a peach arm for more expensive and an indigo arm for cheaper (2026-11-11, at the user's request;
   it was blue and orange-red), stepped at 0.1 / 0.5 / 0.9 and 1.1 / 2 / 5 / 10 / 100x. The indigo arm is Tailwind
   indigo (400 / 500 / 600 / 800 / 950 on light, 700 / 500 / 400 / 300 / 200 on dark). The peach arm started from the
   user's #FFB3A6 and was nudged rosier (OKLCH hue 22° rather than 30°) and kept light (L 0.85 to 0.68), so it sits
   with the indigo instead of darkening to a brick orange. Each arm passes the dataviz validator's ordinal checks (one
   hue, monotone lightness, visible steps) in both themes; light mode's palest peach is 1.6:1 against the sheet, under
   the 2:1 floor, which the user accepted. Dark mode has its own steps, lighter for larger ratios. */

.ox {
  container-type: inline-size;
  --ox-s3: #D77775; --ox-s2: #EC9693; --ox-s1: #FEB7B4;
  --ox-mid: #A9AEB5;
  --ox-f1: #818CF8; --ox-f2: #6366F1; --ox-f3: #4F46E5; --ox-f4: #3730A3; --ox-f5: #1E1B4B;
  --ox-sel: var(--accent);
  --ox-same: var(--line-on);
  --ox-other: var(--line-other);
  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"]) .ox {
    --ox-s3: #FEB7B4; --ox-s2: #DF8A87; --ox-s1: #B46765; --ox-mid: #5A5F67;
    --ox-f1: #4338CA; --ox-f2: #6366F1; --ox-f3: #818CF8; --ox-f4: #A5B4FC; --ox-f5: #C7D2FE;
  }
}
:root[data-theme="dark"] .ox {
  --ox-s3: #FEB7B4; --ox-s2: #DF8A87; --ox-s1: #B46765; --ox-mid: #5A5F67;
  --ox-f1: #4338CA; --ox-f2: #6366F1; --ox-f3: #818CF8; --ox-f4: #A5B4FC; --ox-f5: #C7D2FE;
}

.ox-head p { max-width: 76ch; }
.ox-quiet { margin: 0; padding: 18px 0; color: var(--muted); }

.ox-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.ox-pick label { font-size: var(--fs-small); color: var(--muted); }
.ox-pick .select { min-width: 0; max-width: 100%; }
.ox-att { flex-wrap: wrap; }
.ox-att button { min-width: 34px; padding: 5px 9px; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ox-note { margin: 0; max-width: 80ch; }

.ox-card { position: relative; padding: 16px; min-width: 0; }
.ox-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.ox-title { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; }
.ox-link { font-size: var(--fs-small); white-space: nowrap; }
.ox-sum { margin: 6px 0 0; color: var(--ink-2); line-height: 1.5; max-width: 80ch; }

.ox-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 12px 0 2px; font-size: 0.75rem; color: var(--muted); }
.ox-legend-l { margin-right: 6px; }
.ox-lk { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ox-sw { width: 12px; height: 12px; border-radius: 0; flex: none; box-sizing: border-box; }
.ox-sw.ln { width: 16px; height: 0; border-radius: 0; border-top: 2px solid; }
.ox-sw.ln.sel { border-color: var(--ox-sel); }
.ox-sw.ln.same { border-color: var(--ox-same); }
.ox-sw.ln.other { border-color: var(--ox-other); }
.ox-sw.none { background: var(--hover); box-shadow: inset 0 0 0 1px var(--rule); }

.ox-plot { position: relative; margin-top: 8px; min-width: 0; }
.ox-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ox-plot svg:focus { outline: none; }
.ox-plot svg:focus-visible .ox-focus { stroke: var(--ink); }
.ox-empty { padding: 24px 0 12px; color: var(--muted); }

/* heat cells (class per step) */
.ox-c0 { fill: var(--ox-s3); } .ox-c1 { fill: var(--ox-s2); } .ox-c2 { fill: var(--ox-s1); }
.ox-c3 { fill: var(--ox-mid); }
.ox-c4 { fill: var(--ox-f1); } .ox-c5 { fill: var(--ox-f2); } .ox-c6 { fill: var(--ox-f3); } .ox-c7 { fill: var(--ox-f4); } .ox-c8 { fill: var(--ox-f5); }
.ox-sw.c0 { background: var(--ox-s3); } .ox-sw.c1 { background: var(--ox-s2); } .ox-sw.c2 { background: var(--ox-s1); }
.ox-sw.c3 { background: var(--ox-mid); }
.ox-sw.c4 { background: var(--ox-f1); } .ox-sw.c5 { background: var(--ox-f2); } .ox-sw.c6 { background: var(--ox-f3); } .ox-sw.c7 { background: var(--ox-f4); } .ox-sw.c8 { background: var(--ox-f5); }

.ox-track { fill: var(--hover); }
.ox-grid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.ox-axis { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.ox-zero { stroke: var(--muted); stroke-width: 1; shape-rendering: crispEdges; }
.ox-t { fill: var(--muted); font-size: 11px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ox-rl { fill: var(--ink-2); font-size: 10.5px; font-family: var(--font-mono); }
.ox-fam { fill: var(--muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ox-tick { stroke: var(--muted); stroke-width: 1; }
.ox-end { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ox-end-t { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.ox-cur { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ox-focus { fill: none; stroke: transparent; stroke-width: 2; }

/* G lines */
.ox-gl { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ox-gl.other { stroke: var(--ox-other); stroke-width: 1; }
.ox-gl.same { stroke: var(--ox-same); stroke-width: 1.25; }
.ox-gl.hot { stroke: var(--ink-2); stroke-width: 2; }
.ox-gl.sel { stroke: var(--ox-sel); stroke-width: 2; }
.ox-gd { fill: var(--ox-sel); stroke: var(--sheet); stroke-width: 2; }
.ox-gd.hot { fill: var(--ink-2); }
.ox-gend { fill: var(--ink); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ox-g-h { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; }
.ox-g-s { margin: 4px 0 0; max-width: 80ch; }

@container (max-width: 420px) { .ox-card { padding: 12px; } }

/* round 2: hidden test query groups */
.ox-setrow { min-width: 0; }
.ox-set { flex-wrap: wrap; max-width: 100%; }
.ox-set button { padding: 6px 14px; flex: 1 1 auto; }
.ox-role { font-size: 0.6875rem; color: var(--accent-ink); font-weight: 650; }
.ox-mh { fill: var(--ink); font-size: 12px; font-weight: 650; }
.ox-rl.is-sel { fill: var(--ink); font-weight: 700; }
.ox-rl-role { fill: var(--accent-ink); font-weight: 650; font-family: var(--font-sans, inherit); }
.ox-ch { fill: var(--muted); }
.ox-gate { fill: var(--muted); font-size: 10.5px; font-style: italic; }
.ox-x { stroke: var(--warn-ink); stroke-width: 1.75; stroke-linecap: round; }
.ox-gbar { fill: var(--ox-mid); }
.ox-gbar.sel { fill: var(--ox-sel); }
.ox-gv { fill: var(--ink-2); font-size: 10.5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ox-selrow { fill: none; stroke: var(--ink); stroke-width: 1.25; }