/* Built Logic: "the job, mapped" boards for the case study pages (13 Oct 2026,
   from Kristian's brief to use Dancho Dimkov's process boards). The same board
   twice: every task by hand, then the same tasks split between code, AI and
   the people who decide. Loaded after pages-case-bin-store.css and uses its
   six colours. Static HTML, complete without motion. */

.cm { margin: 0; display: grid; gap: 56px; }
.cm-part { display: grid; gap: 16px; }
.cm-part__h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-weight: 700; font-size: 17px; color: var(--ink); }
.cm-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 500; font-size: 14px; color: var(--steel); }
.cm-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.cm-key { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.cm-part__h > .cm-key { margin-right: -2px; }
.cm-key--hand, .cm-card--hand { background: var(--stone); color: var(--ink); }
.cm-key--hand { box-shadow: inset 0 0 0 1px rgba(88, 96, 105, .45); }
/* Code, AI, people: one blue ramp from light to dark, so the eye reads the hand-off at a glance (Kristian, 15 Oct 2026). */
.cm-key--code, .cm-card--code { background: color-mix(in srgb, var(--sky) 32%, var(--paper)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--sky); }
.cm-key--ai, .cm-card--ai { background: var(--sky); color: var(--ink); }
.cm-key--person, .cm-card--person { background: var(--blue); color: var(--paper); }
.cm-card--person { font-weight: 600; }

/* The board: groups across the top, one column a step, a card a task. */
.cm-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.cm-group { grid-column: span var(--span); display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.cm-group__h { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ink); color: var(--paper); font: 600 15px/1.2 'Source Sans 3', system-ui, sans-serif; text-align: center; }
.cm-group__steps { display: grid; grid-template-columns: repeat(var(--span), minmax(0, 1fr)); gap: 10px; }
.cm-step { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.cm-step__h { margin: 0 0 2px; min-height: 2.5em; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.cm-step__h b { font: 500 13px/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--steel); margin-right: 3px; }
.cm-step__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cm-card { margin: 0; padding: 9px 10px; min-height: 54px; border-radius: 6px; font-size: 13.5px; line-height: 1.3; }

.cm-sum { margin: 2px 0 0; font-size: 18px; color: var(--steel); }
.cm-sum b { font: 400 clamp(30px, 3.4vw, 44px)/1.05 'Fraunces', Georgia, serif; letter-spacing: -0.015em; color: var(--ink); }
.cm-sum--after b { color: var(--blue); }

/* Narrower screens: the groups stack, each keeps its steps side by side. */
@media (max-width: 1100px) {
  .cm-board { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cm-group { grid-column: auto; }
  .cm-step__h { min-height: 0; }
}

/* Phones: one step a row. The by-hand board shows each task as a square,
   the after board spells every task out. */
@media (max-width: 720px) {
  .cm { gap: 44px; }
  .cm-board { padding: 12px; }
  .cm-group__steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cm-step__h { min-height: 0; }
  .cm-board--after .cm-step__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-board--after .cm-card { min-height: 0; }
  .cm-board:not(.cm-board--after) .cm-step { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .cm-board:not(.cm-board--after) .cm-step__h { margin: 0; }
  .cm-board:not(.cm-board--after) .cm-step__cards { flex-direction: row; gap: 5px; flex: none; }
  .cm-board:not(.cm-board--after) .cm-card { width: 18px; height: 18px; min-height: 0; padding: 0; border-radius: 4px; font-size: 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(88, 96, 105, .35); }
  .cm-sum b { font-size: 30px; }
}