/* =========================================================
   Qwen-Image-2512 — image comparison explorer
   Overview grid of 24 curated prompts + a full-screen A/B
   explorer (reveal slider, side-by-side, synced zoom/pan).

   Reuses global theme from ../../../css/styles.css.
   Everything here is prefixed .cmp-*
   ========================================================= */

/* ---------- sheet / hero ---------- */

.cmp-sheet {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px clamp(20px, 3.5vw, 40px) 60px;
}

.cmp-hero {
  border-bottom: 1px solid rgba(240, 100, 0, 0.35);
  padding-bottom: 30px;
  margin-bottom: 45px;
}

.cmp-eyebrow {
  margin: 0 0 10px 0;
  color: #888888;
  font-size: 0.85em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cmp-hero h1 {
  margin: 0 0 20px 0;
  font-size: 2.5em;
  line-height: 1.2;
  color: #f06400;
}

.cmp-lede {
  margin: 0 0 25px 0;
  color: #cccccc;
  line-height: 1.7;
}

.cmp-backlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 0.92em;
  font-weight: 500;
  color: #ffffff;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.cmp-backlink:hover {
  color: #ffffff;
  transform: translateY(-3px);
  border-color: rgba(240, 100, 0, 0.35);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  box-shadow: 0 16px 48px rgba(240, 100, 0, 0.15),
    0 0 0 1px rgba(240, 100, 0, 0.1);
}

/* ---------- section head ---------- */

.cmp-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 30px;
}

.cmp-section-headings {
  min-width: 0;
}

.cmp-section-head h2 {
  margin: 0 0 8px 0;
  font-size: 1.6em;
  color: #f06400;
}

.cmp-section-sub {
  margin: 0;
  color: #888888;
  font-size: 0.92em;
}

/* ---------- family switch ---------- */

.cmp-family-switch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-right: auto;
}

.cmp-family-caption {
  color: #888888;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cmp-families {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cmp-family {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: none;
  border-radius: 30px;
  background: transparent;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 500;
  color: #888888;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.cmp-family:hover {
  color: #ffffff;
}

.cmp-family:focus-visible {
  outline: 2px solid #f06400;
  outline-offset: 2px;
}

.cmp-family.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #f06400 0%, #d35400 100%);
}

.cmp-family i {
  font-size: 0.9em;
}

/* ---------- overview grid ---------- */

.cmp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.cmp-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.cmp-card:hover,
.cmp-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(240, 100, 0, 0.35);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  box-shadow: 0 16px 48px rgba(240, 100, 0, 0.15),
    0 0 0 1px rgba(240, 100, 0, 0.1);
  outline: none;
}

.cmp-card-thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.cmp-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cmp-card:hover .cmp-card-thumb img {
  transform: scale(1.04);
}

.cmp-card-index {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cmp-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  flex: 1;
}

/* The curator note is the card text: the prompts themselves are not the
   point of this page, the note saying what is interesting is. It echoes the
   explorer callout with the same orange left rule, clamped to four lines so
   the rows stay even. The full prompt lives in the explorer. */

.cmp-card-note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(240, 100, 0, 0.5);
  color: #cccccc;
  font-size: 0.92em;
  line-height: 1.6;
  min-height: 6.4em; /* 4 lines, so cards line up across rows */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cmp-card-cta {
  margin-top: auto;
  padding-top: 2px;
  color: #f06400;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* image failed to load */
.cmp-img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  text-align: center;
  color: #888888;
  font-size: 0.8em;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
}

/* ---------- small print ---------- */

.cmp-smallprint {
  margin: 55px 0 0 0;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #888888;
  font-size: 0.85em;
  line-height: 1.7;
}

/* ---------- explorer shell ---------- */

.cmp-explorer[hidden] {
  display: none;
}

.cmp-explorer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #000000;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cmp-explorer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(14px, 2.2vw, 26px) 26px;
}

/* header */

.cmp-exp-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cmp-exp-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cmp-exp-counter {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cmp-counter-label {
  min-width: 130px;
  text-align: center;
  color: #ffffff;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- generic control ---------- */

.cmp-ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 30px;
  font-family: inherit;
  font-size: 0.88em;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.cmp-ctl:hover:not(:disabled),
.cmp-ctl:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(240, 100, 0, 0.35);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );
  box-shadow: 0 16px 48px rgba(240, 100, 0, 0.15),
    0 0 0 1px rgba(240, 100, 0, 0.1);
  outline: none;
}

.cmp-ctl:disabled {
  opacity: 0.35;
  cursor: default;
}

.cmp-ctl-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 0.95em;
}

/* ---------- explorer body ---------- */

.cmp-exp-body {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  flex: 1;
}

.cmp-exp-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 84px;
}

/* curator note callout */

.cmp-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 8px;
  background: rgba(240, 100, 0, 0.07);
  border: 1px solid rgba(240, 100, 0, 0.35);
  border-left: 4px solid #f06400;
}

.cmp-note-icon {
  flex-shrink: 0;
  padding-top: 2px;
  color: #f06400;
  font-size: 1.05em;
}

.cmp-note-label {
  margin: 0 0 6px 0;
  color: #f06400;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cmp-note-body {
  margin: 0;
  color: #ffffff;
  font-size: 0.95em;
  line-height: 1.65;
}

/* prompt */

.cmp-prompt-block {
  padding: 16px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cmp-prompt-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0 0 8px 0;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.cmp-prompt-label {
  color: #888888;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cmp-prompt-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #f06400;
  font-size: 0.8em;
  font-weight: 500;
  transition: color 0.3s ease;
}

.cmp-prompt-toggle:hover .cmp-prompt-more,
.cmp-prompt-toggle:focus-visible .cmp-prompt-more {
  color: #ff7a1f;
}

.cmp-prompt-more i {
  font-size: 0.85em;
  transition: transform 0.3s ease;
}

.cmp-prompt-toggle[aria-expanded="true"] .cmp-prompt-more i {
  transform: rotate(180deg);
}

.cmp-prompt {
  margin: 0;
  color: #cccccc;
  font-size: 0.9em;
  line-height: 1.65;
}

.cmp-prompt.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- stage ---------- */

.cmp-exp-stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cmp-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.cmp-modes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cmp-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: none;
  border-radius: 30px;
  background: transparent;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 500;
  color: #888888;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.cmp-mode:hover {
  color: #ffffff;
}

.cmp-mode.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, #f06400 0%, #d35400 100%);
}

.cmp-stage-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cmp-zoom-level {
  min-width: 52px;
  text-align: center;
  color: #888888;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

/* the square comparison stage */

.cmp-stage {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  /* Let the page scroll over the stage until the user zooms in. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.cmp-stage.is-zoomed {
  touch-action: none;
  cursor: grab;
}

.cmp-stage.is-zoomed.is-panning {
  cursor: grabbing;
}

/* Size the stage from the available height so the box hugs the 1:1
   images instead of letterboxing them inside a wider container. */
.cmp-stage[data-mode="slider"] {
  aspect-ratio: 1 / 1;
  width: auto;
  height: min(calc(100vh - 250px), 560px);
  max-width: 100%;
  margin: 0 auto;
}

/* Side by side holds two 1:1 images in half-width cells, so the box is
   ~2:1 (two squares plus the 12px gap). Drive it from the width and let
   the square cells set the height, so the images never letterbox; the
   width cap keeps the pair inside the same height budget the slider
   uses, so a short viewport shrinks the pair instead of overflowing. */
.cmp-stage[data-mode="side"] {
  aspect-ratio: auto;
  width: min(100%, calc(2 * (100vh - 250px) + 12px));
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  background: transparent;
  border: none;
}

.cmp-stage[data-mode="side"] .cmp-side {
  position: relative;
  inset: auto;
}

.cmp-stage[data-mode="side"] .cmp-side-cell {
  aspect-ratio: 1 / 1;
}

/* slider mode */

.cmp-stage[data-mode="side"] .cmp-slider {
  display: none;
}

.cmp-stage[data-mode="slider"] .cmp-side {
  display: none;
}

.cmp-slider {
  position: absolute;
  inset: 0;
}

.cmp-pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cmp-pane-b {
  /* clipped from the left edge to the divider by JS */
  clip-path: inset(0 0 0 50%);
}

.cmp-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cmp-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}

/* variant labels */

.cmp-tag {
  position: absolute;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(50% - 24px);
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cmp-tag::before {
  flex-shrink: 0;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.cmp-tag-a {
  left: 12px;
  border-color: rgba(255, 255, 255, 0.25);
}

.cmp-tag-a::before {
  content: "A";
}

.cmp-tag-b {
  right: 12px;
  border-color: rgba(240, 100, 0, 0.5);
  color: #f06400;
}

.cmp-tag-b::before {
  content: "B";
}

.cmp-side .cmp-tag {
  max-width: calc(100% - 24px);
}

.cmp-side .cmp-tag-b {
  left: 12px;
  right: auto;
}

/* divider handle */

.cmp-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 4;
  width: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
}

.cmp-handle:focus-visible {
  outline: none;
}

.cmp-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, #f06400, #ff8c3a);
  box-shadow: 0 0 12px rgba(240, 100, 0, 0.6);
}

.cmp-handle-grip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.75em;
  background: linear-gradient(135deg, #f06400 0%, #d35400 100%);
  box-shadow: 0 8px 24px rgba(240, 100, 0, 0.4);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cmp-handle:hover .cmp-handle-grip,
.cmp-handle:focus-visible .cmp-handle-grip {
  transform: scale(1.1);
}

.cmp-handle:focus-visible .cmp-handle-grip {
  box-shadow: 0 8px 24px rgba(240, 100, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* side-by-side mode */

.cmp-side {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cmp-side-cell {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* hint */

.cmp-stage-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 5px 14px;
  border-radius: 30px;
  color: #cccccc;
  font-size: 0.75em;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 1;
  transition: opacity 0.4s ease;
}

.cmp-stage-hint.is-hidden {
  opacity: 0;
}

/* ---------- filmstrip ---------- */

.cmp-strip-wrap {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.cmp-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.cmp-strip-title {
  color: #888888;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cmp-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.cmp-chip {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cmp-chip-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cmp-chip-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cmp-chip-size {
  margin-top: 1px;
  text-align: center;
  color: #888888;
  font-size: 0.7em;
  letter-spacing: 0.02em;
}

.cmp-chip-name {
  margin-top: 7px;
  color: #888888;
  font-size: 0.72em;
  line-height: 1.35;
  text-align: center;
  word-break: break-word;
  transition: color 0.3s ease;
}

.cmp-chip-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 7px;
}

.cmp-pick {
  padding: 5px 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #888888;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cmp-pick:hover:not(:disabled) {
  color: #ffffff;
  border-color: rgba(240, 100, 0, 0.35);
}

.cmp-pick:focus-visible {
  outline: 2px solid #f06400;
  outline-offset: 2px;
}

.cmp-pick:disabled {
  opacity: 0.3;
  cursor: default;
}

.cmp-pick.is-on {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #f06400 0%, #d35400 100%);
}

/* selected chip states */

.cmp-chip.is-a .cmp-chip-thumb,
.cmp-chip.is-b .cmp-chip-thumb {
  border-color: rgba(240, 100, 0, 0.6);
  box-shadow: 0 0 0 2px rgba(240, 100, 0, 0.35);
}

.cmp-chip.is-a .cmp-chip-name,
.cmp-chip.is-b .cmp-chip-name {
  color: #ffffff;
}

.cmp-chip-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.7em;
  font-weight: 700;
  background: linear-gradient(135deg, #f06400 0%, #d35400 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.cmp-chip.is-a .cmp-chip-badge-a,
.cmp-chip.is-b .cmp-chip-badge-b {
  display: flex;
}

.cmp-chip-badge-b {
  left: auto;
  right: 6px;
}

/* baseline marker */

.cmp-chip-base {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 30px;
  color: #cccccc;
  font-size: 0.62em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
  .cmp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .cmp-exp-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-exp-text {
    position: static;
  }

  /* Stacked layout: the stage is width-driven, not height-driven. */
  .cmp-stage[data-mode="slider"],
  .cmp-stage[data-mode="side"] {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 900px) {
  .cmp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .cmp-sheet {
    padding-top: 90px;
    padding-bottom: 40px;
  }

  .cmp-hero h1 {
    font-size: 1.6em;
  }

  .cmp-lede {
    font-size: 0.95em;
  }

  .cmp-section-head h2 {
    font-size: 1.4em;
  }

  .cmp-grid {
    gap: 16px;
  }

  .cmp-card-body {
    gap: 12px;
    padding: 14px 16px 16px;
  }

  .cmp-card-note {
    font-size: 0.88em;
    line-height: 1.55;
    min-height: 6.2em;
  }

  /* side-by-side stacks vertically on phones: back to one 1:2 box that
     fills the stage, rather than the width-driven pair used above */
  .cmp-stage[data-mode="side"] {
    aspect-ratio: 1 / 2;
  }

  .cmp-stage[data-mode="side"] .cmp-side {
    position: absolute;
    inset: 0;
  }

  .cmp-stage[data-mode="side"] .cmp-side-cell {
    aspect-ratio: auto;
  }

  .cmp-side {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
  }

  .cmp-exp-head {
    flex-wrap: wrap;
    justify-content: center;
  }

  .cmp-exp-counter {
    order: -1;
    width: 100%;
    justify-content: space-between;
  }

  .cmp-counter-label {
    min-width: 0;
  }

  .cmp-stage-bar {
    justify-content: center;
  }

  .cmp-ctl-back span,
  .cmp-ctl-reset span,
  .cmp-ctl-swap span {
    display: none;
  }

  .cmp-ctl-back,
  .cmp-ctl-reset,
  .cmp-ctl-swap {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }

  .cmp-family-switch {
    width: 100%;
    align-items: flex-start;
  }

  .cmp-exp-lead {
    gap: 8px;
  }

  .cmp-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cmp-chip-name {
    font-size: 0.68em;
  }

  .cmp-stage-hint {
    font-size: 0.7em;
  }
}

@media (max-width: 480px) {
  .cmp-sheet {
    padding-top: 80px;
    padding-bottom: 30px;
  }

  .cmp-hero h1 {
    font-size: 1.4em;
  }

  .cmp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* one card per row: nothing to line up against, so let short notes
     make short cards */
  .cmp-card-note {
    min-height: 0;
  }

  .cmp-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cmp-mode span {
    display: none;
  }

  .cmp-mode {
    padding: 8px 14px;
  }

  /* keep the family name, drop its icon */
  .cmp-family i {
    display: none;
  }

  .cmp-family {
    padding: 8px 13px;
    font-size: 0.78em;
  }
}