/* ==========================================================================
   SoGuDiff project page — components layered on top of the template's
   index.css. Everything specific to this paper lives here so the upstream
   template stylesheet stays clean and can be updated independently.
   ========================================================================== */

:root {
  /* Each axis is rendered in the clips with a matplotlib sequential colormap
     that darkens from +1 to -1. These are sampled from the robot marker in
     the clips themselves, so the page and the videos agree.
       prox = Purples   pass = Blues   yield = Greens   group = Oranges
     The --ax-* value is the NEUTRAL (0) shade, used for tabs and card rules. */
  --ax-prox:  #807dba;
  --ax-pass:  #4292c6;
  --ax-yield: #41ab5d;
  --ax-group: #f16913;

  --prox-neg: #3f007d;  --prox-mid: #807dba;  --prox-pos: #bcbddc;
  --pass-neg: #08306b;  --pass-mid: #4292c6;  --pass-pos: #9ecae1;
  --yield-neg:#00441b;  --yield-mid:#41ab5d;  --yield-pos:#a1d99b;
  --group-neg:#7f2704;  --group-mid:#f16913;  --group-pos:#fdae6b;

  --neg-tone: #b45309;
  --pos-tone: #1d4ed8;
  --surface:  #ffffff;
  --hairline: #e2e8f0;
}

/* --------------------------------------------------------------------------
   Hero / header
   -------------------------------------------------------------------------- */

/* Scaled so "Steerable, Norm-Grounded Robot Navigation" fits on one line
   inside the widescreen container, keeping the title to two lines total. */
.publication-title {
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1.22;
}

.publication-affiliations {
  margin-top: 0.35rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.publication-affiliations .affiliation {
  display: inline-block;
  margin: 0 0.6rem;
  font-size: 0.92rem;
}

.publication-affiliations sup { margin-right: 0.15rem; font-weight: 700; }

.venue-badge {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--background-accent);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Keyboard users land here first: hidden until focused, then it sits over
   the hero and jumps past the nav to the content. */
.skip-link {
  position: absolute;
  left: 50%;
  top: -3rem;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.55rem 1.1rem;
  border-radius: 0 0 8px 8px;
  background: var(--primary-color);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   Teaser figure
   -------------------------------------------------------------------------- */

.teaser-figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
}

/* --------------------------------------------------------------------------
   Style axis cards
   -------------------------------------------------------------------------- */

.axis-grid {
  display: grid;
  /* Explicit 2x2. auto-fit produced a 3+1 split at desktop widths, which
     left a conspicuous gap on the second row. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

@media screen and (max-width: 640px) {
  .axis-grid { grid-template-columns: 1fr; }
}

.axis-card {
  padding: 1.4rem;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--axis-color, var(--primary-color));
  border-radius: var(--border-radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.axis-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.axis-card h3 {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.axis-card .axis-symbol {
  display: block;
  margin-bottom: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--axis-color, var(--primary-color));
  font-weight: 600;
}

.axis-card .axis-poles {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
  line-height: 1.55;
}

.axis-card .pole-neg { color: var(--neg-tone); font-weight: 600; }
.axis-card .pole-pos { color: var(--pos-tone); font-weight: 600; }

/* --------------------------------------------------------------------------
   Axis explorer — tabbed, three synchronized clips per axis
   -------------------------------------------------------------------------- */

.axis-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.75rem 0 1.25rem;
}

.axis-tab {
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.axis-tab:hover { border-color: var(--tab-color, var(--primary-color)); color: var(--text-primary); }

.axis-tab[aria-selected="true"] {
  background: var(--tab-color, var(--primary-color));
  border-color: var(--tab-color, var(--primary-color));
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.axis-panel[hidden] { display: none; }

.triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.triptych-cell {
  border: 1px solid var(--hairline);
  border-radius: var(--border-radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.triptych-cell video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0f172a;
  border: none;
  border-radius: 0;
}

.triptych-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--hairline);
}

.style-chip {
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Each chip carries the robot colour that clip actually uses, so the label
   and the moving robot in the frame below it match. Dark shades take white
   text, light shades take a dark tint of the same hue. */
[data-axis="prox"] .style-chip.is-neg,
.style-chip[data-axis="prox"].is-neg  { background: var(--prox-neg);  color: #fff; }
[data-axis="prox"] .style-chip.is-zero,
.style-chip[data-axis="prox"].is-zero { background: var(--prox-mid);  color: #fff; }
[data-axis="prox"] .style-chip.is-pos,
.style-chip[data-axis="prox"].is-pos  { background: var(--prox-pos);  color: #34155e; }

[data-axis="pass"] .style-chip.is-neg,
.style-chip[data-axis="pass"].is-neg  { background: var(--pass-neg);  color: #fff; }
[data-axis="pass"] .style-chip.is-zero,
.style-chip[data-axis="pass"].is-zero { background: var(--pass-mid);  color: #fff; }
[data-axis="pass"] .style-chip.is-pos,
.style-chip[data-axis="pass"].is-pos  { background: var(--pass-pos);  color: #0b3a5c; }

[data-axis="yield"] .style-chip.is-neg,
.style-chip[data-axis="yield"].is-neg  { background: var(--yield-neg); color: #fff; }
[data-axis="yield"] .style-chip.is-zero,
.style-chip[data-axis="yield"].is-zero { background: var(--yield-mid); color: #fff; }
[data-axis="yield"] .style-chip.is-pos,
.style-chip[data-axis="yield"].is-pos  { background: var(--yield-pos); color: #14401f; }

[data-axis="group"] .style-chip.is-neg,
.style-chip[data-axis="group"].is-neg  { background: var(--group-neg); color: #fff; }
[data-axis="group"] .style-chip.is-zero,
.style-chip[data-axis="group"].is-zero { background: var(--group-mid); color: #fff; }
[data-axis="group"] .style-chip.is-pos,
.style-chip[data-axis="group"].is-pos  { background: var(--group-pos); color: #5a2a06; }

.triptych-head .cell-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  line-height: 1.25;
}

.triptych-caption {
  padding: 0.7rem 0.9rem;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Shared playback controls for a synchronized group */
.sync-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.sync-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

.sync-scrub { width: min(320px, 60vw); accent-color: var(--primary-color); cursor: pointer; }

/* --------------------------------------------------------------------------
   Composition grid
   -------------------------------------------------------------------------- */

.compose-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media screen and (max-width: 640px) {
  .compose-grid { grid-template-columns: 1fr; }
}

.compose-card {
  border: 1px solid var(--hairline);
  border-radius: var(--border-radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.compose-card:hover { box-shadow: var(--shadow-md); }

.compose-card video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0f172a;
  border: none;
  border-radius: 0;
}

.compose-body { padding: 0.85rem 1rem 1rem; }

.compose-body .compose-title {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
}

.compose-body p {
  margin: 0.5rem 0 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.vec {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary-color);
  background: rgba(37, 99, 235, 0.08);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.section-lead {
  /* Wide enough that these leads do not strand a single word on the last
     line; text-wrap: pretty handles the rest where the browser supports it. */
  max-width: 72ch;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  text-wrap: pretty;
}

/* For a lead short enough to sit on one line, given the room. */
.section-lead.is-wide { max-width: 88ch; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media screen and (max-width: 900px) {
  .triptych { grid-template-columns: 1fr; gap: 1rem; }
  .triptych-cell video { max-height: 62vh; }
}

@media screen and (max-width: 600px) {
  .axis-tabs { gap: 0.4rem; }
  .axis-tab { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
  .sync-scrub { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .axis-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Animated method walkthrough
   Steps dim the figure and leave the current step's shapes at full opacity.
   Without JS nothing dims, so the figure reads as a normal static diagram.
   -------------------------------------------------------------------------- */

.diagram {
  margin-top: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--border-radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.diagram-stage { padding: 1.25rem 1.25rem 0; background: #fff; }

.dg-figure { line-height: 0; }

.dg-base { display: block; width: 100%; height: auto; }

/* Shape-level highlighting. Every top-level element of the figure carries
   .dg-el, so a step lights whole shapes rather than a rectangular area: a
   box, an arrow or a label is always wholly lit or wholly dim, and can never
   be clipped part way through. */
.dg-el { transition: opacity 0.4s ease; }
.is-animated .dg-el { opacity: 0.12; }
.is-animated .dg-el.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dg-el { transition: none; }
}

.diagram-panel-label {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem 0;
  background: #fff;
}

.dg-phase {
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: var(--background-accent);
  color: var(--text-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: var(--transition);
}

.dg-phase.is-current { background: var(--primary-color); color: #fff; }

/* Caption */
/* Sits below the controls so a change in its height cannot move the buttons,
   and reserves room for the longest step text so the page does not jump as
   the walkthrough advances. */
.diagram-caption {
  min-height: 11rem;
  padding: 0.5rem 1.5rem 1.25rem;
  background: #fff;
  text-align: center;
}

.dg-cap-title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.dg-cap-body {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.65;
}

/* Controls */
.diagram-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 1rem 1.25rem 0.5rem;
  background: #fff;
}

.dg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.3rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.dg-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.dg-btn:disabled { opacity: 0.35; cursor: default; }
.dg-btn:disabled:hover { border-color: var(--hairline); color: var(--text-primary); }

.dg-dots { display: flex; gap: 0.35rem; margin-left: 0.5rem; }

.dg-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: var(--transition);
}

.dg-dot:hover { background: #94a3b8; }
.dg-dot.is-current { background: var(--primary-color); transform: scale(1.25); }

@media screen and (max-width: 700px) {
  .diagram-stage { padding: 0.75rem 0.75rem 0; }
  .diagram-caption { min-height: 14rem; padding: 0.5rem 1rem 1rem; }
  .dg-dots { width: 100%; justify-content: center; margin: 0.4rem 0 0; }
}

/* --------------------------------------------------------------------------
   Inline button icons
   Font Awesome's JS build rewrites <i> into <svg>, which breaks any script
   that later looks the <i> up. Buttons whose icon changes therefore carry
   both states inline and swap them with a class.
   -------------------------------------------------------------------------- */

.ic {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}

.ic-pause { display: none; }
.is-playing .ic-play { display: none; }
.is-playing .ic-pause { display: inline-block; }

/* The arXiv mark is taller than it is wide, so let width follow the aspect
   ratio instead of being forced square like the other button icons. */
.ic-arxiv {
  width: auto;
  height: 1em;
}

/* --------------------------------------------------------------------------
   Layered teaser
   Scene, trajectory layers and robot are stacked in that order, so the robot
   occludes the paths leaving it. The trajectory layers are visible by default:
   with no script the teaser is the figure as printed. Script adds
   .is-interactive, which hands control to .is-on.
   -------------------------------------------------------------------------- */

/* Capped well below the container width: at 1.6:1 this figure otherwise
   pushes the abstract a long way down the page. */
.teaser-stage {
  position: relative;
  line-height: 0;
  max-width: 780px;
  margin: 0 auto;
}

.teaser-stage .teaser-figure { position: relative; z-index: 0; }

.teaser-layer,
.teaser-robot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.teaser-layer { transition: opacity 0.55s ease; }
.teaser-robot { z-index: 2; }          /* above every trajectory layer */

.is-interactive .teaser-layer { opacity: 0; }
.is-interactive .teaser-layer.is-on { opacity: 1; }

.teaser-legend {
  max-width: 820px;
  margin: 1.1rem auto 0;
}

/* Fixed 2x2 rather than auto-fit, which stacked to a single column and made
   the block twice as tall as it needed to be. */
.tl-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.tl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.tl-btn:hover { border-color: var(--tl, var(--primary-color)); }

.tl-btn.is-on {
  border-color: var(--tl, var(--primary-color));
  box-shadow: inset 0 0 0 1px var(--tl, var(--primary-color));
  background: color-mix(in srgb, var(--tl, #2563eb) 6%, #fff);
}

/* The three line weights, in that style's own colour: the same key the
   printed figure carries in its legend columns. */
.tl-key { flex: none; color: var(--tl, var(--primary-color)); }
.tl-key svg { width: 34px; height: 17px; display: block; }

.tl-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.tl-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.tl-vec { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.tl-ax {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.tl-ax b { font-weight: 600; color: var(--text-light); margin-right: 0.15rem; }

.tl-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.tl-plain {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 999px;
}

.tl-plain.is-on { color: var(--text-primary); }

.tl-cycle { gap: 0.4rem; }

/* Compact key for the three line weights and the two scene markers, in place
   of a sentence describing them. */
.tl-key-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.15rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.tl-key-row li { display: inline-flex; align-items: center; gap: 0.4rem; }

.tlk {
  display: inline-block;
  width: 24px;
  border-radius: 2px;
  background: #64748b;
}

.tlk-samples   { height: 0; border-top: 2px dashed #64748b; background: none; }
.tlk-selected  { height: 3px; }
.tlk-projected { height: 5px; }

.tlk-ico { height: 14px; width: auto; display: block; }

@media screen and (max-width: 600px) {
  .tl-rows { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .teaser-layer { transition: none; }
}

/* --------------------------------------------------------------------------
   Baseline comparison
   Ours large, the ten baselines in a grid beneath. All eleven are one sync
   group, so they play as a single clock and hold their last frame; the badge
   says why a panel stopped, which the frozen frame alone cannot.
   -------------------------------------------------------------------------- */

.cmp { margin-top: 1.5rem; }

.cmp-scenes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.cmp-scene {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.cmp-scene:hover { border-color: var(--primary-color); color: var(--text-primary); }

.cmp-scene[aria-selected="true"] {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

.cmp-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: start;
}

.cmp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.6rem;
}

.cmp-panel {
  position: relative;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.cmp-panel video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
}

.cmp-panel figcaption {
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
}

.cmp-panel.is-large figcaption { font-size: 0.95rem; padding: 0.6rem; }

/* Outcome badge: hidden until that panel's own episode ends. */
.cmp-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.cmp-badge.is-on { opacity: 1; }
.cmp-badge.is-success { background: #1e7a3c; }
.cmp-badge.is-collision { background: #c62828; }
.cmp-badge.is-timeout { background: #b26a00; }

.cmp-panel.is-large .cmp-badge { font-size: 0.82rem; padding: 0.2rem 0.65rem; }

.cmp-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.15rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.cmp-key li { display: inline-flex; align-items: center; gap: 0.4rem; }

.cmp-k {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}

.cmp-k-success { background: #1e7a3c; }
.cmp-k-collision { background: #c62828; }
.cmp-k-timeout { background: #b26a00; }

@media screen and (max-width: 900px) {
  .cmp-stage { grid-template-columns: 1fr; }
  .cmp-grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 560px) {
  .cmp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Real-world deployment
   Its own tab classes (.rw-tab / .rw-panel) rather than the explorer's, because
   the explorer binds .axis-tab / .axis-panel document-wide and would otherwise
   drive both blocks as one.
   -------------------------------------------------------------------------- */

.rw-head {
  margin: 2.5rem 0 0.3rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
}

.rw-sub {
  max-width: 68ch;
  margin: 0 auto 1.1rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

.rw-cell {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--border-radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* 16:9 footage, unlike the square simulator renders. */
.rw-cell video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
}

.rw-duo,
.rw-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.rw-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.rw-single { max-width: 900px; margin: 0 auto; }

.rw-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.rw-tab {
  padding: 0.55rem 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.rw-tab:hover { border-color: var(--tab-color, var(--primary-color)); color: var(--text-primary); }

.rw-tab[aria-selected="true"] {
  background: var(--tab-color, var(--primary-color));
  border-color: var(--tab-color, var(--primary-color));
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.rw-panel[hidden] { display: none; }

.rw-cell .triptych-head { justify-content: center; gap: 0.4rem; }

@media screen and (max-width: 780px) {
  .rw-duo,
  .rw-pair,
  .rw-matrix { grid-template-columns: 1fr; }
}