/* Kanban boards: bugs, roadmap and suggestions. */

.board {
    display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 14px;
    overflow-x: auto; padding-bottom: 8px; align-items: start;
}
.board.roadmap { grid-template-columns: repeat(5, minmax(196px, 1fr)); }
.column {
    position: relative;
    background: var(--glass), var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column; max-height: calc(100vh - 200px); min-height: 150px;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-sm);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease-out), background var(--t);
}
/* A thin status-coloured line along the top of every column. */
.column::before {
    content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 0 0 2px 2px;
    background: var(--status, var(--violet)); opacity: .8; box-shadow: 0 0 12px var(--status, var(--violet));
}
.column.over { border-color: var(--accent); box-shadow: var(--glow); background: color-mix(in srgb, var(--surface) 80%, rgba(var(--accent-rgb), .2)); transform: translateY(-2px); }
.column-head { display: flex; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 1px solid var(--border); }
.column-head h2 { font-size: 14px; flex: 1; }
.dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px var(--status, var(--violet)); flex: none; }
.column-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; }
.column-empty {
    color: var(--faint); text-align: center; font-size: 12.5px; font-weight: 600; padding: 22px 0;
    border: 1px dashed var(--border); border-radius: var(--radius-sm);
}

.bug-card, .road-card {
    position: relative;
    background: var(--glass), var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 7px;
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-sm);
    transition: border-color var(--t-fast), transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), opacity var(--t);
}
.bug-card:hover, .road-card:hover { border-color: rgba(var(--accent-rgb), .4); transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-lift); }
.bug-card:active, .road-card:active { transform: scale(.985); }
.bug-card[draggable="true"], .road-card[draggable="true"] { cursor: grab; }
.bug-card:focus-visible, .road-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bug-card-head { display: flex; justify-content: space-between; align-items: center; }
.bug-text {
    margin: 0; font-size: 13.5px; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.bug-card-foot { display: flex; flex-wrap: wrap; gap: 4px; }
.bug-card-user { font-size: 12.5px; color: var(--muted); }

/* Bug columns take their colour from the status dot in their header. */
.column:has(> .column-head .status-NEEDS_INFO) { --status: var(--warn); }
.column:has(> .column-head .status-OPEN) { --status: var(--sky); }
.column:has(> .column-head .status-UNDER_INVESTIGATION) { --status: var(--danger); }
.column:has(> .column-head .status-PATCHED) { --status: var(--ok); }

/* Roadmap columns carry their own colour, like a sunrise moving across the board. */
.col-IDEA { --status: var(--faint); }
.col-PLANNED { --status: var(--sky); }
.col-IN_PROGRESS { --status: var(--violet); }
.col-TESTING { --status: var(--pink); }
.col-DONE { --status: var(--ok); }
.road-card { border-left: 3px solid var(--status); }
.road-card.drop-before { box-shadow: 0 -3px 0 var(--accent), var(--shadow-sm); }
.road-card-top { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.road-card-top .scope { font-size: 15px; }
.road-title { font-weight: 700; font-size: 14px; line-height: 1.35; }
.road-foot { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11.5px; font-weight: 700; color: var(--violet); }
.pill.tag { background: rgba(167, 139, 250, .1); border-color: rgba(167, 139, 250, .3); }
.pill.prio-high { color: var(--danger); border-color: rgba(255, 122, 138, .4); background: rgba(255, 122, 138, .08); }
.pill.prio-low { color: var(--muted); }
.owner img { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px var(--card-bg); }
.progress { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.progress-bar { width: 46px; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress-bar span { display: block; height: 100%; background: var(--nebula); transform-origin: left; animation: grow-x .8s var(--ease-out) both; }

.checklist { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.checklist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.checklist .done, .checklist li.done { color: var(--faint); text-decoration: line-through; }
.checklist.read li { justify-content: flex-start; }

/* Suggestions */
.sug-col-PENDING { --status: var(--sky); }
.sug-col-APPROVED { --status: var(--warn); }
.sug-col-IMPLEMENTED { --status: var(--ok); }
.sug-col-REJECTED { --status: var(--faint); }
.pill.sug-PENDING { color: var(--sky); }
.pill.sug-APPROVED { color: var(--warn); }
.pill.sug-IMPLEMENTED { color: var(--ok); }
.pill.sug-REJECTED { color: var(--muted); }
.votes { display: inline-flex; gap: 8px; font-size: 12px; font-weight: 700; }
.votes .up { color: var(--ok); }
.votes .down { color: var(--danger); }

@media (max-width: 960px) {
    .board { grid-template-columns: repeat(4, 84vw); scroll-snap-type: x mandatory; }
    .board.roadmap { grid-template-columns: repeat(5, 84vw); }
    .column { scroll-snap-align: start; max-height: none; }
}

/* Card detail: the editable quote and the discussion thread. */
.quote-block { position: relative; display: flex; flex-direction: column; gap: 8px; }
.quote-block > .quote { padding-right: 76px; }
.quote-edit-btn { position: absolute; top: 6px; right: 6px; opacity: .7; transition: opacity var(--t-fast); }
.quote-block:hover .quote-edit-btn, .quote-edit-btn:focus-visible { opacity: 1; }
.quote-edit { animation: fade-up var(--t) var(--ease-out) both; }
.original summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.original summary::-webkit-details-marker { display: none; }
.original summary::before { content: "▸"; transition: transform var(--t-fast); }
.original[open] summary::before { transform: rotate(90deg); }
.original[open] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.quote.faded { opacity: .7; border-left-color: var(--faint); width: 100%; }
.thread { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.thread h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.thread .thread-messages { flex: none; max-height: 360px; min-height: 0; padding: 4px 6px 4px 0; }
.public-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.filter-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13px; color: var(--warn); background: rgba(247, 201, 92, .08); border: 1px solid rgba(247, 201, 92, .3); }
/* Roadmap: internal notes, testing and bulk actions */
.internal-notes { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border); }
.internal-notes .md { font-size: 13px; }
.test-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(247, 201, 92, .08); border: 1px solid rgba(247, 201, 92, .3); }
.test-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.test-history li { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--border); }
.test-history li.pass { border-left-color: var(--ok); }
.test-history li.fail { border-left-color: var(--danger); }
.bulk-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.bulk-check { width: 18px; height: 18px; flex: none; }
/* Roadmap: cards nobody has touched for a while (panel only) */
.needs-attention { border-color: rgba(247, 201, 92, .35); }
.stale-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.stale-row { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.stale-row:hover, .stale-row:focus-visible { background: var(--surface-2); }
.clip-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stale-tag { align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--warn); padding: 1px 7px; border-radius: 99px; background: rgba(247, 201, 92, .12); }