/* Gedeelde opmaak van de verzamelschil om meerdere ontwerpvoorstellen heen.
   Gebruikt door client/public/designs/<verzameling>/index.html.

   Ligt bewust BUITEN client/public/designs/: alles in die map met een eigen
   index.html verschijnt als aparte regel in de ontwerpenlijst, en een map met
   alleen gedeelde bestanden zou daar als kapot ontwerp gemeld worden. */
:root {
  --bm-bg: #FBF7F2;
  --bm-ink: #1D1A17;
  --bm-muted: #6B6560;
  --bm-line: #E4DED5;
  --bm-accent: #2660A4;
  --bm-surface: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bm-bg);
  color: var(--bm-ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bm-header {
  flex: none;
  border-bottom: 1px solid var(--bm-line);
  background: var(--bm-surface);
  padding: 10px 16px 12px;
}
.bm-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.bm-brand { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.bm-brand span { color: var(--bm-accent); }
.bm-share { display: flex; align-items: center; gap: 6px; }
.bm-open, .bm-copy {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--bm-muted);
  background: transparent;
  text-decoration: none;
  border: 1px solid var(--bm-line);
  border-radius: 999px;
  padding: 4px 12px;
}
.bm-copy { cursor: pointer; }
.bm-open:hover, .bm-copy:hover { color: var(--bm-accent); border-color: var(--bm-accent); }
/* Tijdens de terugmelding ("Gekopieerd") staat de knop uit: hij blijft dan wel
   leesbaar, want een uitgegrijsde bevestiging leest als een mislukking. */
.bm-copy:disabled { cursor: default; color: var(--bm-accent); border-color: var(--bm-accent); }
/* Eén rij die schuift, niet drie rijen die wikkelen.
   Bij dertien voorstellen at het oude wikkelende raster op een telefoon bijna
   de halve viewport op voordat je ook maar iets van een ontwerp zag. Een
   schuivende rij houdt de schil altijd even hoog, hoeveel voorstellen er ook
   bijkomen, en de actieve knop scrollt zichzelf in beeld (zie shell.js). */
.bm-runs {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Vervagende randen als er meer buiten beeld staat: dat is het enige signaal
     dat er nog voorstellen zijn, want de scrollbalk is verborgen. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  padding-inline: 2px;
  margin-inline: -2px;
}
.bm-runs::-webkit-scrollbar { display: none; }
.bm-run {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bm-muted);
  background: transparent;
  border: 1px solid var(--bm-line);
  border-radius: 999px;
  padding: 7px 15px;
  min-height: 34px;
  cursor: pointer;
  flex: 0 0 auto;
  scroll-snap-align: center;
  white-space: nowrap;
}
.bm-run:hover { border-color: var(--bm-accent); color: var(--bm-accent); }
.bm-run[aria-current="true"] {
  background: var(--bm-accent);
  border-color: var(--bm-accent);
  color: #fff;
}
/* De varianten stonden hier ÉN in het bijschrift eronder, wat op een telefoon
   leest als twee lijsten die elkaar tegenspreken. Ze staan nu alleen in het
   bijschrift; deze regel is er nog voor de oude naam van een verhuisd voorstel,
   en dat is een uitzondering. */
.bm-run small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 2px;
}
.bm-caption {
  margin-top: 9px;
  font-size: 12px;
  color: var(--bm-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 20px;
}
.bm-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bm-line);
  border-radius: 999px;
  padding: 1px 8px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  line-height: 1.7;
  white-space: nowrap;
}
.bm-chip-skill { border-color: var(--bm-accent); color: var(--bm-accent); font-weight: 700; }
/* Gestippeld = herkomst achteraf afgeleid, niet tijdens de bouw vastgelegd.
   Zie scripts/design-meta.mjs. */
.bm-chip-derived { border-style: dashed; }
.bm-main { flex: 1 1 auto; min-height: 0; }
.bm-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.bm-noscript { padding: 16px; font-size: 14px; }
.bm-noscript a { color: var(--bm-accent); }

/* Smal scherm: de schil moet een kijkvenster zijn, geen bedieningspaneel.
   Alles een maat kleiner en de deelknoppen onder de titel in plaats van ernaast,
   zodat er meer van het ontwerp overblijft. */
@media (max-width: 560px) {
  .bm-header { padding: 8px 12px 10px; }
  .bm-top { margin-bottom: 8px; gap: 6px; }
  .bm-share { width: 100%; }
  .bm-open, .bm-copy { flex: 1 1 0; text-align: center; padding: 6px 10px; }
  .bm-caption { margin-top: 8px; gap: 5px; font-size: 11.5px; }
  .bm-chip { font-size: 10px; }
}