/* ============================================================================
   Matchue — app-only layout.

   public/styles.css is the design system, shared verbatim with claude.ai/design
   and never forked here. This file holds ONLY what the system does not: the
   studio's grid, the color wheel, the sliders, the live preview and the
   handful of page-level containers. Every rule below still speaks the system's
   language — its tokens, never raw values — so app chrome and system components
   stay in step. If something here starts looking reusable, it belongs in
   styles.css instead.
   ========================================================================= */

/* --- header ------------------------------------------------------------- */
header { margin-bottom: var(--space-9); }
header .label-lg { margin-top: 2px; }

/* --- crown --------------------------------------------------------------- */
/* The reigning-pair banner is a system component; the gap to the studio below
   it is page layout, so it lives here rather than in styles.css. Its share
   action is app-specific too, reusing .btn.btn-ghost.btn-sm — hidden until a
   pair actually reigns, nothing to share while the site wears its own house. */
.crown { margin-bottom: var(--space-9); }
[hidden] { display: none !important; }

/* --- head-to-head (homepage) --------------------------------------------- */
.home-arena { margin-bottom: var(--space-10); }
.home-arena > h2 { margin-bottom: 0; }

/* --- studio -------------------------------------------------------------- */
.studio {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: var(--space-9);
  align-items: start;
  margin-bottom: var(--space-10);
}
@media (max-width: 780px) { .studio { grid-template-columns: 1fr; } }

.picker-panel { display: flex; flex-direction: column; align-items: center; }
.picker-panel .seg { width: 100%; max-width: 280px; margin-bottom: var(--space-7); }

/* --- the color wheel (app-specific, does not theme) --------------------- */
.wheel-holder { position: relative; width: 280px; height: 280px; }
#wheel { touch-action: none; cursor: crosshair; border-radius: 50%; display: block; }
/* The marker floats over a fixed rainbow, so it needs its own contrast rather
   than borrowing a theme role: a --panel fill ringed in --ink, the same fix the
   system applies to the slider thumb. No hardcoded #fff — that vanished against
   a light winning pair (and against the pale end of the wheel). */
#marker {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--panel);
  box-shadow: 0 0 0 1.5px var(--ink);
  transform: translate(-50%, -50%); pointer-events: none;
}

/* --- sliders ------------------------------------------------------------- */
.slider-row { width: 100%; max-width: 280px; margin-top: var(--space-6); }
.slider-label {
  display: flex; justify-content: space-between;
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--track-label); color: var(--ink-dim);
  margin-bottom: var(--space-2);
}
.slider-with-num { display: flex; align-items: center; gap: var(--space-4); }
.slider-with-num .range { flex: 1; min-width: 0; }

/* --- vibe + harmony rows ------------------------------------------------- */
.vibe-row { display: flex; gap: var(--space-3); }
.vibe-row .input { flex: 1; }
.harmony-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* --- build panel spacing ------------------------------------------------- */
.build-fields { display: flex; flex-direction: column; gap: var(--space-6); }
.name-note { margin-top: var(--space-2); }
.name-note.is-warn { color: var(--ink); }

/* --- live preview (shows the pair being built, verbatim) ----------------- */
.preview {
  border-radius: var(--radius-md);
  border: var(--border) solid var(--line);
  overflow: hidden;
  margin: 18px 0 var(--space-2);
}
.preview-band { height: 34px; display: flex; }
.preview-band > div { flex: 1; }
.preview-body { padding: var(--space-8); }
.preview-body h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.preview-body p { font-size: var(--text-sm); margin: 0; line-height: var(--leading-normal); opacity: 0.85; }
.preview-pill {
  display: inline-block; margin-top: var(--space-5);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  padding: 7px var(--space-5); border-radius: var(--radius-pill);
}

.publish-row { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-7); flex-wrap: wrap; }
.status { font-size: var(--text-xs); color: var(--ink-dim); flex: 1; min-width: 160px; line-height: 1.5; }

/* --- gallery header ------------------------------------------------------ */
.gallery-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6);
}
.sort-tabs { display: flex; gap: var(--space-2); }

/* --- card app-specifics (link wrapping + actions) ------------------------ */
/* The swatch and name link to the pair's own page. Anchors, not click
   handlers, so middle-click and cmd-click open a tab. The global
   :focus-visible ring covers focus — no per-element outline here. */
.card-open { display: block; color: inherit; text-decoration: none; }
.card-name-link { color: inherit; text-decoration: none; }
.card-name-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- footer -------------------------------------------------------------- */
footer { margin-top: var(--space-11); }