/* Boards extend the measured card/control primitives with existing tokens. */
.native-board { min-width:0; padding:var(--space-12); border:1px solid var(--border-card); border-radius:var(--radius-card); background:var(--canvas); }
.native-board button { font:inherit; color:var(--text-primary); }
.board-tray,.board-actions,.date-labels { display:flex; flex-wrap:wrap; gap:var(--space-8); padding:var(--space-8) 0; }
.board-tray { min-height:48px; background:var(--input-surface); border-radius:var(--radius-input); padding:var(--space-8); }
.board-token { touch-action:none; user-select:none; border:1px solid var(--border-input); background:var(--canvas); border-radius:var(--radius-input); padding:var(--space-8); cursor:grab; text-align:left; overflow-wrap:anywhere; max-width:100%; }
.board-token.selected { border-color:var(--brand); background:var(--warning-soft); }
.native-board button:focus-visible,.board-tray:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.native-board button:disabled { cursor:default; }
.board-status,.board-legend { color:var(--text-secondary); font-size:var(--text-meta-size); line-height:var(--text-meta-leading); margin:var(--space-8) 0; }
.drop-preview { outline:2px solid var(--brand); outline-offset:-2px; }
.board-drag-ghost { position:fixed; z-index:100; pointer-events:none; font-family:var(--font-app); background:var(--purple-soft); border:1px solid var(--purple); border-radius:var(--radius-input); padding:var(--space-8); max-width:194px; }
.native-calendar { width:100%; max-width:400px; }
.native-calendar .calendar-day { touch-action:none; min-width:0; width:100%; min-height:40px; }
.native-calendar .calendar-day.in-range,.native-calendar .calendar-day.range-preview { background:var(--purple-soft); border-color:var(--purple); }
.native-calendar .calendar-day.selected { background:var(--warning-soft); border-color:var(--brand); }
.native-calendar .weekend { color:var(--text-secondary); }
.native-calendar .calendar-day:disabled:not(.selected):not(.in-range) { background:var(--input-surface); }
.connection-board { position:relative; height:320px; max-width:100%; touch-action:none; }
.connection-board svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.connection-board line { stroke:var(--brand); stroke-width:3; }
.connection-board .given-line { stroke:var(--text-secondary); }
.connection-node { position:absolute; transform:translate(-50%,-50%); border:1px solid var(--border-input); border-radius:var(--radius-button); background:var(--canvas); padding:var(--space-8); min-height:40px; min-width:40px; touch-action:none; user-select:none; }
.connection-node.connected { background:var(--purple-soft); border-color:var(--purple); }
.connection-node.endpoint { outline:2px solid var(--brand); }
.connection-path { overflow-wrap:anywhere; }
body[data-native-board] .question-layout { grid-template-columns:minmax(0,1fr); }
body[data-native-board] .stimulus { max-width:650px; margin-inline:auto; }
body[data-native-board] .question-panel { width:100%; }

/* Horizontal tracks and fixed identity rows observed in the supplied recording. */
.timeline-scroll { overflow-x:auto; max-width:100%; padding:var(--space-4); overscroll-behavior-x:contain; }
.horizontal-time { min-width:calc(var(--slots) * 28px); padding:0 var(--space-8); }
.timeline-lane { margin-bottom:var(--space-12); }
.timeline-lane > strong { display:block; font-size:var(--text-meta-size); line-height:var(--text-meta-leading); margin-bottom:var(--space-4); }
.time-track { display:grid; grid-template-columns:repeat(var(--slots),minmax(0,1fr)); grid-template-rows:56px; position:relative; isolation:isolate; }
.time-cell { min-width:0; grid-row:1; border:1px solid var(--border-card); border-radius:0; background:var(--canvas); padding:var(--space-4); overflow:hidden; font-size:var(--text-meta-size)!important; text-align:left; }
.time-cell.booked { background:var(--card-frame); }
.time-cell.buffer,.task-buffer { background:var(--warning-soft); font-size:var(--text-meta-size); color:var(--text-secondary); overflow:hidden; }
.time-cell.cancelled { background:var(--success-soft); text-decoration:line-through; }
.time-track .board-token { z-index:2; min-width:0; grid-row:1; margin:1px; padding:var(--space-4); font-size:var(--text-meta-size); line-height:var(--text-meta-leading); overflow:hidden; }
.time-track .board-token.selected { outline:2px solid var(--brand); }
.time-track .board-token small { display:block; white-space:nowrap; }
.task-buffer { z-index:1; pointer-events:none; padding:var(--space-4); }
.time-ticks { position:relative; height:28px; font-size:var(--text-meta-size); line-height:var(--text-meta-leading); margin-top:var(--space-4); }
.time-ticks span { position:absolute; transform:translateX(-50%); }
.time-ticks span:first-child { transform:none; }
.time-ticks span:last-child { transform:translateX(-100%); }
.task-tray { flex-direction:column; margin-top:var(--space-12); background:var(--canvas); }
.task-tray .board-token,.task-used { display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); width:100%; min-height:48px; border-left:4px solid var(--token-ink); border-radius:var(--radius-input); background:var(--input-surface); padding:var(--space-8) var(--space-12); }
.task-used { color:var(--text-disabled); background:var(--button-disabled); }
.task-tray small { color:var(--text-secondary); }
.tone-info { --token-ink:var(--info); --token-surface:var(--info-soft); }
.tone-success { --token-ink:var(--success); --token-surface:var(--success-soft); }
.tone-warning { --token-ink:var(--warning); --token-surface:var(--warning-soft); }
.tone-purple { --token-ink:var(--purple); --token-surface:var(--purple-soft); }
.time-track .board-token,.board-drag-ghost.task-ghost { border-color:var(--token-ink,var(--purple)); background:var(--token-surface,var(--purple-soft)); }
.board-drag-ghost.task-ghost { max-width:none; min-height:56px; }
.answer-time { touch-action:none; }
.answer-time.slot-selected,.answer-time.range-preview { background:var(--success-soft); border-color:var(--success); }
.selection-track { outline:1px solid var(--border-input); }
.ranking-people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); }
.person-row { position:relative; min-width:0; min-height:48px; display:flex; align-items:center; padding:var(--space-4); border:1px solid var(--border-input); border-radius:var(--radius-input); background:var(--input-surface); }
.person-target { border:0; width:100%; min-height:40px; padding:var(--space-4) var(--space-8); background:transparent; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:var(--space-8); }
.rank-placeholder { min-width:40px; text-align:center; color:var(--text-placeholder); }
.rank-badge { display:inline-flex; justify-content:center; align-items:center; flex-shrink:0; width:40px; height:40px; padding:0; border:1px solid var(--border-input); border-radius:var(--radius-reasoning); background:var(--canvas); font:inherit; color:var(--text-primary); cursor:grab; touch-action:none; user-select:none; }
.person-row .rank-badge { position:absolute; right:var(--space-8); background:var(--success-soft); border-color:var(--success); }
.rank-badge.selected { outline:2px solid var(--brand); background:var(--warning-soft); }
.badge-tray { justify-content:space-around; }
.assignment-map { position:relative; height:320px; margin:var(--space-16) 0; border:1px solid var(--border-card); border-radius:var(--radius-input); overflow:hidden; }
.map-zone { position:absolute; border:1px solid var(--border-input); border-radius:0; background:var(--canvas); padding:var(--space-4); font-size:var(--text-meta-size)!important; overflow-wrap:anywhere; }
.map-zone span { display:block; margin-top:var(--space-8); color:var(--text-secondary); }
.map-zone.hallway { background:var(--input-surface); }
.map-zone.zone-disabled { background:var(--card-frame); color:var(--text-disabled); }
.assignment-map .board-token { position:absolute; transform:translate(-50%,-50%); z-index:2; border:0; background:transparent; padding:0; overflow:visible; }
.person-pin { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--purple); border-radius:var(--radius-reasoning); background:var(--purple-soft); font-weight:500; }
.marker-name { display:block; font-size:var(--text-meta-size); line-height:var(--text-meta-leading); padding:var(--space-4); }
.assignment-map .marker-name { position:absolute; top:100%; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--canvas); border:1px solid var(--border-card); border-radius:var(--radius-badge); visibility:hidden; }
.assignment-map .board-token:hover,.assignment-map .board-token:focus-visible { z-index:3; }
.assignment-map .board-token:hover .marker-name,.assignment-map .board-token:focus-visible .marker-name,.assignment-map .board-token.selected .marker-name { visibility:visible; }
.assignment-map .board-token.selected .person-pin { outline:2px solid var(--brand); }
.people-tray { justify-content:space-around; }
.people-tray .board-token { border:0; background:transparent; text-align:center; padding:var(--space-4); }
@media (max-width:600px) { .ranking-people { grid-template-columns:minmax(0,1fr); } }