/* workboard.js: the Board mode's styles — the columns (the reference's
 * .board/.col/.tcard structure): the columns flow side by side and pan
 * inside their own box, one sunken column per status with its pill and
 * count, each card a raised tile (title, goal-ref line, who runs it, the
 * count), 44px touch targets on a phone. Tokens only. */

.work-board { margin-top: var(--sv-space-3); }
.work-board-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); margin-bottom: var(--sv-space-2); font-size: var(--ui-meta); }
.work-board-note { color: var(--sv-ink-tertiary); }
.work-lane + .work-lane { margin-top: var(--sv-space-3); }
.work-lane-head { display: flex; align-items: baseline; gap: var(--sv-space-2); margin: 0 0 var(--sv-space-2); font-size: var(--sv-text-h4); font-weight: 600; }
.work-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 16rem); gap: var(--sv-space-3); overflow-x: auto; padding: 0 var(--sv-space-2) var(--sv-space-2) 0; align-items: start; }

/* One column: sunken ground, its head, its cards. */
.work-col { display: flex; flex-direction: column; gap: var(--sv-space-2); min-height: 11rem; padding: var(--sv-space-2); border-radius: var(--sv-radius); background: var(--sv-surface-sunken); }
.work-col-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; }
.work-col-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--sv-surface-raised); color: var(--sv-ink-secondary); font-size: var(--ui-meta); font-weight: 600; }
.work-col[data-tone="good"] .work-col-pill { background: color-mix(in srgb, var(--ws-working) 14%, transparent); color: var(--ws-working-ink); }
.work-col[data-tone="bad"] .work-col-pill { background: color-mix(in srgb, var(--sv-danger) 12%, transparent); color: var(--sv-danger); }
.work-col[data-tone="review"] .work-col-pill { background: color-mix(in srgb, var(--sv-attention) 14%, transparent); color: var(--sv-attention); }
.work-col[data-tone="done"] .work-col-pill { background: none; box-shadow: inset 0 0 0 1px var(--sv-hairline-strong); color: var(--sv-ink-secondary); }
.work-col[data-tone="off"] .work-col-pill { background: none; box-shadow: inset 0 0 0 1px var(--sv-hairline); color: var(--sv-ink-tertiary); }
.work-col-count { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }
.work-col-more { padding: 0 4px; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }

/* One card: a raised tile, never a drag handle. */
.work-tcard { display: grid; gap: 6px; min-height: 44px; padding: var(--sv-space-2) var(--sv-space-3); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface-raised); cursor: pointer; text-align: left; }
.work-tcard:hover { border-color: var(--sv-hairline-strong); }
.work-tcard-t { font-size: var(--ui-text); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.work-tcard-ref { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.work-tcard-goal { min-width: 0; color: var(--sv-ink-secondary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-tcard-goal:hover { text-decoration: underline; }
.work-tcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.work-tcard-meta .track-face-name, .work-tcard-meta .plan-who { color: var(--sv-ink-secondary); }

/* ---- phone ---- */
@media (max-width: 640px) {
  .work-cols { grid-auto-columns: minmax(11rem, 13rem); }
  .work-lane-head { font-size: var(--ui-text); }
}