/* Reference: Bolt / Monzo boards. Proportions, not fixed row heights. */
.bb-toolbar,.bb-heading,.bb-actions,.bb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bb-toolbar{margin:12px 0 28px;font-size:var(--fs-14);color:var(--faint)}
.bb-toolbar label{display:flex;align-items:center;gap:8px}
.bb-toolbar select,.bb-actions select,.bb-actions button{font:inherit;color:var(--ink);background:var(--sf-base);border:1px solid var(--line-soft);padding:6px 9px;border-radius:0}
.bb-actions button[aria-pressed="true"]{background:var(--ink);color:var(--sf-base)}
.bb-boards{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.bb-boards--compare{grid-template-columns:repeat(2,minmax(0,1fr))}
.bb-card{min-width:0;container-type:inline-size}
.bb-heading{margin-bottom:12px;min-height:32px}
.bb-name{font:inherit;font-size:var(--fs-18);font-weight:400;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.bb-actions{font-size:12px;flex-shrink:0;gap:6px}
.bb-slide{position:relative;width:100%;aspect-ratio:16/9;background:var(--line-soft);overflow:hidden;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:.65cqw;padding:.65cqw}
.bb-tile{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--sf-base)}
.bb-media{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bb-media img{display:block;width:100%;height:100%;object-fit:contain}
.bb-media video{width:100%;height:100%;object-fit:contain}
/* UI-only category tooltip: not a DOM text layer, never part of an export. */
.bb-tile::after{content:attr(data-asset-label);position:absolute;z-index:2;left:1cqw;bottom:1cqw;max-width:calc(100% - 2cqw);padding:5px 8px;background:#fff;color:#161616;box-shadow:0 1px 8px #0002;font:400 clamp(10px,1cqw,13px)/1.2 var(--font-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden}
.bb-tile:hover::after,.bb-tile:focus-visible::after{opacity:1;visibility:visible}
.bb-kind-motion::after,.bb-motion::after{top:1cqw;bottom:auto}
.bb-tile:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.bb-logo{grid-area:1/1/3/5;background:#fff}
.bb-logo .bb-media{padding:4cqw}
.bb-logo-lockup{display:flex;align-items:center;gap:5%;width:100%;height:100%}
.bb-logo-lockup img{width:78%;min-width:0}
.bb-logo-lockup .bb-logo-symbol{width:17%;flex-shrink:0}
.bb-site{grid-area:1/5/3/9}
.bb-site-viewport{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative}
.bb-site-viewport img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none}
.bb-type{grid-area:3/1/5/3}
.bb-type{background:var(--bb-type-paper,var(--sf-base))}
.bb-type .bb-specimen,.bb-type .bb-sample{color:var(--bb-type-ink,var(--ink))}
.bb-typefaces{display:flex;flex-direction:column;justify-content:center;gap:1.3cqw;padding:1.6cqw;width:100%;height:100%;container-type:inline-size}
.bb-face{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0}
.bb-face:not(.bb-face--ready) .bb-specimen{display:none}
.bb-specimen{display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.bb-alphabet{font-size:6cqw;line-height:1.3;letter-spacing:.025em}
.bb-font-status{font:400 clamp(8px,.9cqw,12px)/1.3 var(--font-text);color:var(--faint)}
.bb-sample{font-size:28cqw;line-height:.95;white-space:nowrap;color:var(--ink)}
.bb-face[data-role="body"] .bb-sample{font-size:14cqw;line-height:1.1}
.bb-body-copy{margin:0;font-size:6.5cqw;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bb-font-credits{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px;font:400 11px/1.5 var(--font-text);color:var(--faint)}
.bb-font-credits a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bb-palette{grid-area:3/3/5/4}
.bb-colour-system{display:flex;flex-direction:column;width:100%;height:100%}
.bb-colour-system>span{flex:var(--share,1);min-width:3px;min-height:3px}
.bb-extras{grid-area:3/4/5/9;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:.65cqw;min-width:0;min-height:0}
.bb-extras[data-count="0"]>.bb-tile,.bb-extras[data-count="1"]>.bb-tile{grid-area:1/1/3/3}
.bb-extras[data-count="2"]>.bb-tile{grid-row:1/3}
.bb-extras[data-count="3"]>.bb-tile:first-child{grid-row:1/3}
.bb-extras[data-count="5"],.bb-extras[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.bb-extras[data-count="7"],.bb-extras[data-count="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.bb-image img{object-fit:cover;object-position:center}
.bb-application img{object-fit:contain}
.bb-icons .bb-media{padding:2cqw;background:#fff}
.bb-slide[data-fit="contain"] .bb-image img{object-fit:contain}
.bb-slide[data-layout="editorial"] .bb-logo{grid-area:1/1/3/5}
.bb-slide[data-layout="editorial"] .bb-extras{grid-area:1/5/5/9}
.bb-slide[data-layout="editorial"] .bb-site{grid-area:3/1/5/3}
.bb-slide[data-layout="editorial"] .bb-type{grid-area:3/3/5/4}
.bb-slide[data-layout="editorial"] .bb-palette{grid-area:3/4/5/5}
.bb-slide[data-layout="type"] .bb-type{grid-area:1/1/3/5}
.bb-slide[data-layout="type"] .bb-logo{grid-area:3/1/5/3}
.bb-slide[data-layout="type"] .bb-typefaces{flex-direction:row;align-items:center;gap:3cqw}
.bb-slide[data-layout="type"] .bb-face{flex:1}
.bb-slide[data-layout="type"] .bb-sample{font-size:18cqw}
.bb-slide[data-layout="type"] .bb-face[data-role="body"] .bb-sample{font-size:7cqw}
.bb-slide[data-layout="type"] .bb-alphabet{font-size:3cqw}
.bb-slide[data-layout="type"] .bb-body-copy{font-size:3.3cqw;-webkit-line-clamp:6}
.bb-slide .bb-missing,.bb-slide .bb-media-error{display:none}
.bb-availability{margin:8px 0;font:400 12px/1.4 var(--font-text);color:var(--faint)}
.bb-foot{margin-top:8px;font:400 11px/1.4 var(--font-text);color:var(--faint)}
.bb-card[hidden]{display:none}
.bb-primary{flex:2;min-height:0;padding:1.2cqw;display:flex;flex-direction:column;justify-content:center;gap:.4cqw;color:var(--bb-type-ink,#fff);font:400 clamp(7px,.95cqw,13px)/1.2 var(--font-text)}
.bb-colour-system .bb-swatches{flex:1;min-height:0}
.bb-colour-system .bb-swatches:empty{display:none}
.bb-fit-contain img,.bb-fit-contain video{object-fit:contain}
.bb-fit-cover img,.bb-fit-cover video{object-fit:cover}
.bb-curated-media{background:#f6f5f1}
.bb-curated-media.bb-fit-contain .bb-media{padding:1.8cqw}
.bb-kind-motion.bb-fit-contain .bb-media{padding:0}
.bb-slide[data-fit="contain"] .bb-curated-media img{object-fit:contain}
/* Shared 12-column / 6-row frame: foundation left, visual evidence right. */
.bb-slide[data-layout="curated"]{--bb-inset:1.8cqw;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}
.bb-slide[data-layout="curated"] .bb-logo{grid-area:1/1/3/5}
.bb-slide[data-layout="curated"] .bb-logo .bb-media{padding:3cqw}
.bb-slide[data-layout="curated"] .bb-site{grid-area:1/5/3/9}
.bb-slide[data-layout="curated"] .bb-type{grid-area:3/1/6/5}
.bb-slide[data-layout="curated"] .bb-typefaces{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;align-content:start;gap:1.3cqw;padding:var(--bb-inset)}
.bb-slide[data-layout="curated"] .bb-face{justify-content:space-between;gap:.6cqw;container-type:inline-size}
.bb-slide[data-layout="curated"] .bb-face[data-role="body"]{border-top:1px solid currentColor;padding-top:1cqw;color:var(--bb-type-ink,var(--ink))}
.bb-slide[data-layout="curated"] .bb-sample{font-size:23cqw;line-height:.95}
.bb-slide[data-layout="curated"] .bb-alphabet{font-size:4.1cqw;line-height:1.3}
.bb-slide[data-layout="curated"] .bb-body-copy{font-size:4.8cqw;line-height:1.45;-webkit-line-clamp:4}
.bb-font-status:empty{display:none}
.bb-slide[data-layout="curated"] .bb-palette{grid-area:6/1/7/5}
.bb-slide[data-layout="curated"] .bb-colour-system{flex-direction:row}
.bb-slide[data-layout="curated"] .bb-extras{display:contents}
.bb-slide[data-layout="curated"] .bb-extras>.bb-tile:nth-child(1){grid-area:1/9/4/13}
.bb-slide[data-layout="curated"] .bb-extras>.bb-tile:nth-child(2){grid-area:3/5/5/9}
.bb-slide[data-layout="curated"] .bb-extras>.bb-tile:nth-child(3){grid-area:4/9/7/13}
.bb-slide[data-layout="curated"] .bb-extras>.bb-tile:nth-child(4){grid-area:5/5/7/9}
.bb-slide[data-layout="curated"] .bb-extras>.bb-tile:nth-child(n+5){display:none}
.bb-slide[data-layout="curated"] .bb-extras[data-count="1"]>.bb-tile{grid-area:3/5/7/13}
.bb-slide[data-layout="curated"]:has(.bb-extras[data-count="1"]) .bb-site{grid-area:1/5/3/13}
.bb-slide[data-layout="curated"] .bb-extras[data-count="2"]>.bb-tile:first-child{grid-area:1/9/7/13}
.bb-slide[data-layout="curated"] .bb-extras[data-count="2"]>.bb-tile:nth-child(2){grid-area:3/5/7/9}
.bb-slide[data-layout="curated"] .bb-extras[data-count="3"]>.bb-tile:nth-child(2){grid-area:3/5/7/9}
/* Reflow only incomplete boards; empty/error cells never consume slide space. */
.bb-slide[data-compact="true"]{grid-template-columns:repeat(var(--bb-compact-columns),minmax(0,1fr));grid-template-rows:repeat(var(--bb-compact-rows),minmax(0,1fr))}
.bb-slide[data-compact="true"] .bb-extras{display:contents}
.bb-slide[data-compact="true"] .bb-tile{grid-area:auto!important;grid-column:span var(--bb-span,1)!important;order:var(--bb-order)}
.bb-slide[data-compact="true"] .bb-typefaces{container-type:size}
.bb-slide[data-compact="true"] .bb-sample{font-size:min(23cqw,23cqh)}
.bb-slide[data-compact="true"] .bb-alphabet{font-size:min(4.1cqw,5cqh)}
.bb-slide[data-compact="true"] .bb-body-copy{font-size:min(4.8cqw,7cqh)}
.bb-slide .bb-tile[hidden],.bb-slide[hidden]{display:none!important}
.bb-face[hidden]{display:none!important}
.bb-slide[data-layout="curated"] .bb-typefaces:has(.bb-face[hidden]){grid-template-rows:1fr}
.bb-slide[data-layout="curated"] .bb-typefaces:has(.bb-face[hidden]) .bb-face--ready{justify-content:center}
.bb-slide[data-layout="curated"] .bb-typefaces:has(.bb-face[hidden]) .bb-sample{font-size:40cqw}
.bb-inventory{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px;font:400 12px/1.5 var(--font-text);color:var(--faint)}
.bb-inventory summary{cursor:pointer;color:var(--ink)}
.bb-research-notes{margin-top:10px;font:400 12px/1.5 var(--font-text);color:var(--faint)}
.bb-research-notes summary{cursor:pointer}
.bb-capture-note{font:400 11px/1.5 var(--font-text);color:var(--faint);margin:8px 0}
.bb-capture-note a{color:var(--ink);text-decoration:underline}
.bb-research-notes ul{padding-left:18px;max-width:85ch}
.bb-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.bb-library figure{margin:0;min-width:0}
.bb-library-media{height:190px;background:#f6f5f1;display:flex;align-items:center;justify-content:center;padding:12px}
.bb-library-media img,.bb-library-media video{width:100%;height:100%;min-width:0}
.bb-library figcaption{padding-top:8px}
.bb-library a{color:var(--ink);text-decoration:underline}
.bb-media-error{padding:20px;font:400 12px/1.4 var(--font-text);color:var(--faint);text-align:center}
.bb-export-dialog{max-width:580px;width:calc(100% - 48px);max-height:90vh;overflow:auto;margin:auto;padding:28px;border:1px solid #ccc;background:#fff;color:#161616;font:14px/1.5 sans-serif}
.bb-export-dialog::backdrop{background:#0006}
.bb-export-dialog h2{font-size:20px;margin-top:0}
.bb-export-options{display:grid;gap:8px;margin:20px 0}
.bb-export-dialog button{padding:10px 14px;text-align:left;cursor:pointer;background:#f5f5f3;color:#161616;border:1px solid #ccc}
.bb-export-dialog button:disabled{opacity:.5;cursor:wait}
.bb-export-dialog [role=status]{min-height:24px;font-weight:600}
.bb-export-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bb-export-dialog header h2{margin:0;font-weight:500}
.bb-export-dialog .bb-export-close{background:none;border:0;font-size:24px;padding:0 6px}
.bb-export-subtitle,.bb-export-dialog section>p,.bb-export-note{color:#666}
.bb-export-dialog section{border-top:1px solid #ddd;padding:20px 0}
.bb-export-dialog h3{margin:0 0 6px;font-size:15px;font-weight:600}
.bb-export-dialog p{margin:6px 0 14px}
.bb-export-dialog .bb-export-primary{background:#161616;color:#fff;border-color:#161616;width:100%;text-align:center}
.bb-export-dialog a{color:#161616;text-decoration:underline;text-underline-offset:3px}
.bb-export-dialog .bb-figma-connection{font-size:12px;margin:10px 0}
.bb-figma-setup{margin-top:16px;font-size:12px;line-height:1.6}
.bb-figma-setup summary{cursor:pointer}
.bb-figma-setup ol{padding-left:20px}
.bb-export-png-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.bb-export-dialog select{font:inherit;padding:8px;background:#fff;color:#161616;border:1px solid #ccc;max-width:100%}
.bb-export-dialog .bb-export-note{font-size:12px}
.bb-export-result img{width:100%;display:block;margin-bottom:12px}
@media(max-width:900px){.bb-boards--compare{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.bb-heading{align-items:flex-start;flex-direction:column;gap:8px}.bb-actions{flex-wrap:wrap}.bb-foot{font-size:9px}.bb-toolbar{align-items:flex-start;font-size:12px;flex-wrap:wrap}.bb-library{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{.bb-toolbar,.bb-heading,.bb-foot{display:none}.bb-tile::after{display:none!important}.bb-boards{display:block}.bb-card{break-after:page;width:100%}.bb-slide{aspect-ratio:16/9}}