/* De Lopende Band: een werkvloer (docs/afdelingen/conveyor-belt/README.md, Het scherm). De kop en de stappen deelt ze
   met de Controlekamer (control-room.css); de bouwstenen (onderdelenlijst, klembord, stempel, telwerk, de grote
   knop) staan in app.css. Kleur blijft voorbehouden aan types: gelukt is inkt, mislukt een oranje ✗. */

.belt-room .belt-floor {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(0, 2fr) minmax(250px, 0.92fr);
  gap: 18px;
  padding: 14px 18px 16px;
  overflow: hidden;
}
.belt-room section { min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; }
.belt-room .hint { margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.4; }

/* ---------------------------------------------------------------- links: de onderdelenlijst */

.belt-room .toolbox {
  align-self: start;
  max-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px 14px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
}
.belt-room .toolbox h2 { margin: 0; }
.belt-room .toolbox .sub { margin: -6px 0 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.belt-room .toolbox .clear { align-self: flex-start; margin-top: 2px; }

/* De tekeningetjes in de lijst: een stukje band dat draait, een machine, een ventiel, een telwerk */
.mini-belt {
  width: 38px;
  height: 20px;
  box-sizing: border-box;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--white) repeating-linear-gradient(90deg, transparent 0 5px, var(--ink) 5px 7px);
  animation: mini-roll 0.8s linear infinite;
}
@keyframes mini-roll { to { background-position: 7px 0; } }
.mini-machine, .mini-gate, .mini-counter {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 2.5px solid var(--ink);
}
.mini-machine { min-width: 34px; height: 28px; padding: 0 3px; font-size: 12px; border-radius: 4px; box-shadow: 0 3px 0 var(--ink); }
.mini-gate { width: 40px; height: 40px; font-size: 10px; border-width: 3px; border-radius: 50%; }
.mini-counter { width: 34px; height: 26px; font-size: 14px; color: var(--white); background: var(--ink); border-radius: 4px; }

/* Het paneel van een gelegd stuk: een metalen plaatje met zijn instellingen */
.belt-room .inspector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--shade);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--paper);
}
.belt-room .inspector h3 { margin: 0; font-size: 15px; font-weight: 900; }
.belt-room .inspector .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.belt-room .inspector .dirs { display: flex; gap: 3px; }
.belt-room .inspector select { font: inherit; font-size: 13px; padding: 2px 4px; border: 2px solid var(--ink); border-radius: 4px; background: var(--white); }
.belt-room button.tiny { padding: 2px 7px; font-size: 12px; border-width: 1.5px; box-shadow: 1.5px 1.5px 0 var(--ink); }
.belt-room button.tiny.on { background: var(--ink); color: var(--white); }

/* ---------------------------------------------------------------- midden: de werkvloer */

.belt-room .arena { display: flex; flex-direction: column; gap: 10px; }
.belt-room .shop-floor { display: flex; flex-direction: column; flex: none; overflow: hidden; background: var(--white); border: 3px solid var(--ink); border-radius: 14px; }
.belt-room .floor-head { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-bottom: 2px solid var(--ink); }
.belt-room .floor-case { color: var(--muted); font-size: 13px; font-weight: 700; }
.belt-room .floor-tick { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.belt-room .floor-tick .digits > span { font-size: 17px; }
.belt-room .belt-stage { width: 100%; height: clamp(300px, 56vh, 620px); background: var(--paper); }

.belt-room .arena .controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 2px 6px; }
.belt-room .big-label { font-size: 20px; }
.belt-room .speed { display: flex; gap: 4px; margin-left: auto; }
.belt-room .belt-timeline input { width: 100%; accent-color: var(--ink); }
.belt-room .ending { margin: 0; padding-left: 10px; font-size: 14px; font-weight: 700; border-left: 4px solid var(--ink); }
.belt-room .ending.forever, .belt-room .ending.felloff, .belt-room .ending.wrong { border-left-color: var(--zss); }

/* ---------------------------------------------------------------- rechts: de bestelbon op het klembord */

.belt-room .order { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }
.belt-room .order .sheet h2 { margin: 2px 0 8px; font-size: 28px; }
.belt-room .order-head { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.belt-room .bug-tag { margin: 0 0 10px; }
.belt-room .order-brief { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.belt-room .order-brief img { flex: none; width: 58px; height: 58px; object-fit: contain; }
.belt-room .order-brief p { margin: 0; font-size: 14px; line-height: 1.4; }

table.cases { width: 100%; border-collapse: collapse; font-family: Consolas, "Courier New", monospace; font-size: 15px; }
table.cases th {
  padding: 4px;
  text-align: left;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2.5px solid var(--ink);
}
table.cases td { padding: 8px 4px; font-weight: 700; border-bottom: 1px solid var(--rule); }
table.cases tr { cursor: pointer; }
table.cases tr.current { background: var(--shade); }
table.cases td.mark { position: relative; width: 48%; font-family: var(--font); }
table.cases .rubber-stamp { font-size: 11px; }
table.cases .rubber-stamp.no { font-size: 15px; padding: 0 6px; }
table.cases .wait { color: var(--muted); font-size: 12px; font-weight: 700; }
table.cases .why { color: var(--zss); font-family: Consolas, "Courier New", monospace; font-size: 12px; font-weight: 700; }

/* Gelukt: stoer trillen en vonken in inkt en oranje. Mislukt: de rij schokt onder de stempel */
table.cases tr.fresh.pass td { animation: belt-brag 520ms ease-out; }
table.cases tr.fresh.fail td { animation: belt-thud 380ms ease-out; }
table.cases .burst { position: absolute; left: 30%; top: 50%; width: 0; height: 0; pointer-events: none; }
table.cases .burst i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  transform: rotate(var(--a)) translateX(0);
  animation: belt-spark 750ms ease-out forwards;
}
table.cases .burst i:nth-child(3n) { background: var(--zss); }
@keyframes belt-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0.4); } }
@keyframes belt-brag { 0%, 100% { transform: none; } 20% { transform: translateX(-4px) rotate(-1deg); } 40% { transform: translateX(4px) rotate(1deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes belt-thud { 0% { transform: translateY(-3px); } 50% { transform: translateY(2px); } 100% { transform: none; } }

/* De afloop van de hele bestelling: een grote stempel, en de score in telwerken */
.belt-room .belt-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
}
.belt-room .belt-result.lost { border-style: dashed; box-shadow: none; }
.belt-room .belt-result h3 { margin: 0; font-size: 22px; }
.belt-room .rubber-stamp.big { margin: 4px 0 6px; font-size: 19px; padding: 3px 12px; border-width: 4px; }
.belt-room .belt-result .scores { display: flex; gap: 18px; }
.belt-room .belt-result .score { display: flex; flex-direction: column; gap: 4px; }
.belt-room .belt-result .score .digits > span { font-size: 22px; }
.belt-room .belt-result .best { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.belt-room .belt-result .codex-bug { padding-top: 8px; font-size: 13px; border-top: 1px solid var(--rule); }
.belt-room .belt-result .codex-bug p { margin: 4px 0 0; }
.belt-room .belt-result .codex-label { margin-right: 6px; color: var(--zss); font-weight: 700; }

/* ---------------------------------------------------------------- kleinere schermen */

/* Een tablet rechtop: de vloer bovenaan over de hele breedte, lijst en bon eronder */
@media (max-width: 1150px) and (min-height: 501px) {
  .belt-room .belt-floor { grid-template-columns: 1fr 1fr; overflow-y: auto; }
  .belt-room .arena { grid-column: 1 / -1; order: -1; }
}

/* Liggend op een telefoon: drie smalle kolommen, alles kleiner */
@media (max-height: 500px) {
  .belt-room .belt-floor { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 0.9fr); gap: 8px; padding: 6px 8px; }
  .belt-room .toolbox { padding: 8px; gap: 6px; }
  .belt-room .toolbox .sub, .belt-room .hint { display: none; }
  .belt-room button.part { gap: 6px; padding: 3px 6px 3px 3px; }
  .belt-room button.part .pic { width: 36px; height: 36px; }
  .belt-room button.part .name { font-size: 12px; }
  .belt-room button.part .count { font-size: 16px; }
  .belt-room .floor-head { padding: 3px 8px; }
  .belt-room .belt-stage { height: 56vh; min-height: 0; }
  .belt-room button.big-round { width: 48px; height: 48px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
  .belt-room button.big-round svg { width: 20px; height: 20px; }
  .belt-room .big-label { font-size: 15px; }
  .belt-room .order .sheet { padding: 10px; }
  .belt-room .order .sheet h2 { font-size: 20px; }
  .belt-room .order-brief img { width: 40px; height: 40px; }
  .belt-room .order-brief p { font-size: 12px; }
}