/* ============================================================================
   ARC-AGI-3 report — the post blog/operad-on-arc-agi-3/ (scripts/arc.js).
   The report from outputs/arc-publish/, set in the blog post's head and the
   site's chrome: savings, progress and efficiency, tokens, the
   games table, and a panel per game with its levels and the agent's notes.

   Everything here is scoped to .arc (the article) and the panel (.arc-drawer,
   .arc-scrim), so nothing reaches another page. Charts are drawn in SVG by
   the script and coloured from here by class, so both themes and the theme
   toggle recolour them with no redraw. The report adds a few data colours of
   its own, only inside it: Codex (VISTA) in teal, the human baseline in a
   quiet grey, and a muted red for "more than Codex".
   ============================================================================ */

.arc,
.arc-drawer,
.arc-scrim {
  --arc-ground-2: #f7f4f0;    /* zebra rows, hover */
  --arc-rule-2: #ece8e3;      /* grid lines, bar tracks */
  --arc-rule-3: #f1eee9;      /* minor grid lines */
  --arc-op: var(--ink);       /* Operad */
  --arc-cx: #51848a;          /* Codex (VISTA): lines and marks */
  --arc-cx-ink: #2f676f;      /* Codex (VISTA): text, 6.2:1 */
  --arc-human: #a9a6a1;       /* the human baseline */
  --arc-more: #c97d83;        /* Operad used more: line */
  --arc-more-ink: #9b4a52;    /* Operad used more: text */
  --arc-frame: #efece8;       /* behind a game's frame */
  --arc-scrim: rgba(18, 19, 22, .18);
  --arc-shadow: rgba(20, 16, 30, .25);
  --arc-band: .035;           /* the "sooner" band's ink */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .arc,
  :root:not([data-theme="light"]) .arc-drawer,
  :root:not([data-theme="light"]) .arc-scrim {
    --arc-ground-2: #1b1a27;
    --arc-rule-2: #2a2836;
    --arc-rule-3: #211f2d;
    --arc-cx: #6fa7ad;
    --arc-cx-ink: #8cc5ca;    /* 9.0:1 */
    --arc-human: #7d7a8c;
    --arc-more: #c97d83;
    --arc-more-ink: #e4a0a7;
    --arc-frame: #23212f;
    --arc-scrim: rgba(0, 0, 0, .45);
    --arc-shadow: rgba(0, 0, 0, .5);
    --arc-band: .06;
  }
}

:root[data-theme="dark"] .arc,
:root[data-theme="dark"] .arc-drawer,
:root[data-theme="dark"] .arc-scrim {
  --arc-ground-2: #1b1a27;
  --arc-rule-2: #2a2836;
  --arc-rule-3: #211f2d;
  --arc-cx: #6fa7ad;
  --arc-cx-ink: #8cc5ca;
  --arc-human: #7d7a8c;
  --arc-more: #c97d83;
  --arc-more-ink: #e4a0a7;
  --arc-frame: #23212f;
  --arc-scrim: rgba(0, 0, 0, .45);
  --arc-shadow: rgba(0, 0, 0, .5);
  --arc-band: .06;
}

.arc-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.arc b,
.arc-drawer b {
  color: var(--ink);
  font-weight: 600;
}

.arc .arc-cx-text,
.arc-drawer .arc-cx-text {
  color: var(--arc-cx-ink);
}

/* --- The head: the post's, with the report's lede -------------------------- */

.arc-lede {
  max-width: 68ch;
  margin-top: clamp(18px, 2vw, 24px);
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* --- The body --------------------------------------------------------------- */

.arc-body {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.arc-savings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}

.arc-sv {
  padding: 18px 22px 4px;
  border-left: 1px solid var(--rule);
}

.arc-sv:first-child {
  padding-left: 0;
  border-left: 0;
}

.arc-sv__n {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.02em;
}

.arc-sv__k {
  margin-top: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.arc-sv__v {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 13px;
}

.arc-sv__v b {
  color: var(--ink-2);
}

.arc-sv__v span {
  color: var(--arc-cx-ink);
}

.arc-savecap {
  grid-column: 1 / -1;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 13px;
}

.arc-section {
  margin-top: 60px;
}

.arc-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.arc-sechead h2,
.arc-drawer .arc-sechead h2 {
  color: var(--ink);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
}

.arc-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12.5px;
}

.arc-key--nowrap {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.arc-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* a key's swatch, and the tooltip's: a line, a dot or a bar, in its series' colour */
.arc-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  background: currentColor;
}

.arc-swatch--dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.arc-swatch--bar {
  width: 16px;
  height: 6px;
  border-radius: 3px;
}

.arc-swatch--dash {
  height: 0;
  background: none;
  border-top: 2px dashed currentColor;
}

.arc-swatch--op { color: var(--arc-op); }
.arc-swatch--cx { color: var(--arc-cx); }
.arc-swatch--won { color: var(--arc-cx-ink); }
.arc-swatch--human { color: var(--arc-human); }

.arc-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  margin-top: 16px;
}

.arc-pair > div {
  min-width: 0;
}

.arc-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.arc-subhead h3 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.arc-note {
  min-height: 20px;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 13px;
}

.arc-foot-line {
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.arc-method {
  max-width: 90ch;
  margin-top: 70px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
}

/* --- Charts ------------------------------------------------------------------ */

.arc-chart {
  position: relative;
}

.arc-chart svg {
  display: block;
  width: 100%;
  max-width: none;
  overflow: visible;
}

.arc-chart--time svg {
  touch-action: pan-y;
  cursor: crosshair;
}

.arc-chart--pad {
  padding-top: 10px;
}

.arc-svg text {
  fill: var(--ink-3);
  font-family: var(--text);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.arc-svg .t-strong { fill: var(--ink); }
.arc-svg .t-mid { fill: var(--ink-2); }
.arc-svg .t-cx { fill: var(--arc-cx-ink); }
.arc-svg .t-less { fill: var(--arc-cx-ink); font-weight: 600; }
.arc-svg .t-more { fill: var(--arc-more-ink); font-weight: 600; }
.arc-svg .t-name { fill: var(--ink); font-weight: 600; }
.arc-svg .t-done { font-size: 12px; font-weight: 600; }
.arc-svg .t-done.t-op { fill: var(--arc-op); }
.arc-svg .t-done.t-cx { fill: var(--arc-cx-ink); }
.arc-svg .t-small { font-size: 11px; }
.arc-svg .t-12 { font-size: 12px; }
.arc-svg .t-band { fill: var(--ink); font-family: var(--display); font-size: 30px; }
.arc-svg .t-band-sub { fill: var(--ink-2); font-size: 12px; }
.arc-svg .halo { paint-order: stroke; stroke: var(--ground); stroke-width: 3px; }

.arc-svg .g-grid { stroke: var(--arc-rule-2); }
.arc-svg .g-major { stroke: var(--rule); }
.arc-svg .g-minor { stroke: var(--arc-rule-3); }
.arc-svg .g-axis { stroke: var(--ink); }
.arc-svg .g-diag { stroke: var(--ink); opacity: .55; }
.arc-svg .g-band { fill: var(--ink); opacity: var(--arc-band); }
.arc-svg .g-area { fill: var(--arc-cx); opacity: .07; }

.arc-svg .s-op { stroke: var(--arc-op); fill: none; }
.arc-svg .s-cx { stroke: var(--arc-cx); fill: none; }
.arc-svg .s-human { stroke: var(--arc-human); fill: none; stroke-dasharray: 4 4; }
.arc-svg .p-solid { stroke-width: 2.2px; }
.arc-svg .p-dash { stroke-width: 1.6px; stroke-dasharray: 5 4; opacity: .9; }
.arc-svg .p-line { stroke-width: 1.6px; }
.arc-svg .p-main { stroke-width: 2.2px; }
.arc-svg .p-done { stroke-width: 1.5px; }

.arc-svg .f-op { fill: var(--arc-op); }
.arc-svg .f-cx { fill: var(--arc-cx); }
.arc-svg .f-won { fill: var(--arc-cx-ink); }
.arc-svg .f-human { fill: var(--arc-human); }
.arc-svg .f-ground { fill: var(--ground); }
.arc-svg .k-ground { stroke: var(--ground); stroke-width: 1.2px; }
.arc-svg .k-ground-15 { stroke: var(--ground); stroke-width: 1.5px; }
.arc-svg .k-op { stroke: var(--arc-op); stroke-width: 1.8px; }
.arc-svg .k-op-15 { stroke: var(--arc-op); stroke-width: 1.5px; }
.arc-svg .k-cx-15 { stroke: var(--arc-cx); stroke-width: 1.5px; }

.arc-svg .hl { stroke: var(--ink); opacity: .35; }
.arc-svg .is-off { display: none; }
.arc-svg .ed { cursor: pointer; }

.arc-svg .l-less { stroke: var(--arc-cx); stroke-width: 2px; opacity: .45; }
.arc-svg .l-more { stroke: var(--arc-more); stroke-width: 2px; opacity: .45; }
.arc-svg .z0 { fill: var(--arc-ground-2); opacity: .7; }
.arc-svg .z1 { fill: transparent; }
.arc-svg .trow:hover .z0,
.arc-svg .trow:hover .z1 { fill: var(--arc-rule-2); opacity: .7; }
.arc-svg .trow.is-pick { cursor: pointer; }

/* the hover read-out */
.arc-ptip {
  position: absolute;
  z-index: 5;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--ground);
  box-shadow: 0 6px 18px -8px var(--arc-shadow);
  color: var(--ink-2);
  font-size: 12.5px;
  white-space: nowrap;
  pointer-events: none;
}

.arc-ptip[hidden] {
  display: none;
}

.arc-ptip__th {
  margin-bottom: 6px;
  color: var(--ink);
  font-weight: 600;
}

.arc-ptip__tg {
  display: grid;
  grid-template-columns: 10px auto auto auto;
  align-items: center;
  gap: 5px 10px;
}

.arc-ptip__tg i {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.arc-ptip__tg span {
  text-align: right;
}

/* --- The games table ------------------------------------------------------ */

.arc-games {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  table-layout: fixed;
}

.arc-games .c-frame { width: 64px; }
.arc-games .c-name { width: 80px; }
.arc-games .c-levels { width: 132px; }

.arc-games th {
  padding: 14px 12px 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.arc-games td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--arc-rule-2);
  vertical-align: middle;
}

.arc-games th:first-child,
.arc-games td:first-child {
  padding-left: 0;
}

.arc-games th:nth-child(n+4),
.arc-games td:nth-child(n+4) {
  padding-left: 26px;
}

.arc-games td:nth-child(3) {
  padding-right: 0;
}

.arc-games tbody tr {
  cursor: pointer;
  transition: background-color .15s;
}

.arc-games tbody tr:hover {
  background: var(--arc-ground-2);
}

.arc-games tbody tr:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.arc-frame {
  width: 52px;
  height: 52px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--arc-frame) center / cover no-repeat;
  image-rendering: pixelated;
}

.arc-gname {
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
}

.arc-track {
  display: flex;
  gap: 3px;
  width: 112px;
}

.arc-track span {
  position: relative;
  flex: 1;
  height: 9px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--arc-rule-2);
}

/* a cleared level shows its slice of the ring's line */
.arc-track span.is-done::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ring-line);
  background-size: 112px 100%;
  background-position: var(--x, 0) 0;
}

.arc-tnum {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 14.5px;
  white-space: nowrap;
}

.arc-twin {
  display: grid;
  gap: 9px;
}

.arc-tw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--nw, 64px);
  align-items: center;
  gap: 10px;
}

.arc-tw b {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--arc-rule-2);
}

.arc-tw i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
}

.arc-tw--op i { background: var(--arc-op); }
.arc-tw--cx i { background: var(--arc-cx); }

.arc-tw span {
  justify-self: end;
  font-size: 15px;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.arc-tw--op span {
  color: var(--ink);
  font-weight: 600;
}

.arc-tw--cx span {
  color: var(--arc-cx-ink);
}

/* --- A game's panel ------------------------------------------------------- */

.arc-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--arc-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.arc-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(820px, 95vw);
  border-left: 1px solid var(--rule);
  background: var(--ground);
  box-shadow: -24px 0 48px -24px var(--arc-shadow);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .28s var(--ease-out), visibility 0s linear .28s;
}

.arc-drawer:focus {
  outline: none;
}

.arc-scrim[hidden],
.arc-drawer[hidden] {
  display: none;
}

body.arc-is-open .arc-scrim {
  opacity: 1;
  pointer-events: auto;
}

body.arc-is-open .arc-drawer {
  transform: none;
  visibility: visible;
  transition: transform .28s var(--ease-out), visibility 0s;
}

.arc-dh {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 36px;
  align-items: start;
  gap: 18px 20px;
  padding: 24px 28px 22px;
  border-bottom: 1px solid var(--rule);
}

.arc-frame--lg {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 8px;
}

.arc-dhead {
  min-width: 0;
}

.arc-d-title {
  margin: 4px 0 6px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
}

.arc-dmeta {
  color: var(--ink-3);
  font-size: 14px;
}

.arc-x {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}

.arc-x:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.arc-cmpwrap {
  grid-column: 1 / -1;
  min-width: 0;
}

.arc-cmp {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.arc-cmp th,
.arc-cmp td {
  padding: 8px 10px;
  border: 0;
  text-align: right;
  vertical-align: baseline;
  white-space: nowrap;
}

.arc-cmp thead th {
  padding-top: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
}

.arc-cmp th:first-child {
  padding-left: 0;
  text-align: left;
}

.arc-cmp th:last-child,
.arc-cmp td:last-child {
  padding-right: 0;
}

.arc-cmp tbody th {
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
}

.arc-cmp tbody tr + tr {
  border-top: 1px solid var(--arc-rule-2);
}

.arc-cmp tr.is-op td,
.arc-cmp td.is-op {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
}

.arc-cmp tr.is-cx td,
.arc-cmp td.is-cx,
.arc-cmp tr.is-cx th,
.arc-cmp th.is-cx {
  color: var(--arc-cx-ink);
}

.arc-cmp tr.is-cx td,
.arc-cmp td.is-cx {
  font-size: 18px;
}

.arc-dbody {
  overflow: auto;
  padding: 4px 28px 40px;
  overscroll-behavior: contain;
}

.arc-dbody .arc-section {
  margin-top: 28px;
}

.arc-drawer .arc-dbody .arc-sechead h2 {
  font-size: 24px;
}

.arc-lvsel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.arc-lvsel button {
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--ink-3);
  font: 500 12.5px var(--text);
  cursor: pointer;
}

.arc-lvsel button:hover {
  color: var(--ink);
}

.arc-lvsel button[aria-pressed="true"] {
  border-color: var(--ink);
  color: var(--ink);
}

.arc-lvhead {
  padding: 18px 0 4px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.arc-msg {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--arc-rule-2);
}

.arc-msg__m {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}

.arc-msg__m b {
  display: block;
  color: var(--ink-2);
}

.arc-msg p {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.arc-loading {
  padding: 18px 0;
  color: var(--ink-3);
  font-size: 14px;
}

/* --- Narrower screens ---------------------------------------------------- */

@media (max-width: 1000px) {
  .arc-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .arc-savings {
    grid-template-columns: 1fr 1fr;
    row-gap: 18px;
  }

  .arc-sv {
    padding-right: 12px;
  }

  .arc-sv:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  /* hidden cells leave the row, so the columns are formed from the visible
     ones: automatic layout, not the desktop's fixed column widths */
  .arc-games {
    table-layout: auto;
  }

  .arc-games col,
  .arc-games .c-frame,
  .arc-games .c-name,
  .arc-games .c-levels {
    width: auto;
  }

  .arc-hide-sm,
  .arc-games td:nth-child(1),
  .arc-games th:nth-child(1),
  .arc-games td:nth-child(3),
  .arc-games th:nth-child(3) {
    display: none;
  }

  .arc-games td:nth-child(2),
  .arc-games th:nth-child(2) {
    width: 64px;
    padding-left: 0;
  }

  .arc-games td:nth-child(n+4),
  .arc-games th:nth-child(n+4) {
    padding-left: 10px;
  }

  .arc-tw span {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .arc-dh {
    grid-template-columns: 64px minmax(0, 1fr) 36px;
    gap: 14px;
    padding: 18px;
  }

  .arc-frame--lg {
    width: 64px;
    height: 64px;
  }

  .arc-d-title {
    font-size: 28px;
  }

  .arc-dbody {
    padding: 4px 18px 30px;
  }

  .arc-msg {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
  }

  .arc-cmp td.is-op,
  .arc-cmp td.is-cx {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-scrim,
  .arc-drawer,
  .arc-games tbody tr {
    transition: none;
  }

  body.arc-is-open .arc-drawer {
    transition: none;
  }
}