/*
 * The Showcase test sites (Stage C Slice 5, ticket 04). No theme: system type, one accent colour
 * from the site's configuration (`--site-accent`, set inline by the page), the two paid units
 * above the fold with the process panel beside them: five steps, each with its state on this visit.
 */
:root {
  --site-accent: #2b6cb0;
  --site-ink: #1c1f23;
  --site-muted: #5f6670;
  --site-rule: #d9dde3;
  --site-paper: #ffffff;
  --site-panel: #f6f7f9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--site-ink);
  background: var(--site-paper);
}

a { color: var(--site-accent); }

.showcase-header {
  padding: 12px 24px;
  border-bottom: 3px solid var(--site-accent);
}
.showcase-name {
  color: var(--site-ink);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}
.showcase-intro { margin: 4px 0 0 0; color: var(--site-muted); font-size: 13px; }

.showcase-stage {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
}

.showcase-units {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  background: var(--site-panel);
  border: 1px dashed var(--site-rule);
}
#slot-leaderboard { width: 728px; height: 90px; }
#slot-mpu { width: 300px; height: 250px; }
.ad-slot-placeholder { color: var(--site-muted); font-size: 12px; }

.showcase-panel {
  background: var(--site-panel);
  border-left: 3px solid var(--site-accent);
  padding: 12px 16px;
  font-size: 13px;
}
.showcase-panel h2 { margin: 0 0 8px 0; font-size: 15px; }
.showcase-steps { margin: 0; padding-left: 20px; }
.showcase-step { margin: 0 0 12px 0; padding-bottom: 12px; border-bottom: 1px solid var(--site-rule); }
.showcase-step:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.showcase-step-what { margin: 0 0 4px 0; }
.showcase-step-unit h4 { margin: 8px 0 2px 0; font-size: 12px; color: var(--site-accent); }
.showcase-panel dl { margin: 0; }
.showcase-panel dt { font-weight: 600; margin-top: 4px; }
.showcase-panel dd { margin: 0; color: var(--site-muted); overflow-wrap: anywhere; }

.showcase-not-found { max-width: 760px; margin: 0 auto; padding: 24px; }

.showcase-footer {
  max-width: 1280px;
  margin: 24px auto 0 auto;
  padding: 12px 24px;
  border-top: 1px solid var(--site-rule);
  color: var(--site-muted);
  font-size: 12px;
}

@media (max-width: 1100px) {
  .showcase-stage { grid-template-columns: minmax(0, 1fr); }
}