/* ══════════════════════════════════════════════════════════════════
   hive-refresh.css — UI clean-up layer for 3Dhive Web Next
   Load AFTER assets/layout.css. Overrides only; nothing here is new UI.

   Covers: global tokens · Home (load view) · Browse (pfocus + strip +
   watchbar) · About/Contact · Settings. Design, Build, Cart, Seller and
   Chat inherit the token and control changes but have not had their own
   pass yet.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Scale tokens ─────────────────────────────────────────────── */
:root{
  /* type ramp: 28 / 21 / 17 / 15 / 13 / 12, plus 11 mono */
  /* Ratios preserve that ramp at Standard while the live Settings size
     preference can still enlarge the complete refresh layer. */
  --t-display:calc(var(--ui-base-font-size,13px) * 2.153846);
  --t-title:calc(var(--ui-base-font-size,13px) * 1.615385);
  --t-section:calc(var(--ui-base-font-size,13px) * 1.307692);
  --t-row:calc(var(--ui-base-font-size,13px) * 1.153846);
  --t-body:var(--ui-base-font-size,13px);
  --t-meta:calc(var(--ui-base-font-size,13px) * .923077);
  --t-eyebrow:calc(var(--ui-base-font-size,13px) * .846154);
  /* three weights */
  --w-regular:400; --w-medium:500; --w-semibold:600;
  /* space: 4 8 12 16 20 24 32 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  /* radii */
  --r-control:8px; --r-card:12px; --r-sheet:16px;
  /* gold: ink passes AA at 11-13px, fill stays decorative */
  --gold-ink:#a8630a; --gold-fill:#fff2e2;
  /* neutral text ramp that passes AA on surface, raised and slot */
  --meta:#667080; --label:#5f6773;
}
:root[data-theme="dark"]{
  --gold-ink:#f2a23a; --gold-fill:rgba(216,120,0,.2);
  --meta:#a2a8b2; --label:#b0b6bf;
}
/* one gold per role, everywhere */
.load-view{ --load-gold:var(--gold-ink); }
.pfocus{ --pf-gold:var(--gold-ink); --pf-gold-soft:var(--gold-fill); }
/* units, separators and captions are neutral, not gold */
.pfocus__section-title span:last-child{ color:var(--meta); }
.pfocus__section{ border-bottom-style:solid; border-bottom-color:var(--line-soft); }
.pfocus__head{ border-bottom-color:var(--line-soft); }
.pfocus__drawing,.pfocus__engagement span,.pfocus__analytics,.pfocus__chip,
.pfocus__rating,.pfocus__actions{ border-color:var(--line); }

/* ── 2. Home — load view ─────────────────────────────────────────── */
.load-view__door{ gap:var(--s-2); padding:56px var(--s-8) var(--s-8); }
/* hover no longer animates layout: no reflow of the doors you are reading */
.load-view__door:hover,.load-view__door:focus-within{ flex-grow:1; background:var(--surface-hover); }

.load-view__eyebrow{ gap:var(--s-2); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.14em; }
.load-view__eyebrow::after{ display:none; }               /* dashed rule removed */
.load-view__title{ font-size:var(--t-title); line-height:1.2; }
.load-view__blurb{ max-width:34ch; margin-top:0; color:#525a66; font-size:var(--t-body); line-height:1.5; }
:root[data-theme="dark"] .load-view__blurb{ color:var(--text); }
/* the gradient headline word becomes ordinary type; the sparkle goes */
.load-view__word{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; }
.load-view__word svg{ display:none; }

/* CTAs are visible pills, not hover-only captions */
.load-view__go{
  position:absolute;
  inset:auto auto var(--s-8) var(--s-8); z-index:5;
  display:inline-flex; align-items:center; gap:var(--s-2);
  height:32px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink);
  font:var(--w-semibold) var(--t-body)/1 var(--font);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.load-view__go::after{ content:"→"; color:var(--dim); font-weight:400; }
.load-view__door:hover .load-view__go,.load-view__go:focus-visible,.load-view__go:hover{
  border-color:#1f74ef; background:#1f74ef; color:#fff;
  box-shadow:0 8px 20px rgba(31,116,239,.28);
}
.load-view__door:hover .load-view__go::after,
.load-view__go:hover::after,
.load-view__go:focus-visible::after{ color:#fff; }
.load-view__go--print{ height:32px; }
/* JavaScript delegates blank-door clicks to the real CTA. Avoid an overlay:
   Build's Mapbox surface and Design's orbit surface must remain interactive. */

/* art frames on the 8-grid */
.load-view__browse{ left:var(--s-8); right:var(--s-8); top:168px; bottom:88px; gap:var(--s-2); }
.load-view__browse-cards{ gap:var(--s-2); }
.load-view__tile{ padding:var(--s-3); gap:var(--s-2); border-radius:var(--r-card); }
.load-view__tile figcaption,.load-view__asset figcaption{
  align-self:stretch; color:var(--meta); font:var(--w-medium) var(--t-meta)/1.4 var(--font); letter-spacing:0;
}
.load-view__mini-head{ padding-bottom:var(--s-1); border-bottom-color:var(--line-soft); color:var(--label); }
.load-view__mini-head b{ font-size:var(--t-body); }
.load-view__mini-row{ font:var(--w-medium) var(--t-body)/1 var(--font); letter-spacing:0; color:var(--text); }
.load-view__mini-row b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.load-view__ortho-view small{ color:var(--label); font-size:var(--t-eyebrow); }
/* a failed render stops pretending to load */
.load-view__asset[data-sheet-state="error"] .load-view__ortho-grid::after{ animation:none; background:none; }
.load-view__asset[data-sheet-state="error"] .load-view__ortho-grid{ outline:1px dashed var(--line); outline-offset:-1px; }

/* Design door: a plate skeleton holds the space until WebGL confirms */
.load-view__plate{ left:var(--s-8); right:var(--s-8); top:168px; bottom:88px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--raised); overflow:hidden; }
.load-view__plate::before{
  content:""; position:absolute; left:8%; right:8%; top:26%; bottom:12%;
  transform:perspective(420px) rotateX(58deg); transform-origin:50% 100%;
  border:1px solid rgba(148,156,168,.35);
  background:
    linear-gradient(90deg,transparent calc(50% - .6px),#dc2626 calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px)),
    linear-gradient(0deg,transparent calc(50% - .6px),#2563eb calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px)),
    repeating-linear-gradient(0deg,rgba(148,156,168,.34) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(90deg,rgba(148,156,168,.34) 0 1px,transparent 1px 16px);
  transition:opacity .28s ease;
}
.load-view__plate[data-real-plate="true"]::before{ opacity:0; }

/* Build door: the pill sits inside the map art and says something */
.load-view__map{ top:168px; }
.load-view__shops{
  right:var(--s-8); top:184px; height:32px; padding:0 var(--s-3); gap:var(--s-2);
  background:var(--surface); color:var(--ink);
  font:var(--w-medium) var(--t-meta)/1 var(--font);
  box-shadow:var(--shadow-sm); pointer-events:auto; cursor:pointer;
}
.load-view__shops:hover{ border-color:var(--accent); }
.load-view__shops::before{ background:#16865b; }
/* fallback nodes only stand in while there is no map at all */
.load-view__map[data-map-ready="true"] .load-view__node,
.load-view__map[data-map-state="loading"] .load-view__node{ display:none; }
.load-view__printer-card{ left:var(--s-8); bottom:80px; width:280px; padding:var(--s-3); gap:var(--s-3); border-radius:var(--r-card); }
.load-view__printer-card-copy strong{ font:var(--w-semibold) var(--t-body)/1.3 var(--font); }
.load-view__printer-card-copy span{ color:var(--meta); font:var(--w-medium) var(--t-meta)/1.3 var(--font); }

/* prompt row + account actions on the margin grid */
.load-view__prompt{ padding:0 var(--s-8); }
.load-view__signin,.top-panel__signin{ right:var(--s-8); top:var(--s-6); height:32px; padding:0 14px; border-radius:var(--r-control); font-size:var(--t-body); }
.top-panel__account-actions{ right:var(--s-8); top:var(--s-6); gap:var(--s-2); }
.top-panel__account-actions .top-panel__signin{ width:auto; height:32px; padding:0 14px; border-width:1px; border-radius:var(--r-control); font-size:var(--t-body); }
.top-panel__account-actions .top-panel__home{ width:32px; height:32px; flex-basis:32px; border-width:1px; border-radius:var(--r-control); }
.top-panel__account-actions .top-panel__home svg{ width:16px; height:16px; }
.load-view__about{ color:var(--meta); font-size:var(--t-meta); }
.load-view__notice{ right:var(--s-8); border-radius:var(--r-control); font-size:var(--t-meta); }

/* ── 3. The command panel ───────────────────────────────────────── */
.command{ zoom:.95; border-radius:14px; }                  /* match the Panels dock and its resize coordinate space */
.command__row{ height:54px; gap:var(--s-3); padding:0 var(--s-2) 0 var(--s-4); }
.command__mic{ display:none; }                             /* unwired control removed */
.command input,.command__ghost{ font-size:13px; }
@media (max-width:760px){ .command input,.command__ghost{ font-size:12.5px; } }
.ghost__go{ background:var(--slot); color:var(--label); font:var(--w-medium) var(--t-eyebrow)/1 var(--mono); letter-spacing:0; }
.command__add{ width:40px; height:40px; flex-basis:40px; border-radius:10px; }
.command__add[data-send="true"]{ background:var(--accent); color:#fff; }
.command__chat{ width:40px; height:40px; flex-basis:40px; border-radius:10px; }
.command__chat b{ background:#1f74ef; color:#fff; }
.command__cart-count,.top-panel__cart-count{ background:var(--accent); }
.command__chat b{ font-size:10px; }

/* ── 4. Browse — view strip, insights, rail, hints ──────────────── */
/* Keep the donor's rich tab previews. The base stylesheet owns their
   art/label lanes and hides the miniatures only at the compact breakpoint. */
.view-preview{ gap:2px; padding:0 var(--s-4); }
.view-preview[data-top-view="browse"]{ padding-left:64px; }
.view-preview__verb{ color:var(--gold-ink); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.14em; }
.view-preview:not([data-active="true"]) .view-preview__verb{ color:#8a6b3d; }
.view-preview__blurb{ font:var(--w-semibold) var(--t-row)/1.3 var(--font); letter-spacing:0; }
.view-preview[data-active="true"]{ background:var(--surface); }
.view-preview:disabled{ opacity:1; }
.view-preview[data-active="true"]::after{
  content:""; position:absolute; left:var(--s-4); right:var(--s-4); bottom:0; height:2px; background:var(--accent);
}
/* Inactive tabs leave the account cluster a clear lane. In Build itself, the
   active tab keeps its expanded left seam and reaches behind those higher-z
   controls to the right edge of the window. */
.view-preview-strip{ padding-right:280px; }
/* Blend into the fixed cart, Seller and account lane without weakening its
   opaque surface. The gradient lives entirely to the left of the reserved
   lane, so the controls stay on solid --surface in both themes. */
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"]) > .top-panel::before{
  content:""; position:fixed; z-index:75; top:0; right:0;
  --top-actions-lane:280px; --top-actions-fade:48px;
  width:calc(var(--top-actions-lane) + var(--top-actions-fade)); height:var(--top-h);
  background:linear-gradient(90deg,transparent 0,var(--surface) var(--top-actions-fade),var(--surface) 100%);
  pointer-events:none;
}
/* The donor header fixes each tab to the viewport, so flex-container padding
   alone cannot reserve that lane. Recompute the three fixed cells against the
   remaining width while preserving the active 50/25/25 proportions. */
body[data-view="browse"] .view-preview[data-top-view="browse"]{ left:0; width:calc(50% - 140px); }
body[data-view="browse"] .view-preview[data-top-view="design"]{ left:calc(50% - 140px); width:calc(25% - 70px); }
body[data-view="browse"] .view-preview[data-top-view="build"]{ left:calc(75% - 210px); width:calc(25% - 70px); }
body[data-view="design"] .view-preview[data-top-view="browse"]{ left:0; width:calc(25% - 70px); }
body[data-view="design"] .view-preview[data-top-view="design"]{ left:calc(25% - 70px); width:calc(50% - 140px); }
body[data-view="design"] .view-preview[data-top-view="build"]{ left:calc(75% - 210px); width:calc(25% - 70px); }
body[data-view="build"] .view-preview[data-top-view="browse"]{ left:0; width:calc(25% - 70px); }
body[data-view="build"] .view-preview[data-top-view="design"]{ left:calc(25% - 70px); width:calc(25% - 70px); }
body[data-view="build"] .view-preview[data-top-view="build"]{ left:calc(50% - 140px); width:calc(50% + 140px); }
/* Seller has no active workspace tab, so its three shared destinations divide
   the space before the cart, Seller, and Sign in controls evenly. */
body[data-view="seller"] .view-preview[data-top-view="browse"]{ left:0; width:calc(33.333333% - 93.333333px); }
body[data-view="seller"] .view-preview[data-top-view="design"]{ left:calc(33.333333% - 93.333333px); width:calc(33.333333% - 93.333333px); }
body[data-view="seller"] .view-preview[data-top-view="build"]{ left:calc(66.666667% - 186.666667px); width:calc(33.333333% - 93.333333px); }

.pfocus__panel{ box-shadow:none; border-right:1px solid var(--line); }
.pfocus__head{ padding:var(--s-4); }
.pfocus__heading strong{ font:var(--w-semibold) var(--t-row)/1.3 var(--font); letter-spacing:0; }
.pfocus__heading small{ color:var(--meta); font-size:var(--t-meta); }
.pfocus__body{ padding:0 var(--s-4) var(--s-4); }
.pfocus__section{ padding:var(--s-6) 0; }
.pfocus__section-title{ margin-bottom:var(--s-2); color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.14em; }
.pfocus__specs div{ font-size:var(--t-body); color:#525a66; }
.pfocus__engagement span{ padding:var(--s-3); border-radius:10px; background:var(--raised); }
.pfocus__engagement strong{ font-size:var(--t-section); }
.pfocus__engagement small{ color:var(--meta); font-size:var(--t-meta); letter-spacing:0; }
.pfocus__drawing span{ color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.12em; }
.pfocus__drawing-specs dt{ color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); }
.pfocus__drawing-specs dd{ font-size:var(--t-meta); }
/* range picker as one segmented track */
.pfocus__ranges{ gap:2px; padding:2px; border-radius:999px; background:var(--slot); }
.pfocus__range{ padding:var(--s-1) var(--s-2); color:var(--label); font:var(--w-medium) var(--t-eyebrow)/1 var(--font); letter-spacing:0; }
.pfocus__range[aria-pressed="true"]{ background:var(--surface); color:var(--ink); font-weight:var(--w-semibold); box-shadow:var(--shadow-sm); }

/* status chips and action chips stop looking alike */
.pfocus__title{ left:var(--s-6); top:var(--s-6); gap:var(--s-2); }
.pfocus__chips{ gap:var(--s-2); }
.pfocus__chip{ height:24px; padding:0 10px; display:inline-flex; align-items:center; border-color:transparent; background:var(--slot); color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.1em; }
.pfocus__chip--trend{ gap:7px; padding-inline:11px; border-color:var(--line); background:var(--surface); color:var(--ink); font:var(--w-medium) var(--t-meta)/1 var(--font); letter-spacing:0; text-transform:none; }
.pfocus__chip--trend::before{ content:attr(data-discovery-icon); flex:0 0 auto; font-size:12px; line-height:1; }
.pfocus__chip--trend::after{ content:"→"; margin-left:2px; color:var(--meta); }
.pfocus__chip--trend:disabled{ display:none; }             /* never ship a disabled chip */
.pfocus__title h1{ font-size:var(--t-title); }
.pfocus__creator{ font-size:var(--t-body); color:#525a66; }
.pfocus__avatar{ width:20px; height:20px; background:var(--gold-fill); }

/* The focused-object hint is shown only during the short onboarding window.
   Scatter keeps its separate gesture hint because the focused HUD is absent. */
.pfocus__hud{
  left:50%; bottom:120px; transform:translateX(-50%);
  max-width:min(520px,calc(100vw - 48px));
  height:28px; padding:0 10px; display:none; align-items:center; gap:var(--s-2);
  border-radius:var(--r-control); background:var(--slot); color:var(--meta);
  font:var(--w-medium) var(--t-meta)/1 var(--font); letter-spacing:0; text-transform:none;
  pointer-events:auto;
}
.pfocus[data-orbit-hint-state="visible"] .pfocus__hud{ display:inline-flex; }
.pfocus[data-hint-dismissed="true"] .pfocus__hud{ display:none; }
.pfocus[data-browse-scatter="true"] .pfocus__hud{ display:none; }
.hive-hint-close{ width:16px; height:16px; display:grid; place-items:center; border:0; border-radius:4px; background:none; color:var(--label); cursor:pointer; }
.hive-hint-close:hover{ background:var(--line); color:var(--ink); }

/* Keep the hint centred at the lower edge; visual object arrows stay hidden. */
.pfocus__object-nav{
  left:50%; right:auto; top:auto; bottom:80px; width:max-content; max-width:calc(100% - 48px); transform:translateX(-50%);
  height:auto; display:flex; align-items:center; justify-content:center; gap:var(--s-2);
}
.hive-object-guide{
  width:max-content; min-width:0; max-width:calc(100% - 48px);
  display:grid; justify-items:center; gap:5px;
}
.hive-object-guide .pfocus__hud{
  position:static; left:auto; bottom:auto; transform:none;
  max-width:100%; min-height:32px; height:auto; margin:0; box-sizing:border-box; padding:6px 10px;
  justify-content:center; line-height:1.35; text-align:center; white-space:normal;
}
.pfocus__object-step{ display:none; }
.pfocus__object-space:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
.pfocus[data-browse-scatter="true"] .pfocus__scatter-hint{ bottom:86px; }

body[data-view="browse"] .pfocus__object-nav{
  left:calc(var(--pf-left-w,var(--pf-side)) + 8px); right:calc(var(--pf-right-w) + 8px);
  width:auto; max-width:none; transform:none;
}
body[data-view="browse"] .pfocus__hud{
  left:50%; bottom:120px; transform:translateX(-50%);
}
body[data-view="browse"] .hive-object-guide .pfocus__hud{
  position:static; left:auto; bottom:auto; transform:none;
}
.pfocus__actions button{ width:32px; height:32px; }
.pfocus__rail-top{ right:var(--s-6); top:var(--s-6); }
.pfocus__boost{ height:32px; padding:0 var(--s-3); border-color:var(--line); background:var(--surface); color:var(--ink); font:var(--w-semibold) var(--t-body)/1 var(--font); }

/* category rail: the original emoji tools expanded with readable labels */
.pfocus{ --pf-rail-w:208px; }
.pfocus[data-right-rail-expanded="true"]{ --pf-rail-w:208px; }
.pfocus[data-market-rail-collapsed="true"]{ --pf-rail-w:52px; }
.market-rail{ padding:var(--s-2); box-shadow:none; }
.market-rail__label{ display:block; font:var(--w-regular) var(--t-body)/1 var(--font); }
.market-rail__tool{ flex:0 0 32px; height:32px; justify-content:flex-start; gap:var(--s-2); padding:0 var(--s-2); border-radius:var(--r-control); color:var(--text); }
.market-rail__tool[aria-pressed="true"] .market-rail__label{ font-weight:var(--w-semibold); }
.market-rail__more{ color:var(--meta); }
.market-rail__count{ position:static; margin-left:auto; min-width:auto; height:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--label); font:var(--w-semibold) var(--t-meta)/1 var(--font); font-variant-numeric:tabular-nums; }
.market-rail__divider{ margin:var(--s-2) var(--s-2); }
.market-rail__collapse{ flex:0 0 auto; display:grid; gap:3px; }
.market-rail__toggle{ width:100%; }
.pfocus[data-market-rail-collapsed="true"] .market-rail{ padding:7px 5px; }
.pfocus[data-market-rail-collapsed="true"] .market-rail__tool{ justify-content:center; gap:0; padding:0 7px; }
.pfocus[data-market-rail-collapsed="true"] .market-rail__label,
.pfocus[data-market-rail-collapsed="true"] .market-rail__count{ display:none; }
.pfocus[data-market-rail-collapsed="true"] .market-rail__emoji{ width:20px; flex-basis:20px; }
.workspace-edge-rail--right[data-market-rail-collapsed="true"] .market-rail{ padding:7px 5px; }
.workspace-edge-rail--right[data-market-rail-collapsed="true"] .market-rail__tool{ justify-content:center; gap:0; padding:0 7px; }
.workspace-edge-rail--right[data-market-rail-collapsed="true"] .market-rail__label,
.workspace-edge-rail--right[data-market-rail-collapsed="true"] .market-rail__count{ display:none; }
.workspace-edge-rail--right[data-market-rail-collapsed="true"] .market-rail__emoji{ width:20px; flex-basis:20px; }

/* ── 5. Workspace utility bar ────────────────────────────────────── */
.watchbar{ height:44px; flex-basis:44px; gap:var(--s-2); padding:0 var(--s-4); }
.watchbar__chip{ height:28px; min-width:28px; padding:0 var(--s-2); border-radius:var(--r-control); background:transparent; color:#525a66; }
.watchbar__deck[data-open="false"] .watchbar__chip + .watchbar__chip{ margin-left:var(--s-1); }
.watchbar__deck[data-open="false"] .watchbar__chip{ box-shadow:none; }
.watchbar__chip + .watchbar__chip{ margin-left:var(--s-1); }
.watchbar__chip:hover,.watchbar__chip:focus-visible{ background:var(--slot); color:var(--ink); border-color:transparent; }
.watchbar__chip[aria-pressed="true"]{ background:var(--slot); border-color:transparent; color:var(--ink); }
.watchbar__badge{ min-width:14px; height:14px; border-width:2px; background:var(--accent); font-size:9px; }
#watchbarAlerts .watchbar__badge{ background:#1f74ef; color:#fff; }
.watchbar__about{ color:var(--meta); font:var(--w-medium) var(--t-meta)/1 var(--font); }
.watchbar__sep{ height:16px; margin:0 var(--s-1); }
/* chips that belong to Design do not sit inert in Browse and Build */
body:is([data-view="browse"],[data-view="build"]) .watchbar__chip:is([data-watch-action="split"],[data-watch-action="saved"]){ display:none; }

/* ── 6. Settings ─────────────────────────────────────────────────── */
.workspace-settings{ border-radius:var(--r-sheet); }
.workspace-settings__header{
  position:relative; min-height:64px; padding:0 var(--s-4);
  grid-template-columns:minmax(0,1fr) 32px; align-items:center; column-gap:var(--s-3);
}
.workspace-settings__mark{ display:none; }                  /* the sheet title is enough */
.workspace-settings__header small{ display:none; }
.workspace-settings__header > span:not(.workspace-settings__mark){ min-width:0; grid-column:1; }
.workspace-settings__header h2{ font:var(--w-semibold) var(--t-title)/1.2 var(--font); letter-spacing:-.02em; }
.workspace-settings__close{ width:32px; height:32px; border-radius:var(--r-control); justify-self:end; align-self:center; }
.workspace-settings__scroll{ padding:var(--s-6); gap:var(--s-6); }
.workspace-settings__section{ padding:var(--s-5,20px); gap:var(--s-3); border-radius:var(--r-card); box-shadow:none; }
.workspace-settings__section > header{ grid-template-columns:minmax(0,1fr); gap:var(--s-1); }
.workspace-settings__ordinal{ display:none; }               /* preferences are not a sequence */
.workspace-settings__section h3{ font:var(--w-semibold) var(--t-section)/1.3 var(--font); }
.workspace-settings__section header p{ margin-top:var(--s-1); color:var(--meta); font:var(--w-regular) var(--t-body)/1.5 var(--font); }
/* rows, not cards inside cards */
.workspace-settings__field,.workspace-settings__toggle,.workspace-settings__sizes,
.workspace-settings__courses article,.workspace-settings__connector{
  min-height:56px; padding:var(--s-3) 0; border:0; border-top:1px solid var(--line-soft);
  border-radius:0; background:transparent; gap:var(--s-4);
}
.workspace-settings__courses{ gap:0; grid-template-columns:minmax(0,1fr); }
.workspace-settings__sizes{ grid-template-columns:minmax(0,1fr) repeat(3,minmax(70px,1fr)); align-items:center; gap:2px; }
.workspace-settings__sizes legend{ padding:0; }
.workspace-settings__field strong,.workspace-settings__toggle strong,
.workspace-settings__sizes legend strong,.workspace-settings__courses strong,
.workspace-settings__connector-copy strong{ font:var(--w-semibold) var(--t-row)/1.4 var(--font); }
.workspace-settings__field small,.workspace-settings__toggle small,
.workspace-settings__sizes legend small,.workspace-settings__courses small,
.workspace-settings__connector-copy small{ color:var(--meta); font:var(--w-regular) var(--t-meta)/1.4 var(--font); }
/* toggles: visible off state, one geometry */
.workspace-settings__toggle{ grid-template-columns:minmax(0,1fr) auto; }
.workspace-settings__toggle i{ width:40px; height:24px; background:#c7ccd4; box-shadow:inset 0 0 0 1px rgba(20,23,28,.08); }
:root[data-theme="dark"] .workspace-settings__toggle i{ background:#4a4f57; }
.workspace-settings__toggle i::after{ width:18px; height:18px; }
.workspace-settings__toggle input:checked + i::after{ transform:translateX(16px); }
/* size picker as a segmented control */
.workspace-settings__sizes label > span{ min-height:32px; padding:var(--s-2) 0; display:grid; place-items:center; border-radius:var(--r-control); font:var(--w-medium) var(--t-meta)/1 var(--font); }
.workspace-settings__sizes label b{ display:none; }
.workspace-settings__sizes input:checked + span{ font-weight:var(--w-semibold); }
/* courses: no text glyphs pretending to be icons */
.workspace-settings__courses article{ grid-template-columns:minmax(0,1fr) auto; }
.workspace-settings__courses article > span{ display:none; }
.workspace-settings__courses button,.workspace-settings__footer button{ min-height:32px; border-radius:var(--r-control); font:var(--w-semibold) var(--t-body)/1 var(--font); }
.workspace-settings__connector{ grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s-3); }
.workspace-settings__connector-icon{ width:40px; height:40px; border-radius:10px; box-shadow:none; }
.workspace-settings__connector-icon img{ width:24px; height:24px; }
.workspace-settings__connector-icon::after{ display:none; }  /* state moves into words */
.design-fusion-connection__status::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:var(--s-1);
  border-radius:50%; background:#98a0ad; vertical-align:middle;
}
.design-fusion-connection[data-state="connecting"] .design-fusion-connection__status::before,
.design-fusion-connection[data-state="context"] .design-fusion-connection__status::before{ background:#c97d0e; }
.design-fusion-connection[data-state="connected"] .design-fusion-connection__status::before{ background:#16865b; }
.design-fusion-connection[data-state="error"] .design-fusion-connection__status::before{ background:var(--danger); }
/* red belongs to the destructive action only */
.design-fusion-connection[data-state="connected"] .design-fusion-connection__button,
.design-fusion-connection[data-state="context"] .design-fusion-connection__button{ color:var(--ink); }
.workspace-settings__footer{ min-height:64px; padding:0 var(--s-4); grid-template-columns:minmax(0,1fr) auto auto; }
.workspace-settings__footer span{ display:none; }            /* moved into the header */
.workspace-settings__footer [data-settings-reset]{ justify-self:start; border-color:transparent; color:var(--meta); }
.workspace-settings__footer [value="done"]{ border-color:var(--line); background:var(--surface); color:var(--ink); }

/* ── 7. About / Contact ─────────────────────────────────────────── */
.about{ border-radius:var(--r-sheet); }
.about__chrome{ padding:0 var(--s-4); min-height:56px; }
.about__chrome-title{ margin-left:0; font:var(--w-semibold) var(--t-row)/1 var(--font); }
.about__close{ width:32px; height:32px; border-radius:var(--r-control); }
.about__page{ padding:var(--s-8) 40px 40px; gap:var(--s-8); }
.about__title{ font-size:var(--t-display); line-height:1.1; }
/* logotype as type: no clipped PNG stack */
.about__title--wordmark{ width:auto; font-size:var(--t-display); line-height:1.1; letter-spacing:-.025em; }
.about__title--wordmark::before{ content:"3D"; color:var(--gold-ink); }
.about__title--wordmark::after{ content:"hive"; color:var(--ink); }
.about__wordmark{ display:none; }
.about__lede{ max-width:68ch; font-size:var(--t-row); line-height:1.6; }
.about__steps{ gap:var(--s-4); }
.about__step{ padding:20px; gap:var(--s-2); border-radius:var(--r-card); }
.about__step::after{ display:none; }                         /* the one gradient rule */
.about__step-ord{ color:var(--gold-ink); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.14em; }
.about__step h2{ font-size:var(--t-section); line-height:1.3; }
.about__step p{ font-size:var(--t-body); line-height:1.55; }
.about__belief{ padding:20px; border-radius:var(--r-card); }
.about__belief h2{ color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.14em; }
.about__belief p{ font-size:var(--t-body); line-height:1.6; }
.about__figures{ display:none; }                             /* MOCK numbers, hidden until real */
.about__cta{ padding-top:var(--s-6); gap:var(--s-4); }
.about__cta p{ color:var(--meta); font:var(--w-regular) var(--t-body)/1.5 var(--font); }
.about__cta-button{ height:36px; padding:0 var(--s-4); border-radius:var(--r-control); font-size:var(--t-body); }
.about__contact-grid{ gap:var(--s-4); }
.about__contact-card{ padding:20px; border-radius:var(--r-card); gap:var(--s-1); }
.about__contact-label{ color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.14em; }
.about__contact-card strong{ font-size:var(--t-row); }
.about__contact-note{ color:var(--meta); font-size:var(--t-meta); }
.about__field > span{ color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.12em; }
.about__field input,.about__field select,.about__field textarea{ padding:var(--s-2) var(--s-3); border-radius:var(--r-control); font-size:var(--t-body); }

/* ── 8. Focus, everywhere, once ─────────────────────────────────── */
:where(.load-view__go,.load-view__signin,.top-panel__signin,.top-panel__home,
       .view-preview,.market-rail__tool,.watchbar__chip,.pfocus__chip--trend,
       .pfocus__object-step,.about__cta-button,.about__close,
       .workspace-settings__close,.load-view__shops):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.load-view__title-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── 9. Motion: one curve, decoration runs once ─────────────────── */
:root{ --ease-house:cubic-bezier(.22,.9,.24,1); }
.sect__pop,.pfocus__reviews,.market-rail__drawer,.watchbar-utility{ transition-timing-function:var(--ease-house); }
.pfocus{ transition:grid-template-columns .34s var(--ease-house); }
@media (prefers-reduced-motion:no-preference){
  .about[open]{ animation:workspace-settings-in .22s cubic-bezier(.16,1,.3,1); }
}

/* ── 10. Design — the CAD floor ─────────────────────────────────── */
/* 10a. Micro-copy: five uppercase treatments become one, and the pane
   title stops shouting the user's own file name back at them. */
.sketchpad__head{
  left:var(--s-3); top:var(--s-3); gap:var(--s-2);
  color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
}
.sketchpad__title{
  height:24px; padding:0 var(--s-2); margin:-5px var(--s-1) -5px -5px;
  border-radius:var(--r-control); color:var(--ink);
  font:var(--w-semibold) var(--t-body)/1 var(--font);
  letter-spacing:0; text-transform:none;            /* it is an input, not a label */
}
.sketchpad__mode{ color:var(--label); letter-spacing:.14em; }
.sketchpad__hint{
  left:var(--s-3); bottom:var(--s-3); color:var(--meta);
  font:var(--w-medium) var(--t-meta)/1 var(--font); letter-spacing:0; text-transform:none;
}
.design-workspace__model > .sketchpad__hint{ right:var(--s-3); }
.design-pane__file{
  right:var(--s-3); bottom:var(--s-3); color:var(--meta);
  font:var(--w-medium) var(--t-meta)/1 var(--font); letter-spacing:0;
}
.design-split-viewport__label{
  left:var(--s-3); top:var(--s-3); min-height:24px; padding:0 var(--s-2);
  color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono);
  letter-spacing:.14em; box-shadow:none;
}
.designgrid__dimensions span b{ color:var(--ink); font-size:var(--t-meta); font-variant-numeric:tabular-nums; }
.designgrid__dimensions span em{ color:var(--meta); }

/* 10b. One control geometry: 32px primary, 28px secondary, radius 8,
   16px glyphs at 1.5 stroke. Replaces 22 / 26 / 27 / 32 / 34 / 46px boxes,
   radii 5-12, and stroke widths 1.6-1.75 sitting side by side. */
.design-cad-toolbar{ height:40px; padding:var(--s-1) 0; }
.design-cad-toolbar__group{ gap:var(--s-1); }
.design-cad-toolbar__group + .design-cad-toolbar__group{ margin-left:var(--s-2); padding-left:var(--s-2); border-left-color:var(--line-soft); }
.design-cad-tool{
  width:32px; min-width:32px; height:32px; flex-basis:32px; border-radius:var(--r-control);
  background:transparent; box-shadow:none; color:#525a66;
}
.design-cad-tool svg{ width:16px; height:16px; flex-basis:16px; stroke-width:1.5; }
.design-cad-tool:hover:not(:disabled),.design-cad-tool:focus-visible:not(:disabled){
  transform:none; background:var(--slot); border-color:transparent; box-shadow:none; color:var(--ink);
}
.design-cad-tool[data-active="true"]{ background:var(--accent-soft); border-color:transparent; box-shadow:none; }
/* extrude is a normal tool until it is available, then it is the accent one */
.design-cad-tool[data-cad-action="extrude"]{ background:transparent; border-color:transparent; color:#525a66; }
.design-cad-tool[data-cad-action="extrude"]:not(:disabled){ background:var(--accent-soft); color:var(--accent-ink); }
.design-cad-tool[data-cad-action="extrude"] svg{ width:16px; height:16px; flex-basis:16px; }
.design-cad-tool:disabled{ opacity:.4; cursor:default; }
.design-cad-tool[data-cad-action="extrude"]:disabled{ background:transparent; border-color:transparent; }

.ttool{ width:32px; height:32px; flex-basis:32px; border-radius:var(--r-control); }
.ttool svg{ width:16px; height:16px; stroke-width:1.5; }
.rail__arrow,.rail__history{ width:32px; height:32px; flex-basis:32px; border-radius:var(--r-control); }
.rail__arrow svg{ width:16px; height:16px; }
.rail__n{ min-width:14px; height:14px; border-width:2px; background:var(--accent); font-size:9px; }
.design-pane__tool{ width:28px; height:28px; border-radius:var(--r-control); }
.design-pane__tool svg{ width:16px; height:16px; }
/* pane actions are not a hover secret */
.design-pane__controls{ opacity:1; visibility:visible; pointer-events:auto; transform:none; gap:var(--s-1); padding:0; background:transparent; backdrop-filter:none; }
.design-workspace[data-expanded-pane] .design-pane__controls{ box-shadow:none; }
.design-profile-button{ width:28px; height:28px; border-radius:50%; }
.design-profile-button svg{ width:16px; height:16px; }
.design-workspace__sketch > .sketchpad__viewcube{ width:40px; height:40px; border-radius:var(--r-control); box-shadow:var(--shadow-sm); }
.sketchpad__viewcube svg{ width:24px; height:24px; }
.sketchpad__viewcube:hover,.sketchpad__viewcube:focus-visible{ transform:none; box-shadow:var(--shadow-sm); }

/* 10c. Make 3D: the only gradient button in the product becomes the
   accent button every other primary action already uses. */
.sketchpad__make3d{
  top:56px; right:var(--s-3); height:32px; padding:0 14px; gap:var(--s-2);
  border:1px solid var(--accent); border-radius:var(--r-control);
  background:var(--accent); color:#fff; box-shadow:var(--shadow-sm);
  font:var(--w-semibold) var(--t-body)/1 var(--font); letter-spacing:0;
}
.sketchpad__make3d:hover{ transform:none; background:var(--accent-ink); box-shadow:var(--shadow-sm); }
.sketchpad__make3d svg{ width:16px; height:16px; }
.design-workspace__model > .sketchpad__make3d{ right:64px; }

/* 10d. Layers: a panel, not a badge collection */
.design-layers-panel{ left:var(--s-3); bottom:var(--s-6); border-radius:var(--r-card); box-shadow:var(--shadow-md); }
.design-layers-panel__head{
  height:40px; padding:0 var(--s-3); gap:var(--s-2);
  color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.14em;
}
.design-layers-panel__head > svg{ width:16px; height:16px; flex-basis:16px; }
.design-layers-panel__head [data-layer-count]{ color:var(--meta); font:var(--w-semibold) var(--t-meta)/1 var(--font); font-variant-numeric:tabular-nums; }
.design-layers-panel__toggle{ width:28px; height:28px; flex-basis:28px; border-radius:var(--r-control); box-shadow:none; }
.design-layers-panel__toggle svg{ width:16px; height:16px; }
.design-layers-panel__list{ padding:var(--s-2); gap:2px; }
.design-layer-row{ min-height:32px; border-radius:var(--r-control); font:var(--w-medium) var(--t-body)/1 var(--font); }
.design-layer-row__glyph{ width:20px; height:20px; color:#525a66; }   /* gold is not a file type */
.design-layer-row__glyph svg{ width:16px; height:16px; }
.design-layer-row__eye svg,.design-layer-row__remove svg{ width:16px; height:16px; }
.design-layer-row__eye,.design-layer-row__remove{ border-radius:var(--r-control); }

/* 10e. Design dock panels + profile panel */
.design-dock-panel{ border-radius:var(--r-card); }
.design-dock-panel__head{ color:var(--label); font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:.14em; }
.design-dock-panel__head > svg{ width:14px; height:14px; flex-basis:14px; color:var(--label); }
.design-dock-panel__action{ width:24px; height:24px; border-radius:6px; }
.design-dock-panel__action svg{ width:14px; height:14px; }
.design-dock-panel__setting{ min-height:32px; font-size:var(--t-body); }
.design-profile-panel{ border-radius:var(--r-sheet); }
.design-profile-panel__head{ min-height:56px; padding:var(--s-3); gap:var(--s-3); }
.design-profile-panel__avatar{ width:32px; height:32px; font:var(--w-semibold) var(--t-meta)/1 var(--font); letter-spacing:0; }
.design-profile-panel__copy strong{ font:var(--w-semibold) var(--t-row)/1.3 var(--font); letter-spacing:0; }
.design-profile-panel__copy span{ color:var(--meta); font:var(--w-regular) var(--t-meta)/1.3 var(--font); }
.design-profile-panel__close{ width:28px; height:28px; border-radius:var(--r-control); }
.design-profile-panel__close svg{ width:16px; height:16px; }
.design-profile-panel__tab{ min-height:32px; border-radius:var(--r-control); font:var(--w-medium) var(--t-body)/1 var(--font); }
.design-profile-panel__group{ min-height:28px; border-radius:999px; font:var(--w-medium) var(--t-meta)/1 var(--font); }

/* 10f. Arrangement rail (Design only) shares the control geometry */
.arail__group{ gap:var(--s-1); padding:var(--s-1); border-radius:var(--r-card); }
.sect__btn,.walltools__btn{ width:32px; height:32px; border-radius:var(--r-control); color:#525a66; }
.sect__btn > svg,.walltools__btn svg{ width:16px; height:16px; }
.sect__pop{ width:200px; padding:var(--s-3); border-radius:var(--r-card); }
.pop__head{ margin-bottom:var(--s-2); color:var(--meta); font-size:var(--t-meta); }
.pop__head strong{ color:var(--ink); font:var(--w-semibold) var(--t-body)/1 var(--font); }
.opts{ gap:var(--s-2); }
.opt{ height:36px; border-radius:var(--r-control); color:var(--label); }
.opt[aria-pressed="true"]{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent-ink); }
.sect__note{ margin-top:var(--s-2); color:var(--meta); font-size:var(--t-meta); line-height:1.45; }
.field__row{ margin-bottom:var(--s-1); font-size:var(--t-meta); color:var(--meta); }
.field__row b{ color:var(--ink); }
.sect__zoom{ font:var(--w-semibold) var(--t-eyebrow)/1 var(--mono); letter-spacing:0; }
/* the sticky note keeps its colour but joins the type scale */
.design-sticky-note__title{ font:var(--w-semibold) var(--t-body)/1.3 var(--font); }
.design-sticky-note__body{ font:var(--w-regular) var(--t-body)/1.5 var(--font); }

/* ── 11. Speed and finish ────────────────────────────────────────
   The app is a canvas product: every full-screen blur and 460ms layout
   animation is paid for in frames. This section sets one timing scale,
   one depth scale, and removes the effects that cost the most for the
   least. It goes last so it wins over anything above. */

/* 11a. Timing: 120 controls · 160 panels · 220 sheets · 340 spatial nav */
:root{
  --t-fast:120ms; --t-panel:160ms; --t-sheet:220ms; --t-nav:340ms;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:where(button,a,input,select,textarea,summary,[role="button"],[role="tab"],
  .ttool,.design-cad-tool,.watchbar__chip,.market-rail__tool,.sect__btn,
  .walltools__btn,.opt,.pfocus__chip,.pfocus__range,.pfocus__actions button,
  .design-pane__tool,.design-layer-row,.load-view__go,.load-view__shops){
  transition-duration:var(--t-fast) !important;
  transition-timing-function:var(--ease) !important;
}
:where(.sect__pop,.market-rail__drawer,.watchbar-utility,.watchbar-calendar,
  .pfocus__reviews,.pfocus__part-color,.design-profile-panel,.design-layers-panel,
  .command__log){
  transition-duration:var(--t-panel) !important;
  transition-timing-function:var(--ease) !important;
}
.workspace-settings[open],.about[open]{ animation-duration:var(--t-sheet); animation-timing-function:var(--ease); }
/* the one animation worth its length: spatial navigation */
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"]) .view-preview{
  transition:left var(--t-nav) var(--ease),width var(--t-nav) var(--ease),
             background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
/* doors stop animating layout entirely */
.load-view__door{ transition:background var(--t-fast) var(--ease); }
.load-view__art{ transition:opacity var(--t-panel) var(--ease); }

/* 11b. Depth: two shadows, no glass on the audited Home, Browse, Design,
   Settings and About surfaces. Build, checkout, Seller, Chat and Auth keep
   their owned effects until they receive their own visual pass. */
:is(.load-view,
    body[data-view="browse"] .shell,
    body[data-view="design"] .shell,
    .workspace-settings,.workspace-settings *,
    .about,.about *){
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
:root{
  --lift:0 1px 2px rgba(16,24,40,.06);
  --float:0 8px 24px -10px rgba(16,24,40,.28);
  --sheet:0 24px 64px -24px rgba(16,24,40,.34);
  --glass-surface:var(--surface); --glass-surface-strong:var(--surface); --glass-surface-soft:var(--surface);
}
:root[data-theme="dark"]{
  --lift:0 1px 2px rgba(0,0,0,.5);
  --float:0 8px 24px -10px rgba(0,0,0,.7);
  --sheet:0 24px 64px -24px rgba(0,0,0,.8);
}
:where(.command,.load-view__printer-card,.arail__group,.sect__pop,.design-layers-panel,
  .design-profile-panel,.market-rail__drawer,.watchbar-utility,.watchbar-calendar,
  .pfocus__part-color,.panel-camera-roll__nav button,.sketchpad__viewcube,
  .load-view__shops,.pfocus__object-step,.pfocus__actions){ box-shadow:var(--float); }
.workspace-settings,.about,.design-object-library__dialog,.pfanalytics__dialog{ box-shadow:var(--sheet); }
.pfocus__panel,.market-rail,.top-panel__home,.top-panel__signin,.design-layers-panel__toggle{ box-shadow:none; }
/* one hairline instead of a border plus an inset ring */
.design-cad-tool,.market-rail__tool,.watchbar__chip,.ttool{ box-shadow:none; }
/* the workspace edge is a line, not a 14px smear */
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"]) > .top-panel::after{
  height:1px; top:calc(var(--top-h) - 1px); background:var(--line); box-shadow:none;
}

/* 11c. One hover, one press, one disabled */
:where(.ttool,.design-cad-tool,.design-pane__tool,.watchbar__chip,.market-rail__tool,
  .sect__btn,.walltools__btn,.pfocus__actions button,.design-layers-panel__toggle,
  .design-profile-panel__close,.about__close,.workspace-settings__close):hover{
  background:var(--slot); color:var(--ink); border-color:transparent; transform:none;
}
:where(button,[role="button"]):active{ transform:none; }
:where(button,[role="button"]):disabled,:where(button,[role="button"])[aria-disabled="true"]{
  opacity:.4; box-shadow:none; cursor:default;
}
/* accent-tinted "active" is one treatment everywhere */
:where(.ttool[aria-pressed="true"],.design-cad-tool[data-active="true"],
  .design-pane__tool[aria-pressed="true"],.walltools__btn[aria-pressed="true"],
  .market-rail__tool[aria-pressed="true"],.watchbar__chip[aria-pressed="true"]){
  background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; box-shadow:none;
}

/* 11d. One badge, one number style */
:where(.watchbar__badge,.rail__n,.command__chat b,.top-panel__cart-count,.market-rail__count){
  font-variant-numeric:tabular-nums;
}
:where(.watchbar__badge,.rail__n,.command__chat b,.top-panel__cart-count){
  min-width:16px; height:16px; padding:0 4px; border:2px solid var(--surface); border-radius:999px;
  background:var(--accent); color:#fff; font:var(--w-semibold) 10px/1 var(--font); box-shadow:none;
}
.top-panel__cart-count{
  background:#1f74ef; color:#fff;
  box-shadow:0 3px 9px rgba(31,116,239,.32);
}
:root[data-theme="dark"] .top-panel__cart-count{
  background:#1f74ef; color:#fff;
  border-color:var(--surface); box-shadow:0 3px 9px rgba(31,116,239,.42);
}
:where(.pfocus__specs b,.pfocus__engagement strong,.designgrid__dimensions b,
  .field__row b,.sect__zoom,.pfocus__rating,.load-view__mini-row b){ font-variant-numeric:tabular-nums; }

/* 11e. Decorative loops off; feedback loops stay short */
.load-view__node[data-live="true"]::after,.load-view__shops::before{ animation:none; }
.market-rail__tool[data-market-drawer="favorites"][data-favorite-arrival="true"],
.market-rail__count[data-count-bump="true"],
.top-panel__cart[data-cart-bump] > svg,
.top-panel__cart[data-cart-bump] .top-panel__cart-count{ animation-duration:var(--t-sheet); }
.pfocus__boost[data-animate="true"],.pfocus__boost[data-animate="true"] .pfocus__boost-fire{ animation-duration:var(--t-sheet); }
.pfocus__boost:hover,.pfocus__boost:focus-visible{ transform:none; box-shadow:var(--float); }
.workspace-cart-flyer{ box-shadow:var(--float); border-width:1px; }
/* glows and coloured halos removed */
:where(.pfocus__object-step,.sketchpad__viewcube,.pfocus__chip--trend,.pfocus__rating,
  .load-view__signin,.top-panel__signin,.about__cta-button):is(:hover,:focus-visible){
  box-shadow:var(--float); transform:none;
}
.load-view__map[data-map-build-handoff="zooming"]::after{ animation-duration:var(--t-sheet); box-shadow:none; }
.load-view__node{ filter:none; }
/* Keep the header's animated bars/map on their base compositor path. */
.design-layers-panel{ will-change:auto; }

/* 11f. Density and rhythm: the last of the odd values */
.watchbar{ height:44px; flex-basis:44px; }
.dock{ gap:0; }
.panel{ border-radius:var(--r-card); }
.panel-strip{ gap:var(--s-2); }
.shell{ gap:var(--s-2); padding:var(--s-2); }
body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"]) > .shell{ padding:var(--top-h) 0 0; }
:root{ --gap:8px; }
/* scrollbars: thin, neutral, no thumb colour surprises */
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ border:3px solid transparent; border-radius:999px; background:var(--line); background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--dim); background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }
/* Browse keeps both side panels wheel-, touch-, and keyboard-scrollable while
   their internal tracks stay visually quiet. */
.pfocus__body,.pfocus__section[data-user-height="true"],.pfocus__reviews-list,
.pfocus__video-library .build-video-list,.market-rail__stack{
  scrollbar-width:none; -ms-overflow-style:none;
}
.pfocus__body::-webkit-scrollbar,
.pfocus__section[data-user-height="true"]::-webkit-scrollbar,
.pfocus__reviews-list::-webkit-scrollbar,
.pfocus__video-library .build-video-list::-webkit-scrollbar,
.market-rail__stack::-webkit-scrollbar{ width:0; height:0; display:none; }
/* type rendering, once, at the root */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
/* long copy reads better with pretty wrapping; labels never wrap */
:where(p,.about__lede,.load-view__blurb,.pfocus__review p){ text-wrap:pretty; }
:where(.view-preview__blurb,.market-rail__label,.design-layer-row__name,
  .pfocus__section-title,.workspace-settings__field strong){ text-wrap:nowrap; }

/* ── 12. Responsive compatibility ────────────────────────────────
   This layer loads after the base media queries, so repeat the structural
   compact rules it must not turn back into desktop geometry. */
@media (max-width:900px), (max-height:600px){
  .load-view__door{ padding:17px 22px; padding-right:min(42vw,330px); gap:3px; }
  .load-view__door:first-of-type{ padding-top:54px; }
  .load-view__art{ left:auto; right:0; top:0; bottom:0; width:min(40vw,310px); }
  .load-view__browse{ right:12px; top:8px; bottom:8px; grid-template-rows:1fr 1fr; gap:6px; }
  .load-view__browse-cards{ grid-template-rows:1fr; gap:6px; }
  .load-view__mini{ display:none; }
  .load-view__plate{ top:2px; bottom:2px; }
  .load-view__map{ top:0; }
  .load-view__shops{ top:36px; right:10px; }
  .load-view__go{ left:22px; bottom:17px; padding:0 12px; }
  .load-view__prompt{ grid-template-columns:1fr; padding:0 16px; }
  .load-view__command-host{ grid-column:1; }
  .load-view__about{ display:none; }
  .view-preview-strip{ padding-right:190px; }
  body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"]) > .top-panel::before{
    --top-actions-lane:190px; --top-actions-fade:36px;
  }
  body[data-view="seller"] .view-preview[data-top-view="browse"]{ left:0; width:calc(33.333333% - 63.333333px); }
  body[data-view="seller"] .view-preview[data-top-view="design"]{ left:calc(33.333333% - 63.333333px); width:calc(33.333333% - 63.333333px); }
  body[data-view="seller"] .view-preview[data-top-view="build"]{ left:calc(66.666667% - 126.666667px); width:calc(33.333333% - 63.333333px); }
  body[data-view="browse"] .pfocus{
    --pf-left-w:260px; --pf-print-w:240px; --pf-rail-w:120px;
  }
  .workspace-settings__sizes{ grid-template-columns:minmax(0,1fr) repeat(3,minmax(64px,1fr)); }
}
@media (max-width:520px), (max-height:420px){
  .load-view__door{ padding-right:20px; }
  .load-view__art,.load-view__shops,.load-view__printer-card{ display:none; }
  .load-view__title{ font-size:18px; }
  .load-view__go{ left:20px; bottom:10px; }
  .view-preview{ padding:0 10px; }
  .view-preview[data-top-view="browse"]{ padding-left:46px; }
  .view-preview__blurb{ display:none; }
  .view-preview-strip{ padding-right:148.8px; }
  body:is([data-view="browse"],[data-view="design"],[data-view="build"],[data-view="seller"]) > .top-panel::before{
    --top-actions-lane:148.8px; --top-actions-fade:24px;
  }
  body[data-view="seller"] .view-preview[data-top-view="browse"]{ left:0; width:calc(33.333333% - 49.6px); }
  body[data-view="seller"] .view-preview[data-top-view="design"]{ left:calc(33.333333% - 49.6px); width:calc(33.333333% - 49.6px); }
  body[data-view="seller"] .view-preview[data-top-view="build"]{ left:calc(66.666667% - 99.2px); width:calc(33.333333% - 49.6px); }
  body[data-view="browse"] .view-preview[data-top-view="browse"]{ left:0; width:calc(50% - 122px); }
  body[data-view="browse"] .view-preview[data-top-view="design"]{ left:calc(50% - 122px); width:calc(25% - 61px); }
  body[data-view="browse"] .view-preview[data-top-view="build"]{ left:calc(75% - 183px); width:calc(25% - 61px); }
  body[data-view="design"] .view-preview[data-top-view="browse"]{ left:0; width:calc(25% - 61px); }
  body[data-view="design"] .view-preview[data-top-view="design"]{ left:calc(25% - 61px); width:calc(50% - 122px); }
  body[data-view="design"] .view-preview[data-top-view="build"]{ left:calc(75% - 183px); width:calc(25% - 61px); }
  body[data-view="build"] .view-preview[data-top-view="browse"]{ left:0; width:calc(25% - 61px); }
  body[data-view="build"] .view-preview[data-top-view="design"]{ left:calc(25% - 61px); width:calc(25% - 61px); }
  body[data-view="build"] .view-preview[data-top-view="build"]{ left:calc(50% - 122px); width:calc(50% + 122px); }
  .workspace-settings__sizes{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .workspace-settings__sizes legend{ grid-column:1/-1; }
}

/* Keep the action cluster inside the header at every supported breakpoint. */
.top-panel__account-actions{top:calc((var(--top-h) - 32px)/2);right:16px;}
.top-panel__signin-short{display:none;}
@media (max-width:900px), (max-height:600px){
  .top-panel__account-actions{right:12px;gap:6px;}
  .top-panel__signin-full{display:none;}
  .top-panel__signin-short{display:inline;}
  .top-panel__account-actions .top-panel__signin{padding:0 12px;}
  body[data-view="browse"] .view-preview[data-top-view="browse"]{left:0;width:calc(50% - 95px);}
  body[data-view="browse"] .view-preview[data-top-view="design"]{left:calc(50% - 95px);width:calc(25% - 47.5px);}
  body[data-view="browse"] .view-preview[data-top-view="build"]{left:calc(75% - 142.5px);width:calc(25% - 47.5px);}
  body[data-view="design"] .view-preview[data-top-view="browse"]{left:0;width:calc(25% - 47.5px);}
  body[data-view="design"] .view-preview[data-top-view="design"]{left:calc(25% - 47.5px);width:calc(50% - 95px);}
  body[data-view="design"] .view-preview[data-top-view="build"]{left:calc(75% - 142.5px);width:calc(25% - 47.5px);}
  body[data-view="build"] .view-preview[data-top-view="browse"]{left:0;width:calc(25% - 47.5px);}
  body[data-view="build"] .view-preview[data-top-view="design"]{left:calc(25% - 47.5px);width:calc(25% - 47.5px);}
  body[data-view="build"] .view-preview[data-top-view="build"]{left:calc(50% - 95px);width:calc(50% + 95px);}
}
@media (max-width:520px), (max-height:420px){
  .top-panel__account-actions{right:8px;gap:6px;}
  .top-panel__account-actions .top-panel__signin{padding:0 8px;font-size:12px;}
  .view-preview__ord{display:none;}
  .view-preview__verb{font-size:11px;letter-spacing:.04em;}
  .view-preview[data-top-view="browse"]{padding-left:42px;}
  body[data-view="browse"] .view-preview[data-top-view="browse"]{left:0;width:calc(50% - 74.4px);}
  body[data-view="browse"] .view-preview[data-top-view="design"]{left:calc(50% - 74.4px);width:calc(25% - 37.2px);}
  body[data-view="browse"] .view-preview[data-top-view="build"]{left:calc(75% - 111.6px);width:calc(25% - 37.2px);}
  body[data-view="design"] .view-preview[data-top-view="browse"]{left:0;width:calc(25% - 37.2px);}
  body[data-view="design"] .view-preview[data-top-view="design"]{left:calc(25% - 37.2px);width:calc(50% - 74.4px);}
  body[data-view="design"] .view-preview[data-top-view="build"]{left:calc(75% - 111.6px);width:calc(25% - 37.2px);}
  body[data-view="build"] .view-preview[data-top-view="browse"]{left:0;width:calc(25% - 37.2px);}
  body[data-view="build"] .view-preview[data-top-view="design"]{left:calc(25% - 37.2px);width:calc(25% - 37.2px);}
  body[data-view="build"] .view-preview[data-top-view="build"]{left:calc(50% - 74.4px);width:calc(50% + 74.4px);}
}

/* Workspace scrolling belongs to the panels, never the fixed application frame. */
html:has(body[data-view]),body[data-view]{overflow:clip;}

/* Give preview artwork and navigation labels separate tracks. Absolute artwork
   used the whole tab width while label percentages excluded its left padding,
   so the Browse label could overlap the miniature next to the home logo. */
body[data-view] .view-preview{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-rows:1fr 1fr;column-gap:10px;
  container-type:inline-size;container-name:workspace-preview;
}
.view-preview__art{
  position:relative;inset:auto;grid-column:2;grid-row:1 / 3;
  width:auto;min-width:0;height:100%;
}
.view-preview__verb,.view-preview__blurb{
  grid-column:1;min-width:0;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.view-preview__verb{grid-row:1;align-self:end;}
.view-preview__blurb{grid-row:2;align-self:start;}
@container workspace-preview (max-width:220px){
  .view-preview__art{display:none;}
  .view-preview__verb,.view-preview__blurb{grid-column:1 / -1;}
}
@media (max-width:520px), (max-height:420px){
  .view-preview__verb{grid-row:1 / 3;align-self:center;}
  /* Compact navigation needs readable labels in all views. Expanding the
     active tab previously collapsed Browse beneath the persistent logo. */
  .view-preview{padding-left:6px;padding-right:6px;}
  .view-preview[data-top-view="browse"]{padding-left:38px;}
  body[data-view] .view-preview[data-top-view="browse"]{left:0;width:calc((100% - 148.8px)/3 + 24px);}
  body[data-view] .view-preview[data-top-view="design"]{left:calc((100% - 148.8px)/3 + 24px);width:calc((100% - 148.8px)/3 - 12px);}
  body[data-view] .view-preview[data-top-view="build"]{left:calc((100% - 148.8px)*2/3 + 12px);width:calc((100% - 148.8px)/3 - 12px);}
}