/* ---- /compare/ — two aesthetics, one divider ---- */

.cmp-wrap { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.5rem 5rem; }

.cmp-back {
  display: inline-block; margin-bottom: 1.2rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft);
}
.cmp-back:hover { color: var(--ink); }

.cmp-title {
  font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
  font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.01em; margin-bottom: 0.3rem;
}
.cmp-lede { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 1.6rem; }

/* ---- Pickers ---- */
.cmp-pickers {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.7rem; align-items: center;
  margin-bottom: 1.2rem;
}
.cmp-pick { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.cmp-pick-tag {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  border-radius: 999px; background: var(--ink); color: var(--paper); flex: none;
}
.cmp-pick select {
  flex: 1; min-width: 0; font: inherit; font-size: 0.92rem;
  padding: 0.55rem 0.8rem; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--card-bg); color: var(--ink);
}
.cmp-swap {
  font-size: 1.1rem; line-height: 1; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--card-bg); color: var(--ink); cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cmp-swap:hover { border-color: currentColor; transform: rotate(180deg); }

/* ---- Stage ---- */
.cmp-stage {
  --cmp-x: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 16px; border: 1px solid var(--hairline);
  background: var(--paper);
  min-height: 520px;
  user-select: none; -webkit-user-select: none;
}
.cmp-layer { position: relative; }
.cmp-layer-b { position: relative; z-index: 1; }
.cmp-layer-a {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 calc(100% - var(--cmp-x)) 0 0);
}
.cmp-layer > .detail-themed { min-height: 100%; }

/* Normalize the themed root so both layers place content at the same offsets.
   Themes set root padding anywhere from 16px to 2.5rem; border width is
   compensated in JS via --cmp-bw so a 4px Neubrutalism frame doesn't shift
   its inner content relative to a borderless neighbor. */
.cmp-stage .detail-themed[data-aesthetic] {
  --cmp-bw: 0px;
  padding: calc(2.5rem - var(--cmp-bw)) calc(1.5rem - var(--cmp-bw)) calc(2.5rem - var(--cmp-bw));
  border-radius: 0;
  margin: 0;
  min-height: 520px;
  box-sizing: border-box;
}
.cmp-stage .detail-themed > * { max-width: 880px; margin-left: auto; margin-right: auto; }
/* Pin the block heights that vary with each theme's type (a two-line name in a
   wide display face vs. one line in a mono) so the sandbox and palette rows
   start at the same y on both layers. */
.cmp-stage .detail-themed[data-aesthetic] .detail-header { margin-bottom: 1.6rem; min-height: 10.5rem; }
.cmp-stage .detail-themed[data-aesthetic] .detail-section { margin-top: 1.8rem; }
.cmp-stage .detail-themed[data-aesthetic] .detail-section h3 { min-height: 1.6rem; margin-bottom: 0.9rem; }
/* Themes restyle the sandbox frame's padding/gap (16px–2.5rem); pin the box
   geometry here so the card/form land at the same offsets on both layers.
   Borders, backgrounds, radii, and everything inside stay theme-owned. */
.cmp-stage .detail-themed[data-aesthetic] .sandbox-stage {
  pointer-events: none;
  padding: 2rem; gap: 1.5rem; grid-template-columns: 1fr 1fr;
  margin: 0; min-height: 300px; align-content: start;
}
.cmp-stage .detail-themed[data-aesthetic] .sb-form { gap: 0.7rem; }
@media (max-width: 700px) {
  .cmp-stage .detail-themed[data-aesthetic] .sandbox-stage { grid-template-columns: 1fr; padding: 1.2rem; }
}

/* ---- Divider ---- */
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--cmp-x); z-index: 3;
  width: 0; cursor: col-resize; touch-action: none; outline: none;
}
.cmp-handle::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
}
.cmp-handle::after {
  /* wide invisible hit area */
  content: ''; position: absolute; top: 0; bottom: 0; left: -14px; width: 28px;
}
.cmp-handle-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center;
  background: #fff; color: #111; font-size: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.25);
}
.cmp-handle:focus-visible .cmp-handle-grip { box-shadow: 0 0 0 3px var(--accent), 0 2px 10px rgba(0,0,0,0.35); }
.cmp-stage.is-dragging { cursor: col-resize; }
.cmp-stage.is-animating .cmp-layer-a { transition: clip-path 0.18s ease; }
.cmp-stage.is-animating .cmp-handle { transition: left 0.18s ease; }
.cmp-layer.is-loading { opacity: 0.55; transition: opacity 0.15s ease; }
.cmp-error { padding: 3rem 1.5rem; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); }

/* ---- Corner labels ---- */
.cmp-label {
  position: absolute; top: 0.8rem; z-index: 4;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  background: rgba(17,17,17,0.82); color: #fff; pointer-events: none;
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-label-a { left: 0.8rem; }
.cmp-label-b { right: 0.8rem; }

.cmp-hint {
  margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-soft);
}

@media (max-width: 640px) {
  .cmp-pickers { grid-template-columns: 1fr; }
  .cmp-swap { justify-self: center; }
  .cmp-stage, .cmp-stage .detail-themed[data-aesthetic] { min-height: 620px; }
}