/* Board Builder front end. Every rule is scoped under .bb-app so theme styles stay out and ours stay in.
   Ported from the prototype (claude.ai artifact Sb3voorJGQGt179HJzEEx8); same class names.

   The builder inherits the site's styles: body font, size and text colour come from the theme by inheritance;
   headings take the theme's heading rules; the accent and dark colours come from the theme's own variables
   when it publishes them (Elementor globals, block-theme presets), with neutral fallbacks. Tints and lines
   are mixed from the inherited text colour, so they follow whatever palette the site has. Sizes are in em
   so they scale with the theme's base size. */

.bb-app{
  --ink:var(--e-global-color-primary,var(--wp--preset--color--contrast,#1c1c1c));
  --accent:var(--e-global-color-accent,var(--wp--preset--color--primary,#1d756d));
  --accent-ink:#ffffff;
  --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --muted:color-mix(in srgb,currentColor 62%,transparent);
  --line:color-mix(in srgb,currentColor 16%,transparent);
  --surface:#ffffff;
  --sunk:color-mix(in srgb,currentColor 5%,transparent);
  --bg:transparent;
  --warn:#9a5a12; --warn-soft:#fbefdc;
  --mono:var(--e-global-typography-pgmono-font-family,ui-monospace),ui-monospace,Menlo,Consolas,monospace;
  --r:10px;
  --g-fill:color-mix(in srgb,currentColor 4%,#ffffff); --g-line:color-mix(in srgb,currentColor 18%,transparent); --g-st:var(--accent); --g-ink:currentColor; --g-wide:var(--warn); --g-ctr:var(--accent); --g-fin:#b5532e; --scrim:rgba(10,20,18,.55);
  background:var(--bg);color:inherit;font-family:inherit;font-size:inherit;line-height:1.5;
  position:relative;container-type:inline-size;container-name:bb;
}
/* Inside an Elementor shortcode widget the widget is a flex item sized to its content; take the row. */
.elementor-widget:has(.elementor-shortcode > .bb-app){width:100%;flex:1 1 100%;max-width:100%}
.bb-app{width:100%;min-width:0}
/* For dark sites: add data-theme="dark" to the wrapper (the bb_app_attributes filter) so cards and inputs go dark too. */
.bb-app[data-theme="dark"]{
  --surface:color-mix(in srgb,currentColor 8%,#000); --sunk:color-mix(in srgb,currentColor 12%,transparent);
  --warn:#e7a656; --warn-soft:#3a2a15; --g-fill:color-mix(in srgb,currentColor 8%,#000); --scrim:rgba(0,0,0,.7);
}
.bb-app *,.bb-app *::before,.bb-app *::after{box-sizing:border-box}
/* Theme resets: button and input styles from Elementor/Hello and similar themes otherwise leak in (nowrap, uppercase, fixed heights). */
.bb-app button,.bb-app .btn,.bb-app .choice,.bb-app .opt,.bb-app .tool,.bb-app .sw,.bb-app .linkbtn,.bb-app .backlink,.bb-app .qhelp,.bb-app .ssobtn{white-space:normal;text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;height:auto;text-decoration:none;transition:none}
.bb-app button:hover,.bb-app button:focus{box-shadow:none}
.bb-app .choice,.bb-app .choice .t,.bb-app .choice .d,.bb-app .choice .p{overflow:visible;white-space:normal;text-align:left}
.bb-app input,.bb-app select,.bb-app textarea{box-shadow:none;min-height:0}
.bb-app table,.bb-app tr,.bb-app td,.bb-app th{background:transparent}
.bb-app [hidden]{display:none!important}
.bb-page{padding:16px 0 0}

.bb-app .steps{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0 0 4px;padding:0}
.bb-app .steps li{font-size:.83em;border-radius:99px;color:var(--muted);border:1px solid var(--line);white-space:nowrap;margin:0;padding:0}
.bb-app .steps li button{font:inherit;color:inherit;background:none;border:0;padding:5px 10px;border-radius:99px;cursor:default;line-height:1.4}
.bb-app .steps li button:disabled{opacity:1}
.bb-app .steps li.done button{cursor:pointer}
.bb-app .steps li.done:hover{border-color:currentColor}
.bb-app .steps li button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bb-app .steps li.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bb-app .steps li.done{color:inherit;opacity:1}
.bb-app .bb-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:36px;padding:28px 16px 120px;align-items:start;max-width:1180px;margin:0 auto}
@container bb (max-width:900px){.bb-app .bb-main{grid-template-columns:minmax(0,1fr);gap:18px;padding:16px 16px 120px}.bb-app .preview{order:-1;position:static}}
@media (max-width:900px){.bb-app .bb-main{grid-template-columns:minmax(0,1fr);gap:18px;padding:16px 16px 120px}.bb-app .preview{order:-1}}

.bb-app h1,.bb-app h2,.bb-app h3,.bb-app h4{text-wrap:balance;margin:0;color:inherit;line-height:1.2}
.bb-app h1{font-size:clamp(1.8em,4vw,2.6em);line-height:1.08}
.bb-app h2{font-size:1.45em}
.bb-app h3,.bb-app h4{font-family:inherit;font-size:1em;font-weight:700;letter-spacing:0;text-transform:none}
.bb-app p{margin:0 0 8px}
.bb-app .eyebrow{font-size:.75em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.bb-app .lede{color:var(--muted);max-width:60ch;margin:0}
.bb-app .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.bb-app .stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.bb-app .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bb-app .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.bb-app .muted{color:var(--muted)}
.bb-app .small{font-size:.87em}
.bb-app a{color:var(--accent)}

.bb-app .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.bb-app .choice{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--surface);color:inherit;border:1.5px solid var(--line);border-radius:var(--r);padding:14px 14px 13px;cursor:pointer;font:inherit;line-height:1.4;width:100%}
.bb-app .choice:hover{border-color:var(--muted)}
.bb-app .choice[aria-pressed="true"],.bb-app .choice[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bb-app .choice .t{font-weight:700}
.bb-app .choice .d{font-size:.87em;color:var(--muted)}
.bb-app .choice .p{font-family:var(--mono);font-size:.87em}
.bb-app .choice:focus-visible,.bb-app .btn:focus-visible,.bb-app .seg button:focus-visible,.bb-app .stepper button:focus-visible,.bb-app .sw:focus-visible,.bb-app input:focus-visible,.bb-app textarea:focus-visible,.bb-app select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bb-app .big .t{font-size:1.13em}
/* Model cards: the deck and bottom images side by side above the name (model step and the top finder match). */
.bb-app .pics{display:flex;justify-content:center;gap:6%;padding:4% 14% 2%;background:var(--sunk);border-radius:calc(var(--r) - 4px);margin-bottom:6px}
.bb-app .pics img{width:36%;height:auto;max-height:260px;object-fit:contain;display:block}
.bb-app .match .pics{padding:2% 24% 0;background:none;margin:0}
.bb-app .match .pics img{max-height:300px}
.bb-app .stock{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.bb-app .stock .choice{padding:11px 12px}
.bb-app .stock .dims{font-family:var(--mono);font-size:.93em;font-weight:500}

.bb-app .seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:99px;padding:3px;gap:2px;flex-wrap:wrap}
.bb-app .seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:.9em;padding:7px 14px;border-radius:99px;cursor:pointer;line-height:1.4}
.bb-app .seg button[aria-pressed="true"]{background:var(--surface);color:inherit;box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:600}

.bb-app .dimgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@container bb (max-width:620px){.bb-app .dimgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.bb-app .dimgrid{grid-template-columns:minmax(0,1fr)}}
.bb-app .stepper{display:flex;flex-direction:column;gap:6px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.bb-app .stepper .lab{font-size:.8em;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.bb-app .stepper .ctl{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bb-app .stepper button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:inherit;font-size:1.2em;line-height:1;cursor:pointer;padding:0}
.bb-app .stepper button:disabled{opacity:.35;cursor:not-allowed}
.bb-app .stepper .val{font-family:var(--mono);font-size:1.27em;font-weight:500}
.bb-app .stepper .rng{font-size:.77em;color:var(--muted)}

.bb-app label.f{display:flex;flex-direction:column;gap:6px;font-size:.9em;font-weight:600;margin:0}
.bb-app label.f span.h{font-weight:400;color:var(--muted);font-size:.83em}
.bb-app input[type=number],.bb-app input[type=text],.bb-app input[type=email],.bb-app input[type=password],.bb-app select,.bb-app textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;width:100%;margin:0;line-height:1.4;height:auto}
.bb-app textarea{min-height:92px;resize:vertical}
.bb-app .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
/* Short fields (weight, height, current board) sit side by side at the same width, inputs on one line even when one label has a hint. */
.bb-app .fgrid.short{grid-template-columns:repeat(auto-fit,minmax(160px,220px));justify-content:start}
.bb-app .fgrid.short label.f span.h{white-space:nowrap}
.bb-app label.f .unit{font-weight:400;color:var(--muted);align-self:center}
.bb-app fieldset{border:0;margin:0;padding:0;min-width:0}
.bb-app legend{font-weight:700;margin-bottom:8px;padding:0;font-size:inherit}
.bb-app input[type=checkbox]{width:auto;margin:0}

.bb-app .swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bb-app .sw{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.bb-app .sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.bb-app .picker{display:inline-flex;align-items:center;gap:8px;font-size:.87em;color:var(--muted);margin:0;font-weight:400}
.bb-app .picker input[type=color]{width:38px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:2px;cursor:pointer}
.bb-app .colorrow{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:8px;background:var(--sunk);border:1px solid var(--line)}
.bb-app .colorrow .lbl{font-size:.87em;font-weight:600}

.bb-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;padding:12px 20px;font:inherit;font-weight:700;cursor:pointer;border:1.5px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;line-height:1.3}
.bb-app .btn:hover{color:#fff;opacity:.92}
.bb-app .btn.ghost{background:transparent;color:inherit}
.bb-app .btn.ghost:hover{color:inherit}
.bb-app .btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.bb-app .btn.accent:hover{color:var(--accent-ink)}
.bb-app .btn:disabled{opacity:.4;cursor:not-allowed}
.bb-app .nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.bb-app .linkbtn{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}

.bb-app .preview{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:900px){.bb-app .preview{position:static}}
@container bb (max-width:900px){.bb-app .preview{position:static}}
.bb-app .board-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px 12px;position:relative}
.bb-app .board-svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible} /* size set by fitBoard(): fixed inches-per-pixel so length changes show as height */
.bb-app .specline{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.bb-app .specline .dims{font-family:var(--mono);font-size:1.07em;font-weight:500}
.bb-app .tag{display:inline-block;font-size:.77em;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-weight:600}
.bb-app .tag.warn{background:var(--warn-soft);color:var(--warn)}
.bb-app .price{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.bb-app .price-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.bb-app .price table{width:100%;border-collapse:collapse;font-size:.9em;margin:0}
.bb-app .price td{padding:4px 0;vertical-align:top;border:0}
.bb-app .price td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.bb-app .price tr.total td{border-top:1px solid var(--line);padding-top:9px;font-weight:700;font-size:1em}
.bb-app .price tr.dep td{color:var(--accent);font-weight:700}

.bb-app .bar{display:none}
@media (max-width:900px){
  .bb-app .bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:center;gap:10px}
  .bb-app .preview .price{display:none}
}
.bb-app .bar .t{font-family:var(--mono);font-weight:600}
.bb-app .bar .d{font-size:.8em;color:var(--muted)}

.bb-app .callout{border-radius:8px;padding:12px 14px;font-size:.9em;background:var(--accent-soft)}
.bb-app .callout.warn{background:var(--warn-soft);color:var(--warn)}
.bb-app .reasons{margin:6px 0 0;padding-left:18px}
.bb-app .reasons li{margin:3px 0}
.bb-app .spec{width:100%;border-collapse:collapse;font-size:.93em;margin:0}
.bb-app .spec td{padding:7px 0;border:0;border-bottom:1px solid var(--line);vertical-align:top}
.bb-app .spec td:first-child{color:var(--muted);width:42%}
.bb-app .spec td:last-child{font-family:var(--mono)}
.bb-app .copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bb-app .copy code{font-family:var(--mono);font-size:.87em;background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:6px 9px;word-break:break-all;color:inherit}
.bb-app .view{display:flex;flex-direction:column;gap:18px;min-width:0}
.bb-app .renders{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.bb-app .renders img{width:100%;height:auto;border-radius:8px;background:#fff;border:1px solid var(--line)}
.bb-app .tools{display:flex;gap:6px;justify-content:flex-end;margin-bottom:6px}
.bb-app .tool{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:99px;padding:6px 12px;font:inherit;font-size:.87em;font-weight:600;cursor:pointer;line-height:1.3}
.bb-app .tool svg{width:16px;height:16px}
.bb-app .tool:hover{border-color:var(--muted)}
.bb-app .tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bb-app .modal{position:fixed;inset:0;z-index:100000;background:var(--scrim);display:flex;align-items:stretch;justify-content:center;padding:12px}
.bb-app .modal-in{background:var(--surface);border-radius:14px;width:min(1100px,100%);display:flex;flex-direction:column;overflow:hidden;min-height:0}
.bb-app .modal-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.bb-app .modal-h h2{font-size:1.2em}
.bb-app .stage{flex:1;min-height:0;position:relative;background:var(--sunk);touch-action:none;cursor:grab;overflow:hidden;user-select:none;-webkit-user-select:none}
.bb-app .stage:active{cursor:grabbing}
.bb-app .stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bb-app .modal-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line)}
.bb-app .zbtns{display:flex;gap:6px}
.bb-app .zbtns button{min-width:40px;height:36px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;font-weight:700;cursor:pointer;padding:0 12px}
.bb-app .closex{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:inherit;font-size:1.33em;line-height:1;cursor:pointer;padding:0}
.bb-app .gridwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;overflow:hidden}
.bb-app .gridwrap svg{display:block;width:100%;height:auto}
body.bb-lock{overflow:hidden}
.bb-app .sso{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.bb-app .ssobtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 16px;border-radius:99px;font:inherit;font-size:1em;font-weight:600;cursor:pointer;text-decoration:none}
.bb-app .ssobtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bb-app .ssoic{width:18px;height:18px;flex:none}
.bb-app .ssobtn.google{background:#fff;color:#1f1f1f;border:1px solid #747775}
.bb-app .ssobtn.google:hover{color:#1f1f1f;background:#f5f5f5}
.bb-app .or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.87em}
.bb-app .or::before,.bb-app .or::after{content:"";flex:1;height:1px;background:var(--line)}
.bb-app .ssodone{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--sunk)}
.bb-app .backlink{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 0;margin-bottom:-6px;border:0;background:none;color:inherit;opacity:.7;font:inherit;font-size:.93em;font-weight:600;cursor:pointer}
.bb-app .backlink:hover{opacity:1}
.bb-app .backlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.bb-app .lblrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bb-app .qhelp{position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;color:var(--muted);font:700 .87em/1 inherit;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;vertical-align:middle}
.bb-app .qhelp::after{content:"";position:absolute;inset:-8px}
.bb-app .qhelp:hover,.bb-app .qhelp[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.bb-app .qhelp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bb-app #tip{position:fixed;z-index:100001;width:min(360px,calc(100vw - 32px));background:var(--surface);color:inherit;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:16px 18px;font-size:.93em;line-height:1.5}
.bb-app #tip h4{font-family:inherit;font-size:1em;margin:0 28px 8px 0}
.bb-app #tip p{margin:0 0 8px}
.bb-app #tip p:last-child{margin-bottom:0}
.bb-app #tip-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;background:transparent;color:inherit;opacity:.7;font-size:1.33em;line-height:1;cursor:pointer;border-radius:8px;padding:0}
.bb-app #tip-x:hover{opacity:1;background:var(--sunk)}
.bb-app.choosing .bb-main{grid-template-columns:minmax(0,760px);justify-content:center}
.bb-app.choosing .preview,.bb-app.choosing .bar,.bb-app.choosing #steps{display:none!important}
.bb-app .qbar{display:flex;gap:4px}
.bb-app .qbar span{flex:1;height:5px;border-radius:3px;background:var(--line)}
.bb-app .qbar span.on{background:var(--accent)}
.bb-app .qgroup{display:flex;flex-direction:column;gap:8px}
.bb-app .qgroup .gl{font-weight:700;font-size:.93em}
.bb-app .opts{display:flex;flex-wrap:wrap;gap:8px}
.bb-app .opt{border:1.5px solid var(--line);background:var(--surface);color:inherit;border-radius:99px;padding:9px 15px;font:inherit;font-size:.93em;cursor:pointer;line-height:1.3}
.bb-app .opt[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);font-weight:600}
.bb-app .opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bb-app .match{display:flex;flex-direction:column;gap:10px}
.bb-app .match .mh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.bb-app .match .mh h3{font-size:1.33em}
.bb-app .pct{font-family:var(--mono);font-weight:600;color:var(--accent)}
.bb-app .match.top{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bb-app .minor .mh h3{font-size:1.07em}
.bb-app details.math{font-size:.87em;color:var(--muted)}
.bb-app details.math summary{cursor:pointer;color:var(--accent);font-weight:600}
.bb-app details.math ol{margin:8px 0 0;padding-left:18px}
.bb-app details.math li{margin:3px 0}
.bb-app .chip{display:inline-flex;gap:6px;align-items:center;font-size:.83em;color:var(--muted)}
.bb-app .dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px var(--line);display:inline-block}
.bb-app .busy{opacity:.6;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.bb-app .view{animation:bb-in .22s ease-out}@keyframes bb-in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}}

/* Model step: board images in a grid, four across, each linking to the model's own page. Replaces the card picker (see renderModels). */
.bb-app .choices.mgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3.5cqi,44px)}
.bb-app .mgrid-card{display:flex;flex-direction:column;align-items:center;gap:.9em;color:inherit;text-decoration:none}
.bb-app .mgrid-card img{width:100%;height:auto;display:block}
.bb-app .mgrid-name{margin:0;text-align:center;font-family:var(--e-global-typography-primary-font-family,inherit);font-weight:var(--e-global-typography-primary-font-weight,400);font-size:1.25em;line-height:1.25}
.bb-app .mgrid-card:hover .mgrid-name,.bb-app .mgrid-card:focus-visible .mgrid-name{text-decoration:underline;text-underline-offset:.2em}
.bb-app .mgrid-card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@container bb (max-width:620px){.bb-app .choices.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The model step has no preview yet, so give the grid the full width. */
.bb-app .bb-main:has(#v-model:not([hidden])):has(.choices.mgrid){grid-template-columns:minmax(0,1fr)}
.bb-app .bb-main:has(#v-model:not([hidden])):has(.choices.mgrid) .preview{display:none}