/* Workspace materials: Browse, Design and Build.
   Loaded after the shared material tokens. These rules change finish, type and
   interaction feedback; the compact Browse section also fits the existing
   panels to narrow screens without replacing their live contents. */

/* Both storefronts use one neutral material family. Explicit theme specificity
   replaces the older cream/brown local palettes in light AND dark mode. */
:root[data-theme] .build-object-panel,
:root[data-theme] body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__panel,
:root[data-theme] body[data-view="browse"] .market-rail__drawer.is-object-focus{
  --sf-panel:var(--mat-recess);
  --sf-head:var(--mat-panel);
  --sf-card:var(--mat-raised);
  --sf-card-hover:var(--mat-panel);
  --sf-tile:var(--mat-recess);
  --sf-tile-hover:var(--slot);
  --sf-mark:var(--mat-recess);
  --sf-chip:var(--mat-panel);
  --sf-chip-hover:var(--slot);
  --sf-chip-on:var(--ink);
  --sf-chip-on-fg:var(--mat-panel);
  --sf-ink:var(--ink);
  --sf-body:var(--mat-muted);
  --sf-muted:var(--mat-muted);
  --sf-label:var(--mat-muted);
  --sf-note:var(--mat-muted);
  --sf-glyph:var(--dim);
  --sf-box:var(--mat-border);
  --sf-hatch-a:var(--mat-recess);
  --sf-hatch-b:var(--mat-panel);
  --sf-brand:var(--accent);
  --sf-brand-ink:color-mix(in srgb,var(--accent) 86%,#000);
  --sf-ok:var(--mat-green);
  --sf-bad:var(--danger);
  --sf-veil:var(--mat-panel);
  --sf-panel-edge:var(--mat-border);
  --sf-panel-shadow:color-mix(in srgb,#000 20%,transparent);
  --pf-surface:var(--sf-panel);
  --pf-border:var(--mat-border);
  --pf-drawer-border:var(--mat-border);
  --pf-muted:var(--mat-muted);
  --pf-gold:var(--mat-blue);
  --pf-gold-strong:var(--accent-ink);
  --pf-gold-soft:var(--mat-blue-soft);
  --cart-accent:var(--accent);
  --cart-on-accent:#fff;
  background:var(--sf-panel);
}

/* Browse: matte white cards on a slightly recessed workbench, with a real
   contact edge at the scene instead of tinted glass. */
body[data-view="browse"] .pfocus{
  --pf-surface:var(--mat-panel);
  --pf-border:var(--mat-border);
  --pf-muted:var(--mat-muted);
  --pf-gold:var(--mat-blue);
  --pf-gold-soft:var(--mat-blue-soft);
  --pf-gold-strong:var(--accent-ink);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type{
  box-shadow:8px 0 22px -18px rgba(0,0,0,.36);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__head,
body[data-view="browse"] .market-rail__drawer.is-object-focus .market-rail__drawer-head{
  background-color:var(--mat-panel);
  background-image:var(--mat-sheen);
  box-shadow:inset 0 -1px 0 var(--mat-border);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__head-ico,
body[data-view="browse"] .market-rail__drawer.is-object-focus .pfocus__head-ico{
  background:var(--mat-blue-soft);
  color:var(--mat-blue);
  box-shadow:inset 0 1px 0 var(--mat-edge);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__section{
  border-color:var(--mat-border);
  background:var(--mat-raised);
  box-shadow:var(--mat-shadow);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__heading strong,
body[data-view="browse"] .market-rail__drawer.is-object-focus .market-rail__drawer-copy strong{
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type :is(
  .pfocus__section-title,.pfocus__analytics,.pfocus__range,
  .pfocus__drawing span,.pfocus__drawing-specs dt){
  font:600 12px/1.25 var(--font);
  letter-spacing:0;
  text-transform:none;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type :is(
  .build-video-now strong,.build-video-option strong,.build-video-now span,
  .build-video-option span,.pfocus__engagement small,.pfocus__specs div,
  .pfocus__specs b,.pfocus__drawing-specs dd){
  font-size:12px;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type :is(
  .pfocus__drawing,.pfocus__engagement span){
  background:var(--mat-recess);
  box-shadow:inset 0 1px 2px color-mix(in srgb,#000 3%,transparent);
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .build-video-option[aria-pressed="true"]{
  background:var(--mat-blue-soft);
  border-color:color-mix(in srgb,var(--mat-blue) 48%,var(--mat-border));
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type
  .pfocus__video-library[data-video-source="youtube-search"] [data-object-video-state]{
  display:inline-flex;
  align-items:center;
  padding:3px 7px;
  border-radius:999px;
  background:var(--mat-blue-soft);
  color:var(--accent-ink);
  font-weight:700;
}
body[data-view="browse"] .pfocus > .pfocus__column:first-of-type .pfocus__range[aria-pressed="true"]{
  background:var(--accent);
  color:#fff;
  box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 28%,transparent);
}
body[data-view="browse"] .market-rail{
  background:var(--mat-panel);
  border-left-color:var(--mat-border);
  box-shadow:inset 1px 0 0 var(--mat-edge);
}
body[data-view="browse"] .market-rail__drawer{
  background:var(--mat-panel);
  border-color:var(--mat-border);
  box-shadow:var(--mat-shadow-float);
}
body[data-view="browse"] .market-rail__drawer.is-object-focus{
  box-shadow:-8px 0 22px -18px rgba(0,0,0,.36);
}
body[data-view="browse"] .market-rail__tool{
  color:var(--mat-muted);
}
body[data-view="browse"] .market-rail__tool:is([aria-pressed="true"],[data-active="true"]){
  background:var(--mat-blue-soft);
  color:var(--accent-ink);
  box-shadow:inset 0 1px 0 var(--mat-edge);
}
body[data-view="browse"] .market-rail__drawer.is-object-focus :is(.pfboard__winner,.pfboard__pick){
  border-color:var(--mat-border);
  background:var(--mat-raised);
  box-shadow:var(--mat-shadow);
}
body[data-view="browse"] .market-rail__drawer.is-object-focus .pfboard__winner[aria-pressed="true"]{
  border-color:var(--mat-blue);
  background:var(--mat-blue-soft);
  box-shadow:inset 0 1px 0 var(--mat-edge);
}
body[data-view="browse"] :is(.pfocus__rail-top,.pfocus__chip--trend,
  .pfocus__rating,.pfocus__part-color,.market-rail__status){
  border-color:var(--mat-border);
  background:var(--mat-panel);
  color:var(--ink);
  box-shadow:var(--mat-shadow);
}
body[data-view="browse"] .pfocus__rail-top{
  background-color:var(--surface); background-image:none; opacity:1;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body[data-view="browse"] .pfocus__part-color{ box-shadow:var(--mat-shadow-float); }
body[data-view="browse"] .pfocus__chip{
  font-family:var(--font);
  letter-spacing:0;
}
body[data-view="browse"] .pfocus__creator{ color:var(--mat-muted); }
body[data-view="browse"] .pfocus__part-color-head small{
  font-family:var(--font);
  letter-spacing:0;
}

/* Design: solid precision-tool surfaces. The scene, grids, note colors,
   history visibility, pane expansion and drag affordances stay untouched. */
body[data-view="design"] .design-pane__chrome{
  background-color:var(--mat-panel);
  background-image:var(--mat-sheen);
  border-bottom-color:var(--mat-border);
  box-shadow:inset 0 1px 0 var(--mat-edge);
}
body[data-view="design"] :is(.design-dock-panel,.design-layers-panel,.design-profile-panel,
  .design-image-source-menu,.design-media-palette,.design-dock-panel__settings){
  background:var(--mat-panel);
  border-color:var(--mat-border);
  box-shadow:var(--mat-shadow-float);
}
body[data-view="design"] :is(.design-dock-panel__head,.design-layers-panel__head,
  .design-profile-panel__head){
  background-color:var(--mat-raised);
  background-image:var(--mat-sheen);
  border-bottom-color:var(--mat-border);
}
body[data-view="design"] :is(.design-dock-panel__head,.design-layers-panel__head,
  .design-split-viewport__label,.design-media-palette > strong){
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
body[data-view="design"] :is(.design-dock-panel__body,.design-profile-panel__rows){
  background:var(--mat-recess);
}
body[data-view="design"] :is(.design-cad-tool,.design-cad-tool[data-cad-action="extrude"],
  .design-layer-row__glyph,.design-dock-panel__action,.sect__btn,.walltools__btn){
  color:var(--mat-muted);
}
body[data-view="design"] .design-cad-tool:not(:disabled):is(:hover,:focus-visible){
  border-color:var(--mat-border);
  background:var(--mat-raised);
  color:var(--ink);
  box-shadow:var(--mat-shadow);
}
body[data-view="design"] .design-cad-tool[data-active="true"],
body[data-view="design"] .design-cad-tool[data-cad-action="extrude"]:not(:disabled){
  border-color:color-mix(in srgb,var(--mat-blue) 24%,var(--mat-border));
  background:var(--mat-blue-soft);
  color:var(--accent-ink);
  box-shadow:inset 0 1px 0 var(--mat-edge);
}
body[data-view="design"] :is(.design-split-viewport__label,.arail__group,.sect__pop,
  .geometry-edit-toolbar,.sketchpad__viewcube){
  border-color:var(--mat-border);
  background:var(--mat-panel);
  box-shadow:var(--mat-shadow);
}
body[data-view="design"] .design-workspace [data-active-design-view="true"] > .design-split-viewport__label{
  border-color:var(--mat-blue);
  background:var(--mat-blue-soft);
  color:var(--accent-ink);
}
body[data-view="design"] .design-profile-panel__tabs{
  border-color:var(--mat-border);
  background:var(--mat-recess);
}
body[data-view="design"] .design-profile-panel__tab[aria-selected="true"]{
  background:var(--mat-raised);
  color:var(--ink);
  border-color:var(--mat-border);
  box-shadow:var(--mat-shadow);
}
body[data-view="design"] .community-project{
  border-color:var(--mat-border);
  background:var(--mat-raised);
  box-shadow:inset 0 1px 0 var(--mat-edge);
}
body[data-view="design"] .community-project:is(:hover,:focus-visible){
  background:var(--mat-panel);
  border-color:color-mix(in srgb,var(--mat-blue) 36%,var(--mat-border));
}
body[data-view="design"] :is(.design-layer-row[data-selected="true"],
  .design-layer-row[data-feature-hovered="true"]){
  background:var(--mat-blue-soft);
  color:var(--accent-ink);
}
body[data-view="design"] .design-layer-row[data-provisional="true"]{
  border-color:color-mix(in srgb,var(--mat-orange) 35%,var(--mat-border));
}
body[data-view="design"] .design-sticky-note{
  box-shadow:var(--mat-shadow-float);
}
body[data-view="design"] .design-object-library{
  background:rgba(0,0,0,.32);
}
body[data-view="design"] .design-object-library__dialog{
  border-color:var(--mat-border);
  background:var(--mat-panel);
  box-shadow:var(--mat-shadow-float);
}
body[data-view="design"] .design-object-library__head{
  border-color:var(--mat-border);
  background-color:var(--mat-raised);
  background-image:var(--mat-sheen);
}
body[data-view="design"] :is(.design-object-library__head small,
  .design-object-card__copy small,.design-object-card__copy > span){
  font-family:var(--font);
  letter-spacing:0;
}
body[data-view="design"] .design-object-card{
  background:var(--mat-raised);
  border-color:var(--mat-border);
  box-shadow:var(--mat-shadow);
}
body[data-view="design"] .design-object-card:hover{
  transform:none;
  border-color:color-mix(in srgb,var(--mat-blue) 42%,var(--mat-border));
  box-shadow:var(--mat-shadow);
}
body[data-view="design"] .design-object-card__preview{
  border-color:var(--mat-border);
  background:var(--mat-recess);
}
body[data-view="design"] .design-object-library__tools :is(input,select){
  border-color:var(--mat-border);
  background:var(--mat-recess);
}

/* Build: a studio presentation behind the live model, white store cards,
   restrained recommendations and consistent tactile primary controls. */
:root[data-theme] .build-object-browser{
  border-left-color:var(--mat-border);
  box-shadow:-8px 0 22px -18px rgba(0,0,0,.4);
}
.build-object-panel__head{
  background-color:var(--sf-head);
  background-image:var(--mat-sheen);
  box-shadow:inset 0 -1px 0 var(--mat-border);
}
.build-object-panel__eyebrow,
.build-checkout__summary small{
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.build-object-panel__head > span:first-child{
  background:var(--mat-blue-soft);
  color:var(--mat-blue);
  box-shadow:inset 0 1px 0 var(--mat-edge);
}
.build-object-panel .build-object-preview,
.build-object-preview-away{
  background-color:var(--mat-recess);
  background-image:var(--mat-sheen);
  box-shadow:inset 0 -1px 0 var(--mat-border);
}
.build-object-panel :is(.build-print-queue__row,.build-shops__row){
  border-color:var(--mat-border);
  box-shadow:var(--mat-shadow);
}
.build-object-panel .build-object-choice{
  box-shadow:inset 0 0 0 1px var(--mat-border),var(--mat-shadow);
}
.build-object-panel .build-shops__row:is(:hover,:focus-visible){
  border-color:color-mix(in srgb,var(--mat-blue) 42%,var(--mat-border));
  transform:none;
}
.build-object-panel :is(.build-print-queue__row[aria-pressed="true"],
  .build-object-choice[aria-pressed="true"],.build-shops__row[data-selected="true"]){
  background:var(--mat-raised);
  box-shadow:inset 0 0 0 1.5px var(--mat-blue),var(--mat-shadow);
}
.build-object-panel .build-shops__row:focus-visible{
  outline:2px solid var(--mat-blue);
  outline-offset:2px;
}
.build-object-panel .build-shops__mark{
  border-color:var(--mat-border);
  background:var(--mat-panel);
}
.build-object-panel .build-shops__recommended{
  background:var(--mat-raised);
  border-color:var(--mat-blue);
  color:var(--accent-ink);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.build-object-panel .build-shops__chip{
  box-shadow:inset 0 0 0 1px var(--mat-border);
}
.build-object-panel .build-shops__chip[aria-pressed="true"]{
  box-shadow:none;
}
.build-checkout{
  border-top-color:var(--mat-border);
  background-color:var(--mat-panel);
  background-image:var(--mat-sheen);
  box-shadow:0 -8px 20px -18px rgba(0,0,0,.36),inset 0 1px 0 var(--mat-edge);
}
.build-checkout__button,
body[data-view="browse"] .pfboard__add{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 3px rgba(0,0,0,.12);
}
.build-checkout__button:not(:disabled)::before,
.build-checkout__button:hover:not(:disabled) svg{
  animation:none;
}
.build-checkout__button:hover:not(:disabled){ transform:none; }
body[data-view="browse"] .pfboard__add:not(.is-added):is(:hover,:focus-visible){
  background:color-mix(in srgb,var(--accent) 86%,#000);
  color:#fff;
}
.build-checkout__button:focus-visible{
  outline:2px solid var(--mat-blue);
  outline-offset:3px;
}
.build-video-option:hover{ transform:none; }

/* Preserve the map under object focus, with a neutral veil in either theme. */
:root[data-theme] .build-object-focus{
  --sf-veil:var(--mat-panel);
  --sf-body:var(--mat-muted);
  background:color-mix(in srgb,var(--mat-recess) 58%,transparent);
}
.build-object-focus__close{
  background:var(--mat-panel);
  border-color:var(--mat-border);
  box-shadow:var(--mat-shadow);
}

/* The expanded printer marker is a small storefront, including in dark mode. */
:root[data-theme] .printer-node-marker.is-expanded{
  --printer-card-paper:var(--mat-panel);
  --printer-card-ink:var(--ink);
  --printer-card-muted:var(--mat-muted);
  --printer-card-faint:var(--mat-muted);
  --printer-card-line:var(--mat-border);
  --printer-card-tile:var(--mat-recess);
  font-family:var(--font);
  box-shadow:inset 0 0 0 1px var(--mat-border),var(--mat-shadow-float);
}
.printer-node-marker.is-expanded :is(.printer-node-expanded-rank,
  .printer-node-expanded-total span,.printer-node-expanded-pricing strong,
  .printer-node-expanded-build){
  font-family:var(--font);
  font-size:12px;
  letter-spacing:0;
}
.printer-node-marker.is-expanded .printer-node-expanded-rank{
  background:var(--mat-recess);
  color:var(--ink);
  text-transform:none;
}
.printer-node-marker.is-expanded .printer-node-expanded-close{
  background:var(--mat-panel);
}
.printer-node-marker.is-expanded .printer-node-expanded-actions button{
  border-color:var(--mat-border);
  background:var(--mat-raised);
  color:var(--ink);
  box-shadow:var(--mat-shadow);
}
.printer-node-marker.is-expanded .printer-node-expanded-actions .printer-node-expanded-button-primary{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.printer-node-marker.is-expanded .printer-node-expanded-actions .printer-node-expanded-button-primary:is(:hover,:focus-visible){
  border-color:color-mix(in srgb,var(--accent) 86%,#000);
  background:color-mix(in srgb,var(--accent) 86%,#000);
  color:#fff;
}
.printer-node-marker.is-expanded .printer-node-expanded-actions .printer-node-expanded-button-secondary:is(:hover,:focus-visible){
  border-color:var(--mat-blue);
  background:var(--mat-blue-soft);
  color:var(--accent-ink);
}
.printer-node-marker.is-expanded .printer-node-expanded-actions button:focus-visible{
  outline:2px solid var(--mat-blue);
  outline-offset:2px;
}

/* Order confirmation uses the same product materials. Camera preview stays
   black; all labels, map placeholders and secondary actions follow the theme. */
.ordertrack-reference{
  color:var(--ink);
  font-family:var(--font);
}
.ordertrack-reference .ordertrack-card{
  background:var(--mat-panel);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--mat-border),var(--mat-shadow-float);
}
.ordertrack-reference .ordertrack-tabs{
  background:var(--mat-recess);
}
.ordertrack-reference .ordertrack-tabs button{
  color:var(--mat-muted);
  font-family:var(--font);
}
.ordertrack-reference .ordertrack-tabs button[aria-selected="true"]{
  background:var(--mat-raised);
  color:var(--ink);
  box-shadow:var(--mat-shadow);
}
.ordertrack-reference :is(.ordertrack-head__copy small,.ordertrack-status,
  .ordertrack-step > b,.ordertrack-media__visual > span,.ordertrack-media__visual > em,
  .ordertrack-media__visual > small,.ordertrack-media__foot > span,
  .ordertrack-media__foot--single,.ordertrack-cancel small,.ordertrack-shop small){
  font-family:var(--font);
  font-size:12px;
  letter-spacing:0;
}
.ordertrack-reference :is(.ordertrack-head__copy small,.ordertrack-step > b,
  .ordertrack-media__foot > span,.ordertrack-media__foot--single,.ordertrack-shop small){
  color:var(--mat-muted);
}
.ordertrack-reference :is(.ordertrack-head__copy strong,.ordertrack-media__foot b,
  .ordertrack-carrier dd,.ordertrack-cancel strong,
  .ordertrack-step.is-complete > b),
.ordertrack-reference .ordertrack-card[data-ordertrack-stage="transit"] [data-ordertrack-ship-step] > b{
  color:var(--ink);
  font-family:var(--font);
}
.ordertrack-reference .ordertrack-status{
  background:color-mix(in srgb,var(--mat-green) 12%,var(--mat-panel));
  color:var(--mat-green);
}
.ordertrack-reference :is(.ordertrack-status i,.ordertrack-step.is-complete > i,
  .ordertrack-line.is-complete),
.ordertrack-reference .ordertrack-card[data-ordertrack-stage="transit"] :is(
  [data-ordertrack-ship-step] > i,[data-ordertrack-ship-line]){
  background:var(--mat-green);
}
.ordertrack-reference :is(.ordertrack-line,.ordertrack-step > i){
  background:var(--mat-border);
}
.ordertrack-reference :is(.ordertrack-media,.ordertrack-shop,.ordertrack-shop__mark){
  border-color:var(--mat-border);
}
.ordertrack-reference :is(.ordertrack-media__visual--map,.ordertrack-carrier,
  .ordertrack-cancelled,.ordertrack-shop__mark,.ordertrack-media__foot > i){
  background:var(--mat-recess);
  color:var(--mat-muted);
}
.ordertrack-reference :is(.ordertrack-moving,.ordertrack-media__visual--map > small,
  .ordertrack-media__foot){
  border-color:var(--mat-border);
  background:var(--mat-panel);
  color:var(--mat-muted);
}
.ordertrack-reference .ordertrack-cancel{
  border-style:solid;
  border-color:color-mix(in srgb,var(--mat-orange) 35%,var(--mat-border));
  background:color-mix(in srgb,var(--mat-orange) 7%,var(--mat-panel));
}
.ordertrack-reference .ordertrack-cancel small{ color:var(--mat-orange); }
.ordertrack-reference .ordertrack-cancel > i{
  background:color-mix(in srgb,var(--mat-orange) 16%,var(--mat-panel));
}
.ordertrack-reference :is(.ordertrack-cancel > i b,.ordertrack-media__foot > i b){
  background:var(--mat-orange);
}
.ordertrack-reference :is(.ordertrack-shop button,.ordertrack-actions button,
  .ordertrack-cancel button){
  border-color:var(--mat-border);
  background:var(--mat-raised);
  color:var(--ink);
  font-family:var(--font);
  box-shadow:var(--mat-shadow);
}
.ordertrack-reference .ordertrack-actions button:first-child{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}
.ordertrack-reference .ordertrack-actions button:first-child:hover{
  border-color:color-mix(in srgb,var(--accent) 86%,#000);
  background:color-mix(in srgb,var(--accent) 86%,#000);
}
.ordertrack-reference :is(.ordertrack-shop button,.ordertrack-actions button:last-child):hover{
  border-color:var(--mat-blue);
}
.ordertrack-reference .ordertrack-cancel button:hover{
  border-color:var(--danger);
  color:var(--danger);
}
.ordertrack-reference button:focus-visible{
  outline:2px solid var(--mat-blue);
  outline-offset:2px;
}

/* Scoped action focus stays legible over both solid and 3D surfaces. */
body[data-view="browse"] :is(.market-rail__tool,.pfocus__actions button,.pfocus__boost,
  .pfboard__add,.pfocus__chip--trend):focus-visible,
body[data-view="design"] :is(.design-cad-tool,.design-pane__tool,.geometry-edit-toolbar button,
  .design-dock-panel__action,.design-layers-panel__toggle):focus-visible{
  outline:2px solid var(--mat-blue);
  outline-offset:2px;
}
/* Catalog actions share a keyboard-accessible, opaque dialog surface. */
.workspace-action-dialog{
  width:min(520px,calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:22px;
  border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--text);
  box-shadow:var(--shadow-lg); overflow:auto;
}
.workspace-action-dialog::backdrop{ background:rgba(0,0,0,.42); backdrop-filter:blur(4px); }
.workspace-action-dialog header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.workspace-action-dialog h2{ margin:0; color:var(--ink); font-size:20px; }
.workspace-action-dialog p{ margin:6px 0 14px; color:var(--dim); font-size:13px; line-height:1.5; }
.workspace-action-dialog label{ display:grid; gap:8px; font-size:13px; font-weight:600; }
.workspace-action-dialog input{ width:100%; min-width:0; padding:12px; border:1px solid var(--line); border-radius:9px; background:var(--slot); color:var(--text); font:inherit; }
.workspace-action-dialog [data-object-dialog-close]{ flex:0 0 32px; width:32px; height:32px; border-radius:8px; color:var(--text); background:var(--slot); font-size:22px; }
.workspace-action-dialog footer{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.workspace-action-dialog footer p{ margin:0; }
.workspace-action-dialog [data-object-copy-link]{ flex:0 0 auto; min-height:38px; padding:0 16px; border-radius:9px; background:var(--accent); color:#fff; font-weight:600; }
.workspace-action-dialog__objects{ display:grid; gap:8px; }
.workspace-action-dialog__objects button{ display:grid; gap:5px; padding:12px; text-align:left; border:1px solid var(--line); border-radius:10px; background:var(--raised); color:var(--text); }
.workspace-action-dialog__objects button span{ color:var(--dim); font-size:12px; }
.workspace-action-dialog__objects button:hover{ background:var(--slot); border-color:var(--accent); }
.workspace-action-dialog :is(button,input):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.browse-load-feedback{position:absolute;z-index:25;left:50%;bottom:110px;transform:translateX(-50%);width:min(360px,calc(100% - 32px));padding:16px;border:1px solid var(--mat-border);border-radius:14px;background:var(--mat-panel);color:var(--ink);box-shadow:var(--shadow-lg);font-size:13px;display:grid;gap:12px;}
.browse-load-feedback[hidden]{display:none;}
.browse-load-feedback button{justify-self:start;padding:8px 18px;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;}

/* At tablet and phone widths, full-height floating sidebars otherwise cover
   the entire object. The native selector switches the existing mounted panes;
   wide screens keep their authored widths, splitters, and rail preferences. */
.pfocus__compact-controls{ display:none; }
@media (max-width:900px){
  .view[data-view="browse"][data-workspace-edge-rails="true"]{ padding-left:0; }
  .view[data-view="browse"] > .workspace-edge-rail--left{ display:none; }
  body[data-view="browse"] .pfocus{
    --pf-rail-w:52px !important; --pf-right-w:52px !important;
    --pf-left-w:calc(100% - 52px) !important;
    --pf-print-w:calc(100vw - 54px) !important;
  }
  body[data-view="browse"] .pfocus__compact-controls{
    position:absolute; z-index:20; top:0; left:0; right:52px;
    height:52px; padding:8px; display:flex; align-items:center; gap:4px;
    border-bottom:1px solid var(--line); background:var(--surface);
  }
  .pfocus__compact-controls button{
    flex:1 1 0; min-width:0; min-height:34px; padding:7px 5px;
    border:1px solid transparent; border-radius:8px;
    background:transparent; color:var(--dim); font:600 12px/1.3 var(--font);
    white-space:nowrap; cursor:pointer;
  }
  .pfocus__compact-controls button[aria-pressed="true"]{
    border-color:var(--line); background:var(--accent-soft); color:var(--accent-ink);
  }
  body[data-view="browse"] .pfocus > .pfocus__object-space{ top:52px; right:52px; }
  body[data-view="browse"] .pfocus > .pfocus__column:first-of-type{
    top:52px; bottom:68px; visibility:hidden; opacity:0; pointer-events:none;
    transform:none; transition:none;
  }
  body[data-view="browse"] .pfocus > .pfocus__market-rail-column{ width:52px; }
  body[data-view="browse"] .pfocus .market-rail__drawer{
    top:52px; bottom:68px; width:var(--pf-print-w);
    visibility:hidden; opacity:0; pointer-events:none; transform:none; transition:none;
  }
  body[data-view="browse"] .pfocus[data-compact-panel="insights"] > .pfocus__column:first-of-type,
  body[data-view="browse"] .pfocus[data-compact-panel="printing"] .market-rail__drawer[data-open="true"]{
    visibility:visible; opacity:1; pointer-events:auto;
  }
  body[data-view="browse"] .market-rail__drawer[data-mode="cart"] [data-rail-panel="cart"]{
    display:block; overflow:auto; overscroll-behavior:contain;
  }
  body[data-view="browse"] .pfocus:not([data-compact-panel="model"]) > .pfocus__object-space{
    visibility:hidden; pointer-events:none;
  }
  body[data-view="browse"] .pfocus .market-rail{ padding:7px 5px; }
  body[data-view="browse"] .pfocus .market-rail__tool{ justify-content:center; gap:0; padding:0 7px; }
  body[data-view="browse"] .pfocus .market-rail__label,
  body[data-view="browse"] .pfocus .market-rail__collapse,
  body[data-view="browse"] .pfocus .market-rail__divider--collapse{ display:none; }
  body[data-view="browse"] .pfocus__title{ left:14px; top:14px; max-width:calc(100% - 28px); }
  body[data-view="browse"] .pfocus__title h1{ font-size:clamp(19px,3vw,26px); }
  body[data-view="browse"] .pfocus__rail-top{ top:116px; right:10px; max-width:calc(100% - 20px); }
  body[data-view="browse"] .pfocus__object-nav{ left:14px; right:14px; bottom:82px; width:auto; max-width:none; transform:none; }
  body[data-view="browse"] .hive-object-guide{ width:100%; max-width:100%; }
  body[data-view="browse"] .pfocus__hud{ left:14px; right:66px; bottom:82px; max-width:none; width:auto; transform:none; white-space:normal; }
  body[data-view="browse"] .pfocus > [data-focus-side-resizer]{ display:none; }
}

/* Browse keeps only the object canvas and the shared top/command/bottom panels.
   Keep the native object owner mounted so selection and orbit state survive. */
body[data-view="browse"] .view[data-view="browse"] .center-panel > :not(.pfocus),
body[data-view="browse"] .view[data-view="browse"] .pfocus > :not(.pfocus__object-space),
body[data-view="browse"] .view[data-view="browse"] .pfocus__object-space > :not(.pfocus__object){
  display:none !important;
}
body[data-view="browse"] .view[data-view="browse"] .pfocus{
  grid-template-columns:minmax(0,1fr) !important;
  gap:0;
}
body[data-view="browse"] .view[data-view="browse"] .pfocus > .pfocus__object-space{
  grid-column:1 / -1;
  position:absolute;
  inset:0 !important;
  width:100%;
  height:100%;
  visibility:visible !important;
  opacity:1;
  pointer-events:auto !important;
}
body[data-view="browse"] .view[data-view="browse"][data-workspace-edge-rails="true"]{
  padding-left:0;
}
body[data-view="browse"] .view[data-view="browse"] > .workspace-edge-rail{
  display:none !important;
}

/* Community-app-style subitems sit outside the command panel's surface. */
.command-caption{ display:none; }
body:is([data-view="browse"],[data-view="design"],[data-view="build"]) #command:not([data-free="true"]):not([data-seat]){
  bottom:calc((var(--watchbar-h,39px) + 49px) / .95);
}
body:is([data-view="browse"],[data-view="design"],[data-view="build"]) #command .command-caption{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:28px; padding:3px 8px; border:0; background:transparent;
  box-shadow:none; color:var(--dim); font:11px/1.3 var(--font);
}
/* Keep the caption's hover region in place while its contents are hidden. */
#command .command-caption{ opacity:0; transition:opacity .15s ease; }
#command .command-caption::before{
  content:""; position:absolute; left:0; right:0; top:-6px; height:6px;
}
#command .command-caption > *{ pointer-events:none; }
#command:hover .command-caption,
#command .command-caption:focus-within{ opacity:1; }
#command:hover .command-caption > *,
#command .command-caption:focus-within > *{ pointer-events:auto; }
@media(prefers-reduced-motion:reduce){
  #command .command-caption{ transition:none; }
}
.command-caption button{ flex:none; border:0; padding:0; background:transparent; color:inherit; font:inherit; cursor:pointer; white-space:nowrap; }
.command-caption button:hover{ color:var(--ink); }
.command-caption button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.command-caption .command-caption__drag{ width:20px; height:20px; font-size:15px; cursor:grab; touch-action:none; }
.command-caption__context{ flex:1; min-width:0; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.command-caption__context > span{ display:none; }
body[data-view="browse"] [data-command-context="browse"],
body[data-view="design"] [data-command-context="design"],
body[data-view="build"] [data-command-context="build"]{ display:inline; }
.command-caption__hint{ flex:none; white-space:nowrap; }
#command[data-seat] .command-caption{ position:relative; top:auto; }
@media(max-width:520px){
  #command .command-caption{ gap:6px; }
  .command-caption__context{ display:none; }
  .command-caption__hint{ margin-left:auto; }
}

/* Browse runs edge to edge on a white-to-light-blue wash: no blank side
   panels (the shared left edge rail is already hidden above) and no divider
   lines. The category banks run to the bottom of the window; only the
   centre frame stops short of the floating command bar. */
body[data-view="browse"] .view[data-view="browse"] .pfocus__object-space{
  --browse-command-clearance:118px;
  background:
    radial-gradient(120% 70% at 50% 110%,rgba(96,165,250,.16),transparent 65%),
    linear-gradient(180deg,#ffffff 0%,#f5f9ff 55%,#eaf2ff 100%);
}
:root[data-theme="dark"] body[data-view="browse"] .view[data-view="browse"] .pfocus__object-space{
  background:
    radial-gradient(120% 70% at 50% 110%,rgba(255,255,255,.025),transparent 65%),
    linear-gradient(180deg,#101010 0%,#0c0c0c 55%,#080808 100%);
}
body[data-view="browse"] .view[data-view="browse"] .pfocus__object-space > :is(.pfocus__scatter,.browse-categories){
  display:block !important;
}
.browse-categories{ position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.browse-category-title,.browse-category-object{
  position:absolute; left:0; top:0; margin:0; text-align:center;
  color:var(--ink); font:600 12px/1.4 var(--font); white-space:nowrap;
}
.browse-category-title{ color:var(--dim); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.browse-category-object{
  pointer-events:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:7px 16px; max-width:190px; overflow:hidden;
  text-overflow:ellipsis; cursor:pointer;
}
.browse-category-object[aria-pressed="true"]{ color:var(--accent-ink); border-color:var(--accent-ink); }
.browse-category-object:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
[data-browse-heading]{ display:inline-block; min-width:8ch; }

/* One pair of pan buttons moves both banks a full page of columns. They sit
   in the outer gutters, level with the middle of the banks. */
body[data-view="browse"] .view[data-view="browse"] .pfocus__object-space > .browse-pan-controls{ display:block !important; }
.browse-pan-controls{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.browse-pan-controls button{
  position:absolute; top:50%; transform:translateY(-50%); width:24px; height:44px;
  padding:0; border:1px solid var(--line); border-radius:8px;
  background:var(--surface); color:var(--dim); font:20px/1 var(--font);
  cursor:pointer; pointer-events:auto;
}
.browse-pan-controls [data-category-pan="left"]{ left:4px; }
.browse-pan-controls [data-category-pan="right"]{ right:4px; }
.browse-pan-controls button:hover:not(:disabled){ color:var(--ink); background:var(--accent-soft); }
.browse-pan-controls button:disabled{ opacity:.35; cursor:default; }
.browse-pan-controls button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.pfocus__scatter{ cursor:grab; }
.pfocus__scatter[data-scatter-drag="pan"]{ cursor:grabbing; }

/* The Style workspace's two independently scrollable banks flank one live object. */
body[data-view="browse"] .view[data-view="browse"] .pfocus__object-space > .browse-categories{
  display:grid !important;
}
/* The centre track holds the centred column's feed and is the widest of the
   three (40% of the row). It also stays at least as wide as the 551px command
   bar where the row allows (up to 48%), so the bar floats over the foot of
   the centre panel and not over the columns that run beside it. */
.browse-categories{
  inset:0; grid-template-columns:minmax(0,1fr) minmax(220px,max(40%,min(620px,48%))) minmax(0,1fr);
  column-gap:14px; row-gap:0; padding:12px 12px 0; box-sizing:border-box; pointer-events:none;
}
/* A whole number of columns fills each bank, and the bank snaps to column
   edges, so a column is either fully in view or out of it. That only holds
   while the side padding equals the gap: the gap before the first visible
   column then lands exactly on the bank's edge. The extra half pixel per
   column keeps rounding from leaving a sliver of the next column in view;
   it spills into the end padding instead. */
.browse-category-bank{
  --browse-column-gap:26px;
  container-type:inline-size;
  display:flex; gap:var(--browse-column-gap);
  min-width:0; min-height:0; margin-bottom:12px; overflow-x:auto; overflow-y:hidden;
  overscroll-behavior:contain; padding:16px var(--browse-column-gap) 14px;
  scroll-padding-inline:var(--browse-column-gap); scroll-snap-type:x mandatory;
  scrollbar-width:none; pointer-events:auto; touch-action:pan-y;
}
/* The pan buttons, drag and sideways scrolling move the banks; a scrollbar
   would only cut across the bottom of the rounded panel. */
.browse-category-bank::-webkit-scrollbar{ display:none; }
/* Both side banks and the centre sit on matching frosted panels. */
.browse-category-bank,.browse-center-frame{
  border-radius:18px; background:color-mix(in srgb,var(--surface) 46%,transparent);
  box-shadow:0 20px 56px -30px rgba(30,64,175,.28);
}
.browse-category-bank[data-dragging="true"]{ scroll-snap-type:none; cursor:grabbing; }
.browse-category-bank--left{ grid-column:1; }
.browse-category-bank--right{ grid-column:3; }
.browse-category-column{
  --browse-columns:1;
  flex:0 0 calc((100cqi - (var(--browse-columns) - 1) * var(--browse-column-gap)) / var(--browse-columns) + .5px);
  scroll-snap-align:start; box-sizing:border-box;
  display:flex; flex-direction:column; min-width:0; min-height:0;
}
@container (min-width:250px){ .browse-category-column{ --browse-columns:2; } }
@container (min-width:400px){ .browse-category-column{ --browse-columns:3; } }
@container (min-width:545px){ .browse-category-column{ --browse-columns:4; } }
@container (min-width:690px){ .browse-category-column{ --browse-columns:5; } }
@container (min-width:835px){ .browse-category-column{ --browse-columns:6; } }
@container (min-width:980px){ .browse-category-column{ --browse-columns:7; } }
.browse-category-column > header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.browse-category-column > header > span{ color:var(--dim); font:10px/1.4 var(--font); }
.browse-category-column .browse-category-title{ position:static; transform:none; text-align:left; white-space:normal; color:var(--ink); font:600 13px/1.4 var(--font); letter-spacing:0; text-transform:none; }
/* The title is the column's "bring to centre" control, styled as text. */
.browse-category-title button{
  padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.browse-category-title button:hover{ color:var(--accent-ink); }
.browse-category-title button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; border-radius:3px; }
.browse-category-column > p{ margin:7px 0 14px; color:var(--dim); font:11px/1.4 var(--font); }
.browse-category-list{ flex:1 1 auto; display:flex; flex-direction:column; gap:10px; overflow-y:auto; scrollbar-width:none; min-height:0; padding:2px 3px 12px 0; }
.browse-category-list .browse-category-object{
  display:block; position:relative; flex-shrink:0; left:auto; top:auto; transform:none;
  width:100%; max-width:none; margin:0; padding:6px; text-align:left; white-space:normal;
  border:1px solid transparent; border-radius:10px; background:transparent;
}
.browse-category-list .browse-category-object:hover{ border-color:color-mix(in srgb,var(--accent-ink) 30%,transparent); background:color-mix(in srgb,var(--surface) 55%,transparent); }
.browse-category-list .browse-category-object[aria-pressed="true"]{ border-color:var(--accent-ink); background:color-mix(in srgb,var(--surface) 65%,transparent); }
/* Previews render with a transparent background, so a frosted tile lets the
   gradient through. */
.browse-category-preview{
  display:block; width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px;
  background:color-mix(in srgb,var(--raised) 58%,transparent);
}
.browse-category-label{ display:block; margin:9px 2px 0; color:var(--ink); font:500 11px/1.4 var(--font); }
.browse-category-object small{ display:block; margin:3px 2px 0; color:var(--dim); font:10px/1.5 var(--font); }
/* Items show only their preview. Name and size overlay its foot on hover or
   keyboard focus, and stay up when there is no preview to recognise. */
.browse-category-caption{
  position:absolute; left:6px; right:6px; bottom:6px; display:block; padding:6px 8px 7px;
  border-radius:0 0 8px 8px; background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(6px); pointer-events:none;
  opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
}
.browse-category-item:is(:hover,:has(:focus-visible)) .browse-category-caption,
.browse-category-object[data-ready="error"] .browse-category-caption{ opacity:1; transform:none; }
/* Hovering an item offers a heart that adds it to Favorites; a hearted item
   keeps its filled heart in view. */
.browse-category-item{ position:relative; flex-shrink:0; }
.browse-category-heart{
  position:absolute; top:12px; right:12px; z-index:1; width:28px; height:28px;
  display:grid; place-items:center; padding:0; border:0; border-radius:999px;
  background:color-mix(in srgb,var(--surface) 90%,transparent); box-shadow:0 2px 8px rgba(15,23,42,.14);
  color:var(--dim); cursor:pointer; opacity:0; transform:scale(.85);
  transition:opacity .15s ease, transform .15s ease, color .15s ease;
}
.browse-category-heart svg{ width:15px; height:15px; }
.browse-category-item:is(:hover,:has(:focus-visible)) .browse-category-heart,
.browse-category-heart[aria-pressed="true"]{ opacity:1; transform:none; }
.browse-category-heart:hover,.browse-category-heart[aria-pressed="true"]{ color:var(--favorite); }
.browse-category-heart[aria-pressed="true"] svg{ fill:currentColor; }
.browse-category-heart:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.browse-category-caption .browse-category-label{ margin:0; }
.browse-category-caption small{ margin:2px 0 0; }
.browse-category-object[data-ready="error"] .browse-category-caption small::after{ content:" · preview unavailable"; }

/* The centre: the centred column as a vertical feed, one enlarged object per
   screen, on a frosted panel above the command bar. */
.browse-center-frame{
  grid-column:2; grid-row:1; display:flex; flex-direction:column; position:relative;
  min-width:0; min-height:0; margin-bottom:12px;
  box-sizing:border-box; pointer-events:auto; overflow:hidden;
}
.browse-center-head{ flex:none; padding:16px 170px 0 20px; }
.browse-center-head small{ display:block; color:var(--dim); font:10px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.browse-center-head strong{ display:block; margin-top:6px; color:var(--ink); font:600 15px/1.4 var(--font); }
/* The frame runs behind the floating command bar like the side panels; its
   stage stops short of the bar so the object and feed controls stay clear. */
.browse-center-stage{ position:relative; flex:1 1 0; min-height:180px; overflow:hidden; margin-bottom:calc(var(--browse-command-clearance,118px) - 12px); }
/* Slides are exactly one stage tall and snap one at a time. */
.browse-center-feed{
  position:absolute; inset:0; z-index:1; overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y mandatory; scrollbar-width:none;
}
.browse-center-feed::-webkit-scrollbar{ display:none; }
.browse-center-slide{ height:100%; display:grid; place-items:center; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; }
.browse-center-slide img{
  width:100%; height:100%; min-width:0; min-height:0; object-fit:contain;
  -webkit-user-drag:none; user-select:none;
}
/* Empty image elements can flash a white rectangle before their preview decodes. */
.browse-center-slide:not([data-preview-ready="true"]) img{ visibility:hidden; }
/* The live canvas sits over the feed. It shows once its model has loaded and
   the feed is at rest, and the slide's still preview gives way to it. */
.browse-center-stage > .pfocus__scatter{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
}
.browse-center-frame:is([data-feed-moving],:not([data-model-ready])) .browse-center-stage > .pfocus__scatter{ opacity:0; }
.browse-center-frame[data-model-ready]:not([data-feed-moving]) .browse-center-slide[data-current] img{ opacity:0; }
.browse-feed-dots{
  position:absolute; z-index:3; right:14px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.browse-feed-dots:has(> :only-child){ display:none; }
.browse-feed-dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:color-mix(in srgb,var(--ink) 22%,transparent); transition:height .2s ease, background .2s ease;
}
.browse-feed-dots button:hover{ background:color-mix(in srgb,var(--ink) 45%,transparent); }
.browse-feed-dots button[aria-current="true"]{ height:20px; background:var(--accent-ink); }
.browse-feed-dots button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.browse-feed-next{
  position:absolute; z-index:3; left:50%; bottom:84px; transform:translateX(-50%);
  max-width:80%; padding:6px 13px; border:0; border-radius:999px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:color-mix(in srgb,var(--surface) 72%,transparent); color:var(--dim); font:500 11px/1.4 var(--font); cursor:pointer;
}
.browse-feed-next::after{ content:" ↓"; }
.browse-feed-next:hover{ color:var(--ink); }
.browse-feed-next:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.browse-feed-next[hidden]{ display:none; }
/* The centred column's own element waits here, collapsed, while the feed
   stands in for it. It stays in the tree so its exit can play from its bank. */
.browse-center-column{ position:absolute; width:0; height:0; overflow:visible; }
.browse-center-column > .browse-category-column{ display:none; }

/* Too narrow for the command bar to fit over the centre frame alone, so the
   banks stop above it too. */
@media(max-width:900px){
  .browse-category-bank,.browse-center-frame{ margin-bottom:var(--browse-command-clearance,118px); }
  .browse-center-stage{ margin-bottom:0; }
}
@media(max-width:760px){
  .browse-categories{ grid-template-columns:minmax(0,1fr) minmax(160px,40%) minmax(0,1fr); padding-inline:6px; }
  .browse-category-bank{ --browse-column-gap:12px; }
  .browse-center-head{ padding:12px 12px 0; }
  .browse-center-head strong{ font-size:12px; }
}
@media(max-width:520px){
  .browse-categories{ grid-template-columns:minmax(0,1fr) minmax(125px,48%) minmax(0,1fr); }
  .browse-category-bank{ --browse-column-gap:8px; }
}

/* ── Browse: the object's turned-over sides ─────────────────────────────────
   Clicking the centre object (or Enter on it, or the Details & build toggle)
   turns both side panels over. Each back face shares its bank's grid cell and
   frosted skin; only one of the pair shows at a time, and the banks stay laid
   out underneath so their scroll positions survive. */
.browse-category-bank--left,.browse-side-face--left{ grid-row:1; grid-column:1; }
.browse-category-bank--right,.browse-side-face--right{ grid-row:1; grid-column:3; }
.browse-side-face{
  container-type:inline-size;
  display:flex; flex-direction:column; min-width:0; min-height:0; margin-bottom:12px;
  overflow:hidden; border-radius:18px; box-sizing:border-box;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  box-shadow:0 20px 56px -30px rgba(30,64,175,.28);
  color:var(--ink); pointer-events:auto;
}
.browse-categories:not([data-left-panel="object"]) > .browse-side-face--left,
.browse-categories:not([data-right-panel="object"]) > .browse-side-face--right{ visibility:hidden; pointer-events:none; }
.browse-categories[data-left-panel="object"] > .browse-category-bank--left,
.browse-categories[data-right-panel="object"] > .browse-category-bank--right{ visibility:hidden; pointer-events:none; }
body[data-view="browse"] .pfocus__object-space:has(.browse-categories[data-left-panel="object"][data-right-panel="object"]) > .browse-pan-controls{
  visibility:hidden; pointer-events:none;
}
/* The video sits the turn out, so no live frame is ever rotated. */
.browse-categories[data-side-turning] > .browse-side-face :is(iframe,canvas){ visibility:hidden; }

.browse-side-toggle{
  position:absolute; z-index:4; top:14px; right:16px; padding:6px 13px;
  border:0; border-radius:999px; background:color-mix(in srgb,var(--surface) 82%,transparent);
  box-shadow:0 2px 10px rgba(15,23,42,.1); color:var(--ink); font:600 11px/1.4 var(--font);
  white-space:nowrap; cursor:pointer;
}
.browse-side-toggle:hover{ background:var(--accent-soft); color:var(--accent-ink); }
.browse-side-toggle[aria-pressed="true"]{ background:var(--accent-ink); color:var(--on-accent-ink); }
.browse-side-toggle:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.browse-side-toggle[hidden]{ display:none; }
.browse-sr-status{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* Shared face chrome: a heading block, then a scrolling stack of cards. */
.browse-side__head{ position:relative; flex:none; padding:18px 58px 12px 20px; }
.browse-side__eyebrow{ display:block; color:var(--dim); font:600 10px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.browse-side__title{ margin:5px 0 0; color:var(--ink); font:650 18px/1.25 var(--font); letter-spacing:-.01em; }
.browse-side__title:focus{ outline:none; }
.browse-side__byline{ margin:4px 0 0; color:var(--dim); font:12px/1.45 var(--font); }
.browse-side__close{
  position:absolute; top:16px; right:16px; width:30px; height:30px; display:grid; place-items:center;
  padding:0; border:0; border-radius:999px; background:color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:0 2px 8px rgba(15,23,42,.12); color:var(--dim); cursor:pointer;
}
.browse-side__close svg{ width:13px; height:13px; }
.browse-side__close:hover{ color:var(--ink); background:var(--accent-soft); }
.browse-side__scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:12px; padding:4px 16px 18px;
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink) 18%,transparent) transparent;
}
.browse-side__card{
  flex:none; padding:14px 14px 16px; border-radius:14px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);
}
.browse-side__card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.browse-side__card-head h3{ margin:0; color:var(--ink); font:650 13px/1.3 var(--font); }
.browse-side__card-head > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim); font:11px/1.4 var(--font); }
.browse-side__note{ margin:8px 0 0; color:var(--dim); font:12px/1.5 var(--font); }
.browse-side__note a,.browse-details__links a,.browse-details__facts a,.browse-details__now a{ color:var(--accent-ink); text-decoration:none; }
.browse-side__note a:hover,.browse-details__links a:hover,.browse-details__facts a:hover,.browse-details__now a:hover{ text-decoration:underline; }
.browse-side__pill{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:7px 13px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:999px;
  background:transparent; color:var(--ink); font:600 12px/1.3 var(--font); cursor:pointer;
}
.browse-side__pill svg{ width:14px; height:14px; }
.browse-side__pill:hover{ background:var(--accent-soft); }
.browse-side__pill[aria-pressed="true"]{ border-color:transparent; background:var(--favorite-soft); color:var(--favorite); }
.browse-side__pill[aria-pressed="true"] svg{ fill:currentColor; }
.browse-side__button{
  flex:1 1 0; min-width:0; padding:10px 14px; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:10px; background:var(--surface); color:var(--ink); font:600 12px/1.3 var(--font); cursor:pointer;
}
.browse-side__button:hover{ background:var(--accent-soft); }
.browse-side__button:disabled{ opacity:.55; cursor:default; }
.browse-side__button--primary{ border-color:transparent; background:var(--accent-ink); color:var(--on-accent-ink); }
.browse-side__button--primary:hover{ background:color-mix(in srgb,var(--accent-ink) 86%,var(--on-accent-ink)); }
.browse-side__link{
  margin-top:10px; padding:0; border:0; background:none; color:var(--accent-ink);
  font:600 12px/1.4 var(--font); cursor:pointer;
}
.browse-side__link:hover{ text-decoration:underline; }
.browse-side__status{ min-height:1em; margin:8px 0 0; color:var(--dim); font:12px/1.4 var(--font); }
.browse-side-face :is(button,a,input,textarea):focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }

/* Details: videos, popularity, reviews, dimensions, profile, source, similar. */
.browse-details__player{ display:grid; gap:8px; margin-bottom:10px; }
.browse-details__player[hidden]{ display:none; }
.browse-details__player iframe,.browse-details__poster{
  display:block; width:100%; aspect-ratio:16 / 9; border:0; border-radius:10px; background:#0f172a;
}
.browse-details__poster{ position:relative; padding:0; overflow:hidden; cursor:pointer; }
.browse-details__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.browse-details__play{
  position:absolute; left:50%; top:50%; width:52px; height:52px; display:grid; place-items:center;
  transform:translate(-50%,-50%); border-radius:999px; background:rgba(15,23,42,.72); color:#fff;
}
.browse-details__play svg{ width:22px; height:22px; margin-left:3px; }
.browse-details__poster:hover .browse-details__play{ background:#dc2626; }
.browse-details__now{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0; }
.browse-details__now strong{ min-width:0; color:var(--ink); font:600 12px/1.4 var(--font); }
.browse-details__now a{ flex:none; font:600 11px/1.4 var(--font); }
.browse-details__videos{ display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.browse-details__videos button{
  display:grid; grid-template-columns:88px minmax(0,1fr); gap:10px; align-items:center; width:100%;
  padding:5px; border:1px solid transparent; border-radius:10px; background:transparent; text-align:left; cursor:pointer;
}
.browse-details__videos button:hover{ background:var(--accent-soft); }
.browse-details__videos button[aria-current="true"]{ border-color:color-mix(in srgb,var(--accent-ink) 35%,transparent); }
.browse-details__videos img{ width:88px; aspect-ratio:16 / 9; object-fit:cover; border-radius:7px; background:var(--raised); }
.browse-details__videos strong{
  display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  color:var(--ink); font:600 12px/1.35 var(--font);
}
.browse-details__videos small{ display:block; margin-top:2px; color:var(--dim); font:11px/1.35 var(--font); }
.browse-details__rating{ display:flex; align-items:center; gap:10px; color:var(--dim); font:12px/1.4 var(--font); }
.browse-details__rating-value{ display:inline-flex; align-items:center; gap:5px; color:var(--ink); }
.browse-details__rating-value svg{ width:16px; height:16px; fill:#f59e0b; stroke:#f59e0b; }
.browse-details__rating-value b{ font:700 18px/1 var(--font); }
.browse-details__bars{ display:grid; gap:8px; margin-top:12px; }
.browse-details__bar{
  display:grid; grid-template-columns:minmax(76px,auto) minmax(0,1fr) auto; align-items:center; gap:10px;
  color:var(--dim); font:12px/1.3 var(--font);
}
.browse-details__bar i{
  display:block; height:8px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent-ink) var(--share),color-mix(in srgb,var(--ink) 8%,transparent) var(--share));
}
.browse-details__bar b{ color:var(--ink); font:600 12px/1.3 var(--font); }
.browse-details__reviews{ display:grid; gap:10px; }
.browse-details__review{ padding-bottom:10px; border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent); }
.browse-details__review:last-child{ padding-bottom:0; border-bottom:0; }
.browse-details__review header{ display:flex; justify-content:space-between; gap:10px; }
.browse-details__review strong{ color:var(--ink); font:600 12px/1.4 var(--font); }
.browse-details__review header span{ color:#f59e0b; font:12px/1.4 var(--font); letter-spacing:1px; }
.browse-details__review header i{ color:color-mix(in srgb,var(--ink) 18%,transparent); font-style:normal; }
.browse-details__review p{ margin:4px 0 0; color:var(--ink); font:12px/1.5 var(--font); }
.browse-details__review small{ display:block; margin-top:4px; color:var(--dim); font:11px/1.4 var(--font); }
.browse-details__review-form{ display:grid; gap:10px; margin-top:12px; }
.browse-details__review-form fieldset{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; border:0; }
.browse-details__review-form legend{ margin-bottom:6px; color:var(--dim); font:12px/1.4 var(--font); }
.browse-details__review-form fieldset label span{
  display:inline-block; padding:5px 10px; border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  border-radius:999px; color:var(--ink); font:600 12px/1.3 var(--font); cursor:pointer;
}
.browse-details__review-form fieldset input{ position:absolute; opacity:0; pointer-events:none; }
.browse-details__review-form fieldset input:checked + span{ border-color:transparent; background:#fef3c7; color:#92400e; }
.browse-details__review-form fieldset input:focus-visible + span{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.browse-details__review-text{ display:grid; gap:5px; color:var(--dim); font:12px/1.4 var(--font); }
.browse-details__review-text textarea{
  width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  border-radius:10px; background:var(--surface); color:var(--ink); font:13px/1.45 var(--font); resize:vertical;
}
.browse-details__review-actions{ display:flex; align-items:center; gap:10px; }
.browse-details__review-actions .browse-side__button{ flex:none; }
.browse-details__review-actions span{ color:var(--dim); font:12px/1.4 var(--font); }
.browse-details__facts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px 14px; margin:0; }
.browse-details__facts dt{ color:var(--dim); font:11px/1.4 var(--font); }
.browse-details__facts dd{ margin:2px 0 0; color:var(--ink); font:600 13px/1.35 var(--font); overflow-wrap:anywhere; }
.browse-details__facts dd small{ color:var(--dim); font:500 11px/1.3 var(--font); }
.browse-details__facts--file{ margin-top:12px; }
.browse-details__views{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
@container (min-width:520px){ .browse-details__views{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.browse-details__views figure{ margin:0; }
.browse-details__views img{
  display:block; width:100%; aspect-ratio:1; object-fit:contain; border-radius:10px;
  background:color-mix(in srgb,var(--raised) 70%,transparent);
}
.browse-details__views figcaption{ margin-top:4px; color:var(--dim); font:11px/1.3 var(--font); text-align:center; }
.browse-details__links{ display:flex; flex-wrap:wrap; gap:8px 14px; margin:12px 0 0; font:600 12px/1.4 var(--font); }
.browse-details__similar{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.browse-details__similar button{
  min-width:0; padding:5px; border:1px solid transparent; border-radius:10px; background:transparent;
  text-align:left; cursor:pointer;
}
.browse-details__similar button:hover{ background:var(--accent-soft); }
.browse-details__similar img{
  display:block; width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px;
  background:color-mix(in srgb,var(--raised) 70%,transparent);
}
.browse-details__similar span{
  display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink); font:500 11px/1.35 var(--font);
}

/* Build: fit, settings, shops and the chosen shop's estimate. */
.browse-build__fit{ margin:0; color:var(--ink); font:12px/1.5 var(--font); }
.browse-build__group,.browse-build__sorts{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.browse-build__group button,.browse-build__sorts button{
  display:inline-flex; align-items:baseline; gap:5px; padding:6px 11px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:999px;
  background:transparent; color:var(--ink); font:600 12px/1.3 var(--font); cursor:pointer;
}
.browse-build__group button small{ color:var(--dim); font:500 11px/1.3 var(--font); }
.browse-build__group button:hover,.browse-build__sorts button:hover{ background:var(--accent-soft); }
.browse-build__group button[aria-pressed="true"],.browse-build__sorts button[aria-pressed="true"]{
  border-color:transparent; background:var(--accent-ink); color:var(--on-accent-ink);
}
.browse-build__group button[aria-pressed="true"] small{ color:color-mix(in srgb,var(--on-accent-ink) 80%,transparent); }
.browse-build__swatches{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.browse-build__swatch{
  width:26px; height:26px; padding:0; border:2px solid var(--surface); border-radius:999px;
  background:var(--swatch,#fff); box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent); cursor:pointer;
}
.browse-build__swatch--original{ background:conic-gradient(#e8971a,#2563eb,#15803d,#e11d48,#e8971a); }
.browse-build__swatch[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--accent-ink); }
.browse-build__quantity{ display:flex; align-items:center; gap:8px; color:var(--dim); font:12px/1.4 var(--font); }
.browse-build__quantity span{ margin-right:auto; }
.browse-build__quantity button{
  width:30px; height:30px; padding:0; border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  border-radius:8px; background:transparent; color:var(--ink); font:600 15px/1 var(--font); cursor:pointer;
}
.browse-build__quantity button:hover{ background:var(--accent-soft); }
.browse-build__quantity output{ min-width:26px; color:var(--ink); font:650 14px/1 var(--font); text-align:center; }
.browse-build__pickup{ display:flex; align-items:center; gap:7px; margin-bottom:10px; color:var(--ink); font:12px/1.4 var(--font); }
.browse-build__shops{ display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.browse-build__shops button{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); border-radius:11px;
  background:transparent; text-align:left; cursor:pointer;
}
.browse-build__shops button:hover{ background:var(--accent-soft); }
.browse-build__shops button[aria-pressed="true"]{ border-color:var(--accent-ink); background:color-mix(in srgb,var(--accent-ink) 7%,transparent); }
.browse-build__shop-name{ min-width:0; }
.browse-build__shop-name strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font:600 12px/1.35 var(--font); }
.browse-build__shop-name small,.browse-build__shop-quote small{ display:block; color:var(--dim); font:11px/1.35 var(--font); }
.browse-build__shop-quote{ flex:none; text-align:right; }
.browse-build__shop-quote b{ color:var(--ink); font:700 13px/1.3 var(--font); }
.browse-build__total{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:0; }
.browse-build__total b{ color:var(--ink); font:750 24px/1.1 var(--font); letter-spacing:-.01em; }
.browse-build__total span{ color:var(--dim); font:12px/1.4 var(--font); }
.browse-build__actions{ display:flex; gap:8px; margin-top:12px; }

@media(max-width:900px){
  .browse-side-face{ margin-bottom:var(--browse-command-clearance,118px); }
}
@media(max-width:760px){
  /* The tracks are too narrow here, so the two sides stack full width over
     the centre while they are showing. */
  .browse-side-face--left,.browse-side-face--right{ grid-column:1 / -1; z-index:5; height:calc(50% - 6px); }
  .browse-side-face--left{ align-self:start; margin-bottom:0; }
  .browse-side-face--right{ align-self:end; margin-bottom:var(--browse-command-clearance,118px); height:calc(50% - var(--browse-command-clearance,118px) - 6px); }
}

/* Details tabs: analytics, reviews, videos and style, one at a time. */
.browse-details__tabs{
  flex:none; display:flex; gap:4px; margin:0 16px 8px; padding:4px;
  border-radius:12px; background:color-mix(in srgb,var(--ink) 6%,transparent);
}
.browse-details__tabs button{
  flex:1 1 0; min-width:0; padding:7px 8px; border:0; border-radius:9px; background:transparent;
  color:var(--dim); font:600 12px/1.3 var(--font); white-space:nowrap; cursor:pointer;
}
.browse-details__tabs button:hover{ color:var(--ink); }
.browse-details__tabs button[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 4px rgba(15,23,42,.1); }
.browse-details__panel{ display:flex; flex-direction:column; gap:12px; }
.browse-details__panel[hidden]{ display:none; }
.browse-build__label{ margin:12px 0 6px; color:var(--dim); font:600 11px/1.3 var(--font); letter-spacing:.06em; text-transform:uppercase; }
.browse-build__label:first-child{ margin-top:0; }

/* The Build view's globe, borrowed into the build side. */
.browse-build__globe{
  position:relative; flex:0 0 clamp(200px,38%,380px); margin:0 16px 12px; overflow:hidden;
  border-radius:14px; background:color-mix(in srgb,var(--ink) 6%,transparent);
}
.browse-build__globe-note{
  position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:12px;
  color:var(--dim); font:12px/1.4 var(--font); text-align:center;
}
.browse-build__globe[data-state="ready"] .browse-build__globe-note{ display:none; }
.browse-build__globe[data-state="error"] .browse-build__globe-note{ font-size:0; }
.browse-build__globe[data-state="error"] .browse-build__globe-note::after{
  content:"The printer map could not load."; font:12px/1.4 var(--font);
}

/* Collapsed banks release their grid tracks to the live centre feed. */
.browse-categories[data-left-collapsed="true"]{ grid-template-columns:0 minmax(0,1fr) minmax(0,26%); }
.browse-categories[data-right-collapsed="true"]{ grid-template-columns:minmax(0,26%) minmax(0,1fr) 0; }
.browse-categories[data-left-collapsed="true"][data-right-collapsed="true"]{ grid-template-columns:0 minmax(0,1fr) 0; column-gap:0; padding-inline:0; }
.browse-categories[data-left-collapsed="true"] > :is(.browse-category-bank--left,.browse-side-face--left),
.browse-categories[data-right-collapsed="true"] > :is(.browse-category-bank--right,.browse-side-face--right){ visibility:hidden; pointer-events:none; overflow:hidden; padding:0; }
.browse-categories[data-left-collapsed="true"][data-right-collapsed="true"] > .browse-center-frame{ border-radius:0; }
body[data-view="browse"] .view[data-view="browse"] .pfocus__object-space > .browse-edge-controls{ display:block !important; }
.browse-edge-controls{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.browse-edge-controls button{ position:absolute; top:45%; width:24px; height:48px; padding:0; pointer-events:auto; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:22px/1 var(--font); cursor:pointer; }
.browse-edge-controls [data-browse-edge="left"]{ left:0; border-radius:0 8px 8px 0; }
.browse-edge-controls [data-browse-edge="right"]{ right:0; border-radius:8px 0 0 8px; }
.browse-edge-controls button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.pfocus__object-space:has(.browse-categories[data-left-collapsed="true"][data-right-collapsed="true"]) > .browse-pan-controls{ visibility:hidden; }

.browse-categories[data-right-collapsed="true"] .browse-feed-dots{ right:38px; }

/* Join the active Browse header to its workspace without a horizontal seam. */
body[data-view="browse"]{ --browse-header-surface:#fff; }
:root[data-theme="dark"] body[data-view="browse"]{ --browse-header-surface:#101010; }
body[data-view="browse"] > .top-panel::after{ content:none; }
body[data-view="browse"] .top-panel__account-actions{ top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); }
body[data-view="browse"] .view-preview[data-top-view="browse"][data-active="true"]{
  background:var(--browse-header-surface); border-bottom:0; box-shadow:none;
}
body[data-view="browse"] .view-preview[data-top-view="browse"]::after{ content:none; }
body[data-view="browse"] .view-preview:not([data-top-view="browse"]){ border-bottom:1px solid var(--line); }
body[data-view="browse"] .view[data-view="browse"] .center-panel{
  border-top:0; border-right:0; border-top-left-radius:0; border-top-right-radius:0;
}
body[data-view="browse"] .browse-categories{ padding-top:12px; }
body[data-view="browse"] .browse-center-frame{ border-top-left-radius:18px; border-top-right-radius:18px; }

/* Browse keeps navigation compact; Print opens the native printer globe as a wide screen. */
body[data-view="browse"]{ --top-h:36px; }
body[data-view="browse"] .view-preview{ padding-block:0; justify-content:center; }
body[data-view="browse"] .view-preview :is(.view-preview__art,.view-preview__blurb){ display:none; }
[data-browse-print-screen] .browse-side-face--right{
  position:absolute; grid-area:auto; inset:18px 18px calc(var(--browse-command-clearance,118px) + 8px) 46%;
  z-index:12; width:auto; margin:0; border:5px solid #202124; border-radius:20px;
  background:var(--surface); box-shadow:0 18px 60px #0005; overflow:hidden;
  display:flex; flex-direction:column; visibility:visible;
}
[data-browse-print-screen] .browse-side-face--right .browse-build__globe{
  flex:1 1 auto; min-height:0; margin:0; border-radius:0;
}
[data-browse-print-screen] .browse-side-face--right [data-build-body]{ display:none; }
[data-browse-print-screen] .browse-side-face--right .browse-side__head{ padding:12px 56px 12px 16px; }
[data-browse-print-screen] .browse-side-face--right .browse-side__byline{ display:none; }
@media(max-width:700px){
  body[data-view="browse"] .top-panel__account-actions{ top:max(12px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); }
  [data-browse-print-screen] .browse-side-face--right{ inset:120px 8px calc(var(--browse-command-clearance,118px) + 8px) 8px; border-width:3px; }
  }
[data-browse-print-screen] .browse-center-frame{ grid-column:1 / 4; width:100%; }
[data-browse-print-screen] .browse-center-stage{ width:44%; }
[data-browse-print-screen] .browse-center-head{ width:44%; box-sizing:border-box; padding-right:20px; }
[data-browse-print-screen] .browse-side-toggle{ display:none; }
[data-browse-print-screen] .browse-side-face--left{ visibility:hidden; pointer-events:none; }
@media(max-width:700px){ [data-browse-print-screen] .browse-center-frame{ width:100%; } }

/* A continuous, frameless map fills the right half of the expanded centre. */
[data-browse-print-screen] .browse-side-face--right{
  inset:0 0 0 50%; border:0; border-radius:0; box-shadow:none; background:transparent;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%);
  mask-image:linear-gradient(to right,transparent,#000 9%);
}
[data-browse-print-screen] .browse-side-face--right [data-build-head]{ display:none; }
[data-browse-print-screen] .browse-side-face--right .browse-build__globe{ flex:1; margin:0; border:0; border-radius:0; }
[data-browse-print-screen] .browse-center-frame{ margin-bottom:0; border:0; border-radius:0; }
@media(max-width:700px){
  [data-browse-print-screen] .browse-side-face--right{ inset:0 0 0 50%; }
  [data-browse-print-screen] .browse-center-stage{ width:48%; }
}

/* Object navigation and actions travel with the command panel. */
.browse-command-actions{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  display:none; align-items:center; justify-content:center; gap:12px;
  width:max-content; max-width:calc(100vw - 24px); padding:12px 14px;
  opacity:0; visibility:hidden; transition:opacity .16s ease,visibility .16s ease;
}
body[data-view="browse"] .browse-command-actions{ display:flex; }
body[data-view="browse"] .browse-command-actions[data-revealed],
body[data-view="browse"] .browse-command-actions:focus-within{ opacity:1; visibility:visible; }
.browse-command-actions > button{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-width:34px; height:34px; padding:6px; border:0; border-radius:999px;
  background:var(--surface); color:var(--ink); cursor:pointer; white-space:nowrap;
  font:500 12px/1 var(--font);
}
.browse-command-actions > button svg{ width:18px; height:18px; }
.browse-command-actions > button:hover{ color:var(--accent-ink); }
.browse-command-actions > button[aria-pressed="true"] svg{ fill:currentColor; color:var(--accent-ink); }
.browse-command-actions > button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.browse-command-actions .browse-feed-dots--horizontal{
  position:static; transform:none; flex-direction:row; gap:7px; overflow-x:auto; max-width:160px;
  padding:8px 3px; flex-shrink:1;
}
.browse-feed-dots--horizontal button{ flex-shrink:0; transition:width .2s ease,background .2s ease; }
.browse-feed-dots--horizontal button[aria-current="true"]{ width:20px; height:7px; }
@media(hover:none){ body[data-view="browse"] .browse-command-actions{ opacity:1; visibility:visible; } }


.browse-command-actions{ pointer-events:auto; z-index:5; }

/* One sheen pass on hover only; ambient loops read as noise ("Decorative loops off"). */
.browse-command-actions > [data-browse-cart]{ position:relative; overflow:hidden; isolation:isolate; }
.browse-command-actions > [data-browse-cart]::after{
  content:""; position:absolute; inset:-40% -60%; pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,color-mix(in srgb,var(--ink) 20%,transparent) 50%,transparent 60%);
  transform:translateX(-100%); opacity:0;
}
.browse-command-actions > [data-browse-cart]:hover::after{ animation:browse-cart-shimmer .9s ease-out; }
@keyframes browse-cart-shimmer{
  0%{ transform:translateX(-100%); opacity:0; }
  15%{ opacity:1; }
  85%{ transform:translateX(100%); opacity:1; }
  100%{ transform:translateX(100%); opacity:0; }
}
@media(prefers-reduced-motion:reduce){
  .browse-command-actions > [data-browse-cart]::after{ animation:none!important; }
}

/* Browse has a floating brand and account controls, with no top panel seat. */
body[data-view="browse"]{ --top-h:0px; }
body[data-view="browse"] > .top-panel{ display:contents; }
body[data-view="browse"] > .top-panel::after{ content:none; }
body[data-view="browse"] .app-brand{ display:flex; gap:8px; width:auto; }
body[data-view="browse"] .app-brand__mark{ flex:none; width:38px; height:38px; }
body[data-view="browse"] .app-brand__wordmark{ display:block; position:relative; width:116px; height:24px; overflow:hidden; }
body[data-view="browse"] .app-brand__wordmark img{ position:absolute; width:145px; max-width:none; height:auto; left:-16px; top:-17px; }
body[data-view="browse"] .app-brand::before{ right:auto; width:34px; }
@media(max-width:700px){
  body[data-view="browse"] .app-brand{ gap:5px; }
  body[data-view="browse"] .app-brand__mark{ width:28px; height:28px; }
  body[data-view="browse"] .app-brand__wordmark{ width:87px; height:20px; }
  body[data-view="browse"] .app-brand__wordmark img{ width:109px; left:-12px; top:-12px; }
}

/* Cart mode reserves the whole frame for the object and its printer map. */
@media(max-width:360px){
  body[data-view="browse"] .top-panel__account-actions #workspaceAuth{ width:32px; min-width:32px; padding:0; }
  body[data-view="browse"] #workspaceAuth .profile-menu-trigger__label{ display:none; }
}
[data-browse-print-screen] .browse-categories{ grid-template-columns:0 minmax(0,1fr) 0; column-gap:0; padding-inline:0; }
[data-browse-print-screen] .browse-categories > .browse-category-bank,
[data-browse-print-screen] .browse-categories > .browse-side-face--left,
[data-browse-print-screen] .browse-edge-controls{ visibility:hidden; pointer-events:none; }
[data-browse-print-screen] .browse-side-face--right{ animation:browse-cart-map-enter .38s ease-out both; }
@keyframes browse-cart-map-enter{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:translateX(0); } }
@media(prefers-reduced-motion:reduce){ [data-browse-print-screen] .browse-side-face--right{ animation:none; } }

.browse-build__globe{ overscroll-behavior:contain; }
.browse-location-prompt{
  position:absolute; z-index:4; top:12%; left:10%; right:6%; text-align:center;
  pointer-events:none; opacity:0; color:var(--ink); text-shadow:0 2px 20px var(--surface);
}
.browse-location-prompt strong{ display:block; font:700 clamp(24px,3vw,48px)/1.1 var(--font); letter-spacing:-.035em; }
.browse-location-prompt span{ display:block; margin-top:10px; font:500 13px/1.5 var(--font); }
.browse-location-prompt.is-visible{ animation:browse-location-invite 7s ease both; }
@keyframes browse-location-invite{
  0%{ opacity:0; transform:translateY(18px); }
  12%,78%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(-8px); }
}
@media(prefers-reduced-motion:reduce){
  .browse-location-prompt.is-visible{ animation:none; opacity:1; }
}

.browse-build__group button[aria-pressed="true"],
.browse-build__sorts button[aria-pressed="true"]{ background:var(--accent-ink); border-color:var(--accent-ink); color:var(--on-accent-ink); }
.browse-build__shops button[aria-pressed="true"]{ border-color:#3b82f6; background:rgba(37,99,235,.18); }
.browse-side-toggle[aria-pressed="true"]{ background:var(--accent-ink); color:var(--on-accent-ink); }

/* Full-height side frames: only the padded arrow strips turn a panel over. */
body[data-view="browse"] .browse-categories{
  --browse-side-foot:var(--workspace-footer-height,88px);
  --browse-switch-height:30px;
  padding:12px 12px 0;
}
body[data-view="browse"] .browse-category-bank,
body[data-view="browse"] .browse-categories > .browse-side-face{
  margin-top:var(--browse-switch-height);
  margin-bottom:calc(var(--browse-side-foot) + var(--browse-switch-height));
  border-radius:0;
}
body[data-view="browse"] .browse-center-frame{
  border:1px solid #555; box-sizing:border-box;
}
.browse-side-switcher{
  grid-row:1; min-width:0; min-height:0; z-index:7;
  margin-bottom:var(--browse-side-foot); display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid #555; border-radius:18px;
  overflow:hidden; pointer-events:none;
}
.browse-side-switcher--left{ grid-column:1; }
.browse-side-switcher--right{ grid-column:3; }
.browse-side-switcher__arrow{
  flex:0 0 var(--browse-switch-height); width:100%; min-height:0; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:0 8px; border:0; background:color-mix(in srgb,var(--surface) 72%,transparent);
  color:var(--dim); font:500 10px/1.2 var(--font); cursor:pointer; pointer-events:auto; touch-action:manipulation;
}
.browse-side-switcher__arrow > [aria-hidden]{ font-size:19px; line-height:1; }
.browse-side-switcher__arrow:hover{ background:var(--accent-soft); color:var(--ink); }
.browse-side-switcher__arrow:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:-3px; }
.browse-categories[data-left-collapsed="true"] > .browse-side-switcher--left,
.browse-categories[data-right-collapsed="true"] > .browse-side-switcher--right{ visibility:hidden; }
.browse-category-list{ overscroll-behavior-y:contain; }
[data-browse-print-screen] .browse-categories > .browse-side-switcher{ display:none; }
@media(max-width:900px){
  body[data-view="browse"] .browse-categories{ --browse-side-foot:max(var(--workspace-footer-height,88px),calc(var(--browse-command-clearance,118px) + 60px)); }
}
@media(max-width:760px){
  body[data-view="browse"] .browse-categories{ padding-inline:8px; column-gap:8px; }
  .browse-categories[data-side-panels="object"] .browse-side-toggle{ top:0; }
  body[data-view="browse"] .browse-categories > .browse-side-face{
    height:auto; align-self:stretch; border:1px solid #555; border-radius:14px;
    background:var(--surface);
  }
  .browse-categories[data-side-panels="object"] > .browse-side-switcher{ border-color:transparent; box-shadow:none; }
  .browse-categories[data-side-panels="object"] > .browse-side-switcher .browse-side-switcher__arrow{ border-radius:12px; }
  body[data-view="browse"] .browse-categories[data-left-panel="object"][data-right-panel="object"] > .browse-side-face--left{
    align-self:start; height:calc((100% - var(--browse-side-foot) - 2 * var(--browse-switch-height)) / 2 - 6px); margin-bottom:0;
  }
  body[data-view="browse"] .browse-categories[data-left-panel="object"][data-right-panel="object"] > .browse-side-face--right{
    align-self:end; height:calc((100% - var(--browse-side-foot) - 2 * var(--browse-switch-height)) / 2 - 6px); margin-top:0;
  }
  .browse-categories[data-left-panel="object"][data-right-panel="object"] .browse-side__head{ padding:10px 44px 8px 14px; }
  .browse-categories[data-left-panel="object"][data-right-panel="object"] .browse-side__title{ font-size:14px; }
  .browse-categories[data-left-panel="object"][data-right-panel="object"] .browse-side__byline{ font-size:10px; }
  .browse-categories[data-left-panel="object"][data-right-panel="object"] .browse-build__globe{ flex-basis:110px; margin:0 12px 8px; }
  .browse-side-switcher__arrow [data-panel-switch-label]{ display:none; }
}
.browse-map-retry{ display:none; position:absolute; z-index:6; left:50%; top:62%; transform:translateX(-50%); border:0; border-radius:8px; padding:9px 16px; background:var(--accent-ink); color:var(--on-accent-ink); cursor:pointer; }
.browse-build__globe[data-state="error"] .browse-map-retry{ display:block; }
.browse-build__globe:not([data-state="ready"]) .browse-build__globe-note{ z-index:5; background:var(--surface); pointer-events:none; }

/* Load's center keeps the native Benchy and a locally served workflow movie. */
.load-design-switch{
  position:relative; z-index:6; display:flex; gap:4px; align-self:flex-start;
  padding:4px; margin-top:8px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface);
}
.load-design-switch button{
  padding:7px 12px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--dim); font:600 11px/1.2 var(--font); white-space:nowrap;
}
.load-design-switch button[aria-selected="true"]{ color:#fff; background:#2563eb; }
.load-design-switch button:focus-visible{ outline:2px solid #60a5fa; outline-offset:2px; }
.load-design-preview{ position:absolute; inset:212px 16px 132px; min-height:0; }
.load-design-preview > [role="tabpanel"]{ position:absolute; inset:0; }
.load-design-preview > [hidden]{ display:none; }
.load-design-preview .load-view__plate{ inset:0; width:auto; }
#loadSam3dPreview{ z-index:6; display:flex; align-items:center; justify-content:center; }
#loadSam3dPreview[hidden]{ display:none; }
.load-design-video{ display:block; width:100%; height:100%; object-fit:contain; border-radius:18px; background:#101010; }
.load-design-video-status{ position:absolute; inset:auto 16px 45px; padding:12px; color:white; background:#202020; border-radius:8px; font:12px/1.5 var(--font); }
.load-design-video-status[hidden]{ display:none; }
/* The columns reach the window edge; leave room for the floating composer. */
@media(min-width:901px) and (min-height:601px){
  .load-view__go{ bottom:88px; }
  .load-view__browse{ bottom:144px; }
}
.load-view__command-host > .command--load-intro::before{
  content:""; position:absolute; z-index:10; inset:-1px; padding:1.5px;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg,#69baff,#a78bfa,#eea0d5,#69baff);
  background-size:240% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:load-command-intro 2.5s ease-in-out 4;
}
@keyframes load-command-intro{
  0%,100%{ opacity:.3; background-position:0% 50%; }
  50%{ opacity:.8; background-position:100% 50%; }
}
@media(prefers-reduced-motion:reduce){
  .load-view__command-host > .command--load-intro::before{ animation:none; opacity:.5; }
}
:root[data-reduce-motion="true"] .load-view__command-host > .command--load-intro::before{ animation:none; opacity:.5; }
@media(max-width:900px),(max-height:600px){
  .load-view__door:last-of-type{ padding-bottom:100px; }
  .load-view__door:last-of-type .load-view__go{ bottom:88px; }
  .load-design-switch{ margin-top:4px; }
  .load-design-switch button{ padding:6px 9px; font-size:10px; }
  .load-design-preview{ inset:8px 12px 8px auto; width:min(38vw,290px); }
}
@media(max-width:520px),(max-height:420px){
  .load-view__doors{ overflow-y:auto; overscroll-behavior:contain; }
  .load-view__door{ flex:0 0 auto; min-height:170px; box-sizing:border-box; }
  .load-view__door:last-of-type{ min-height:250px; }
  .load-view__door:has(.load-design-preview){ min-height:470px; padding-right:20px; }
  .load-design-preview{ inset:144px 20px 42px; width:auto; }
  .load-design-preview .load-view__plate{ display:block; }
}

/* Selected-object offer stays beside its native feed navigation. */
.browse-center-offer{position:absolute;z-index:3;left:50%;bottom:119px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);text-align:center;color:var(--ink);font:500 12px/1.4 var(--font);}
.browse-center-price{display:flex;flex-direction:column;gap:3px;margin-bottom:12px;}
.browse-center-price>strong{font-size:16px;font-weight:650;}
.browse-center-price>span{font-size:11px;color:var(--dim);}
.browse-center-price small{font-size:10px;}
.browse-center-product{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 12px;border-radius:16px;background:color-mix(in srgb,var(--surface) 88%,transparent);}
.browse-center-product>strong{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:550;}
.browse-center-rating{white-space:nowrap;color:var(--accent-ink);font-size:11px;}
.browse-center-product button{border:0;border-left:1px solid color-mix(in srgb,var(--ink) 15%,transparent);padding:2px 0 2px 12px;background:transparent;color:var(--dim);font:inherit;font-size:11px;white-space:nowrap;cursor:pointer;}
.browse-center-product button:hover{color:var(--ink);}
.browse-center-product button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px;border-radius:3px;}
@media(max-width:600px){.browse-center-product{gap:8px;flex-wrap:wrap;}.browse-center-product>strong{max-width:155px;}.browse-center-product button{padding-left:8px;}}