/* ════════════════════════════════════════════════════════════════
   INTERACTIVE OVERVIEW (the paper's overview figure in HTML)
   ════════════════════════════════════════════════════════════════ */
.ov-wrap {
  max-width: 1480px;
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
}

.ov-hint {
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}

.ov {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  grid-template-rows: auto 40px auto;
  grid-template-areas:
    "p1 a12 p2"
    ".  .   a23"
    "p4 a34 p3";
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text);
}

.ov-p1 { grid-area: p1; --ph-bg: #e8eff8; --ph-line: #b8cce6; --ph-ink: #1f3d63; --ph-accent: #4a78b5; }
.ov-p2 { grid-area: p2; --ph-bg: #fbece3; --ph-line: #efc6ad; --ph-ink: #8a3a12; --ph-accent: #c8642f; }
.ov-p3 { grid-area: p3; --ph-bg: #e8f3e7; --ph-line: #b6d8b4; --ph-ink: #21592c; --ph-accent: #3c8f4c; }
.ov-p4 { grid-area: p4; --ph-bg: #eeebf8; --ph-line: #cdc3ec; --ph-ink: #3a2a7a; --ph-accent: #6250d6; }

/* Arrows between the phases: 1 to 2, 2 down to 3, 3 back to 4 */
.ov-flow { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.ov-flow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ov-a12 { grid-area: a12; }
.ov-a23 { grid-area: a23; }
.ov-a23 svg { transform: rotate(90deg); }
.ov-a34 { grid-area: a34; }
.ov-a34 svg { transform: rotate(180deg); }

/* Phase panels */
.ov-phase {
  background: var(--ph-bg);
  border: 2px solid var(--ph-line);
  border-radius: 16px;
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s;
}

.ov-phase:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); }

.ov-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.ov-head h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ph-ink);
  letter-spacing: -0.01em;
}

.ov-link {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ph-accent);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

.ov-phase:hover .ov-link, .ov-link:focus-visible { opacity: 1; transform: none; }
.ov-link:hover { text-decoration: underline; }

/* Rows of cards with small arrows between them */
.ov-row {
  display: grid;
  align-items: stretch;
  gap: 0;
  flex: 1;
}

.ov-p1-row { grid-template-columns: minmax(0, 0.95fr) 22px minmax(0, 1.25fr) 22px minmax(0, 1.05fr); }
.ov-p2-row { grid-template-columns: minmax(0, 0.95fr) 22px minmax(0, 1.25fr) 22px minmax(0, 1fr); }
.ov-p3-row { grid-template-columns: minmax(0, 0.9fr) 22px minmax(0, 1.4fr) 22px minmax(0, 1fr); }
.ov-p4-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }

.ov-arrow { display: flex; align-items: center; justify-content: center; color: var(--ph-accent); }
.ov-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.ov-stack { display: flex; flex-direction: column; gap: 0.45rem; }
.ov-stack > .ov-card { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.ov-card {
  background: var(--bg-card);
  border: 1.5px solid var(--ph-line);
  border-radius: 10px;
  padding: 0.6rem 0.65rem;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
}

.ov-card h4 {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ph-ink);
  margin-bottom: 0.3rem;
  line-height: 1.2;
}

.ov-card p { color: var(--text-muted); }

.ov-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ph-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  margin: 0 auto 0.15rem;
}

/* Anything with details shows them on hover */
.ov [data-tip] { cursor: help; }
.ov-card[data-tip]:hover, .ov-card[data-tip]:focus-visible,
.ov-stat[data-tip]:hover, .ov-example:hover,
.ov-criteria li:hover, .ov-criteria li:focus-visible,
.ov-chain > div:hover, .ov-mini:hover {
  border-color: var(--ph-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ph-accent) 18%, transparent);
  outline: none;
}

.ov-big { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--ph-ink); }
.ov-big b, .ov-stat b { font-variant-numeric: tabular-nums; }

/* Phase 1 */
.ov-actions, .ov-tiers { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }

.ov-stat {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  padding: 0.1rem 0.5rem;
  border: 1.5px solid transparent;
  border-radius: 8px;
}

.ov-down { color: var(--ph-accent); font-size: 0.86rem; }

.ov-example {
  margin-top: 0.25rem;
  width: 100%;
  border: 1.5px dashed var(--ph-line);
  border-radius: 8px;
  padding: 0.45rem 0.4rem 0.35rem;
  color: var(--text-muted);
}

.ov-ex-title { font-weight: 700; color: var(--text); margin-bottom: 0.1rem; }
.ov-example b { color: var(--text); }
.ov-example span { transition: opacity 0.25s; }
.ov-example.swap span { opacity: 0; }

.ov-dots { display: flex; justify-content: center; gap: 5px; margin-top: 0.3rem; }
.ov-dots button {
  width: 7px; height: 7px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--ph-line);
  cursor: pointer;
}
.ov-dots button.on { background: var(--ph-accent); }

.ov-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin: 0.2rem 0; }
.ov-chips span {
  font-size: 0.78rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--ph-bg);
  border: 1px solid var(--ph-line);
  color: var(--ph-ink);
  transition: background 0.15s, color 0.15s;
}
.ov-chips span:hover, .ov-chips span:focus-visible { background: var(--ph-accent); color: #fff; outline: none; }

.ov-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  width: 100%;
  margin-top: 0.25rem;
}

.ov-thumb {
  aspect-ratio: 4 / 3;
  border: none;
  border-radius: 3px;
  padding: 0;
  background: var(--bg-elevated) center / cover no-repeat;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}

.ov-thumb:hover, .ov-thumb:focus-visible {
  transform: scale(1.9);
  position: relative;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  outline: none;
}

/* Phase 2 */
.ov-memory { flex: 0 0 auto !important; }
.ov-rw {
  display: flex;
  justify-content: space-around;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ph-accent);
}

.ov-ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.ov-ev-grid figure { margin: 0; }
.ov-ev-grid img, .ov-ev-grid video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  background: #fff;
  transition: transform 0.2s;
}
.ov-ev-grid .ov-zoom img { object-fit: contain; border: 1px solid var(--border); }
.ov-ev-grid figure:hover img, .ov-ev-grid figure:hover video { transform: scale(1.04); }
.ov-ev-grid figcaption { font-weight: 600; font-size: 0.8rem; margin-top: 0.15rem; }
.ov-zoom { cursor: zoom-in !important; }

.ov-criteria { text-align: left; }
.ov-criteria h4 { text-align: center; }
.ov-criteria ul { list-style: none; display: flex; flex-direction: column; gap: 0.15rem; }
.ov-criteria li {
  padding: 0.22rem 0.4rem;
  border: 1.5px solid transparent;
  border-radius: 7px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ov-criteria li b { display: block; color: var(--text); font-size: 0.86rem; }
.ov-criteria li span { color: var(--text-muted); font-size: 0.8rem; }

/* The audit loop runs back from the criteria to the agent */
.ov-foot { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.15rem; }

.ov-loop {
  position: relative;
  flex: 1;
  height: 34px;
  margin: 0 0 0 7%;
  border: 2px solid var(--ph-accent);
  border-top: none;
  border-radius: 0 0 12px 12px;
  opacity: 0.85;
}

.ov-loop::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -6px;
  border: 6px solid transparent;
  border-bottom: 8px solid var(--ph-accent);
  border-top: none;
}

.ov-loop-label {
  position: absolute;
  left: 50%;
  bottom: -0.65rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font: italic 500 0.82rem var(--font-body);
  color: var(--ph-ink);
  background: var(--ph-bg);
  border: none;
  padding: 0 0.4rem;
  cursor: pointer !important;
}
.ov-loop-label:hover { text-decoration: underline; }
.ov-round { font-style: normal; font-weight: 700; color: var(--ph-accent); margin-left: 0.25rem; }

.ov-verified {
  align-self: flex-end;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dim);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  background: var(--bg-card);
  transition: all 0.4s;
}

.ov-p2.verified .ov-verified {
  color: #15803d;
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 10%, var(--bg-card));
  animation: ov-pop 0.5s ease;
}

@keyframes ov-pop { 50% { transform: scale(1.08); } }

/* Live highlight while the audit loop animation runs */
.ov .live {
  border-color: var(--ph-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ph-accent) 28%, transparent);
  transform: translateY(-2px);
}
.ov-loop.live { opacity: 1; transform: none; box-shadow: none; border-width: 3px; }

/* Phase 3 */
.ov-attempts { flex: 0 0 auto !important; }
.ov-vdown { text-align: center; color: var(--ph-accent); font-weight: 700; line-height: 1; }

.ov-tabs { display: flex; justify-content: center; gap: 4px; margin-bottom: 0.4rem; }
.ov-tabs button {
  font: 600 0.78rem var(--font-body);
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--ph-line);
  background: var(--bg-card);
  color: var(--ph-ink);
  cursor: pointer;
}
.ov-tabs button.on { background: var(--ph-accent); border-color: var(--ph-accent); color: #fff; }

.ov-task-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.5rem;
  text-align: left;
  transition: opacity 0.2s;
}
.ov-task-grid.swap { opacity: 0; }
.ov-task-grid figure { margin: 0; }
.ov-task-grid img { width: 100%; border-radius: 5px; display: block; }
.ov-s0 img { aspect-ratio: 3 / 2; object-fit: cover; }
.ov-s0 figcaption { font-size: 0.8rem; color: var(--text-muted); }
.ov-p, .ov-vtext { font-size: 0.82rem; color: var(--text-muted); align-self: center; }
.ov-p { color: var(--text); }
.ov-task-grid i { font-family: Georgia, serif; font-weight: 700; color: var(--ph-ink); }
.ov-v { background: #fff; border-radius: 5px; }
.ov-v[hidden] + .ov-vtext { grid-column: 1 / -1; }

.ov-p3-foot { flex-direction: column; align-items: stretch; }
.ov-p3-foot .ov-loop { flex: 0 0 34px; margin: 0 7%; }

.ov-any {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0.6rem;
  margin-top: 1rem;
  text-align: left;
}

.ov-any-robot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1.2;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.ov-any-robot img { width: 74px; border-radius: 4px; transition: transform 0.2s; }
.ov-any-robot:hover img { transform: scale(1.12); }
.ov-any b { font-family: var(--font-display); font-size: 0.9rem; color: var(--ph-ink); }
.ov-any span { font-size: 0.8rem; color: var(--text-muted); }
.ov-any-var { display: flex; align-items: center; gap: 0.4rem; flex: 1; }

/* Phase 4 */
.ov-learn { display: flex; flex-direction: column; }
.ov-sub, .ov-note, .ov-cap { font-size: 0.8rem; }
.ov-note { font-style: italic; color: var(--ph-accent) !important; margin: 0.25rem 0; }
.ov-cap { margin-top: auto; padding-top: 0.25rem; border-top: 1px dashed var(--ph-line); }

.ov-attempts-row { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0.35rem; }
.ov-attempts-row span {
  width: 30px; height: 26px;
  display: grid; place-items: center;
  border: 2px solid var(--ph-accent);
  border-radius: 7px;
  font-weight: 700;
  color: var(--ph-ink);
  transition: background 0.3s, color 0.3s;
}
.ov-attempts-row i { color: var(--ph-accent); font-style: normal; font-weight: 700; }
.ov-attempts-row span.on { background: var(--ph-accent); color: #fff; }

.ov-cs { display: flex; align-items: stretch; gap: 0.25rem; }
.ov-mini {
  flex: 1;
  border: 1.5px solid var(--ph-line);
  border-radius: 8px;
  padding: 0.35rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ov-mini b { color: var(--ph-ink); font-size: 0.88rem; }
.ov-mini span { font-size: 0.78rem; color: var(--text-muted); }
.ov-hints { display: flex; flex-direction: column; justify-content: center; color: var(--ph-accent); font-weight: 700; }
.ov-hints i { font-style: normal; line-height: 1; }
.ov-hints i:last-child { opacity: 0.55; }

.ov-chain { display: flex; flex-direction: column; gap: 0.3rem; }
.ov-chain > div {
  border: 1.5px solid var(--ph-line);
  border-radius: 8px;
  padding: 0.25rem 0.3rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ov-chain b { display: block; color: var(--ph-ink); font-size: 0.86rem; }
.ov-chain span { font-size: 0.78rem; color: var(--text-muted); }

/* Charts */
.ov-chart { margin-top: 0.35rem; }
.ov-learn .ov-chart { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ov-chart svg { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.ov-chart .grid { stroke: var(--border); stroke-width: 1; }
.ov-chart .tick { font-size: 10.5px; fill: var(--text-dim); font-family: var(--font-body); }
.ov-chart .lab { font-size: 11.5px; font-weight: 700; font-family: var(--font-body); }
.ov-chart .line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s ease 0.2s;
}
.ov-phase.in .ov-chart .line { stroke-dashoffset: 0; }
.ov-chart .hit { fill: transparent; cursor: help; }
.ov-chart .hit:hover + .dot, .ov-chart .dot:hover { r: 4.5; }

.ov-bars { display: flex; align-items: flex-end; gap: 0.35rem; height: 100%; min-height: 112px; max-height: 200px; padding: 0 0.2rem; }
.ov-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.ov-bar-plot { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.ov-bar-val { font-weight: 700; font-size: 0.8rem; color: var(--text); margin-bottom: 2px; opacity: 0; transition: opacity 0.4s 0.9s; }
.ov-bar i {
  display: block;
  width: 72%;
  height: 0;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  transition: height 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, filter 0.15s;
}
.ov-phase.in .ov-bar i { height: var(--h); }
.ov-phase.in .ov-bar-val { opacity: 1; }
.ov-bar:hover i { filter: brightness(1.12); }
.ov-bar-lab { font-size: 0.76rem; color: var(--text-muted); text-align: center; line-height: 1.15; margin-top: 3px; min-height: 2.3em; }

/* Tooltip shared by every part of the figure */
.ov-tip {
  position: fixed;
  z-index: 1000;
  max-width: 300px;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: #1a1a1e;
  color: #f4f4f6;
  font-size: 0.86rem;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
}
.ov-tip.show { opacity: 1; transform: none; }

#ov-lightbox {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  margin: auto;
  background: var(--bg-card);
  color: var(--text);
  max-width: min(1200px, 94vw);
}
#ov-lightbox::backdrop { background: rgba(0, 0, 0, 0.7); }
#ov-lightbox img { max-width: 100%; max-height: 78vh; display: block; margin: 0 auto; background: #fff; border-radius: 6px; }
#ov-lightbox p { margin-top: 0.6rem; font-size: 0.92rem; color: var(--text-muted); }

/* Narrow screens: one phase per row, then one card per row */
@media (max-width: 1150px) {
  .ov {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "p1" "a12" "p2" "a23" "p3" "a34" "p4";
  }
  .ov-flow { height: 36px; }
  .ov-flow svg { transform: rotate(90deg) !important; }
  .ov-link { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .ov-p1-row, .ov-p2-row, .ov-p3-row, .ov-p4-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ov-p4-row { gap: 0.6rem; }
  .ov-arrow { height: 26px; }
  .ov-arrow svg { transform: rotate(90deg); }
  .ov-foot { flex-direction: column; align-items: stretch; }
  .ov-loop, .ov-p3-foot .ov-loop { flex: 0 0 34px; margin: 0 4% 2.6rem; }
  .ov-loop-label { white-space: normal; text-align: center; width: 90%; bottom: auto; top: calc(100% - 0.65rem); }
  .ov-any { flex-basis: auto; flex-direction: column; }
  .ov-head { flex-direction: column; gap: 0.2rem; }
  .ov-chart svg { max-width: 250px; }
  .ov-bars { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .ov *, .ov-tip { transition: none !important; animation: none !important; }
}