/* ============================================================
   VibePrompt — app.css
   Light editorial theme: fixed category sidebar + prompt grid.
   Card / code-panel / modal patterns adapted from Kinetics.
   ============================================================ */

:root {
  /* Surfaces */
  --paper: #f5f4f0; /* page background */
  --paper-2: #efeee9; /* raised / hover */
  --card: #ffffff; /* card surface */
  --line: #e4e2dc; /* hairline borders */
  --line-2: #d8d6cf;

  /* Ink */
  --ink: #14140f; /* primary text */
  --ink-dim: #5f5d55; /* secondary text */
  --ink-faint: #97948b; /* tertiary text */

  /* Signal */
  --accent: #14140f; /* near-black active */
  --accent-ink: #f5f4f0;
  --ok: #128a4d;

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Metrics */
  --side-w: 288px;
  --radius: 16px;
  --radius-sm: 10px;
  --glide: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
::selection {
  background: var(--ink);
  color: var(--paper);
}
.mono {
  font-family: var(--font-mono);
}
.dim {
  color: var(--ink-dim);
}
.hidden {
  display: none !important;
}

/* ---------------- App shell ---------------- */
.app {
  display: flex;
  min-height: 100vh;
  /* Width of the sidebar rail; the fixed footer starts after it. */
  --rail-w: var(--side-w);
}

/* ---------------- Sidebar ---------------- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: var(--side-w);
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 60%, #fff);
  overflow-y: auto;
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 4px;
  margin-bottom: 18px;
}
.brand-home {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
}
.brand-mark svg {
  width: 21px;
  height: 21px;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.side-collapse {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.side-collapse:hover {
  background: var(--paper-2);
  color: var(--ink);
}

/* Mobile-only category toggle. Hidden on desktop, where the full nav is
   always in view; the responsive block below turns it on. */
.side-burger {
  display: none;
  margin-left: auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background 0.2s;
}
.side-burger svg {
  width: 18px;
  height: 18px;
}
.side-burger:hover {
  background: var(--paper-2);
}

/* Search */
.side-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.side-search .search-icon {
  position: absolute;
  left: 14px;
  width: 15px;
  height: 15px;
  color: var(--ink-faint);
  pointer-events: none;
}
.side-search input {
  width: 100%;
  padding: 11px 40px 11px 38px;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.side-search input::placeholder {
  color: var(--ink-faint);
}
.side-search input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent);
}
.side-search kbd {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* Category nav */
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink-dim);
  font-size: 14.5px;
  transition: background 0.16s, color 0.16s;
}
.cat:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.cat.active {
  background: var(--accent);
  color: var(--accent-ink);
}
/* Icon shown on the collapsed rail in place of the label */
.cat-ico {
  display: none;
  width: 19px;
  height: 19px;
  flex: none;
}
.cat-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}
.cat.active .cat-count {
  color: color-mix(in srgb, var(--accent-ink) 65%, transparent);
}

/* ---------------- Main column ---------------- */
.main {
  flex: 1;
  min-width: 0;
  /* Clears the fixed footer so the last of the content is never trapped
     under it. --foot-h is measured in app.js; the fallback covers the
     first paint. */
  padding-bottom: var(--foot-h, 68px);
}

/* Hero */
.hero {
  padding: 64px clamp(24px, 5vw, 72px) 40px;
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.hero-title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.hero-sub {
  margin-top: 22px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.hero-sub b {
  color: var(--ink);
  font-weight: 600;
}

/* Results */
.results {
  padding: 40px clamp(24px, 5vw, 72px) 60px;
  background: color-mix(in srgb, var(--paper) 40%, #fff);
}
.results-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 26px;
}
.results-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.results-count {
  font-size: 13px;
  color: var(--ink-faint);
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* Card */
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s var(--glide),
    box-shadow 0.25s;
}
.card:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(20, 20, 15, 0.4);
}

/* The whole card is the link to its detail page. */
.card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  outline-offset: 3px;
}
.card-link:focus-visible {
  outline: 2px solid var(--ink);
}

.card-stage {
  position: relative;
  min-height: 172px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--paper-2), var(--card));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.card-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  background: color-mix(in srgb, #fff 70%, transparent);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.card-foot {
  padding: 16px 18px;
}
.card-foot .row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.card-foot .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.card-foot .desc {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.45;
}
.view-code {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.card-link:hover .view-code,
.card-link:focus-visible .view-code {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* ---- Wireframe previews (CSS drawn) ---- */
.wire {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  color: var(--line-2);
}
.wf-line {
  height: 8px;
  border-radius: 4px;
  background: var(--line-2);
}
.wf-line.big { height: 14px; }
.wf-line.sm { height: 6px; }
.wf-line.faint { background: var(--line); }
.wf-line.light { background: rgba(255, 255, 255, 0.5); }
.wf-line.center { margin-inline: auto; }
.w100 { width: 100%; }
.w90 { width: 90%; }
.w80 { width: 80%; }
.w70 { width: 70%; }
.w60 { width: 60%; }
.w50 { width: 50%; }
.w40 { width: 40%; }
.w30 { width: 30%; }
.wf-row { display: flex; align-items: center; gap: 8px; }
.wf-row.center { justify-content: center; }
.wf-row.gap { gap: 10px; }
.wf-row.top { align-items: center; margin-top: 4px; }
.wf-input { height: 22px; border-radius: 7px; background: var(--paper-2); border: 1px solid var(--line); }
.wf-btn { height: 24px; border-radius: 7px; background: var(--ink); }
.wf-btn.sm { height: 20px; width: 74px; }
.wf-btn.xs { height: 16px; width: 46px; }
.wf-btn.ghost { background: transparent; border: 1px solid var(--line-2); }
.wf-btn.light { background: rgba(255, 255, 255, 0.85); width: 74px; }
.wf-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--line-2); flex-shrink: 0; }
.wf-cols { display: flex; gap: 8px; }
.wf-cols.four { gap: 6px; }
.wf-tile { flex: 1; height: 96px; border-radius: 9px; background: var(--paper-2); border: 1px solid var(--line); }
.wf-tile.hi { background: var(--ink); border-color: var(--ink); transform: translateY(-6px); }
.wf-tile.flat { width: 100%; height: 60px; }
.wf-stat { flex: 1; height: 44px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.wf-col { flex: 1; height: 54px; border-radius: 7px; background: var(--paper-2); }
.wf-panel { border-radius: 11px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wf-panel.dark { background: var(--ink); }
.wf-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 42px; gap: 7px; width: 100%; }
.wf-b { border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.wf-b.b1 { grid-column: span 2; grid-row: span 2; background: var(--ink); border-color: var(--ink); }
.wf-nav { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.wf-nav .wf-btn { margin-left: auto; }
.wf-quote { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); }
.wf-acc { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.wf-acc span { color: var(--ink-faint); font-size: 13px; }
.wf-dash { display: flex; gap: 8px; width: 100%; }
.wf-side { width: 34px; border-radius: 8px; background: var(--ink); }
.wf-main { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wf-steps { display: flex; align-items: center; gap: 6px; }
.wf-step { width: 20px; height: 20px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line-2); }
.wf-step.done { background: var(--ink); border-color: var(--ink); }
.wf-step.now { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 14%, transparent); }
.wf-bar { flex: 1; height: 2px; background: var(--line-2); }
.wf-spark { font-size: 22px; text-align: center; color: var(--ink-faint); }

/* Empty state */
.empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-faint);
}
.empty-mark {
  font-size: 32px;
  opacity: 0.6;
}
.empty-title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.empty-sub {
  margin-top: 4px;
  font-size: 14px;
}

/* Footer */
/* Pinned to the bottom of the viewport on every page. It sits beside the
   sidebar rather than over it, so the last category link stays reachable. */
.site-foot {
  position: fixed;
  left: var(--rail-w);
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(24px, 5vw, 72px);
  background: var(--paper);
  border-top: 1px solid var(--line);
  font-size: 13px;
  transition: left 0.2s var(--glide);
}
.site-foot .mono {
  font-weight: 600;
}
.foot-brand:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The bar is fixed, so it has to stay one line — a wrapped footer would
   steal height from the content on every page. The tagline is the piece
   that gives way. */
.foot-brand,
.foot-copy,
.site-foot .design-credit {
  flex-shrink: 0;
}
.foot-note {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.foot-copy {
  margin-left: auto;
}
/* Last line of defence against a footer wider than the viewport. */
.site-foot .design-credit span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------------- Code modal ---------------- */
/* ---------------- Detail page ---------------- */
.detail {
  max-width: 1180px;
  margin-inline: auto;
  /* The shorthand would override .main's footer clearance, so the bottom
     edge carries it explicitly. */
  padding: 26px clamp(24px, 4vw, 48px);
  padding-bottom: calc(40px + var(--foot-h, 68px));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.detail-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.detail-breadcrumb {
  grid-column: 1 / -1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: border-color 0.2s, background 0.2s;
}
.detail-breadcrumb:hover {
  background: var(--card);
  border-color: var(--line-2);
}
.detail-breadcrumb a {
  color: var(--ink-dim);
  transition: color 0.2s;
}
.detail-breadcrumb a:hover {
  color: var(--ink);
}
.breadcrumb-separator {
  color: var(--ink-faint);
}
.detail-heading {
  margin-top: 14px;
}
.detail-tag {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.detail-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-top: 4px;
}
.detail-desc {
  margin-top: 6px;
  max-width: 62ch;
  font-size: 15px;
  color: var(--ink-dim);
}
/* Both header actions share the grid's `auto` column, so the heading keeps
   the 1fr track no matter how many buttons sit alongside it. */
.detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  align-self: end;
}

.source-btn {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 11px 18px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  transition: opacity 0.2s, transform 0.2s var(--glide);
}
.source-btn:hover {
  opacity: 0.86;
  transform: translateY(-1px);
}

/* Credit for the design work behind the library, sitting beside the primary
   action so it reads as a byline rather than another button. */
.design-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.design-credit:hover {
  color: var(--ink);
}
.design-credit-avatar {
  /* Set per instance by the component; the header matches the pill button
     height, the footer runs smaller. */
  width: var(--credit-avatar, 39px);
  height: var(--credit-avatar, 39px);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* Secondary to the source button: same pill, outlined rather than filled, so
   the primary action on the page stays the code itself. */
.figma-btn {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, transform 0.2s var(--glide);
}
.figma-btn:hover {
  border-color: var(--ink-dim);
  transform: translateY(-1px);
}
.figma-btn.copied {
  border-color: var(--accent);
  color: var(--accent);
}
.figma-btn.failed {
  border-color: #f87171;
  color: #f87171;
}

.detail-stage {
  margin-top: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 55%, #fff);
}
.stage-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.stage-sizes {
  display: flex;
  gap: 4px;
}
.size {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  padding: 6px 11px;
  border-radius: 7px;
  transition: color 0.2s, background 0.2s;
}
.size:hover {
  color: var(--ink-dim);
}
.size.active {
  color: var(--ink);
  background: var(--paper-2);
}
.stage-canvas {
  display: flex;
  justify-content: center;
  padding: 0;
  background: repeating-conic-gradient(
      var(--paper) 0% 25%,
      transparent 0% 50%
    )
    50% / 18px 18px;
}
.stage-canvas[data-size="tablet"],
.stage-canvas[data-size="mobile"] {
  padding: 22px;
}
.stage-frame {
  display: block;
  width: 100%;
  height: min(760px, 76vh);
  border: 0;
  background: #fff;
  transition: max-width 0.3s var(--glide);
}
.stage-canvas[data-size="tablet"] .stage-frame {
  max-width: 768px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.stage-canvas[data-size="mobile"] .stage-frame {
  max-width: 390px;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.detail .site-foot {
  margin-top: auto;
}

.code-panel {
  display: none;
}
.code-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 14px 0;
}
.code-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  padding: 7px 13px;
  border-radius: 8px 8px 0 0;
  transition: color 0.2s, background 0.2s;
}
.code-tab:hover {
  color: var(--ink-dim);
}
.code-tab.active {
  color: var(--ink);
  background: var(--paper);
}
.code-body {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  transition: color 0.2s, border-color 0.2s;
}
.copy-btn:hover {
  color: var(--ink);
  border-color: var(--line-2);
}
.copy-btn.copied {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
}
.code-body pre {
  margin: 0;
  padding: 18px 16px 20px;
  max-height: 360px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: #2a2a24;
  tab-size: 2;
}
.code-body pre[data-lang="prompt"] {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.72;
  color: #3a382f;
}
.code-body pre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.code-body pre::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 100px;
}

.code-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.code-modal[hidden] {
  display: none;
}
.code-modal-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.code-modal.open .code-modal-backdrop {
  opacity: 1;
}
.code-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 820px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -30px rgba(20, 20, 15, 0.5);
  overflow: hidden;
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.32s var(--spring), opacity 0.25s ease;
}
.code-modal.open .code-modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.code-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.code-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.code-modal-title .param {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-faint);
}
.code-modal-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-dim);
  font-size: 14px;
  transition: color 0.2s, border-color 0.2s;
}
.code-modal-close:hover {
  color: var(--ink);
  border-color: var(--line-2);
}
.code-modal-content {
  overflow: auto;
}
.code-modal-content .code-panel {
  display: block;
}
.code-modal-content .code-body pre {
  max-height: none;
}

/* ---------------- Collapsed sidebar ---------------- */
.app.side-collapsed {
  --rail-w: 64px;
}
.app.side-collapsed .sidebar {
  width: 64px;
  padding-inline: 10px;
  align-items: center;
}
.app.side-collapsed .brand-name,
.app.side-collapsed .side-search,
.app.side-collapsed .cat-name,
.app.side-collapsed .cat-count {
  display: none;
}
/* Stack the brand mark and toggle so they don't overflow the 64px rail */
.app.side-collapsed .side-brand {
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 4px;
}
.app.side-collapsed .side-collapse {
  margin-left: 0;
  transform: rotate(180deg);
}
.app.side-collapsed .cat {
  justify-content: center;
  padding: 0;
  width: 40px;
  height: 40px;
  margin-inline: auto;
  border-radius: 10px;
}
.app.side-collapsed .cat-ico {
  display: block;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .app {
    flex-direction: column;
  }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  /* The category list folds into the burger menu so a phone opens on the
     content rather than on a screen-high list of links. */
  .side-nav {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
  }
  .sidebar.nav-open .side-nav {
    display: flex;
  }
  .cat {
    width: auto;
  }
  .cat-count {
    margin-left: auto;
  }
  .side-collapse {
    display: none;
  }
  .side-burger {
    display: grid;
  }
  /* No rail to clear, and the tagline is dropped so the bar stays one line
     instead of eating a third of a phone screen. */
  .app {
    --rail-w: 0px;
  }
  .site-foot {
    gap: 10px;
    padding: 12px 18px;
  }
  .foot-note {
    display: none;
  }
  .hero {
    padding: 40px 24px 32px;
  }
  .detail {
    padding: 20px 18px;
    padding-bottom: calc(28px + var(--foot-h, 56px));
  }
  .detail-bar {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .source-btn {
    justify-self: start;
  }
  .stage-canvas[data-size="tablet"],
  .stage-canvas[data-size="mobile"] {
    padding: 14px;
  }
}

/* Phone widths can't hold the whole bar on one line, so it narrows down to
   the credit alone — the brand and copyright are both a scroll away in the
   header and the page itself. */
@media (max-width: 560px) {
  .foot-brand,
  .foot-copy {
    display: none;
  }
  .site-foot {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Rendered snippet screenshots (public/previews/<slug>.png) ---- */
/* Each shot carries its own frame ratio and the snippet's background colour
   (see src/data/previews.json) — a nav bar gets a short stage, a full sign-up
   page a tall one, and neither is cropped or letterboxed. */
/* One stage shape for every card so the grid stays even, with the shot fitted
   inside it rather than cropped. The stage takes the snippet's own background
   colour (recorded in previews.json), so a section that doesn't fill the frame
   blends into it instead of sitting in a letterbox. */
.card-stage.has-shot {
  flex: none;
  padding: 14px;
  min-height: 0;
  aspect-ratio: 16 / 10;
  background: var(--shot-bg, var(--card));
}
/* The shots are cropped tight to their content, so the category tag sits in
   the footer rather than on top of the section it's labelling. */
.card-foot .card-tag {
  position: static;
  display: inline-block;
  margin-bottom: 7px;
  background: transparent;
  border: 0;
  padding: 0;
}
.card-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.card-link:hover .card-shot,
.card-link:focus-visible .card-shot {
  transform: scale(1.02);
}

/* ============================================================
   Content sections added for crawlable text and internal links:
   the prompt itself on a detail page, the related-prompt list,
   and the category link rows on category and 404 pages.
   ============================================================ */

.detail-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.detail-prompt {
  margin-top: 34px;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.prompt-text {
  margin-top: 12px;
  max-width: 74ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
}
.prompt-note {
  margin-top: 14px;
  font-size: 13px;
}
.link-btn {
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.link-btn:hover {
  color: var(--ink-dim);
}
.inline-link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Related prompts (detail) ---- */
.related {
  margin-top: 34px;
}
.related-list {
  list-style: none;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.related-list a {
  display: block;
  height: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, transform 0.2s var(--glide);
}
.related-list a:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.related-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.related-desc {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
}
.related-all {
  display: inline-block;
  margin-top: 14px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.related-all:hover {
  color: var(--ink);
}

/* ---- Category link row (category pages, 404) ---- */
.cat-links {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.cat-links-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cat-links ul {
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-links a {
  display: inline-block;
  font-size: 13px;
  color: var(--ink-dim);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  transition: color 0.2s, border-color 0.2s;
}
.cat-links a:hover {
  color: var(--ink);
  border-color: var(--line-2);
}

/* The hero breadcrumb on a category page reuses the detail pill, but it is a
   heading sibling there rather than a bar item. */
.hero .detail-breadcrumb {
  display: inline-flex;
  margin-bottom: 14px;
}
.hero .detail-breadcrumb span:not(.breadcrumb-separator) {
  color: var(--ink-dim);
}