/* ---------------------------------------------------------------------------
   Development → Camp report (src/campstory_view.js), in the room: your
   staff walking you through training camp, one man at a time, on the
   practice field. Classes `cs-`; the furniture is the room kit's
   (src/room.css): one window per state, the staff talking in the dialogue
   box, your answers as choice rows with the gold cursor, the verdicts as
   solid badges. Solid saturated colour, 3px ink frames with cut corners,
   Rubik 800+ for reading, no stripes, no emoji.
--------------------------------------------------------------------------- */
.cs .rm-dlg { margin-bottom: 6px; }
.cs-shut .rm-say { margin-top: 6px; }

/* the men waiting, before you start */
.cs-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.cs-mini {
  display: grid; justify-items: center; gap: 4px; min-width: 96px; margin: 3px; padding: 9px 10px 8px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.cs-mini b { font: 900 13px var(--sans); }
.cs-go { padding-top: 14px; }

/* where you are in the meeting: a pixel per man, on the title bar */
.cs-top { display: flex; align-items: center; }
.cs-prog { display: flex; gap: 5px; }
.cs-dot { width: 14px; height: 14px; margin: 2px; background: var(--ink-2); box-shadow: 0 0 0 2px var(--ink); }
.cs-dot.was.up { background: var(--green); }
.cs-dot.was.down { background: var(--red); }
.cs-dot.on { background: var(--gold); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }

/* --- one man, one window ------------------------------------------------------------
   Him along the top — his face, what camp did to him — then the coach in
   the dialogue box on the left and your answers on the right. */
.cs-man {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 3px 3px 14px; padding: 12px 14px;
  background: var(--tm); color: var(--on-tm); box-shadow: var(--frame);
}
.cs-man > .rm-fc { box-shadow: var(--frame); margin: 3px; }
.cs-man .id { flex: 1; min-width: 190px; display: grid; gap: 4px; justify-items: start; }
.cs-step { font: 900 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cs-man .nm { font: 400 42px/.9 var(--disp); letter-spacing: .6px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh); }
.cs-man .meta { display: flex; flex-wrap: wrap; gap: 4px; }
.cs-man .meta .rm-bd { white-space: normal; max-width: 100%; }
.cs-man .cs-link { margin-top: 4px; }

.cs-body { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.cs-left { display: grid; gap: 12px; }

/* what the last answer did — the receipt for the order you just gave */
.cs-last {
  display: flex; gap: 10px; align-items: center; margin: 3px; padding: 9px 12px;
  background: var(--green-dk); color: #fff; box-shadow: var(--frame);
}
.cs-last .k { font: 900 13.5px/1.35 var(--sans); }
.cs-last .t { font: 800 12.5px/1.45 var(--sans); }

/* him, talking: the line types out; the last one is his advice, in gold */
.cs-coach { cursor: pointer; }
.cs-coach .bubs { display: grid; gap: 2px; }
.cs-coach .bub { margin-top: 6px; font-size: 15px; min-height: 20px; }
.cs-coach .bub.wait { display: none; }
.cs-coach .bub:last-child { color: var(--gold); }

/* your answers: choice rows with the cursor, his pick marked */
.cs-ask { display: grid; gap: 4px; align-content: start; }
.cs-ask .rm-sec { margin-top: 0; }
.cs-opts { gap: 4px; }
.cs-opt.rm-opt { align-items: flex-start; padding-top: 11px; padding-bottom: 10px; }
.cs-opt .n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -2px;
  background: var(--ink); color: var(--gold); box-shadow: 0 0 0 2px #000; font: 400 19px/1 var(--disp);
}
.cs-opt .tx { flex: 1; min-width: 0; display: grid; gap: 4px; font: 400 20px/1.05 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.cs-opt .tx small { font: 800 12.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--soft); }
.cs-opt .tx small.his { color: var(--gold); }
.cs-opt .tag { align-self: flex-start; }
/* what an answer does: one to three solid badges under the words */
.cs-opt .cs-fx { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0 0 -2px; }
.cs-opt .cs-fx .rm-bd { margin: 2px; white-space: normal; max-width: 100%; line-height: 1.15; }
.cs-last .t.said, .cs-card .t.said { color: var(--gold); }
.cs-opt.best { background: var(--card-hov); color: var(--card-ink); }
.cs-ask #skip { justify-self: start; margin-top: 6px; }

/* --- the closing summary ------------------------------------------------------------ */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 8px; }
.cs-card { margin: 3px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.cs-card .hd { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 3px solid var(--ink); background: var(--ink-2); }
.cs-card.up .hd { background: var(--green); }
.cs-card.down .hd { background: var(--red); }
.cs-card .nm { display: block; font: 400 25px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: #fff; text-decoration: none; }
.cs-card .nm:hover { color: var(--gold); }
.cs-card .k { margin-top: 3px; font: 900 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.cs-card .bd { display: grid; gap: 4px; padding: 10px 12px 12px; }
.cs-card .did { font: 900 13.5px/1.35 var(--sans); color: var(--gold); }
.cs-card .t { font: 800 12.5px/1.4 var(--sans); }
.cs-card .t.sm { font-size: 11.5px; color: var(--soft); }

/* the way out: one gold button, and the rooms you actually moved beside it */
.cs-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.cs-more { display: flex; gap: 4px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .cs-mini { min-width: 82px; padding: 7px 7px 6px; }
  .cs-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cs-man { gap: 10px; padding: 10px; }
  .cs-man .id { min-width: 0; }
  .cs-man .nm { font-size: 30px; }
  .cs .rm-dlg .rm-fc.s96 { width: 48px; height: 48px; margin: 2px; box-shadow: var(--frame-2); }
  .cs .rm-dlg .rm-fc.s64 { width: 32px; height: 32px; margin: 2px; box-shadow: var(--frame-2); }
  /* the face and the name plate on one line, what he says under them at
     full width */
  .cs .rm-dlg { align-items: center; }
  .cs .rm-dlg .rm-por { padding: 10px 0 0 10px; background: none; border-right: 0; }
  .cs .rm-dlg .rm-body { display: contents; }
  .cs .rm-dlg .rm-plate { padding: 10px 10px 0; }
  .cs .rm-dlg .rm-body > :not(.rm-plate) { grid-column: 1 / -1; margin-left: 10px; margin-right: 10px; }
  .cs .rm-dlg .rm-body > :last-child { padding-bottom: 10px; }
  .cs-coach .bub { font-size: 14px; }
  .cs-opt .tx { font-size: 18px; }
  .cs-out .rm-btn.gold { flex: 1 1 100%; }
}