/* Build your own mini. Shared by the teaser and the forum, which name their
   colours differently, so every token falls back through both and then to the
   literal value. Class prefix: smb-. */

.smb-stage,.smb-controls,.smb-dialog,.smb-tools,.smb-shot{
  --smb-ink:var(--color-text,var(--ink,#201e1d));
  --smb-accent:var(--color-accent,var(--accent,#ec3013));
  --smb-font:var(--font-heading,"Archivo",system-ui,sans-serif);
}

/* ── Stage ───────────────────────────────────────────────────────────────── */
/* Every layer is the whole 1536x1024 canvas, so they all scale as one and no
   seam can open between them. The truck only fills the middle of that canvas;
   the stage is the 700px band it lives in (rows 140 to 840), which is where
   the -20% comes from: 140 of 700. */
.smb-stage{position:relative;width:100%;aspect-ratio:1536/700;overflow:hidden}
.smb-layer{position:absolute;left:0;top:var(--smb-top,-20%);width:100%;max-width:none;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.smb-layer[hidden]{display:none}
/* The body can be masked, to what a bed part leaves of it (builder.js). */
.smb-stage [data-smb-slot="body"]{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* A backdrop may run past the stage to fill whatever the stage sits in,
   while the truck stays exactly the size and place it has without one. The
   page says how far with --smb-bleed, the gap between the stage's side and
   its container's, and lets the stage overflow (see .smb-stage--bleed).

   The scene is widened by the bleed on each side, which enlarges it, so it
   has to be slid up to keep its horizon on the truck's wheels: the horizon is
   row 614 of the 1536-wide canvas, and widening by 2 x bleed lifts it by
   614 / 1536 x 2 = 0.7995 of the bleed. With no bleed this is the ordinary
   layer rule, -20%. */
.smb-stage [data-smb-slot="scene"]{left:calc(var(--smb-bleed,0px) * -1);width:calc(100% + var(--smb-bleed,0px) * 2);top:calc(var(--smb-top,-20%) - var(--smb-bleed,0px) * .7995)}
.smb-stage--bleed.has-scene{overflow:visible}

/* The square stage: the picture the camera saves, live. The truck still runs
   the full width; the square is taller than its canvas, so the canvas sits
   20% down, which puts the wheels 60% of the way down the square, on a
   backdrop's horizon. The backdrop has to cover a square from a 3:2 picture,
   so it is half as wide again (a quarter spilling each side, clipped), which
   is the bleed sum above with the bleed at 25%. */
.smb-stage--square{aspect-ratio:1;--smb-top:20%;--smb-bleed:25%}
.smb-stage--square .smb-mark{width:30%;right:3%;top:3%}

/* The watermark: top right, over the empty space above the bed, clear of the
   truck at every ride height. Sized against the stage so it is the same
   fraction of a phone's picture as a desktop's. */
.smb-mark{position:absolute;right:1.5%;top:3%;width:23%;height:auto;max-width:none;opacity:.92;pointer-events:none;user-select:none;-webkit-user-drag:none}

/* The camera, in the corner the watermark is not in. */
.smb-shot{position:absolute;right:1.5%;bottom:4%;z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:2px solid var(--smb-ink);border-radius:50%;background:#fff;color:var(--smb-ink);cursor:pointer;transition:box-shadow .15s ease}
.smb-shot[hidden]{display:none}
.smb-shot:hover{box-shadow:0 4px 0 var(--smb-ink)}
.smb-shot:disabled{opacity:.5;cursor:progress;box-shadow:none}

/* What the camera opens: the picture, what to do with it, and the download. */
.smb-dialog{width:min(92vw,480px);max-height:92vh;padding:0;border:2px solid var(--smb-ink);border-radius:22px;background:#fff;color:var(--smb-ink);overflow:auto}
.smb-dialog::backdrop{background:rgba(32,30,29,.62)}
.smb-dialog__img{display:block;width:100%;height:auto;aspect-ratio:1;background:#f3f2f2}
.smb-dialog__body{padding:20px 22px 22px}
.smb-dialog__title{margin:0 0 10px;font:900 24px/1 var(--smb-font);letter-spacing:-.02em;text-transform:uppercase}
.smb-dialog__text{margin:0 0 10px;font-size:14.5px;line-height:1.5}
.smb-dialog__link{color:var(--smb-accent);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.smb-dialog__row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.smb-dialog__hint{margin:-6px 0 16px;font-size:13px;opacity:.75}
.smb-dialog__text:last-child{margin-bottom:0}
.smb-dialog__hint[hidden]{display:none}
.smb-dialog__btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--smb-ink);border-radius:999px;background:#fff;color:var(--smb-ink);font:900 12px/1 var(--smb-font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.smb-dialog__btn:hover{color:var(--smb-ink);box-shadow:0 4px 0 var(--smb-ink)}
.smb-dialog__btn[hidden]{display:none}
.smb-dialog__btn--main,.smb-dialog__btn--main:hover{background:var(--smb-accent);color:#fff}

/* A one-colour graphic: the ink as a flat fill, cut to the graphic by using
   its image as a mask, under a picture of the truck's own light (shadows as
   translucent black, highlights as translucent white) so the fill is lit like
   the paint it sits on. The colour and the two images are set inline, per
   stage; this is only how they are laid out. */
.smb-tint{aspect-ratio:1536/1024;background-size:100% 100%;background-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Wheel size. The tyres are one picture of both wheels and the rims another,
   and each is shown twice: a copy clipped to each wheel's side of the canvas,
   scaled about the point where that wheel's tyre meets the ground. So a
   bigger wheel stands on the same ground and grows up into the arch. It also
   moves forward a touch as it grows (5% of the canvas width per unit of
   scale, about 9px at the largest), which is where a taller tyre sits in an
   arch that was cut for a smaller one. The
   points are the tyre bottoms from art/geometry.json as fractions of the
   1536x1024 canvas; builder.js has the same numbers for the camera. */
.smb-layer:is([data-smb-slot="tyres"],[data-smb-slot="tyres2"],[data-smb-slot="wheels"],[data-smb-slot="wheels2"]){transform:translateX(calc((var(--smb-rim,1) - 1) * -5%)) scale(var(--smb-rim,1));transition:transform .3s ease}
.smb-layer:is([data-smb-slot="tyres"],[data-smb-slot="wheels"]){clip-path:inset(0 25% 0 0);transform-origin:53.81% 75.29%}
.smb-layer:is([data-smb-slot="tyres2"],[data-smb-slot="wheels2"]){clip-path:inset(0 0 0 75%);transform-origin:91.73% 70.51%}
@media (prefers-reduced-motion:reduce){.smb-layer:is([data-smb-slot="tyres"],[data-smb-slot="tyres2"],[data-smb-slot="wheels"],[data-smb-slot="wheels2"]){transition:none}}

/* Ride height. --smb-lift is a percentage of the canvas height, and a
   percentage in translateY is of the element's own height, which for a layer
   is the canvas: so the body rises by the same fraction at every width. The
   wheels and the ground are not --lift layers and stay where they are. */
.smb-layer--lift{transform:translateY(calc(var(--smb-lift,0) * -1%));transition:transform .45s cubic-bezier(.3,.7,.4,1)}
@media (prefers-reduced-motion:reduce){.smb-layer--lift{transition:none}}

/* ── Controls ────────────────────────────────────────────────────────────── */
.smb-group{padding:16px 0;border-bottom:2px solid color-mix(in srgb,var(--smb-ink) 10%,transparent)}
.smb-group:last-child{border-bottom:0}
.smb-group[hidden]{display:none}
.smb-group__title{font:800 11px/1 var(--smb-font);letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px;color:color-mix(in srgb,var(--smb-ink) 65%,transparent)}
.smb-group__opts{display:flex;flex-wrap:wrap;gap:8px}

.smb-opt{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:2px solid var(--smb-ink);border-radius:999px;background:#fff;color:var(--smb-ink);font:800 12px/1 var(--smb-font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.smb-opt:hover{color:var(--smb-ink);box-shadow:0 4px 0 var(--smb-ink)}
.smb-opt.is-active,.smb-opt.is-active:hover{background:var(--smb-ink);color:#fff;box-shadow:none}
.smb-opt__swatch{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--smb-ink)}
.smb-opt.is-active .smb-opt__swatch{border-color:#fff}

/* Colours are a wall of paint chips: the chip is the control and the name is
   for screen readers and the tooltip. */
.smb-group--chips .smb-opt{width:40px;min-height:0;height:40px;padding:0;justify-content:center;border-color:transparent;background:none}
.smb-group--chips .smb-opt__swatch{width:32px;height:32px}
.smb-group--chips .smb-opt__name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.smb-group--chips .smb-opt:hover{box-shadow:none}
.smb-group--chips .smb-opt:hover .smb-opt__swatch{transform:scale(1.1)}
.smb-group--chips .smb-opt.is-active{background:none;border-color:var(--smb-accent)}
.smb-group--chips .smb-opt.is-active .smb-opt__swatch{border-color:var(--smb-ink)}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
/* One group at a time. builder.js adds .is-tabbed and marks one tab's groups
   .is-on; until it does, the strip is hidden and every group shows. */
.smb-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:14px 0 12px;border-bottom:2px solid color-mix(in srgb,var(--smb-ink) 10%,transparent)}
.smb-tabs::-webkit-scrollbar{display:none}
.smb-tabs[hidden]{display:none}
.smb-tab{flex:none;min-height:36px;padding:0 13px;border:2px solid transparent;border-radius:999px;background:none;color:color-mix(in srgb,var(--smb-ink) 62%,transparent);font:800 11px/1 var(--smb-font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.smb-tab:hover{color:var(--smb-ink)}
.smb-tab.is-on{border-color:var(--smb-ink);background:#fff;color:var(--smb-ink)}
.smb-controls.is-tabbed .smb-group{display:none;border-bottom:0}
.smb-controls.is-tabbed .smb-group.is-on{display:block}
.smb-controls.is-tabbed .smb-group[hidden]{display:none}
/* The tab already says what the group is; only a second group under the same
   tab still needs its own heading. */
.smb-controls.is-tabbed .smb-group.is-on + .smb-group.is-on{padding-top:4px}

/* The two buttons over the picture's bottom corners (smb_tools): the dice on
   the left, the camera on the right. The strip between them lets clicks
   through. */
.smb-tools{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.smb-tools>*{pointer-events:auto}
.smb-tools .smb-shot{position:static;flex:none;margin-left:auto}
.smb-lucky__btn[hidden]{display:none}
.smb-lucky__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border:2px solid var(--smb-ink);border-radius:999px;background:var(--smb-accent);color:#fff;font:900 12px/1 var(--smb-font);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.smb-lucky__btn span{font-size:20px;line-height:1}
.smb-lucky__btn:hover{box-shadow:0 4px 0 var(--smb-ink)}

/* ── Rows ────────────────────────────────────────────────────────────────── */
/* Wheels and backdrops are picked by looking at them: picture cards in a
   single row that scrolls sideways. The row snaps so a card is never left
   half off the edge, and hides its scrollbar because the arrows and the cut-off
   card at the end already say there is more. */
.smb-row{display:flex;align-items:center;gap:6px}
.smb-group--row .smb-group__opts{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px;-webkit-overflow-scrolling:touch}
.smb-group--row .smb-group__opts::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.smb-group--row .smb-group__opts{scroll-behavior:auto}}
.smb-row__btn{flex:none;width:34px;height:34px;padding:0 0 3px;border:2px solid var(--smb-ink);border-radius:50%;background:#fff;color:var(--smb-ink);font:900 20px/1 var(--smb-font);cursor:pointer}
.smb-row__btn[hidden]{display:none}
.smb-row__btn:disabled{opacity:.25;cursor:default}
/* A finger swipes; the arrows would only be in its way. */
@media (pointer:coarse){.smb-row__btn{display:none}}

/* Rows of cards, scrolling sideways: the wheels two deep, the grilles,
   and lights three, the graphics and backdrops four. */
.smb-group--cards.smb-group--row .smb-group__opts{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);gap:8px;justify-content:start}
.smb-group--wheels.smb-group--row .smb-group__opts{grid-template-rows:repeat(2,auto)}
.smb-group:is(.smb-group--scene,.smb-group--graphic).smb-group--row .smb-group__opts{grid-template-rows:repeat(4,auto)}
.smb-group--cards .smb-opt{flex:none;flex-direction:column;gap:6px;width:92px;padding:8px 6px 10px;border-radius:16px;font-size:10px;letter-spacing:.06em;text-align:center;line-height:1.15;scroll-snap-align:start}
.smb-opt__thumb{display:block;width:60px;height:60px}
/* The thumbnail is its own picture, which the usual inverted "on" state would
   fight with, so the chosen card is ringed instead. */
.smb-group--cards .smb-opt.is-active,.smb-group--cards .smb-opt.is-active:hover{background:#fff;color:var(--smb-ink);border-color:var(--smb-accent);box-shadow:0 0 0 2px var(--smb-accent)}

.smb-group:is(.smb-group--scene,.smb-group--grill,.smb-group--lights,.smb-group--bed,.smb-group--graphic) .smb-opt{width:132px}
.smb-group--bed .smb-opt__thumb{width:116px;height:75px;border-radius:9px;object-fit:cover}
.smb-group--scene .smb-opt__thumb{width:116px;height:70px;border-radius:9px;object-fit:cover}
/* These two are shown whole, never cropped to fill: the ends of a grille and
   the pair of lights are exactly what a crop would cut off. */
.smb-group--grill .smb-opt__thumb{width:116px;height:24px;border-radius:5px;object-fit:contain}
.smb-group--lights .smb-opt__thumb{width:116px;height:52px;border-radius:6px;object-fit:contain}
.smb-group--graphic .smb-opt__thumb{width:116px;height:39px;border-radius:6px;object-fit:cover}
.smb-opt__thumb--none{background:repeating-linear-gradient(135deg,#fff 0 7px,color-mix(in srgb,var(--smb-ink) 9%,#fff) 7px 9px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--smb-ink) 15%,transparent)}