/* ============================================================
   Showcase chrome — built ON TOP of PolyFishCSS, using its own
   tokens throughout. Not part of the framework itself.
   ============================================================ */

* { box-sizing: border-box; }

body {
  background: hsl(var(--pf-background));
}

.showcase-layout {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.showcase-sidebar {
  flex: none;
  width: 240px;
  padding: var(--pf-space-6) var(--pf-space-5);
  border-right: 1px solid hsl(var(--pf-border));
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.showcase-brand {
  display: flex;
  align-items: center;
  gap: var(--pf-space-2);
  margin-bottom: var(--pf-space-6);
  font-family: var(--pf-font-display);
  font-weight: 700;
  font-size: var(--pf-fs-md);
  color: hsl(var(--pf-foreground));
}

.showcase-brand__mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--pf-radius-full);
  background: hsl(var(--pf-primary));
  color: hsl(var(--pf-primary-foreground));
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

.showcase-nav {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-1);
}

.showcase-nav__group {
  margin-top: var(--pf-space-5);
  margin-bottom: var(--pf-space-2);
  font-family: var(--pf-font-mono);
  font-size: var(--pf-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--pf-muted-foreground));
}

.showcase-nav a {
  display: block;
  padding: var(--pf-space-2) var(--pf-space-3);
  border-radius: var(--pf-radius-md);
  color: hsl(var(--pf-muted-foreground));
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}

.showcase-nav a:hover {
  background: hsl(var(--pf-muted));
  color: hsl(var(--pf-foreground));
}

/* ---- Main content ---- */
.showcase-main {
  flex: 1;
  min-width: 0;
  padding: var(--pf-space-8) var(--pf-space-8) var(--pf-space-9);
  max-width: 980px;
}

.showcase-hero {
  padding-bottom: var(--pf-space-8);
  margin-bottom: var(--pf-space-8);
  border-bottom: 1px solid hsl(var(--pf-border));
}

.showcase-section {
  margin-bottom: var(--pf-space-9);
  scroll-margin-top: var(--pf-space-6);
}

.showcase-section__desc {
  max-width: 60ch;
  color: hsl(var(--pf-muted-foreground));
  margin-bottom: var(--pf-space-5);
}

/* ---- Preview box: live component render ---- */
.showcase-preview {
  padding: var(--pf-space-6);
  background: hsl(var(--pf-card));
  border: 1px solid hsl(var(--pf-border));
  border-radius: var(--pf-radius-xl);
  margin-bottom: 0;
}

.showcase-preview--center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---- Code snippet below preview ---- */
.showcase-code {
  margin: 0;
  padding: var(--pf-space-4) var(--pf-space-5);
  background: hsl(var(--pf-background));
  border: 1px solid hsl(var(--pf-border));
  border-top: none;
  border-radius: 0 0 var(--pf-radius-xl) var(--pf-radius-xl);
  overflow-x: auto;
  font-family: var(--pf-font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: hsl(var(--pf-muted-foreground));
}

.showcase-code .tag { color: hsl(var(--pf-info)); }
.showcase-code .attr { color: hsl(var(--pf-primary)); }
.showcase-code .val { color: hsl(var(--pf-gold)); }

/* ---- Component grid (for multi-example sections) ---- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--pf-space-4);
}

/* ---- Color swatches ---- */
.swatch {
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  border: 1px solid hsl(var(--pf-border));
}

.swatch__fill {
  height: 64px;
}

.swatch__label {
  padding: var(--pf-space-3);
  background: hsl(var(--pf-card));
  font-family: var(--pf-font-mono);
  font-size: var(--pf-fs-xs);
}

.swatch__name { display: block; color: hsl(var(--pf-foreground)); font-weight: 600; }
.swatch__value { display: block; color: hsl(var(--pf-muted-foreground)); margin-top: 2px; }

/* ---- Type specimen ---- */
.specimen-row {
  display: flex;
  align-items: baseline;
  gap: var(--pf-space-4);
  padding: var(--pf-space-3) 0;
  border-bottom: 1px solid hsl(var(--pf-border));
}

.specimen-row:last-child { border-bottom: none; }

.specimen-row__tag {
  flex: none;
  width: 90px;
  font-family: var(--pf-font-mono);
  font-size: var(--pf-fs-xs);
  color: hsl(var(--pf-muted-foreground));
}

/* ---- Element picker (custom demo widget, not core framework) ---- */
.el-picker {
  display: flex;
  gap: var(--pf-space-4);
  flex-wrap: wrap;
}

.el-picker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pf-space-2);
  cursor: pointer;
}

.el-picker__circle {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: hsl(var(--pf-muted));
  border: 2px solid hsl(var(--pf-border));
  transition: all 150ms;
}

.el-picker__item.is-active .el-picker__circle {
  background: hsl(var(--pf-card));
}

.el-picker__label {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-fs-xs);
  color: hsl(var(--pf-muted-foreground));
}

/* ---- Mobile ---- */
@media (max-width: 860px) {
  .showcase-sidebar { display: none; }
  .showcase-main { max-width: 100%; padding: var(--pf-space-6) var(--pf-space-5); }
}

/* ---- Scrollbar (subtle, matches dark theme) ---- */
.showcase-sidebar::-webkit-scrollbar { width: 6px; }
.showcase-sidebar::-webkit-scrollbar-thumb { background: hsl(var(--pf-border)); border-radius: 3px; }