/* Board pack (bp-*): only what docs/ui-design/frs.css does not already give the .m-* components (page, head, flow, deck, thumbs,
   check, banner, empty, sheet). The slide itself keeps deck.css. No transform or container on a page section: the sheet is
   fixed, and `.m-page > *` keeps animation-fill-mode backwards (shell.css). */
.deck-screen.bp-page { display: flex; flex-direction: column; gap: 20px; align-content: normal; }
.bp-page .m-head { align-items: flex-start; }
.bp-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.bp-actions .deck-pick { min-width: 200px; height: 36px; }
.bp-actions a.m-btn { text-decoration: none; }
.bp-actions .m-btn .ic { width: 16px; height: 16px; }
.bp-why { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 14px; max-width: 560px; margin: 0; }

/* the stage strip */
.bp-flow { flex-wrap: wrap; row-gap: 6px; }
.bp-stage-btn { height: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.bp-flow li[data-s="now"] .bp-stage-btn { color: #fff; }

/* blocked */
a.m-banner { text-decoration: none; color: inherit; }
.m-banner .ico .ic { width: 18px; height: 18px; }
.bp-block-r { display: block; overflow-wrap: anywhere; }

/* empty */
.bp-empty { padding: 88px 24px; }
.bp-empty .ico .ic { width: 24px; height: 24px; }
.bp-start { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* the rail and the slide */
.bp-deck { min-width: 0; }
.bp-thumbs { position: sticky; top: 76px; max-height: calc(100vh - 96px); }
.bp-thumb { display: flex; flex-direction: column; gap: 2px; }
.bp-thumb.hid .mini { opacity: .5; }
.bp-thumb .mini { white-space: normal; }
.bp-arrange { display: flex; padding-left: 30px; }
.bp-arrange .x-btn { margin-left: 0; width: 30px; height: 30px; }
.bp-arrange .x-btn[disabled] { opacity: .35; }
.bp-stage { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 761px) { .bp-stage .deck-slide { max-width: max(520px, calc((100vh - 250px) * 1.7778)); } }
.bp-status .m-check { padding: 14px 20px; }
.bp-status .m-check .st .m-ic { width: 16px; height: 16px; }
.bp-tools { flex-wrap: wrap; align-items: center; }
.bp-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; font-size: 11.5px; font-weight: 600; background: var(--brand-tint); color: var(--brand-deep); }

/* the side sheet: tabs on top, the panel below */
.bp-sheet .m-sheet__head { align-items: center; }
.bp-tabs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bp-sheet-body { padding: 16px 20px; }
.bp-sheet-body .chk-panel, .bp-sheet-body .ai-panel { display: grid; gap: 10px; }

/* laptop width below the design's 1440: the strip of slides moves above the slide (frs.css), arrange buttons stay under the selected one */
@media (max-width: 1100px) {
  .bp-thumbs { position: static; max-height: none; }
  .bp-thumb { flex: none; width: 150px; }
  .bp-thumb .m-thumb { width: 150px; }
}

/* phone: read only. A strip of slides, one slide, the line under it; no buttons */
@media (max-width: 760px) {
  .bp-flow li { height: 26px; padding: 0 9px; font-size: 12.5px; }
  .bp-flow .sep { width: 6px; }
  .bp-status .m-check { padding: 12px 16px; grid-template-columns: 28px minmax(0, 1fr); }
  .bp-empty { padding: 56px 16px; }
}