/* 06-components/_board.css — .c-board: columns of cards. The week grid, the fault board,
   the production-place board and the pre-planning lanes are all this one module.
   Columns are equal and fill the container (minmax(0, 1fr), so the grid never overflows
   the page); what happens when the container is too narrow is decided per width below. */
.c-board { --board-cols: 2; display: grid; grid-template-columns: repeat(var(--board-cols), minmax(0, 1fr)); gap: var(--gap-board); }
.c-board--week { --board-cols: 7; }
.c-board--faults { --board-cols: 2; }
.c-board--places { --board-cols: 5; }
.c-board--lanes { --board-cols: 2; }
.c-board__col { display: flex; flex-direction: column; min-height: 14rem; background: var(--surface); border: var(--stroke) solid var(--rule); border-radius: var(--radius-md); }
.c-board__col.is-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.c-board__col.is-weekend { background: color-mix(in oklab, var(--surface) 70%, var(--ground)); }
.c-board__col.is-drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.c-board__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); padding: var(--space-sm) var(--space-sm) var(--space-xs); }
.c-board__eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-faint); display: block; }
.c-board__label { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); }
.c-board__label--sans { font-family: var(--font-sans); font-size: var(--text-md); }
.c-board__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); }
.c-board__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: 0 var(--space-xs) var(--space-xs); flex: 1; }
.c-board__empty { padding: var(--space-xs) var(--space-2xs); font-size: var(--text-sm); color: var(--ink-faint); }
.c-board__col .c-card { padding: var(--space-sm); }

/* The visible add affordance per column. Replaces the prototypes' right-click menu,
   which does not exist on touch (plan: "a visible add button on each day"). */
.c-board__add { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: var(--height-control-sm); margin-top: auto; border: var(--stroke) dashed var(--rule-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink-faint); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; }
.c-board__add:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }

/* Tablet in landscape (md to lg, 900 to 1151 px): the week keeps its seven columns,
   at a tighter gap and card padding so the titles keep about the width they have at
   the app measure. */
@media (min-width: 56.25rem) and (max-width: 71.99rem) {
  .c-board--week { gap: var(--space-xs); }
  .c-board--week .c-board__head { padding-inline: var(--space-xs); }
  .c-board--week .c-board__body { padding-inline: var(--space-2xs); }
  .c-board--week .c-board__col .c-card { padding: var(--space-xs); padding-inline-start: calc(var(--space-xs) + var(--stroke-edge)); }
}

/* Below md: a board becomes a horizontal snap-scroller of fixed-width columns.
   The week board is the exception, see the day list further down. */
@media (max-width: 56.24rem) {
  .c-board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-xs); margin-inline: calc(-1 * var(--gutter-page)); padding-inline: var(--gutter-page); }
  .c-board__col { flex: 0 0 min(78vw, 20rem); scroll-snap-align: start; }
}
/* Two-column boards still fit side by side on a tablet in portrait, so they stay a grid down to sm. */
@media (min-width: 40rem) and (max-width: 56.24rem) {
  .c-board--faults, .c-board--lanes { display: grid; overflow: visible; margin-inline: 0; padding: 0; }
}

/* The week as a day list (below md: a tablet in portrait, or a phone). Seven columns
   do not fit, and a scroller hides today behind the past days, so each day becomes a
   row: the day's head on the left, its cards flowing to the right with the add tile
   after the last card. The whole week is on one screen and today keeps its pine outline. */
@media (max-width: 56.24rem) {
  .c-board--week { display: flex; flex-direction: column; gap: var(--space-xs); overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; }
  .c-board--week .c-board__col { flex: none; display: grid; grid-template-columns: 7rem 1fr; min-height: 0; }
  .c-board--week .c-board__head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-2xs); padding: var(--space-sm); border-inline-end: var(--stroke) solid var(--rule); }
  .c-board--week .c-board__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--width-edge-col), 100%), 1fr)); align-content: start; gap: var(--space-xs); padding: var(--space-xs); }
  .c-board--week .c-board__empty { align-self: center; }
  .c-board--week .c-board__add { margin-top: 0; }
}
/* On a phone the day's head sits above its cards instead of beside them. */
@media (max-width: 40rem) {
  .c-board--week .c-board__col { grid-template-columns: 1fr; }
  .c-board--week .c-board__head { flex-direction: row; align-items: baseline; padding: var(--space-xs) var(--space-sm); border-inline-end: 0; border-bottom: var(--stroke) solid var(--rule); }
}