/* Buyout mapping board: draws only from the dashboard's own tokens. */
body.board-open #dash-view, body.board-open #project-view { display: none !important; }
/* The dashboard's own screens step aside by class when the board opens (board.js route): its rule that makes the project view a
   flex column (`#project-view.ds[style*="block"]`) outranks the one above, so coming from the scopes page left the project header
   over the board, and its one-screen-tall layout put the version line over the cards (Freddy, 2026-10-10). */
html body #dash-view.bd-away, html body #project-view.bd-away { display: none !important; }
/* Text reads at 4.5:1 or better on every theme's page and card (Freddy's gray page, 2026-10-08): the theme's muted/faint greys
   (55% / 38% of the ink) measure 3.5 and 2.2 on the light themes, so the board uses its own, stronger mixes. */
#board-view { display: none; padding: 20px 24px 60px; color: var(--ink);
  --text-muted: color-mix(in srgb, var(--ink) 76%, transparent); --text-faint: color-mix(in srgb, var(--ink) 68%, transparent); }
#board-view .bd-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40vh; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
#board-view .bd-st { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; }
/* its own colours (white on a deep red / green, ink on grey): a mark must read on any page colour */
#board-view .bd-st-bad { background: #b3261e; color: #fff; }
#board-view .bd-st-ok { background: #1b6e2f; color: #fff; }
#board-view .bd-st-warn { background: #b45309; color: #fff; }
#board-view .bd-st-opt { background: #e4e4e4; color: #1f1f1f; }
#board-view .bd-sub { margin: 0 0 8px; font-size: .8rem; color: var(--text-muted); }
#board-view .bd-mx { display: inline-flex; vertical-align: middle; }
#board-view .bd-mx svg { display: block; }
#board-view .bd-loading .bd-spin { width: 26px; height: 26px; border-width: 3px; vertical-align: 0; }
#board-view .bd-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
#board-view h2 { margin: 0; font-size: 1.25rem; }
#board-view h3 { margin: 0 0 8px; font-size: .9rem; display: flex; align-items: baseline; gap: 6px; }
#board-view .bd-spacer { flex: 1; }
#board-view .bd-msg { margin: 6px 0 12px; padding: 9px 14px; border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: 8px; background: var(--bg-card); color: var(--text); font-size: .9rem; }
#board-view .bd-msg[hidden] { display: none; }
/* the page's top: the title like the app's other pages (.pv-crumb.proj), the buttons the app's own (.btn / .btn-sm / .btn-accent), the notices its
   own component (.callout) in one block */
#board-view .bd-pagehead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#board-view .bd-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
/* the remove-package button (v0.539.0: a labelled text button, was a bare "×") */
#board-view button.bd-c.bd-rm:not(.btn):not(.bd-menu-item):not(.notif-x) { color: var(--text-muted); border: 0; background: transparent; padding: 2px 6px; flex: none; }
#board-view button.bd-c.bd-rm:not(.btn):not(.bd-menu-item):not(.notif-x):hover { color: var(--danger); text-decoration: underline; }
#board-view .bd-tech { color: var(--text-muted); font-size: 12px; }
#board-view .bd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
#board-view .bd-bar .bd-spacer { flex: 1 1 0; }
#board-view .bd-seg { display: inline-flex; }
#board-view .bd-seg .btn { border-radius: 0; }
#board-view .bd-seg .btn:first-child { border-radius: 7px 0 0 7px; }
#board-view .bd-seg .btn:last-child { border-radius: 0 7px 7px 0; margin-left: -1px; }
#board-view .bd-seg .btn.on { background: var(--bg-subtle); border-color: var(--text); font-weight: 700; position: relative; z-index: 1; }
#board-view .bd-menu { position: relative; }
#board-view .bd-menu > summary { list-style: none; display: inline-block; }
#board-view .bd-menu > summary::-webkit-details-marker { display: none; }
#board-view .bd-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 250px; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 6px; }
#board-view .bd-menu-item { text-align: left; background: none; border: none; border-radius: 7px; padding: 8px 10px; font-size: 13px; color: var(--text); cursor: pointer; }
#board-view .bd-menu-item:hover:not(:disabled) { background: var(--bg-subtle); }
#board-view .bd-notices { margin: 0 0 10px; }
#board-view .bd-notices p { margin: 2px 0; }
#board-view .bd-notices .bd-note-main { font-weight: 700; }
#board-view .bd-tilehead { display: flex; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0; }
#board-view .bd-tilehead strong { min-width: 0; overflow-wrap: anywhere; }
#board-view .bd-tilehead input { flex: none; }
#board-view .bd-msg.bd-ok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-color: #1b6e2f; border-left-color: #1b6e2f; background: color-mix(in srgb, #1b6e2f 14%, var(--bg-card)); font-weight: 600; }
#board-view .bd-back { font-size: .85rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
#board-view .bd-back:hover { color: var(--text); text-decoration: underline; }
#board-view .bd-msg.bd-bad { border-left-color: var(--danger); color: var(--danger); }
#board-view .bd-hint { color: var(--text-faint); font-size: .82rem; margin: 4px 0; }
#board-view button:not(.btn):not(.bd-menu-item):not(.notif-x) { font: inherit; font-size: .82rem; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--ink); cursor: pointer; }
#board-view button:disabled { opacity: .45; cursor: not-allowed; }
#board-view button.bd-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
#board-view button.bd-c { padding: 0 6px; border: 0; background: transparent; color: var(--text-muted); }
#board-view button.bd-x { margin-left: auto; border: 0; background: transparent; font-size: 1.1rem; }
#board-view .bd-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 900px) { #board-view .bd-body { grid-template-columns: 1fr; } }
#board-view .bd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
#board-view .bd-card, #board-view .bd-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow); }
#board-view .bd-panel { margin-bottom: 12px; }
#board-view .bd-card.bd-over { outline: 2px solid var(--accent); }
#board-view .bd-card.bd-dead { opacity: .75; }
#board-view .bd-head { display: flex; align-items: baseline; gap: 4px; cursor: grab; margin-bottom: 6px; }
#board-view .bd-head strong { cursor: text; }
#board-view .bd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; }
#board-view .bd-lab { width: 100%; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
#board-view .bd-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; background: var(--bg-subtle); border: 1px solid var(--border); font-size: .8rem; cursor: grab; }
#board-view .bd-chip.bd-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
#board-view .bd-chip.bd-empty { opacity: .75; font-style: italic; }
#board-view .bd-chip input { margin: 0; }
#board-view .bd-chiptext { cursor: pointer; }
#board-view .bd-n { color: var(--text-muted); }
#board-view .bd-item, #board-view .bd-sw { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--border); font-size: .82rem; }
#board-view .bd-sw { flex-wrap: wrap; }
#board-view .bd-sw select { max-width: 100%; }
#board-view .bd-item[draggable="true"] { cursor: grab; }
#board-view .bd-skipped { opacity: .75; }
#board-view .bd-start { max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
#board-view .bd-add { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
#board-view .bd-add input, #board-view .bd-add select { width: 100%; box-sizing: border-box; }
#board-view .bd-out { margin-top: 10px; }
#board-view .bd-rev { margin: 6px 0 10px; }
#board-view .bd-choose { display: flex; gap: 4px; flex: none; }
#board-view .bd-line-person { background: rgba(240, 180, 0, .12); }
#board-view .bd-line-stays, #board-view .bd-line-both { opacity: .85; }
#board-view .bd-bothbox { flex-basis: 100%; display: grid; gap: 6px; margin: 6px 0; }
#board-view .bd-both { display: grid; gap: 2px; }
#board-view .bd-both textarea { width: 100%; box-sizing: border-box; font: inherit; }
#board-view .bd-rev .bd-item { flex-wrap: wrap; }
#board-view .bd-modes { display: inline-flex; gap: 0; }
#board-view .bd-modes button { border-radius: 0; }
#board-view .bd-modes button:first-child { border-radius: 8px 0 0 8px; }
#board-view .bd-modes button:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
#board-view .bd-filter { padding: 6px 10px; margin-bottom: 10px; border: 1px solid var(--accent); border-radius: 10px; font-size: .85rem; display: flex; gap: 8px; align-items: baseline; }
#board-view .bd-tiles { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
#board-view .bd-tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-subtle); cursor: grab; font-size: .85rem; }
#board-view .bd-tile.bd-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
#board-view .bd-tile.bd-wait { border-style: dashed; opacity: .85; }
#board-view .bd-tile input { margin: 0; }
#board-view .bd-tile small { color: var(--text-muted); }
#board-view .bd-tile small.bd-unseen { color: var(--text-faint); font-style: italic; }
#board-view .bd-seamtag { color: var(--ink); font-weight: 600; cursor: help; text-decoration: underline dotted var(--accent) 2px; }
#board-view .bd-tile .bd-tilebtns { margin-left: auto; display: flex; gap: 4px; }
#board-view details.bd-waiting { margin-top: 6px; }
#board-view details.bd-waiting summary { cursor: pointer; font-size: .8rem; color: var(--text-muted); }
#board-view.bd-working { cursor: progress; }
#board-view .bd-spin { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: bd-turn .7s linear infinite; }
@keyframes bd-turn { to { transform: rotate(360deg); } }
#board-view .bd-handle { cursor: grab; color: var(--text-faint); padding-right: 2px; user-select: none; }
#board-view details.bd-unused { grid-column: 1 / -1; }
#board-view details.bd-unused > .bd-cards { margin-top: 8px; }
#board-view .bd-bar select { font: 600 13px var(--sans); padding: 6px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; }
#board-view details.bd-advanced > summary { cursor: pointer; font-size: .9rem; font-weight: 600; }
#board-view details.bd-advanced .bd-panel { border: 0; box-shadow: none; padding: 0; margin: 8px 0 0; background: transparent; }

/* Who does what between trades (v0.513): one row per item, a small table of legs, groups collapsed */
#board-view .bd-st-info { background: #1d4ed8; color: #fff; }
#board-view .bd-group { border-top: 1px solid var(--border); padding: 4px 0; }
#board-view .bd-group > summary { cursor: pointer; font-size: .85rem; padding: 4px 0; }
#board-view .bd-group > summary small { color: var(--text-muted); }
#board-view .bd-who { padding: 6px 0; border-top: 1px solid var(--border); }
#board-view .bd-wtitle { font-size: .84rem; font-weight: 600; }
#board-view .bd-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 4px; }
#board-view .bd-cell { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; }
#board-view .bd-cell select, #board-view .bd-field select, #board-view .bd-field input { max-width: 100%; box-sizing: border-box; font: inherit; font-size: .82rem; }
#board-view .bd-leg { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
#board-view .bd-def { color: var(--text-muted); font-size: .72rem; }
#board-view .bd-chg { font-weight: 700; }
#board-view button.bd-reset { border: 0; background: transparent; color: var(--text); text-decoration: underline; cursor: pointer; padding: 0 4px; font-size: .72rem; }
#board-view .bd-wowner { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font-size: .82rem; }
#board-view .bd-addbtn { margin-top: 8px; }
#board-view .bd-field { display: flex; flex-direction: column; gap: 2px; }
#board-view .bd-field small { color: var(--text-muted); font-size: .76rem; }
#board-view .bd-diag > summary { cursor: pointer; font-size: .85rem; }

/* the board's dialog: the app's `.modal` component, plus its fields */
.bd-dialog .bd-dlg-text { font-size: 13px; color: var(--text-muted); white-space: pre-line; margin-bottom: 10px; }
.bd-dialog .bd-dlg-scroll { max-height: 50vh; overflow: auto; }
.bd-dialog .bd-dlg-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.bd-dialog .bd-dlg-field { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; font-weight: 400; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); resize: vertical; }
.bd-dialog .bd-dlg-note { font-size: 12px; color: var(--text-muted); margin: 0; }
.bd-dialog .bd-dlg-list { margin-top: 12px; max-height: 30vh; overflow: auto; font-size: 13px; }
.bd-dialog .bd-dlg-item { padding: 6px 0; border-top: 1px solid var(--border); }
.bd-dialog .bd-dlg-item small { color: var(--text-muted); }

/* first-time guide: the app's notice component with a short numbered list */
#board-view .bd-guide { margin: 8px 0 12px; }
#board-view .bd-guide ol { margin: 6px 0 10px 20px; padding: 0; }
#board-view .bd-guide li { margin: 2px 0; }

/* v0.519.0: where a refusal lands, a skipped item's reason, and the reason beside a control that is not available */
#board-view .bd-red { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
#board-view .bd-flash { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--danger) 10%, var(--bg-card)); color: var(--danger); font-weight: 600; font-size: .9rem; }
#board-view .bd-hot { outline: 2px solid var(--danger); outline-offset: 1px; border-radius: 8px; }
#board-view .bd-why { color: var(--text-muted); font-size: .8rem; }
#board-view .bd-menu-why { display: block; padding: 0 10px 8px; color: var(--text-muted); font-size: .8rem; }
#board-view .bd-item.bd-skipped { flex-wrap: wrap; }
#board-view .bd-item .bd-why { flex-basis: 100%; }
/* "this project has X: add a package?" (v0.527.0): the app's notice component, one row per card, its three buttons at the right */
#board-view .bd-suggest { margin: 0 0 10px; }
#board-view .bd-suggest p { margin: 2px 0; }
#board-view .bd-suggest .bd-note-main { font-weight: 700; }
#board-view .bd-suggest .bd-sug { border-top: 1px solid var(--border); padding: 8px 0; font-size: .82rem; }
#board-view .bd-suggest .bd-sugline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#board-view .bd-suggest .bd-sugreview { margin: 6px 0 0 12px; display: grid; gap: 4px; }
#board-view .bd-suggest .bd-sugcard { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#board-view .bd-sugwait { margin: 0 0 10px; }
#board-view .bd-suggest .bd-sugtext { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
#board-view .bd-suggest .bd-sugbtns { display: flex; flex-wrap: wrap; gap: 6px; }
#board-view .bd-suggest > p:last-child { margin-top: 8px; }

/* "Move to…": pick the package from a list, the same move as a drop (Freddy, 2026-10-10: a card off screen can't be reached by dragging) */
#board-view select.bd-moveto { flex: 0 1 auto; max-width: 9.5rem; font: 600 12px var(--sans); padding: 3px 6px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; }
/* the side panel (Unassigned, Double-claimed, History...) stays in view under the page header while the cards scroll; taller than
   the window, it scrolls by itself */
@media (min-width: 901px) {
  #board-view .bd-side { position: sticky; top: var(--bd-top, 72px); max-height: calc(100dvh - var(--bd-top, 72px) - 8px); overflow-y: auto; overscroll-behavior: contain; }
}