/* DNEG AI Roadmap: views/board.css
   Extras for the Maturity board only (root class .bd). Columns, swimlanes and compact repo and capability cards. The head, the
   brief and the folded blocks (lk-*) are the shared kit; the columns and their controls sit in the first block, open. */

.bd { --stick: 54px; }

.bd-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0 0 8px; }
.bd-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bd-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bd-sum { margin: 0 0 12px; color: var(--muted); font-size: .84rem; }

/* what each maturity means, inside the "How maturity is judged" block */
.bd-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; margin: 0; }
.bd-def dt { margin-bottom: 4px; }
.bd-def dd { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.bd-defs + .note { margin: 1rem 0 0; }

/* the grid: one column per maturity, or a lane label plus one cell per maturity */
.bd-grid { display: grid; column-gap: 12px; align-items: start; }
.bd-grid.lanes { row-gap: 0; }
.bd-col { min-width: 0; }
.bd-head { position: sticky; top: var(--stick); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.bd-n { font-family: var(--mono); font-size: .86rem; color: var(--fg); }
.bd-fold { margin-left: auto; margin-right: 8px; }
.bd-stack { display: grid; gap: 8px; }
.bd-none { margin: 0; padding: 14px 10px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: .82rem; text-align: center; }

/* collapsed retired column: a thin strip you click to open */
.bd-expand { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-height: 8rem; padding: 12px 4px; border: 1px dashed var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.bd-expand:hover { border-color: var(--accent); color: var(--fg); }
.bd-expand .bd-v { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.bd-expand .bd-plus { font-size: 1rem; line-height: 1; }
.bd-expand.head { position: sticky; top: var(--stick); z-index: 5; background: var(--panel); flex-direction: row; justify-content: center; min-height: 0; width: auto; margin-bottom: 8px; padding: 6px 4px; }
.bd-expand.head .bd-v { writing-mode: initial; transform: none; display: none; }

/* swimlanes */
.bd-corner { position: sticky; top: var(--stick); z-index: 5; }
.bd-lane { grid-column: 1; align-self: stretch; display: flex; flex-direction: column; gap: 2px; padding: 12px 6px 12px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.bd-lane a, .bd-lane span { color: var(--fg); font-weight: 600; text-decoration: none; }
.bd-lane a:hover { color: var(--accent2); text-decoration: underline; }
.bd-lane small { color: var(--muted); font-size: .74rem; }
.bd-cell { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.bd-cell.folded { justify-items: center; }

/* compact cards: the column header already says the maturity, so the card keeps name, summary and platforms */
.bd .card { padding: 10px 12px; border-radius: 10px; }
.bd .card h3 { margin-bottom: .1rem; font-size: .93rem; line-height: 1.25; }
.bd .card p { font-size: .8rem; line-height: 1.4; }
.bd .card .top .chip { display: none; }
.bd .card .foot { display: none; }
.bd .card .meta { gap: 4px; padding-top: .25rem; }
.bd .card .tag { font-size: .66rem; padding: 0 6px; }
.bd .capability-card { border-left: 3px solid var(--accent); }
.bd .capability-card h3::after { content: "Capability"; display: block; margin-top: 2px; font-family: var(--font); font-size: .62rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--accent2); }
.bd .card.internal { opacity: .78; border-style: dashed; }

@media (max-width: 1000px) {
  /* many columns do not fit: scroll the board sideways inside its own box, never the page */
  .bd-grid { overflow-x: auto; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: minmax(230px, 1fr); padding-bottom: 8px; }
  .bd-grid.lanes { grid-auto-flow: row; grid-template-columns: 8rem repeat(6, minmax(220px, 1fr)) !important; }
  .bd-grid .bd-head, .bd-grid .bd-expand.head, .bd-grid .bd-corner { position: static; }
  .bd-expand { min-height: 5rem; flex-direction: row; justify-content: center; }
  .bd-expand .bd-v { writing-mode: initial; transform: none; }
}
@media (max-width: 700px) {
  /* a phone reads the columns one under the other; the lanes view keeps its own sideways scroll */
  .bd-grid.cols { display: grid; overflow: visible; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) !important; row-gap: 18px; }
  .bd-grid.cols .bd-head { position: static; }
  .bd-grid.cols .bd-expand { min-height: 0; padding: 10px 12px; flex-direction: row; justify-content: space-between; }
  .bd-grid.cols .bd-expand .bd-plus { margin-left: auto; }
}
@media print {
  .bd-head, .bd-expand.head, .bd-corner { position: static; }
  .bd-tools { display: none; }
}

/* the empty state (nothing matches) stands where the brief would be, above the block that holds the controls */
.bd > .empty { margin-bottom: 1.4rem; }