/* ============================================================================
   MILLION DOLLAR GALAXY · DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Presentation only. The simulation, Mass economy, physics, renderer, LOD and
   every server-authoritative rule live in galaxy.html and the backend and are
   untouched by this file.

   The galaxy canvas is the hero. Everything here is chrome that floats above
   it: dark navy-violet glass, soft luminous edges, generous negative space,
   and colour used sparingly so the starfield stays the brightest thing on
   screen.

   TOKEN CONTRACT
   --------------
   Legacy token names (--hud-*, --baseline-*) are retained as aliases because
   they are referenced ~212 times across this file and by galaxy-ui.css. They
   now resolve to the new system rather than the old cyan HUD palette, so the
   whole surface re-skins from this block alone.

   Two channel tokens carry the reskin:
     --edge-rgb    soft lavender-blue border/highlight channel
     --ink-rgb     deep navy glass channel
   Both are used as rgba(var(--token), alpha) so every existing opacity in the
   file is preserved exactly while the hue moves from cyan HUD to navy glass.
   ========================================================================== */

:root{
  /* -- channels ----------------------------------------------------------- */
  --ink-rgb:10,12,26;          /* deep navy glass base                        */
  --edge-rgb:150,158,214;      /* soft lavender-blue luminous edge            */
  --accent-rgb:90,218,242;     /* cool cyan/aqua, the single MDG accent       */
  --mint-rgb:82,240,174;       /* positive, used sparingly                    */

  /* -- space -------------------------------------------------------------- */
  --space-0:#050711;
  --space-1:#080a16;
  --space-2:#0b0d1c;

  /* -- surfaces (level 1 panel -> level 3 inset) -------------------------- */
  --surface-1:rgba(20,22,42,.86);      /* floating panel shell               */
  --surface-2:rgba(27,29,52,.88);      /* grouped section inside a panel     */
  --surface-3:rgba(40,42,69,.72);      /* inset interactive element          */
  --surface-4:rgba(52,53,83,.78);      /* hover / raised inset               */
  --surface-sunken:rgba(6,8,18,.62);   /* inputs, wells, chart beds          */

  /* -- text --------------------------------------------------------------- */
  --text-primary:#f4f4fa;
  --text-secondary:#a5a6ba;
  --text-tertiary:#85879e;

  /* -- accents ------------------------------------------------------------ */
  --accent:#5adaf2;
  --accent-bright:#62e1f5;
  --mint:#52f0ae;
  --success:#52f0ae;
  --warning:#f0c46a;
  --danger:#ff8b84;
  --rare:#c58cf5;               /* magenta/purple, rare secondary only       */

  /* -- borders ------------------------------------------------------------ */
  --border:rgba(var(--edge-rgb),.14);
  --border-strong:rgba(var(--edge-rgb),.26);
  --border-accent:rgba(var(--accent-rgb),.42);
  /* A slightly brighter upper edge reads as light falling on glass. */
  --edge-highlight:inset 0 1px 0 rgba(255,255,255,.055);

  /* -- radius ------------------------------------------------------------- */
  /* Concentric scale. Each step is exactly --r-nest larger than the previous,
     so an inner surface inset by --r-nest inside its parent produces visually
     concentric corners: outer radius = inner radius + padding. */
  --r-nest:6px;
  --r-xs:6px;                   /* swatches, micro chips                     */
  --r-sm:10px;                  /* inputs, small buttons                     */
  --r-md:16px;                  /* nested card (level 3)                     */
  --r-lg:22px;                  /* grouped section (level 2)                 */
  --r-xl:28px;                  /* panel shell (level 1)                     */
  --r-pill:999px;

  /* -- spacing ------------------------------------------------------------ */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;

  /* -- typography --------------------------------------------------------- */
  --font-ui:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  --fs-2xs:11px;                /* structural uppercase labels               */
  --fs-xs:12px;
  --fs-sm:13px;                 /* buttons                                   */
  --fs-md:14px;                 /* body / interface                          */
  --fs-lg:16px;                 /* panel titles                              */
  --fs-xl:20px;
  --fs-2xl:24px;                /* major modal titles, maximum               */
  --lh-tight:1.25;
  --lh-normal:1.5;
  --track-label:.07em;          /* letter-spacing for uppercase labels       */

  /* -- controls ----------------------------------------------------------- */
  --ctl-h:40px;                 /* desktop control height                    */
  --ctl-h-sm:32px;
  --ctl-h-touch:44px;           /* minimum touch target                      */

  /* -- shadows ------------------------------------------------------------ */
  --shadow-sm:0 2px 10px rgba(0,0,0,.34);
  --shadow-md:0 14px 36px -10px rgba(0,0,0,.58);
  --shadow-lg:0 30px 68px -18px rgba(0,0,0,.7);
  --glow-accent:0 0 0 1px rgba(var(--accent-rgb),.34),0 8px 28px -10px rgba(var(--accent-rgb),.3);

  /* -- motion ------------------------------------------------------------- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --t-fast:120ms;
  --t-base:170ms;
  --t-panel:200ms;

  /* -- z-index ------------------------------------------------------------ */
  --z-canvas:0;
  --z-overlay:1;
  --z-ticker:40;
  --z-chip:44;
  --z-panel:60;
  --z-shell:70;
  --z-modal:90;
  --z-toast:100;

  /* -- legacy aliases (resolve to the system above) ----------------------- */
  --hud-bg:var(--surface-1);
  --hud-bg-strong:rgba(var(--ink-rgb),.96);
  --hud-bg-soft:var(--surface-2);
  --hud-text:var(--text-primary);
  --hud-text-muted:var(--text-secondary);
  --hud-cyan:var(--accent);
  --hud-cyan-soft:rgba(var(--accent-rgb),.16);
  --hud-success:var(--success);
  --hud-warning:var(--warning);
  --hud-danger:var(--danger);
  --hud-border:var(--border);
  --hud-border-strong:var(--border-strong);
  --hud-radius-sm:var(--r-sm);
  --hud-radius-md:var(--r-md);
  --hud-radius-lg:var(--r-lg);
  --hud-gap-xs:var(--sp-1);
  --hud-gap-sm:var(--sp-2);
  --hud-gap-md:var(--sp-3);
  --hud-gap-lg:var(--sp-5);
  --hud-control-height:var(--ctl-h);
  --hud-transition-fast:var(--t-fast) var(--ease);
  --hud-transition-normal:var(--t-panel) var(--ease);
  --baseline-edge-x:clamp(14px,1.6vw,24px);
  --baseline-edge-y:clamp(14px,1.6vw,24px);
  --baseline-left:calc(var(--baseline-edge-x) + env(safe-area-inset-left));
  --baseline-right:calc(var(--baseline-edge-x) + env(safe-area-inset-right));
  --baseline-top:calc(var(--baseline-edge-y) + env(safe-area-inset-top));
  --baseline-ticker-bottom:calc(var(--baseline-top) + 48px);
  --baseline-bottom:calc(var(--baseline-edge-y) + env(safe-area-inset-bottom));
  --baseline-control-height:var(--hud-control-height);
  --baseline-control-radius:var(--r-sm);
  --baseline-control-font-size:var(--fs-sm);
  --baseline-control-pad-x:var(--sp-4);
  --baseline-cyan:var(--hud-cyan);
  --baseline-text:var(--hud-text);
  --baseline-dim:var(--hud-text-muted);
  --baseline-panel:var(--hud-bg);
  --baseline-panel-hover:var(--surface-2);
  --baseline-panel-active:var(--surface-3);
  --baseline-border:var(--hud-border);
  --baseline-border-hover:var(--hud-border-strong);
  --baseline-focus:rgba(var(--accent-rgb),.9);
  --baseline-transition:var(--hud-transition-fast);
}

/* Touch devices get the larger target everywhere the control height token is
   used, rather than a separate set of mobile-only sizes. */
@media (pointer:coarse){
  :root{--ctl-h:var(--ctl-h-touch);--ctl-h-sm:40px}
}

@media (prefers-reduced-motion:reduce){
  :root{--t-fast:1ms;--t-base:1ms;--t-panel:1ms}
  body.baseline-ui *,
  body.baseline-ui *::before,
  body.baseline-ui *::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;
  }
}

/* ============================================================================
   PRIMITIVES
   ----------------------------------------------------------------------------
   One coherent family of surfaces, controls and type. Everything below is
   scoped to body.baseline-ui so it cannot leak into admin/account pages that
   load galaxy-ui.css on its own.
   ========================================================================== */

/* -- focus ------------------------------------------------------------------
   A single visible focus treatment for every interactive element. Uses
   :focus-visible so pointer users never see a ring, keyboard users always do. */
body.baseline-ui :focus-visible{
  outline:2px solid rgba(var(--accent-rgb),.9);
  outline-offset:2px;
  border-radius:inherit;
}

/* -- structural labels ------------------------------------------------------
   Small uppercase keys (CURRENT MASS, OWNER, SYSTEM). Never used for prose. */
body.baseline-ui .u-label{
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-tertiary);
}

/* -- surfaces ---------------------------------------------------------------
   Three levels only. Keep nesting shallow: panel > section > inset. */
body.baseline-ui .u-surface-1{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg),var(--edge-highlight);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
}
body.baseline-ui .u-surface-2{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui .u-surface-3{
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}

/* -- buttons ----------------------------------------------------------------
   Secondary is the default: a dark raised surface with a soft edge. Primary
   and danger are opt-in. No control glows by default. */
body.baseline-ui .btn,
body.baseline-ui .u-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  height:var(--ctl-h);
  min-height:var(--ctl-h);
  padding:0 var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-3);
  color:var(--text-primary);
  font:600 var(--fs-sm)/1 var(--font-ui);
  letter-spacing:.01em;
  text-transform:none;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui .btn:hover,
  body.baseline-ui .u-btn:hover{
    background:var(--surface-4);
    border-color:var(--border-strong);
  }
}
body.baseline-ui .btn:active,
body.baseline-ui .u-btn:active{transform:translateY(.5px)}
body.baseline-ui .btn[disabled],
body.baseline-ui .u-btn[disabled],
body.baseline-ui .btn[aria-disabled="true"]{
  opacity:.42;
  cursor:not-allowed;
  pointer-events:none;
}
body.baseline-ui .btn--primary{
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  border-color:rgba(var(--accent-rgb),.5);
  color:#04121a;
  font-weight:700;
  box-shadow:0 6px 20px -10px rgba(var(--accent-rgb),.7),inset 0 1px 0 rgba(255,255,255,.28);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui .btn--primary:hover{filter:brightness(1.06);background:linear-gradient(180deg,var(--accent-bright),var(--accent))}
}
body.baseline-ui .btn--ghost{
  background:transparent;
  border-color:transparent;
  color:var(--text-secondary);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui .btn--ghost:hover{background:var(--surface-3);color:var(--text-primary)}
}
body.baseline-ui .btn--danger{
  background:rgba(255,139,132,.12);
  border-color:rgba(255,139,132,.36);
  color:var(--danger);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui .btn--danger:hover{background:rgba(255,139,132,.2);border-color:rgba(255,139,132,.55)}
}

/* -- form controls ----------------------------------------------------------
   Inset wells rather than outlined boxes, so fields read as recesses in the
   glass instead of more cards. */
body.baseline-ui .u-field,
body.baseline-ui input[type="text"],
body.baseline-ui input[type="search"],
body.baseline-ui input[type="number"],
body.baseline-ui input[type="email"],
body.baseline-ui input[type="password"],
body.baseline-ui textarea,
body.baseline-ui select{
  width:100%;
  min-height:var(--ctl-h);
  padding:0 var(--sp-3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-sunken);
  color:var(--text-primary);
  font:500 var(--fs-md)/1.4 var(--font-ui);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
body.baseline-ui textarea{padding:var(--sp-3);min-height:96px;resize:vertical;line-height:var(--lh-normal)}
body.baseline-ui input::placeholder,
body.baseline-ui textarea::placeholder{color:var(--text-tertiary)}
body.baseline-ui input:focus,
body.baseline-ui textarea:focus,
body.baseline-ui select:focus{
  outline:none;
  border-color:rgba(var(--accent-rgb),.55);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28),0 0 0 3px rgba(var(--accent-rgb),.14);
}

/* -- segmented control ------------------------------------------------------
   Concentric by construction: the track is padded by --r-nest and its radius
   is exactly one step above the segment radius. */
body.baseline-ui .u-segmented{
  display:flex;
  gap:var(--sp-1);
  padding:var(--r-nest);
  border:1px solid var(--border);
  border-radius:var(--r-lg);            /* = --r-md + --r-nest */
  background:var(--surface-sunken);
}
body.baseline-ui .u-segmented > *{
  flex:1 1 0;
  min-height:var(--ctl-h-sm);
  border:0;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--text-secondary);
  font:600 var(--fs-sm)/1 var(--font-ui);
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui .u-segmented > *:hover{color:var(--text-primary)}
}
body.baseline-ui .u-segmented > [aria-selected="true"],
body.baseline-ui .u-segmented > .active{
  background:var(--surface-4);
  color:var(--text-primary);
  box-shadow:var(--edge-highlight);
}

/* -- scrollbars -------------------------------------------------------------
   Quiet by default so scrollable panels do not gain a bright vertical stripe. */
body.baseline-ui *{scrollbar-width:thin;scrollbar-color:rgba(var(--edge-rgb),.24) transparent}
body.baseline-ui ::-webkit-scrollbar{width:10px;height:10px}
body.baseline-ui ::-webkit-scrollbar-track{background:transparent}
body.baseline-ui ::-webkit-scrollbar-thumb{
  background:rgba(var(--edge-rgb),.2);
  border:3px solid transparent;
  background-clip:content-box;
  border-radius:var(--r-pill);
}
body.baseline-ui ::-webkit-scrollbar-thumb:hover{background:rgba(var(--edge-rgb),.34);background-clip:content-box}

/* -- panel entrance ---------------------------------------------------------
   One short, non-bouncing rise. The galaxy already supplies the motion. */
@keyframes baselinePanelIn{
  from{opacity:0;transform:translateY(6px) scale(.994)}
  to{opacity:1;transform:none}
}
body.baseline-ui .u-panel-in{animation:baselinePanelIn var(--t-panel) var(--ease) both}

/* The renderer is the product surface. Keep the document locked to the visual
   viewport so legacy layout cannot create bands, scroll ranges or a smaller
   render area while the galaxy initializes or the viewport changes. */
html,
body{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:#000!important;
}
body.baseline-ui{
  position:fixed;
  inset:0;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.baseline-ui #gl,
body.baseline-ui #overlay{
  position:fixed!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  transform:none!important;
  background:#000;
  touch-action:none;
}
body.baseline-ui #gl{z-index:0;pointer-events:auto}
body.baseline-ui #overlay{z-index:1;pointer-events:none!important;background:transparent}

/* The existing loader is informational only. It stays centered over a pure
   black stage and can never become an invisible input-blocking layer. */
body.baseline-ui #loading{
  padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:#000!important;
  text-align:center;
  pointer-events:none!important;
}

/* Remove all persistent legacy/redesign chrome from the resting galaxy. The
   nodes remain in the DOM so their authoritative handlers can be reused. */
body.baseline-ui #galaxyHud .galaxyHudTop,
body.baseline-ui #emptyGalaxyPrompt,
body.baseline-ui #primaryGalaxyNav,
body.baseline-ui #galaxyActions,
body.baseline-ui #objectBar,
body.baseline-ui #detailDrawer,
body.baseline-ui #eventBanner,
body.baseline-ui #streamLegend,
body.baseline-ui #onboardingTour{
  display:none!important;
}

/* Keep the canonical search component available, but let the baseline shell
   be its only normal entry point. */
body.baseline-ui #galaxyHud{
  position:fixed!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  z-index:20!important;
}
body.baseline-ui #galaxyHud #searchPanel{pointer-events:auto!important}
body.baseline-ui #galaxyHud #syncAlert{pointer-events:auto}

/* Step 9 live activity channel. Keep the baseline brand clear on the left;
   the existing event feed, loop, and navigation handlers remain authoritative.
   Fluid opposing anchors let the rail consume every remaining screen pixel
   instead of stopping at a desktop-only max-width. */
body.baseline-ui #liveTicker{
  position:fixed!important;
  z-index:var(--z-ticker)!important;
  top:var(--baseline-top)!important;
  left:calc(var(--baseline-left) + 112px)!important;
  right:var(--baseline-right)!important;
  width:auto!important;
  max-width:none!important;
  min-width:0;
  height:var(--baseline-control-height)!important;
  margin:0!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r-sm)!important;
  background:var(--surface-1)!important;
  box-shadow:var(--shadow-sm),var(--edge-highlight)!important;
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  opacity:1;
  pointer-events:auto!important;
}
body.baseline-ui #liveTicker .tickerLiveToggle{
  min-width:64px;
  padding:0 var(--sp-3);
  border-right-color:var(--border);
  color:var(--mint);
  font:600 var(--fs-2xs)/1 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body.baseline-ui #liveTicker .tickerViewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}
body.baseline-ui #liveTicker .tickerItem{
  padding:0 var(--sp-3);
  color:var(--text-secondary);
  font:500 var(--fs-xs)/1 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #liveTicker .tickerItem b,
body.baseline-ui #liveTicker .tickerItem strong{color:var(--text-primary);font-weight:600}
body.baseline-ui #liveTicker .tickerItem em{display:none}
body.baseline-ui #liveTicker .tickerSep{padding:0 var(--sp-1);color:rgba(var(--edge-rgb),.28)}
body.baseline-ui #liveTicker .tickerActivityOpen{display:none}
body.baseline-ui #liveTicker.collapsed{width:62px!important;right:auto}
body.baseline-ui #liveTicker.collapsed .tickerLiveToggle{border-right:0}
body.baseline-ui #liveTicker.paused{border-color:rgba(var(--edge-rgb),.42)!important}

/* Restore the existing minimap as the fourth camera-dock tool. */
body.baseline-ui #hudDock{
  position:fixed!important;
  z-index:22!important;
  right:var(--baseline-right)!important;
  bottom:calc(var(--baseline-bottom) + var(--baseline-control-height) + 10px)!important;
  display:block!important;
  width:auto!important;
  pointer-events:none!important;
}
body.baseline-ui #hudDock .dockTools{display:none!important}
body.baseline-ui #hudDock .galaxyMinimap{
  width:282px;
  max-width:calc(100vw - 2 * var(--baseline-edge-x));
  max-height:calc(100dvh - var(--baseline-ticker-bottom) - var(--baseline-bottom) - var(--baseline-control-height) - 20px);
  margin:0;
  border-color:rgba(var(--edge-rgb),.34);
  border-radius:8px;
  background:rgba(var(--ink-rgb),.94);
  box-shadow:0 14px 32px rgba(0,0,0,.42),inset 0 0 24px rgba(var(--edge-rgb),.035);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:auto;
}
body.baseline-ui #hudDock .galaxyMinimap.open{display:block;animation:baseline-map-in 160ms ease-out}
@keyframes baseline-map-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
body.baseline-ui #hudDock .minimapBody{padding:10px}
body.baseline-ui #hudDock #minimapCanvas{width:260px;height:260px;max-width:100%;aspect-ratio:1;border-color:rgba(var(--edge-rgb),.24)}
body.baseline-ui #hudDock .minimapShortcuts{display:none}
body.baseline-ui #hudDock .minimapLegend{font-size:9px;gap:7px;flex-wrap:wrap}
body.baseline-ui #baselineMap[aria-expanded="true"]{border-color:var(--baseline-border-hover);background:var(--baseline-panel-active);color:#fff}
@media (max-width:700px) and (orientation:portrait){
  body.baseline-ui #hudDock{right:var(--baseline-edge-x)!important;max-width:calc(100vw - 2 * var(--baseline-edge-x))}
  body.baseline-ui #hudDock .galaxyMinimap{width:min(360px,calc(100vw - 2 * var(--baseline-edge-x)))}
  body.baseline-ui #hudDock #minimapCanvas{width:min(220px,100%);height:auto;margin:auto}
  body.baseline-ui #hudDock .minimapLegend{display:none}
}
@media (prefers-reduced-motion:reduce){body.baseline-ui #hudDock .galaxyMinimap.open{animation:none}}

/* Placement is a temporary spatial mode. Keep the galaxy clear and reuse the
   authoritative placement preview, prediction, validation, and commit logic. */
body.baseline-ui.placing #liveTicker,
body.baseline-ui.placing #baselineFind,
body.baseline-ui.placing #baselineCreate,
body.baseline-ui.placing #hudDock,
body.baseline-ui.placing #profilePanel{display:none!important}
body.baseline-ui.baseline-object-panel.placing #objectBar{display:none!important}
body.baseline-ui.placing .baseline-shell .baseline-brand{opacity:.45}

/* Contribution is a focused Mass transfer surface. */
body.baseline-ui #contribModal{
  align-items:center;
  justify-content:center;
  padding:clamp(16px,3vh,30px) clamp(16px,3vw,34px);
  background:rgba(var(--ink-rgb),.72);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.baseline-ui #contribModal>.buyPanel{
  width:min(500px,100%);
  max-height:min(760px,88dvh);
  overflow-y:auto;
  padding:18px 20px;
  border:1px solid rgba(var(--edge-rgb),.38);
  border-radius:9px;
  background:rgba(var(--ink-rgb),.97);
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 0 34px rgba(var(--edge-rgb),.035);
}
body.baseline-ui #contribModal .buySub{color:var(--text-secondary);line-height:1.4}
body.baseline-ui #contribModal .contribTargetCard{margin:12px 0;border-color:rgba(var(--edge-rgb),.24);background:rgba(var(--ink-rgb),.66)}
body.baseline-ui #contribModal .formGrid{display:block}
body.baseline-ui #contribModal .field{margin-top:12px}
body.baseline-ui #contribModal .field input{font-size:16px}
body.baseline-ui #contribModal .contribPresets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
body.baseline-ui #contribModal .contribPresets button{min-width:0;min-height:38px;padding:0 5px;border-radius:5px;font-size:10px}
body.baseline-ui #contribModal .contribPresets button.active{border-color:var(--baseline-border-hover);background:rgba(var(--edge-rgb),.72);color:#fff}
body.baseline-ui #contribModal .contribPreview{margin-top:12px;padding-top:12px;border-top:1px solid rgba(var(--edge-rgb),.16)}
body.baseline-ui #contribModal .buyActions{margin-top:14px}
body.baseline-ui #contribModal #contribConfirm{min-width:0}
@media (max-width:700px) and (orientation:portrait){
  body.baseline-ui #contribModal{align-items:flex-end;padding:0}
  body.baseline-ui #contribModal>.buyPanel{width:100%;max-width:none;max-height:88dvh;padding:14px 15px calc(14px + env(safe-area-inset-bottom));border-right:0;border-bottom:0;border-left:0;border-radius:9px 9px 0 0}
  body.baseline-ui #contribModal .contribPresets{grid-template-columns:repeat(3,minmax(0,1fr))}
}
body.baseline-ui.placing .placementHud{z-index:24;display:block}
body.baseline-ui.placing .placementModeBar{
  top:calc(var(--baseline-top) + 44px);
  width:min(420px,calc(100vw - 2 * var(--baseline-edge-x)));
  min-height:44px;
  gap:9px;
  padding:7px 9px;
  border:1px solid rgba(var(--edge-rgb),.32);
  border-radius:6px;
  background:rgba(var(--ink-rgb),.86);
  box-shadow:0 10px 28px rgba(0,0,0,.3);
}
body.baseline-ui.placing .placementModeBar > div:first-child b{display:none}
body.baseline-ui.placing .placementModeBar > div:first-child span{font-size:10px}
body.baseline-ui.placing .placementModeObject{max-width:170px;font-size:12px}
body.baseline-ui.placing .placementModeValidity{min-width:82px;padding:6px 8px;font-size:10px}
body.baseline-ui.placing .placementCard{
  top:auto;
  left:50%;
  bottom:calc(var(--baseline-bottom) + var(--baseline-control-height) + 58px);
  transform:translateX(-50%);
  width:min(360px,calc(100vw - 2 * var(--baseline-edge-x)));
  max-height:min(230px,38dvh);
  padding:11px 13px;
  border-color:rgba(var(--edge-rgb),.28);
  border-radius:7px;
  background:rgba(var(--ink-rgb),.9);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
body.baseline-ui.placing .placementCard .placementStep,
body.baseline-ui.placing .placementDetailsToggle{display:none}
body.baseline-ui.placing .placementCard .pTitle{margin-bottom:8px}
body.baseline-ui.placing .placementOrbitChoice{margin-bottom:7px;padding:6px;border-color:rgba(var(--edge-rgb),.2);background:rgba(var(--ink-rgb),.54)}
body.baseline-ui.placing .placementOrbitChoice>span{font-size:9px}
body.baseline-ui.placing .placementOrbitChoice button{min-height:30px;padding:4px 6px;font-size:9px}
body.baseline-ui.placing .placementOrbitChoice button.active{border-color:var(--baseline-border-hover);background:rgba(var(--edge-rgb),.55);box-shadow:none}
body.baseline-ui.placing .placementCompact{grid-template-columns:1.35fr .8fr;gap:5px}
body.baseline-ui.placing .placementCompactItem{padding:7px 8px;border-color:rgba(var(--edge-rgb),.14);background:rgba(var(--ink-rgb),.52)}
body.baseline-ui.placing .placementCompactItem b{font-size:11px}
body.baseline-ui.placing .placementStatus{margin-top:7px;padding:7px 8px}
body.baseline-ui.placing .placementCanvasHint{top:calc(var(--baseline-top) + 98px);font-size:10px}
body.baseline-ui.placing .placementTools{
  bottom:var(--baseline-bottom);
  width:min(420px,calc(100vw - 2 * var(--baseline-edge-x)));
  grid-template-columns:minmax(88px,1fr) auto minmax(132px,1.35fr);
  gap:6px;
  padding:5px;
  border-color:rgba(var(--edge-rgb),.32);
  border-radius:7px;
  background:rgba(var(--ink-rgb),.92);
  box-shadow:0 10px 28px rgba(0,0,0,.36);
}
body.baseline-ui.placing .placementTools button{min-height:40px}
body.baseline-ui.placing .placementTools .place{background:rgba(var(--ink-rgb),.86);color:var(--text-primary);box-shadow:none}
body.baseline-ui.placing .placementCameraTools{gap:2px}
body.baseline-ui.placing .placementCameraTools button{min-width:40px;width:40px}
body.baseline-ui.placing .placementModeValidity[data-state="ready"]{color:var(--success)}
body.baseline-ui.placing .placementStatus.pWarn,
body.baseline-ui.placing .placementStatus.pBad{border-color:rgba(240,196,106,.32)}
@media (max-width:700px) and (orientation:portrait){
  body.baseline-ui.placing .baseline-shell .baseline-brand{opacity:.3}
  body.baseline-ui.placing .placementModeBar{top:calc(var(--baseline-top) + 38px);width:calc(100vw - 2 * var(--baseline-edge-x));grid-template-columns:1fr auto}
  body.baseline-ui.placing .placementModeObject{grid-column:1/-1;grid-row:2;max-width:none;font-size:11px}
  body.baseline-ui.placing .placementCard{bottom:calc(var(--baseline-bottom) + 55px);max-height:min(176px,31dvh);width:calc(100vw - 2 * var(--baseline-edge-x))}
  body.baseline-ui.placing .placementCard .pTitle{margin-bottom:5px}
  body.baseline-ui.placing .placementCard .pTitle > i{width:26px;height:26px;flex-basis:26px}
  body.baseline-ui.placing .placementCompactItem:nth-child(3),
  body.baseline-ui.placing .placementCompactItem:nth-child(4){display:none}
  body.baseline-ui.placing .placementTools{width:calc(100vw - 2 * var(--baseline-edge-x));grid-template-columns:1fr auto 1.25fr}
  body.baseline-ui.placing .placementCanvasHint{display:none}
}
@media (max-height:560px) and (orientation:landscape){
  body.baseline-ui.placing .placementModeBar{top:var(--baseline-top);min-height:38px;padding:5px 8px}
  body.baseline-ui.placing .placementCard{bottom:calc(var(--baseline-bottom) + 50px);max-height:144px;padding:8px 10px}
  body.baseline-ui.placing .placementCard .placementStatus{display:none}
  body.baseline-ui.placing .placementTools button{min-height:36px}
}
@media (prefers-reduced-motion:reduce){body.baseline-ui.placing .placementModeBar,body.baseline-ui.placing .placementCard,body.baseline-ui.placing .placementTools{transition:none!important}}

/* My Galaxy is a focused personal index, not a second dashboard. */
body.baseline-ui #profilePanel{
  z-index:24!important;
  align-items:flex-start;
  justify-content:flex-start;
  padding:calc(var(--baseline-ticker-bottom) + 10px) var(--baseline-left) var(--baseline-bottom);
  background:rgba(var(--ink-rgb),.28);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.baseline-ui #profilePanel .gui-core-panel{
  width:min(430px,calc(100vw - var(--baseline-left) - var(--baseline-right)));
  max-height:calc(100dvh - var(--baseline-ticker-bottom) - var(--baseline-bottom) - 10px);
  padding:16px;
  border:1px solid rgba(var(--edge-rgb),.38);
  border-radius:8px;
  background:rgba(var(--ink-rgb),.94);
  box-shadow:0 14px 36px rgba(0,0,0,.42),inset 0 0 28px rgba(var(--edge-rgb),.035);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body.baseline-ui #profilePanel .gui-profile-content{min-height:0;padding-top:14px}
body.baseline-ui #profilePanel .gui-my-galaxy-hero{display:block}
body.baseline-ui #profilePanel .gui-profile-identity{gap:10px}
body.baseline-ui #profilePanel .gui-my-galaxy-actions{display:flex;gap:6px;margin-top:12px}
body.baseline-ui #profilePanel .gui-my-galaxy-actions button{flex:1;min-width:0;min-height:38px;padding-inline:8px}
body.baseline-ui #profilePanel .gui-profile-stats{display:block!important;margin-top:14px}
body.baseline-ui #profilePanel .gui-profile-stat.available{width:100%;padding:11px 12px;border-radius:5px}
body.baseline-ui #profilePanel .gui-profile-stat.available span{white-space:nowrap}
body.baseline-ui #profilePanel .gui-profile-stat.available b{overflow:visible;text-overflow:clip;white-space:nowrap}
body.baseline-ui #profilePanel .gui-profile-tabs{margin:14px 0 10px}
body.baseline-ui #profilePanel .gui-profile-tabs button{min-height:40px;padding-inline:11px;border-radius:5px}
body.baseline-ui #profilePanel .gui-profile-objects{grid-template-columns:1fr;gap:0}
body.baseline-ui #profilePanel .gui-profile-objects .gui-object-result{min-height:68px;padding:10px 2px;border:0;border-top:1px solid rgba(var(--edge-rgb),.15);border-radius:0;background:transparent}
body.baseline-ui #profilePanel .gui-profile-objects .gui-object-result:first-child{border-top:0}
body.baseline-ui #profilePanel .gui-profile-objects .gui-object-result:hover,
body.baseline-ui #profilePanel .gui-profile-objects .gui-object-result:focus-visible{background:rgba(var(--ink-rgb),.18);outline:0}
body.baseline-ui #profilePanel .gui-profile-section-head{margin-top:8px}
body.baseline-ui #profilePanel .gui-profile-section-head span{max-width:34ch}
body.baseline-ui #profilePanel .gui-empty-state{padding:24px 8px}

@media (max-width:700px) and (orientation:portrait){
  body.baseline-ui #profilePanel{align-items:flex-end;padding:0;background:rgba(var(--ink-rgb),.34)}
  body.baseline-ui #profilePanel .gui-core-panel{width:100%;max-width:none;max-height:88dvh;padding:14px 15px calc(14px + env(safe-area-inset-bottom));border-right:0;border-bottom:0;border-left:0;border-radius:8px 8px 0 0}
}
body.baseline-ui .top .search{
  position:fixed!important;
  left:var(--baseline-left)!important;
  right:auto!important;
  top:auto!important;
  bottom:calc(var(--baseline-bottom) + var(--baseline-control-height) + 10px)!important;
  width:min(360px,calc(100vw - var(--baseline-left) - var(--baseline-right)))!important;
  max-height:min(400px,calc(100dvh - var(--baseline-top) - var(--baseline-bottom) - var(--baseline-control-height) - 20px))!important;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  margin:0!important;
  padding:12px!important;
  overflow:hidden!important;
  transform:none!important;
  border:1px solid var(--baseline-border)!important;
  border-radius:8px!important;
  background:rgba(var(--ink-rgb),.94)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.5)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  animation:baseline-find-in 150ms ease-out!important;
}
body.baseline-ui .top .search.collapsed{display:none!important}
@keyframes baseline-find-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
body.baseline-ui #searchPanel .gui-search-head{
  flex:0 0 auto;
  align-items:center;
  padding-bottom:9px;
  border-bottom:1px solid rgba(var(--edge-rgb),.16);
}
body.baseline-ui #searchPanel .gui-search-head>div{gap:2px}
body.baseline-ui #searchPanel .gui-search-head span{
  color:var(--text-tertiary);
  font:600 10px/1.2 var(--font-ui);
  letter-spacing:.12em;
}
body.baseline-ui #searchPanel .gui-search-head b{
  color:var(--text-primary);
  font:600 var(--fs-lg)/1.2 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #searchPanel #searchClose{
  width:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-3);
  color:transparent;                 /* the label is replaced by a glyph      */
  font-size:0;
  position:relative;
}
body.baseline-ui #searchPanel #searchClose::before{
  content:"×";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--text-secondary);
  font-size:20px;
  line-height:1;
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui #searchPanel #searchClose:hover{background:var(--surface-4);border-color:var(--border-strong)}
  body.baseline-ui #searchPanel #searchClose:hover::before{color:var(--text-primary)}
}
body.baseline-ui #searchPanel .gui-search-input{flex:0 0 auto;gap:7px;margin-top:10px}
body.baseline-ui #searchPanel .gui-search-input input{
  min-height:44px;
  padding:0 12px;
  border:1px solid rgba(var(--edge-rgb),.25);
  border-radius:5px;
  background:rgba(1,7,12,.82);
  color:var(--text-primary);
  font-size:14px;
}
body.baseline-ui #searchPanel .gui-search-input input:focus{
  border-color:var(--baseline-border-hover);
  outline:2px solid rgba(var(--edge-rgb),.14);
  outline-offset:1px;
}
body.baseline-ui #searchPanel #searchBtn{
  flex:0 0 44px;
  width:44px;
  min-width:44px;
  min-height:44px;
  border-color:rgba(var(--edge-rgb),.38);
  border-radius:5px;
  background:rgba(14,53,70,.82);
}
body.baseline-ui #searchPanel .gui-search-hints{display:none!important}
body.baseline-ui #searchPanel .gui-search-status{
  flex:0 0 auto;
  min-height:27px;
  padding:9px 2px 6px;
  color:#87a1b3;
  font-size:11px;
  line-height:1.35;
}
body.baseline-ui #searchPanel .gui-search-status.loading{color:var(--baseline-cyan)}
body.baseline-ui #searchPanel .gui-search-status.error{color:#ff9f9a}
body.baseline-ui #searchPanel .gui-search-results{
  flex:1 1 auto;
  min-height:0;
  max-height:306px;
  display:grid;
  gap:0;
  padding:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--edge-rgb),.38) transparent;
}
body.baseline-ui #searchPanel .gui-search-result{
  width:100%;
  min-width:0;
  min-height:62px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0;
  padding:9px 5px;
  text-align:left;
  border:0;
  border-top:1px solid rgba(var(--edge-rgb),.13);
  border-radius:0;
  background:transparent;
  color:var(--baseline-text);
  box-shadow:none;
}
body.baseline-ui #searchPanel .gui-search-result:first-child{border-top-color:rgba(var(--edge-rgb),.2)}
body.baseline-ui #searchPanel .gui-search-result:hover,
body.baseline-ui #searchPanel .gui-search-result:focus-visible{
  background:rgba(var(--ink-rgb),.22);
  outline:0;
}
body.baseline-ui #searchPanel .gui-search-result>.resultOrb{
  width:28px;
  height:28px;
  border:1px solid rgba(220,244,255,.38);
  border-radius:50%;
  box-shadow:0 0 10px color-mix(in srgb,currentColor 22%,transparent);
}
body.baseline-ui #searchPanel .gui-search-result-copy{display:block;min-width:0}
body.baseline-ui #searchPanel .gui-search-result-copy>b,
body.baseline-ui #searchPanel .gui-search-result-copy>span,
body.baseline-ui #searchPanel .gui-search-result-copy>small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.baseline-ui #searchPanel .gui-search-result-copy>b{color:var(--text-primary);font-size:14px;line-height:1.3}
body.baseline-ui #searchPanel .gui-search-result-copy>span{margin-top:2px;color:#9ab4c5;font-size:11px;line-height:1.3}
body.baseline-ui #searchPanel .gui-search-result-copy>small{margin-top:2px;color:#66889d;font-size:10px;line-height:1.25}
body.baseline-ui #searchPanel .gui-search-result-type{
  align-self:start;
  margin-top:3px;
  color:#78abc0;
  font:600 9px/1.2 var(--font-ui);
  letter-spacing:.08em;
  font-style:normal;
}
body.baseline-ui #searchPanel .gui-search-result.is-legacy{opacity:.72}

/* Pure baseline anchors ---------------------------------------------------- */
.baseline-shell{
  position:fixed;
  inset:0;
  z-index:22;
  pointer-events:none;
  color:var(--baseline-text);
  font-size:var(--baseline-control-font-size);
}
/* Anchor controls read as quiet glass pills, not terminal buttons. The old
   monospace/uppercase treatment made the resting galaxy feel like a developer
   tool; sans-serif with real sentence case is the house voice now. Monospace is
   reserved for numeric/ID data where column alignment actually helps. */
.baseline-shell button{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  height:var(--baseline-control-height);
  min-height:var(--baseline-control-height);
  border:1px solid var(--baseline-border);
  border-radius:var(--baseline-control-radius);
  background:var(--baseline-panel);
  color:var(--baseline-text);
  padding:0 var(--baseline-control-pad-x);
  font:600 var(--baseline-control-font-size)/1 var(--font-ui);
  letter-spacing:.01em;
  text-transform:none;
  box-shadow:var(--shadow-sm),var(--edge-highlight);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  cursor:pointer;
  pointer-events:auto;
  transition:border-color var(--baseline-transition),background var(--baseline-transition),color var(--baseline-transition),opacity var(--baseline-transition);
}
.baseline-shell button:focus-visible{
  border-color:var(--baseline-focus);
  background:var(--baseline-panel-hover);
  color:var(--text-primary);
  outline:2px solid var(--baseline-focus);
  outline-offset:2px;
}
.baseline-shell button:active,
.baseline-shell button[aria-expanded="true"]{
  border-color:var(--border-accent);
  background:var(--baseline-panel-active);
  color:var(--text-primary);
  transform:none;
}
@media (hover:hover) and (pointer:fine){
  .baseline-shell button:hover{
    border-color:var(--baseline-border-hover);
    background:var(--baseline-panel-hover);
    color:var(--text-primary);
  }
}
.baseline-shell .baseline-brand{
  position:absolute;
  top:var(--baseline-top);
  left:var(--baseline-left);
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--baseline-cyan);
  pointer-events:none;
}
.baseline-shell .baseline-menu-button{
  width:44px;
  min-width:44px;
  padding:0;
  color:var(--baseline-cyan);
}
.baseline-wordmark{
  color:var(--baseline-text);
  font:700 var(--fs-md)/1 var(--font-ui);
  letter-spacing:.16em;
  user-select:none;
  pointer-events:none;
}
.baseline-shell .baseline-find{
  position:absolute;
  left:var(--baseline-left);
  bottom:var(--baseline-bottom);
  min-width:44px;
  padding:0;
}
.baseline-icon{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.baseline-create-wrap{
  position:absolute;
  left:50%;
  bottom:var(--baseline-bottom);
  transform:translateX(-50%);
  pointer-events:none;
}
/* Create is the one primary action in the resting galaxy, so it is the only
   filled accent control on screen. Everything else stays quiet glass. */
.baseline-shell .baseline-create{
  min-width:132px;
  padding:0 var(--sp-6);
  border-color:rgba(var(--accent-rgb),.5);
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  color:#04121a;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 10px 30px -12px rgba(var(--accent-rgb),.75),inset 0 1px 0 rgba(255,255,255,.3);
}
@media (hover:hover) and (pointer:fine){
  .baseline-shell .baseline-create:hover{
    background:linear-gradient(180deg,var(--accent-bright),var(--accent));
    border-color:rgba(var(--accent-rgb),.7);
    color:#04121a;
    filter:brightness(1.06);
  }
}
.baseline-shell .baseline-create:active{
  background:linear-gradient(180deg,var(--accent),var(--accent));
  color:#04121a;
}
.baseline-camera{
  position:absolute;
  right:var(--baseline-right);
  bottom:var(--baseline-bottom);
  display:flex;
  gap:0;
  overflow:hidden;
  border:1px solid var(--baseline-border);
  border-radius:var(--baseline-control-radius);
  background:var(--baseline-panel);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:auto;
}
.baseline-camera button{
  min-width:44px;
  padding:0 11px;
  border:0;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.baseline-camera button + button{border-left:1px solid var(--baseline-border)}
.baseline-camera button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--baseline-focus)}
.baseline-camera .baseline-fit{min-width:56px;color:#fff}

/* Selected object panel ---------------------------------------------------
   The existing objectBar remains the authoritative selection surface. The
   baseline layer replaces only its presentation and keeps the full inspector
   and legacy action row hidden. */
body.baseline-ui.baseline-object-panel #objectBar{
  --baseline-object-panel-x:18px;
  --baseline-object-panel-y:70px;
  position:fixed;
  z-index:23;
  top:0;
  left:0;
  right:auto;
  bottom:auto;
  width:clamp(280px,25vw,340px);
  min-width:0;
  max-width:calc(100vw - 2 * var(--baseline-edge-x));
  max-height:var(--baseline-object-panel-max-height,calc(100dvh - var(--baseline-top) - var(--baseline-bottom) - var(--baseline-control-height) - 18px));
  box-sizing:border-box;
  display:block!important;
  padding:0;
  border:1px solid rgba(var(--edge-rgb),.38);
  border-radius:8px;
  background:rgba(var(--ink-rgb),.88);
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 0 28px rgba(var(--edge-rgb),.035);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transform:translate3d(var(--baseline-object-panel-x),var(--baseline-object-panel-y),0);
  transition:opacity 160ms ease,border-color 160ms ease;
  will-change:transform;
}
body.baseline-ui.baseline-object-panel #objectBar::before,
body.baseline-ui.baseline-object-panel #objectBar::after{
  content:"";
  position:absolute;
  z-index:1;
  width:22px;
  height:7px;
  pointer-events:none;
}
body.baseline-ui.baseline-object-panel #objectBar::before{
  top:-1px;
  left:-1px;
  border-top:1px solid var(--baseline-cyan);
  border-left:1px solid var(--baseline-cyan);
}
body.baseline-ui.baseline-object-panel #objectBar::after{
  right:-1px;
  bottom:-1px;
  border-right:1px solid var(--baseline-cyan);
  border-bottom:1px solid var(--baseline-cyan);
}
body.baseline-ui.baseline-object-panel #objectBar.show{
  opacity:1;
  pointer-events:auto;
}
body.baseline-ui.baseline-object-panel #objectBar .navTrail,
body.baseline-ui.baseline-object-panel #objectBar .peekBody{display:none!important}
.baselineObjectCard{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  max-height:inherit;
  /* Level-1 shell padding. The inner mass block uses --r-lg and is inset by
     --r-nest, so its corners stay concentric with the panel's --r-xl. */
  padding:var(--sp-5);
  color:var(--baseline-text);
  font-size:var(--fs-md);
}
.baselineObjectHeader{
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px;
  align-items:start;
  gap:12px;
  min-width:0;
}
@media (min-width:701px), (orientation:landscape){
  body.baseline-ui.baseline-object-panel #objectBar .baselineObjectHeader{cursor:grab}
  body.baseline-ui.baseline-object-panel #objectBar.is-dragging .baselineObjectHeader{cursor:grabbing;user-select:none}
}
.baselineObjectHeader>div{display:flex;min-width:0;flex-direction:column;gap:5px}
.baselineObjectHeader b{
  display:-webkit-box;
  overflow:hidden;
  color:var(--text-primary);
  font:650 clamp(18px,1.3vw,20px)/1.12 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
.baselineObjectHeader span,
.baselineObjectMass>span,
.baselineObjectFacts dt{
  color:var(--text-secondary);
  font:600 11px/1.2 var(--font-ui);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.baselineObjectHeader>button{
  appearance:none;
  -webkit-appearance:none;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  padding:0;
  border:1px solid rgba(var(--edge-rgb),.24);
  border-radius:6px;
  background:rgba(var(--ink-rgb),.62);
  color:var(--text-secondary);
  font:400 21px/1 ui-sans-serif,sans-serif;
  cursor:pointer;
  transition:border-color var(--baseline-transition),background var(--baseline-transition),color var(--baseline-transition);
}
.baselineObjectHeader>button:focus-visible{
  border-color:var(--baseline-focus);
  color:#fff;
  outline:2px solid var(--baseline-focus);
  outline-offset:2px;
}
@media (hover:hover) and (pointer:fine){
  .baselineObjectHeader>button:hover{border-color:var(--baseline-border-hover);background:var(--baseline-panel-hover);color:#fff}
}
/* Mass is the single most important number on this card, so it gets its own
   level-2 surface instead of a pair of hairline rules. Concentric: --r-lg
   inside the panel's --r-xl at --r-nest inset. */
.baselineObjectMass{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  min-width:0;
  margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}
.baselineObjectMass strong{
  min-width:0;
  color:var(--text-primary);
  font:700 var(--fs-2xl)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  text-align:right;
  overflow-wrap:anywhere;
}
.baselineObjectMass small{
  color:var(--text-tertiary);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--track-label);
}
.baselineObjectFacts{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:12px;
  min-width:0;
  margin:12px 0 0;
}
.baselineObjectFacts>div{min-width:0}
.baselineObjectFacts dt{margin:0 0 5px}
.baselineObjectFacts dd{
  min-width:0;
  margin:0;
  color:var(--text-primary);
  font:500 14px/1.32 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-wrap:anywhere;
}
.baselineObjectStatus.warning{color:var(--warning)}
.baselineObjectStatus.danger{color:#ff9fac}
.baselineObjectStatus.good{color:var(--success)}
.baselineObjectDetails{
  flex:0 1 auto;
  min-height:0;
  max-height:0;
  margin-top:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:max-height 180ms ease,opacity 150ms ease,margin-top 180ms ease,visibility 0s linear 180ms;
}
.baselineObjectCard.details-open .baselineObjectDetails{
  max-height:min(420px,52dvh);
  margin-top:14px;
  opacity:1;
  visibility:visible;
  transition:max-height 180ms ease,opacity 160ms ease 30ms,margin-top 180ms ease,visibility 0s;
}
/* Only the INFORMATION scrolls. The action grid is a sibling below it, so it
   always gets its natural height and can never be scrolled out of reach nor
   starve the scroll region (see the note in galaxy.html). */
.baselineObjectDetailsScroll{
  height:100%;
  max-height:inherit;
  padding-right:var(--sp-2);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--edge-rgb),.24) transparent;
}
/* Actions belong to the expanded state even though they now sit outside the
   collapsing container. display:none also keeps them out of the tab order
   while the card is collapsed. */
.baselineObjectCard .baselineObjectActions{display:none}
.baselineObjectCard.details-open .baselineObjectActions{display:grid}
.baselineObjectSection{
  padding:13px 0 2px;
  border-top:1px solid rgba(var(--edge-rgb),.15);
}
.baselineObjectSection:first-child{padding-top:0;border-top:0}
.baselineObjectSection h3{
  margin:0 0 9px;
  color:var(--text-secondary);
  font:600 11px/1.2 var(--font-ui);
  letter-spacing:.11em;
}
.baselineObjectSection dl{display:grid;gap:8px;margin:0}
.baselineObjectSection dl>div{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:10px;
  min-width:0;
}
.baselineObjectSection dt{
  color:var(--text-tertiary);
  font:600 10px/1.35 var(--font-ui);
  letter-spacing:.07em;
}
.baselineObjectSection dd{
  min-width:0;
  margin:0;
  color:var(--text-primary);
  font:500 12px/1.38 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-wrap:anywhere;
}
.baselineObjectLegacy blockquote{
  display:block;
  max-height:7em;
  margin:0 0 8px;
  overflow:auto;
  color:var(--text-secondary);
  font:italic 12px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-wrap:anywhere;
}
.baselineObjectLegacy.is-empty blockquote{color:var(--text-tertiary);font-style:normal}
.baselineObjectHistory{display:grid;margin-bottom:5px}
.baselineObjectHistory article{
  min-width:0;
  padding:8px 0;
  border-top:1px solid rgba(var(--edge-rgb),.1);
}
.baselineObjectHistory article:first-child{padding-top:0;border-top:0}
.baselineObjectHistory span{
  display:block;
  margin-bottom:2px;
  color:var(--text-tertiary);
  font:600 9px/1.3 var(--font-ui);
  letter-spacing:.06em;
}
.baselineObjectHistory b{
  display:-webkit-box;
  overflow:hidden;
  color:#cbdce9;
  font:500 12px/1.4 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-wrap:anywhere;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
.baselineObjectActions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2);
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px solid var(--border);
}
.baselineObjectActions button,
.baselineObjectDetailsToggle{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  min-width:0;
  min-height:var(--ctl-h);
  padding:0 var(--sp-3);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-3);
  color:var(--text-secondary);
  font:600 var(--fs-sm)/1.2 var(--font-ui);
  letter-spacing:.01em;
  text-transform:none;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.baselineObjectActions button:hover,
.baselineObjectActions button:focus-visible,
.baselineObjectDetailsToggle:hover,
.baselineObjectDetailsToggle:focus-visible{
  border-color:var(--border-strong);
  background:var(--surface-4);
  color:var(--text-primary);
  outline:0;
}
/* Grouped by meaning, not by fitting the grid:
     row 1  Zoom To + Track Camera   - both camera actions, paired
     row 2  Follow                   - a subscription, on its own line so it is
                                       never mistaken for the camera pair
     row 3  Add Mass                 - the commit action
   Full-width rows also stop a lone button leaving a dead half-cell. */
.baselineObjectActions button[data-baseline-object-action="follow"],
.baselineObjectActions button[data-baseline-object-action="contribute"]{grid-column:1/-1}
.baselineObjectActions button.primary{
  grid-column:1/-1;
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  border-color:rgba(var(--accent-rgb),.5);
  color:#04121a;
  font-weight:700;
  box-shadow:0 6px 20px -10px rgba(var(--accent-rgb),.7),inset 0 1px 0 rgba(255,255,255,.28);
}
.baselineObjectActions button.primary:hover,
.baselineObjectActions button.primary:focus-visible{
  filter:brightness(1.06);
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  color:#04121a;
}
/* FOLLOW is a persistent subscription, so its ON state is a steady mint fill.
   TRACK CAMERA is a transient camera lock and deliberately never looks like
   this - the two actions must not read as the same toggle. */
.baselineObjectActions #baselineObjectFollow[aria-pressed="true"]{
  border-color:rgba(var(--mint-rgb),.5);
  background:rgba(var(--mint-rgb),.14);
  color:var(--mint);
}
.baselineObjectActions #baselineObjectFollow[aria-pressed="true"]:hover,
.baselineObjectActions #baselineObjectFollow[aria-pressed="true"]:focus-visible{
  border-color:rgba(var(--mint-rgb),.72);
  background:rgba(var(--mint-rgb),.2);
  color:var(--mint);
}
.baselineObjectActions button:disabled{opacity:.42;cursor:not-allowed}
.baselineObjectActions button[hidden]{display:none!important}
.baselineObjectDetailsToggle{
  flex:0 0 auto;
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:13px;
  padding:0 11px;
  border-width:1px 0 0;
  border-radius:0;
  background:transparent;
  color:var(--baseline-cyan);
  text-align:left;
}
.baselineObjectDetailsToggle i{font:400 16px/1 ui-sans-serif,sans-serif;font-style:normal}
body.baseline-ui.baseline-object-panel #objectBar.details-open{border-color:rgba(var(--edge-rgb),.54)}
.baselineObjectSectionHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.baselineObjectSectionHead h3{margin:0}
.baselineObjectSignalText{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;color:#d9edf5}
.baselineObjectSignalEdit{margin-top:10px}
.baselineObjectSignalEditor{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--edge-rgb),.14)}
.baselineObjectSignalEditor label{color:#8fb8c8;font:600 10px/1.2 var(--font-ui);letter-spacing:.08em}
.baselineObjectSignalEditor textarea{width:100%;min-height:92px;resize:vertical;padding:10px;border:1px solid rgba(var(--edge-rgb),.28);border-radius:5px;background:rgba(var(--ink-rgb),.78);color:var(--text-primary);font:16px/1.4 inherit;box-sizing:border-box}
.baselineObjectSignalEditor textarea:focus{outline:2px solid rgba(var(--edge-rgb),.2);outline-offset:1px;border-color:var(--baseline-border-hover)}
.baselineObjectSignalEditorMeta{display:flex;justify-content:space-between;gap:10px;color:#7898a8;font-size:11px;min-height:16px}.baselineObjectSignalEditorMeta span:first-child{color:#ffad9d}
.baselineObjectSignalEditorActions{display:flex;justify-content:flex-end;gap:8px}.baselineObjectSignalEditorActions button{min-height:38px}
.baselineObjectViewFull{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  min-height:26px;
  padding:0;
  border:0;
  background:none;
  color:var(--baseline-cyan);
  font:600 10px/1.2 var(--font-ui);
  letter-spacing:.07em;
  text-decoration:underline;
  text-decoration-color:rgba(var(--edge-rgb),.4);
  text-underline-offset:3px;
  cursor:pointer;
}
.baselineObjectViewFull:hover,
.baselineObjectViewFull:focus-visible{color:#fff;text-decoration-color:currentColor;outline:0}

/* Object history / provenance -----------------------------------------------
   A dedicated surface for "what has happened to this object", reached from
   VIEW FULL HISTORY. Reuses the existing #historyModal/openHistory() data
   flow (server-authoritative events + biography stats) and only restyles the
   presentation: a side panel that keeps the galaxy visible, rather than the
   centered buyModal treatment other purchase/setup modals use. */
body.baseline-ui #historyModal{
  align-items:stretch;
  justify-content:flex-end;
  padding:0;
  background:linear-gradient(90deg,rgba(var(--ink-rgb),.06),rgba(var(--ink-rgb),.6));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.baseline-ui #historyModal>.historyPanel{
  width:min(520px,100%);
  max-width:none;
  max-height:none;
  height:100%;
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  border-width:0 0 0 1px;
  border-color:rgba(var(--edge-rgb),.32);
  border-radius:0;
  background:rgba(var(--ink-rgb),.97);
  box-shadow:-26px 0 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.historyPanelHead{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(var(--edge-rgb),.16);
}
.historyPanelHead>div:first-child{min-width:0}
.historyPanelHead>div:first-child>span{
  display:block;
  margin-bottom:9px;
  color:var(--text-secondary);
  font:600 11px/1.2 var(--font-ui);
  letter-spacing:.14em;
}
.historyIdentity b{
  display:block;
  overflow-wrap:anywhere;
  color:var(--text-primary);
  font:650 clamp(19px,1.7vw,23px)/1.2 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.historyIdentity span{
  display:block;
  margin-top:4px;
  color:var(--text-secondary);
  font:600 11px/1.3 var(--font-ui);
  letter-spacing:.06em;
}
#historyClose{
  flex:0 0 auto;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  padding:0;
  border:1px solid rgba(var(--edge-rgb),.24);
  border-radius:6px;
  background:rgba(var(--ink-rgb),.62);
  color:var(--text-secondary);
  font:400 21px/1 ui-sans-serif,sans-serif;
  cursor:pointer;
  transition:border-color var(--baseline-transition),background var(--baseline-transition),color var(--baseline-transition);
}
#historyClose:hover,#historyClose:focus-visible{border-color:var(--baseline-border-hover);background:rgba(var(--ink-rgb),.92);color:#fff;outline:0}
.historyPanel .eventFilters{flex:0 0 auto;margin:0;padding:12px 20px;border-bottom:1px solid rgba(var(--edge-rgb),.12)}
.historyPanel .historyList{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  margin:0;
  padding:16px 20px 22px;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--edge-rgb),.36) transparent;
}
.historyProvenance{display:grid;gap:9px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(var(--edge-rgb),.16)}
.historyProvenance h2,
.historyTimeline>h2{
  margin:0 0 4px;
  color:var(--text-secondary);
  font:650 10px/1.3 var(--font-ui);
  letter-spacing:.13em;
}
.historyProvenanceRow{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;min-width:0}
.historyProvenanceRow span{color:var(--text-tertiary);font:600 10px/1.35 var(--font-ui);letter-spacing:.07em}
.historyProvenanceRow b{color:var(--text-primary);font:500 13px/1.4 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-wrap:anywhere}
.historyLegacy{margin-top:8px;padding-top:14px;border-top:1px solid rgba(var(--edge-rgb),.1)}
.historyLegacy span{display:block;margin-bottom:6px;color:var(--text-tertiary);font:600 10px/1.35 var(--font-ui);letter-spacing:.07em}
.historyLegacy blockquote{margin:0;padding:0;color:var(--text-secondary);font:italic 13px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-wrap:anywhere}
.historyLegacy.is-empty blockquote{color:var(--text-tertiary);font-style:normal}
.historyTimeline{min-width:0}
.historyTimeline>h2{margin-bottom:14px}
.historyDateGroup{position:relative;margin:0 0 18px;padding:0}
.historyDateGroup:last-child{margin-bottom:0}
.historyDateGroup>h3{
  margin:0;
  padding:0 0 7px;
  border-bottom:1px solid rgba(var(--edge-rgb),.14);
  color:#749aac;
  font:600 10px/1.3 var(--font-ui);
  letter-spacing:.08em;
}
.historyPanel .historyEvent{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:11px;
  margin:0;
  padding:12px 0 12px 12px;
  border-width:0 0 1px 1px;
  border-style:solid;
  border-color:rgba(var(--edge-rgb),.1) rgba(var(--edge-rgb),.1);
}
.historyPanel .historyEvent:last-child{border-bottom:0}
.historyPanel .historyEvent.severity-noteworthy{border-left-color:rgba(var(--edge-rgb),.6)}
.historyPanel .historyEvent.severity-warning{border-left-color:rgba(255,190,110,.62)}
.historyPanel .historyEvent.severity-critical{border-left-color:rgba(255,120,124,.62)}
.historyPanel .historyEvent time{padding-top:2px;color:var(--text-tertiary);font:600 10px/1.3 var(--font-ui);letter-spacing:.04em;text-transform:uppercase}
.historyPanel .historyEvent b{display:block;color:var(--text-primary);font:570 13px/1.45 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-wrap:anywhere}
.historyPanel .historyEvent div>span{display:block;margin-top:4px;color:#7899ab;font:500 11px/1.45 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-wrap:anywhere}
.historyEmpty{padding:32px 10px;color:var(--text-tertiary);font:500 13px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:center}
.historyState{display:flex;min-height:96px;align-items:center;justify-content:center;color:var(--text-tertiary);font:500 13px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:center}
.historyState.is-error{flex-direction:column;gap:12px}
.historyState button,
.historyPanelFoot button{
  min-height:38px;
  padding:0 16px;
  border:1px solid rgba(var(--edge-rgb),.28);
  border-radius:5px;
  background:rgba(var(--ink-rgb),.72);
  color:#b9dbea;
  font:650 10px/1 var(--font-ui);
  letter-spacing:.08em;
  cursor:pointer;
}
.historyState button:hover,.historyState button:focus-visible,
.historyPanelFoot button:hover,.historyPanelFoot button:focus-visible{border-color:var(--baseline-border-hover);background:rgba(14,48,64,.84);color:#fff;outline:0}
.historyPanelFoot{flex:0 0 auto;padding:11px 20px calc(11px + env(safe-area-inset-bottom));border-top:1px solid rgba(var(--edge-rgb),.14);background:rgba(var(--ink-rgb),.98)}
.historyPanelFoot[hidden]{display:none!important}
.historyPanelFoot button{width:100%}
@media (min-width:701px) and (max-width:900px) and (orientation:portrait){
  body.baseline-ui #historyModal{align-items:center;padding:12px}
  body.baseline-ui #historyModal>.historyPanel{
    width:min(680px,100%);
    height:calc(100dvh - 24px);
    border-width:1px;
    border-radius:10px;
  }
}
@media (max-width:700px) and (orientation:portrait){
  body.baseline-ui #historyModal{align-items:flex-end;justify-content:center;background:rgba(var(--ink-rgb),.62)}
  body.baseline-ui #historyModal>.historyPanel{
    width:100%;
    height:min(88dvh,calc(100dvh - 8px - env(safe-area-inset-top)));
    border-width:1px 0 0;
    border-radius:12px 12px 0 0;
    box-shadow:0 -20px 60px rgba(0,0,0,.5);
  }
  .historyPanelHead{padding:16px 16px 12px}
  .historyPanel .eventFilters{padding:12px 16px}
  .historyPanel .historyList{padding:14px 16px calc(18px + env(safe-area-inset-bottom))}
  .historyPanelFoot{padding-inline:16px}
  .historyPanel .historyEvent{grid-template-columns:66px minmax(0,1fr);gap:9px;padding-left:10px}
}

/* Let focused application surfaces fully own the screen when explicitly
   opened. The baseline shell is about the resting galaxy, not modal chrome. */
body.menu-open .baseline-shell,
body.core-overlay-open .baseline-shell,
body.object-page-open .baseline-shell,
body.baseline-create-open .baseline-shell,
body.placing .baseline-shell,
body.dev-open .baseline-shell,
body.drawer-open .baseline-shell{
  opacity:0;
  pointer-events:none;
}
body.menu-open .baseline-shell button,
body.core-overlay-open .baseline-shell button,
body.object-page-open .baseline-shell button,
body.baseline-create-open .baseline-shell button,
body.placing .baseline-shell button,
body.dev-open .baseline-shell button,
body.drawer-open .baseline-shell button{pointer-events:none}

/* Create modal ------------------------------------------------------------
   The existing Mass ledger, creation steps, preview bindings and placement
   commit remain authoritative. This layer only gives that flow a focused,
   responsive presentation. */
body.baseline-ui #buyModal{
  align-items:center;
  justify-content:center;
  padding:clamp(16px,3vh,30px) clamp(16px,3vw,34px);
  background:rgba(var(--ink-rgb),.72);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.baseline-ui #buyModal>.buyPanel{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(780px,100%);
  height:auto;
  max-height:min(820px,88dvh);
  box-sizing:border-box;
  overflow:hidden;
  padding:18px 20px 0;
  border:1px solid rgba(var(--edge-rgb),.38);
  border-radius:10px;
  background:rgba(var(--ink-rgb),.97);
  box-shadow:0 24px 70px rgba(0,0,0,.68),inset 0 0 42px rgba(42,149,194,.035);
  color:var(--baseline-text);
  font-size:14px;
}
body.baseline-ui #buyModal>.buyPanel::before,
body.baseline-ui #buyModal>.buyPanel::after{
  content:"";
  position:absolute;
  z-index:2;
  width:28px;
  height:8px;
  pointer-events:none;
}
body.baseline-ui #buyModal>.buyPanel::before{
  top:-1px;
  left:-1px;
  border-top:1px solid var(--baseline-cyan);
  border-left:1px solid var(--baseline-cyan);
}
body.baseline-ui #buyModal>.buyPanel::after{
  right:-1px;
  bottom:-1px;
  border-right:1px solid var(--baseline-cyan);
  border-bottom:1px solid var(--baseline-cyan);
}
body.baseline-ui #buyModal .baselineCreateHeader{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 5px;
}
body.baseline-ui #buyModal .baselineCreateHeader>div{min-width:0;padding-top:2px}
body.baseline-ui #buyModal .baselineCreateHeader h1{
  min-width:0;
  margin:0;
  color:var(--text-primary);
  font:650 20px/1.2 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.02em;
}
body.baseline-ui #buyModal .baselineCreateHeader p{
  margin:5px 0 0;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.4;
}
body.baseline-ui #buyModal .baselineCreateClose{
  z-index:6;
  flex:0 0 40px;
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  padding:0;
  border:1px solid rgba(var(--edge-rgb),.25);
  border-radius:6px;
  background:rgba(var(--ink-rgb),.82);
  color:#a9c9d8;
  font:400 22px/1 ui-sans-serif,sans-serif;
}
body.baseline-ui #buyModal .baselineCreateClose:hover,
body.baseline-ui #buyModal .baselineCreateClose:focus-visible{
  border-color:var(--baseline-border-hover);
  background:var(--baseline-panel-hover);
  color:#fff;
}
body.baseline-ui #buyModal .baselineCreateClose:focus-visible{
  outline:2px solid var(--baseline-focus);
  outline-offset:2px;
}
body.baseline-ui #buyModal #massFlowStep{
  flex:0 0 auto;
  min-height:16px;
  margin:0;
  color:var(--text-tertiary);
  font:600 11px/1.35 var(--font-ui);
  letter-spacing:.11em;
}
body.baseline-ui #buyModal .massModeTabs{
  flex:0 0 auto;
  gap:6px;
  margin:8px 0 10px;
}
body.baseline-ui #buyModal .massModeTabs button{
  min-width:0;
  min-height:42px;
  padding:0 10px;
  border-radius:6px;
  font-size:11px;
}
body.baseline-ui #buyModal .massAccountCard{
  flex:0 0 auto;
  min-width:0;
  margin:0 0 12px;
  padding:11px 13px;
  border-color:rgba(var(--edge-rgb),.24);
  border-radius:7px;
  background:rgba(var(--ink-rgb),.72);
}
body.baseline-ui #buyModal .massAccountCard>div{min-width:0}
body.baseline-ui #buyModal .massAccountCard>div b{
  margin-top:4px;
  font-size:20px;
  line-height:1.1;
  overflow-wrap:anywhere;
}
body.baseline-ui #buyModal .massAccountCard>i{
  max-width:260px;
  white-space:normal;
  text-align:right;
  line-height:1.35;
}
body.baseline-ui #buyModal .massAccountCard p{margin-top:6px;line-height:1.4}
body.baseline-ui #buyModal .massModePanel.active{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:2px 4px 18px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--edge-rgb),.5) transparent;
}
body.baseline-ui #buyModal .massModePanel[hidden]{display:none!important}
body.baseline-ui #buyModal #massCreatePanel.active{
  display:flex;
  flex-direction:column;
}
body.baseline-ui #buyModal .buyTitle{
  color:var(--text-primary);
  font:650 20px/1.2 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.02em;
}
body.baseline-ui #buyModal .buySub{
  max-width:68ch;
  margin:5px 0 13px;
  color:#9bb1c2;
  font-size:13px;
  line-height:1.45;
}
body.baseline-ui #buyModal #massCreatePanel>.buyTitle{display:none}
body.baseline-ui #buyModal .createSteps{
  position:sticky;
  z-index:4;
  top:-2px;
  margin:0 0 15px;
  padding:8px 0 10px;
  background:rgba(var(--ink-rgb),.97);
}
body.baseline-ui #buyModal .createStepDot{
  padding-top:8px;
  font-size:11px;
}
body.baseline-ui #buyModal .createMassComposer{
  grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);
  gap:14px;
}
body.baseline-ui #buyModal .massStepper{
  grid-template-columns:48px minmax(0,1fr) 48px;
  gap:7px;
}
body.baseline-ui #buyModal .massStepper button,
body.baseline-ui #buyModal .massStepper input{min-height:50px}
body.baseline-ui #buyModal .massStepper input{
  appearance:textfield;
  -moz-appearance:textfield;
  border-color:rgba(var(--edge-rgb),.34);
  border-radius:6px;
  background:rgba(1,7,12,.84);
  color:#fff;
  font-size:20px;
}
body.baseline-ui #buyModal .massStepper input::-webkit-inner-spin-button,
body.baseline-ui #buyModal .massStepper input::-webkit-outer-spin-button{
  margin:0;
  -webkit-appearance:none;
}
body.baseline-ui #buyModal .massQuickPicks{gap:6px;margin-top:7px}
body.baseline-ui #buyModal .massQuickPicks button{
  min-height:38px;
  border-radius:5px;
  font-size:11px;
}
body.baseline-ui #buyModal .massQuickPicks button.active{
  border-color:rgba(var(--edge-rgb),.74);
  background:rgba(var(--edge-rgb),.72);
  color:#fff;
}
body.baseline-ui #buyModal .economyPreview{
  min-height:66px;
  padding:10px 12px;
  border-color:rgba(var(--edge-rgb),.22);
  background:rgba(3,13,21,.88);
}
body.baseline-ui #buyModal .economyPreview b{font-size:14px}
body.baseline-ui #buyModal .massScaleCard{
  padding:10px;
  border-color:rgba(var(--edge-rgb),.24);
  background:rgba(3,13,21,.76);
}
body.baseline-ui #buyModal .massScaleViewport{min-height:190px}
body.baseline-ui #buyModal .lineageDecision,
body.baseline-ui #buyModal .creatorArtwork,
body.baseline-ui #buyModal .creatorDrafts,
body.baseline-ui #buyModal .purchasePreview{
  border-color:rgba(var(--edge-rgb),.22);
  background:rgba(var(--ink-rgb),.72);
}
body.baseline-ui #buyModal .lineageChoice{min-height:82px}
body.baseline-ui #buyModal .creatorIdentityLayout{
  grid-template-columns:220px minmax(0,1fr);
  gap:15px;
}
body.baseline-ui #buyModal .creatorLivePreview,
body.baseline-ui #buyModal .creatorArtPanel{
  border-color:rgba(var(--edge-rgb),.2);
  background:rgba(3,13,21,.72);
}
body.baseline-ui #buyModal .field input,
body.baseline-ui #buyModal .field select,
body.baseline-ui #buyModal .field textarea{
  border-color:rgba(var(--edge-rgb),.24);
  border-radius:6px;
  background:rgba(var(--ink-rgb),.78);
  color:var(--text-primary);
  font-size:14px;
}
body.baseline-ui #buyModal .field input:focus,
body.baseline-ui #buyModal .field select:focus,
body.baseline-ui #buyModal .field textarea:focus{
  border-color:var(--baseline-border-hover);
  outline:2px solid rgba(var(--edge-rgb),.16);
  outline-offset:1px;
}
body.baseline-ui #buyModal .purchasePreview{margin-top:2px}
body.baseline-ui #buyModal .massDeficit{
  flex:0 0 auto;
  margin-top:12px;
  line-height:1.45;
}
body.baseline-ui #buyModal #createActions{
  position:sticky;
  z-index:5;
  bottom:-18px;
  flex:0 0 auto;
  align-items:center;
  margin:14px 0 -18px;
  padding:12px 0 18px;
  border-top:1px solid rgba(var(--edge-rgb),.16);
  background:linear-gradient(to bottom,rgba(var(--ink-rgb),.94),rgba(var(--ink-rgb),1) 28%);
}
body.baseline-ui #buyModal #createActions button{
  flex:0 1 auto;
  min-width:112px;
  min-height:46px;
  border-radius:6px;
}
body.baseline-ui #buyModal #buyCancel{margin-right:auto}
body.baseline-ui #buyModal #createStepNext,
body.baseline-ui #buyModal #choosePlacement{min-width:174px}

body.baseline-ui #buyModal #massCreatePanel[data-flow="mass-placement"] #buyLineageField{
  margin:18px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(var(--edge-rgb),.15);
}

/* Post-placement choice: a compact success card that offers the optional
   personalization step without turning it back into part of creation. */
body.baseline-ui #creationToast{
  z-index:1250;
  width:min(420px,calc(100vw - 24px));
  padding:22px 20px 18px;
  border-color:rgba(126,226,180,.38);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.97),rgba(1,9,15,.98));
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 36px rgba(126,226,180,.08);
}
body.baseline-ui #creationToast .createdId{font-size:22px}
body.baseline-ui #creationToast .createdWord{font-size:11px}
body.baseline-ui #creationToast .createdName{font-size:12px;line-height:1.45}
body.baseline-ui #creationToast .createdActions button{
  min-height:44px;
  border:1px solid var(--baseline-border);
  border-radius:6px;
  background:rgba(var(--ink-rgb),.9);
  color:var(--baseline-text);
}
body.baseline-ui #creationToast .createdActions .primary{
  border-color:rgba(var(--edge-rgb),.68);
  background:rgba(var(--accent-rgb),.78);
  color:#fff;
}

/* Owner-only Personalize uses the existing authoritative image endpoints and
   the existing 16px pixel editor, now surfaced after placement. */
body.baseline-ui #imageManageModal>.imageManagePanel{
  width:min(680px,calc(100vw - 28px));
  max-height:min(760px,calc(100dvh - 28px));
  overflow:auto;
  border-color:rgba(var(--edge-rgb),.34);
  background:rgba(var(--ink-rgb),.98);
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--edge-rgb),.45) transparent;
}
body.baseline-ui #imageManageModal .personalizeArtTabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:16px 0 14px;
}
body.baseline-ui #imageManageModal .personalizeArtTabs button{
  min-height:42px;
  border:1px solid rgba(var(--edge-rgb),.22);
  border-radius:6px;
  background:rgba(var(--ink-rgb),.82);
  color:#83a0b4;
  font:600 11px/1.2 var(--font-ui);
  letter-spacing:.08em;
}
body.baseline-ui #imageManageModal .personalizeArtTabs button.active{
  border-color:rgba(var(--edge-rgb),.68);
  background:rgba(var(--edge-rgb),.72);
  color:#fff;
}
body.baseline-ui #imageManageModal .personalizeArtPanel[hidden]{display:none!important}
body.baseline-ui #imageManageModal .imageManagePreview,
body.baseline-ui #imageManageModal .creatorPixelLayout{
  padding:14px;
  border:1px solid rgba(var(--edge-rgb),.18);
  border-radius:7px;
  background:rgba(3,13,21,.7);
}
body.baseline-ui #imageManageModal .imageManageStatus{margin-top:14px;white-space:pre-line}
body.baseline-ui #imageManageModal .buyActions button{min-height:44px}

/* UX refinement: fewer cards, clearer decisions, and plain-language feedback. */
body.baseline-ui #buyModal #massFlowStep,
body.baseline-ui #buyModal #massCreatePanel>.buySub,
body.baseline-ui #buyModal .massModePanel>.buyTitle{display:none}
body.baseline-ui #buyModal .massAccountCard{
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 16px;
  padding:10px 0;
  border:0;
  border-top:1px solid rgba(var(--edge-rgb),.13);
  border-bottom:1px solid rgba(var(--edge-rgb),.13);
  border-radius:0;
  background:transparent;
}
body.baseline-ui #buyModal .massAccountCard>div b{font-size:18px}
body.baseline-ui #buyModal .massAccountCard>i{align-self:center;padding:3px 7px}
body.baseline-ui #buyModal .massAccountCard p{display:none}
body.baseline-ui #buyModal .massAccountCard[data-state="error"] p,
body.baseline-ui #buyModal .massAccountCard[data-state="debt"] p{display:block}
body.baseline-ui #buyModal .createSteps{margin-bottom:13px;padding-top:5px}
body.baseline-ui #buyModal .createStepDot{border-top-width:1px;color:#617687}
body.baseline-ui #buyModal .createStepDot[data-state="current"]{border-top-color:var(--baseline-cyan);color:var(--baseline-cyan)}
body.baseline-ui #buyModal .createStepDot[data-state="done"] i{font-size:0}
body.baseline-ui #buyModal .createStepDot[data-state="done"] i::after{content:"✓";font-size:11px}
body.baseline-ui #buyModal .createMassComposer{
  grid-template-columns:minmax(0,1.06fr) minmax(260px,.94fr);
  gap:24px;
}
body.baseline-ui #buyModal .createMassControls>label{margin-bottom:9px;color:#b5d8e7;font-size:12px}
body.baseline-ui #buyModal .massQuickPicks{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body.baseline-ui #buyModal .massQuickPicks button{min-height:40px}
body.baseline-ui #buyModal .economyPreview{
  min-height:0;
  margin-top:16px;
  padding:14px 0 2px;
  border:0;
  border-top:1px solid rgba(var(--edge-rgb),.15);
  border-radius:0;
  background:transparent;
}
body.baseline-ui #buyModal .economyPreview>span:first-child,
body.baseline-ui #buyModal .baselineMassPreviewLabel{
  color:var(--text-tertiary);
  font:600 11px/1.3 var(--font-ui);
  letter-spacing:.1em;
}
body.baseline-ui #buyModal .economyPreview b{font-size:18px;line-height:1.25}
body.baseline-ui #buyModal .economyPreview #buyNextStage{margin-top:2px;line-height:1.4}
body.baseline-ui #buyModal .economyTrack{height:3px;margin-top:7px}
body.baseline-ui #buyModal .massScaleCard{
  padding:0 0 0 24px;
  border:0;
  border-left:1px solid rgba(var(--edge-rgb),.15);
  border-radius:0;
  background:transparent;
}
body.baseline-ui #buyModal .baselineMassPreviewLabel{display:block;margin-bottom:9px}
body.baseline-ui #buyModal .massScaleViewport{min-height:184px;border-color:rgba(var(--edge-rgb),.16);background:radial-gradient(circle at center,rgba(35,93,120,.18),rgba(1,7,12,.35) 68%)}
body.baseline-ui #buyModal .massScaleReadout{padding-top:9px;text-align:center}
body.baseline-ui #buyModal .massScaleReadout b{margin:0;color:var(--text-primary);font-size:15px}
body.baseline-ui #buyModal .massScaleReadout>small{display:block;margin-top:3px;color:var(--text-secondary);font-size:11px}
body.baseline-ui #buyModal .massScaleReadout .baselineMassPreviewNote{margin-top:7px;color:#728a9c}
body.baseline-ui #buyModal .baselinePreviewTechnical{display:none!important}
body.baseline-ui #buyModal #buyLineageField{margin:4px 0}
body.baseline-ui #buyModal .lineageChoice span{font-size:12px;line-height:1.4}
body.baseline-ui #buyModal .lineageHint{margin-top:8px}
body.baseline-ui #buyModal .creatorIdentityLayout{gap:22px}
body.baseline-ui #buyModal .creatorLivePreview{
  padding:0 20px 0 0;
  border:0;
  border-right:1px solid rgba(var(--edge-rgb),.15);
  border-radius:0;
  background:transparent;
}
body.baseline-ui #buyModal .creatorPreviewStage{border-color:rgba(var(--edge-rgb),.16);background:radial-gradient(circle at center,rgba(42,102,130,.2),rgba(1,7,12,.38) 70%)}
body.baseline-ui #buyModal .creatorIdentityFields .formGrid{grid-template-columns:1fr}
body.baseline-ui #buyModal .creatorFieldNote{line-height:1.45}
body.baseline-ui #buyModal .creatorArtwork{
  margin-top:24px;
  padding:20px 0 0;
  border:0;
  border-top:1px solid rgba(var(--edge-rgb),.15);
  border-radius:0;
  background:transparent;
}
body.baseline-ui #buyModal .creatorArtTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-top:12px;gap:7px}
body.baseline-ui #buyModal .creatorArtTabs button{min-width:0;min-height:42px;border-radius:6px}
body.baseline-ui #buyModal .creatorArtPanel{
  margin-top:4px;
  padding:14px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
}
body.baseline-ui #buyModal .creatorArtPanel[data-art-panel="none"] .field{gap:9px}
body.baseline-ui #buyModal .creatorArtStatus{margin-top:10px}
body.baseline-ui #buyModal details.creatorDrafts{
  margin-top:22px;
  padding:0;
  border:0;
  border-top:1px solid rgba(var(--edge-rgb),.15);
  border-radius:0;
  background:transparent;
}
body.baseline-ui #buyModal details.creatorDrafts>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  color:#9bc4d5;
  font:600 11px/1.3 var(--font-ui);
  letter-spacing:.09em;
  cursor:pointer;
}
body.baseline-ui #buyModal details.creatorDrafts>summary span{color:#627d90;font-size:10px;letter-spacing:.04em}
body.baseline-ui #buyModal .creatorDraftsBody{padding:2px 0 4px}
body.baseline-ui #buyModal .createStepHint{margin-top:14px;color:var(--text-tertiary)}
body.baseline-ui #buyModal .purchasePreview{
  gap:13px 20px;
  margin:0;
  padding:18px;
  border-color:rgba(var(--edge-rgb),.24);
  background:rgba(var(--ink-rgb),.58);
}
body.baseline-ui #buyModal .purchasePreview .previewHero{padding-bottom:15px}
body.baseline-ui #buyModal .purchasePreview .previewHero b{font-size:19px}
body.baseline-ui #buyModal .purchasePreview .previewHero small{line-height:1.45}
body.baseline-ui #buyModal .purchasePreview .summaryBalance small{display:block;margin-top:5px;color:#71899a;font-size:10px;line-height:1.4}
body.baseline-ui #buyModal .massDeficit[data-state="good"]{
  padding:9px 0;
  border:0;
  border-top:1px solid rgba(126,226,180,.18);
  border-radius:0;
  background:transparent;
}
body.baseline-ui #buyModal .massDeficit b,
body.baseline-ui #buyModal .massDeficit small{display:block}
body.baseline-ui #buyModal .massDeficit small{margin-top:3px;color:var(--text-tertiary);font-size:10px}
body.baseline-ui #buyModal #createActions .primary{
  border-color:rgba(var(--edge-rgb),.72);
  background:rgba(var(--accent-rgb),.78);
  color:#fff;
}
body.baseline-ui #buyModal #buyCancel{border-color:rgba(var(--edge-rgb),.18);background:transparent;color:#8da5b6}

@media (max-width:860px) and (orientation:portrait){
  body.baseline-ui #buyModal .createMassComposer,
  body.baseline-ui #buyModal .creatorIdentityLayout{grid-template-columns:1fr}
  body.baseline-ui #buyModal .massScaleViewport{min-height:166px}
  body.baseline-ui #buyModal .creatorLivePreview{
    display:grid;
    grid-template-columns:94px minmax(0,1fr);
    column-gap:12px;
    align-items:center;
    padding:0 0 16px;
    border-right:0;
    border-bottom:1px solid rgba(var(--edge-rgb),.15);
  }
  body.baseline-ui #buyModal .massScaleCard{padding:20px 0 0;border-left:0;border-top:1px solid rgba(var(--edge-rgb),.15)}
}

@media (max-width:700px) and (orientation:portrait){
  body.baseline-ui #buyModal{
    align-items:flex-end;
    padding:calc(8px + env(safe-area-inset-top)) 0 0;
  }
  body.baseline-ui #buyModal>.buyPanel{
    width:100%;
    height:calc(100dvh - 8px - env(safe-area-inset-top));
    max-height:none;
    padding:14px 14px 0;
    border-width:1px 0 0;
    border-radius:12px 12px 0 0;
  }
  body.baseline-ui #buyModal .baselineCreateHeader h1{font-size:18px}
  body.baseline-ui #buyModal .massModeTabs{margin:7px 0 9px;gap:5px}
  body.baseline-ui #buyModal .massModeTabs button{min-height:40px;padding-inline:5px;font-size:10px;letter-spacing:.055em}
  body.baseline-ui #buyModal .massAccountCard{
    grid-template-columns:minmax(0,1fr);
    gap:5px;
    margin-bottom:9px;
    padding:9px 11px;
  }
  body.baseline-ui #buyModal .massAccountCard>div b{font-size:18px}
  body.baseline-ui #buyModal .massAccountCard>i{justify-self:start;max-width:100%;padding:3px 7px;text-align:left}
  body.baseline-ui #buyModal .massAccountCard p{display:none}
  body.baseline-ui #buyModal .massModePanel.active{padding-right:2px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  body.baseline-ui #buyModal .buyTitle{font-size:19px}
  body.baseline-ui #buyModal .buySub{margin-bottom:10px}
  body.baseline-ui #buyModal .createSteps{margin-bottom:12px;padding-block:7px 9px}
  body.baseline-ui #buyModal .createStepDot{gap:5px;font-size:10px;letter-spacing:.07em}
  body.baseline-ui #buyModal .massQuickPicks{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.baseline-ui #buyModal .massQuickPicks button{min-height:42px}
  body.baseline-ui #buyModal .massScaleViewport{min-height:154px}
  body.baseline-ui #buyModal .lineageChoices{grid-template-columns:1fr}
  body.baseline-ui #buyModal .creatorArtwork{padding:16px 0 0}
  body.baseline-ui #buyModal .creatorSectionHead{align-items:flex-start;flex-direction:column;gap:5px}
  body.baseline-ui #buyModal .creatorSectionHead small{text-align:left}
  body.baseline-ui #buyModal .creatorUploadLayout,
  body.baseline-ui #buyModal .creatorPixelLayout{grid-template-columns:1fr}
  body.baseline-ui #buyModal .purchasePreview{grid-template-columns:1fr}
  body.baseline-ui #buyModal .purchasePreview .previewHero,
  body.baseline-ui #buyModal .summaryLegacyMessage{grid-column:1}
  body.baseline-ui #buyModal .summaryMassVisual{width:104px;height:104px;flex-basis:104px}
  body.baseline-ui #buyModal #createActions{
    bottom:calc(-16px - env(safe-area-inset-bottom));
    flex-wrap:wrap;
    margin-bottom:calc(-16px - env(safe-area-inset-bottom));
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  body.baseline-ui #buyModal #createActions button{flex:1 1 120px;min-width:0}
  body.baseline-ui #buyModal #buyCancel{margin-right:0}
  body.baseline-ui #buyModal #createStepNext,
  body.baseline-ui #buyModal #choosePlacement{min-width:0}
  body.baseline-ui #buyModal .field input,
  body.baseline-ui #buyModal .field select,
  body.baseline-ui #buyModal .field textarea{font-size:16px}

  body.baseline-ui #imageManageModal{align-items:flex-end;padding:calc(8px + env(safe-area-inset-top)) 0 0}
  body.baseline-ui #imageManageModal>.imageManagePanel{
    width:100%;
    max-height:calc(100dvh - 8px - env(safe-area-inset-top));
    padding:16px 14px calc(14px + env(safe-area-inset-bottom));
    border-width:1px 0 0;
    border-radius:12px 12px 0 0;
  }
  body.baseline-ui #imageManageModal .creatorPixelLayout{grid-template-columns:1fr}
  body.baseline-ui #imageManageModal .buyActions{grid-template-columns:1fr}
  body.baseline-ui #creationToast .createdActions{grid-template-columns:1fr}
}

@media (max-height:560px) and (orientation:landscape){
  body.baseline-ui #buyModal{padding:8px calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left))}
  body.baseline-ui #buyModal>.buyPanel{
    width:min(820px,100%);
    height:calc(100dvh - 16px);
    padding:12px 14px 0;
  }
  body.baseline-ui #buyModal .baselineCreateHeader{margin-bottom:2px}
  body.baseline-ui #buyModal .baselineCreateHeader h1{font-size:18px}
  body.baseline-ui #buyModal .baselineCreateClose{flex-basis:36px;width:36px;height:36px;min-width:36px;min-height:36px}
  body.baseline-ui #buyModal .massModeTabs{margin:5px 0 7px}
  body.baseline-ui #buyModal .massModeTabs button{min-height:36px}
  body.baseline-ui #buyModal .massAccountCard{margin-bottom:7px;padding:7px 10px}
  body.baseline-ui #buyModal .massAccountCard>div b{font-size:16px}
  body.baseline-ui #buyModal .massAccountCard p{display:none}
  body.baseline-ui #buyModal .massModePanel.active{padding-bottom:12px}
  body.baseline-ui #buyModal .buyTitle{font-size:18px}
  body.baseline-ui #buyModal .buySub{margin:3px 0 8px}
  body.baseline-ui #buyModal .createSteps{margin-bottom:10px;padding:5px 0 7px}
  body.baseline-ui #buyModal .massScaleViewport{min-height:150px}
  body.baseline-ui #buyModal #createActions{bottom:-12px;margin-bottom:-12px;padding-bottom:12px}
}

/* Portrait phones retain the same anchors with tighter labels. Landscape uses
   the default tablet-like geometry instead of inheriting portrait compression. */
@media (max-width:560px) and (orientation:portrait){
  :root{
    --baseline-control-font-size:12px;
    --baseline-control-pad-x:12px;
  }
  body.baseline-ui .top .search{
    left:var(--baseline-left)!important;
    right:var(--baseline-right)!important;
    top:auto!important;
    bottom:calc(var(--baseline-bottom) + var(--baseline-control-height) + 10px)!important;
    width:auto!important;
    max-height:min(56dvh,calc(100dvh - var(--baseline-top) - var(--baseline-bottom) - var(--baseline-control-height) - 20px))!important;
  }
  body.baseline-ui #searchPanel .gui-search-input input{font-size:16px}
  body.baseline-ui #searchPanel .gui-search-results{max-height:none}
}

@media (min-width:561px) and (max-width:900px){
  body.baseline-ui .top .search{width:min(340px,calc(100vw - var(--baseline-left) - var(--baseline-right)))!important}
}

/* Portrait phones keep the same object-anchored behavior with a narrower card.
   Placement code reserves the persistent control rows as a safe zone. */
@media (max-width:700px) and (orientation:portrait){
  body.baseline-ui.baseline-object-panel #objectBar{width:min(280px,calc(100vw - 20px));max-width:none}
  body.baseline-ui.baseline-object-panel #objectBar.details-open{
    top:auto;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    max-width:none;
    height:min(42dvh,calc(100dvh - var(--baseline-top) - var(--baseline-control-height) - 20px));
    max-height:none;
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:10px 10px 0 0;
    transform:translate3d(0,calc(100% + env(safe-area-inset-bottom)),0);
    transition:transform 220ms ease-out,opacity 160ms ease,border-color 160ms ease;
  }
  body.baseline-ui.baseline-object-panel #objectBar.details-open.information-open{transform:translate3d(0,0,0)}

  /* EXPANDED = BOTTOM SHEET, and the sheet is authoritative.
     The object-anchored placement in galaxy.html keeps writing a translate for
     the floating desktop card, and on a phone that transform won out over the
     sheet: expanding the card put its top at y=957 in an 844px viewport, i.e.
     entirely below the fold with every action unreachable. On portrait the
     panel is a sheet, so it is pinned here and the anchored transform is
     explicitly neutralised. The collapsed card keeps its anchored behaviour -
     it is small, near its object, and already stays on screen. */
  body.baseline-ui.baseline-object-panel #objectBar.details-open{
    top:auto!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    max-width:100%!important;
    /* The collapsed rule caps the panel at 42dvh, which on an 844px phone left
       the information region exactly 0px tall once the header, Mass block,
       facts, actions and toggle had taken their space. The expanded sheet sizes
       to content and is capped instead, so ORBIT / CREATED / SIGNAL / HISTORY
       actually have somewhere to live. */
    height:auto!important;
    max-height:min(82dvh,calc(100dvh - var(--baseline-top)))!important;
    transform:translate3d(0,0,0)!important;
    border-radius:var(--r-xl) var(--r-xl) 0 0!important;
    /* The anchored placement loop rewrites --baseline-object-panel-x/y every
       frame. With `transition:transform` still armed, each rewrite restarted
       the transition, which therefore sat permanently at currentTime 0 and
       pinned the computed transform to its OLD anchored value - defeating even
       an !important target. Transform is excluded from the transition here so
       the sheet position applies immediately. */
    transition:opacity 160ms var(--ease),border-color 160ms var(--ease)!important;
  }
  .baselineObjectCard{padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom))}
  /* The card fills the sheet; only the information region scrolls, so the
     header, the Mass block, the action grid and the toggle all stay put. */
  .baselineObjectCard.details-open{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
    box-sizing:border-box;
  }
  .baselineObjectCard.details-open .baselineObjectDetails{flex:1 1 auto;min-height:0;max-height:none}
  .baselineObjectCard.details-open .baselineObjectDetailsScroll{height:100%;max-height:none}
  .baselineObjectCard.details-open .baselineObjectActions,
  .baselineObjectCard.details-open .baselineObjectDetailsToggle{flex:0 0 auto}
  .baselineObjectSection{padding-top:var(--sp-3)}
  /* Two-up stays readable at 390px and keeps the sheet short. */
  .baselineObjectActions{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Keep all three bottom anchors on one baseline at every width. CREATE stays
   centred whenever there is room; on narrower screens its centre is clamped
   into the open span between Find and the camera group. */
@media (max-width:560px){
  :root{
    --baseline-mobile-create-width:92px;
    --baseline-mobile-create-half:46px;
    --baseline-mobile-camera-width:182px;
    --baseline-mobile-row-gap:8px;
  }
  .baseline-shell .baseline-create{
    width:var(--baseline-mobile-create-width);
    min-width:var(--baseline-mobile-create-width);
  }
  .baseline-camera button{min-width:44px;padding-inline:8px}
  .baseline-camera .baseline-fit{min-width:48px}
  .baseline-create-wrap{
    bottom:var(--baseline-bottom);
    left:clamp(
      calc(var(--baseline-left) + 44px + var(--baseline-mobile-row-gap) + var(--baseline-mobile-create-half)),
      50%,
      calc(100vw - var(--baseline-right) - var(--baseline-mobile-camera-width) - var(--baseline-mobile-row-gap) - var(--baseline-mobile-create-half))
    );
  }
  body.baseline-ui .top .search{bottom:calc(var(--baseline-bottom) + var(--baseline-control-height) + var(--sp-3))!important}
}

/* A 320px viewport cannot fit the standard horizontal button widths. Preserve
   the 44px control height while tightening only their horizontal footprint. */
@media (max-width:360px){
  :root{
    --baseline-mobile-create-width:72px;
    --baseline-mobile-create-half:36px;
    --baseline-mobile-camera-width:162px;
    --baseline-mobile-row-gap:6px;
  }
  .baseline-shell .baseline-create{padding-inline:6px}
  .baseline-camera button,
  .baseline-camera .baseline-fit{min-width:40px;padding-inline:6px}
}

/* Short landscape phones keep the tablet arrangement but pull the controls
   slightly closer to the physical edges to preserve vertical galaxy space. */
@media (max-height:560px) and (orientation:landscape){
  :root{--baseline-edge-y:8px}
  body.baseline-ui .top .search{
    width:min(340px,calc(100vw - var(--baseline-left) - var(--baseline-right)))!important;
    max-height:calc(100dvh - var(--baseline-bottom) - var(--baseline-control-height) - 18px)!important;
  }
}

@media (max-height:420px) and (orientation:landscape){
  body.baseline-ui.baseline-object-panel #objectBar{width:280px}
  .baselineObjectCard{padding:11px 13px 12px}
  .baselineObjectHeader{grid-template-columns:minmax(0,1fr) 36px;gap:9px}
  .baselineObjectHeader>button{width:36px;height:36px;min-width:36px;min-height:36px}
  .baselineObjectHeader b{font-size:18px;-webkit-line-clamp:1;line-clamp:1}
  .baselineObjectMass{margin-top:9px;padding:9px 0 8px}
  .baselineObjectMass strong{font-size:18px}
  .baselineObjectFacts{margin-top:9px;gap:9px}
  .baselineObjectCard.details-open .baselineObjectDetails{max-height:34dvh;margin-top:10px}
  .baselineObjectSection{padding-top:9px}
  .baselineObjectSection dl{gap:6px}
  .baselineObjectActions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .baselineObjectDetailsToggle{min-height:38px;margin-top:9px}
}

@media (prefers-reduced-motion:reduce){
  .baseline-shell button,
  body.baseline-ui.baseline-object-panel #objectBar,
  .baselineObjectHeader>button,
  .baselineObjectDetails,
  .baselineObjectDetailsToggle,
  .baselineObjectActions button,
  body.baseline-ui #buyModal *{transition:none!important;animation:none!important}
}


/* Stabilization: unread count in the existing MDG Notifications section. */
body.baseline-ui #menuNotificationsLabel{display:flex;align-items:center;gap:7px}
body.baseline-ui #menuNotificationsBadge{
  display:inline-flex;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;
  border:1px solid rgba(var(--edge-rgb),.38);border-radius:9px;background:rgba(10,35,48,.82);
  color:#eaf8ff;font:650 10px/1 var(--font-ui);letter-spacing:0;
}
body.baseline-ui #menuNotificationsBadge[hidden]{display:none!important}

/* Final HUD polish ---------------------------------------------------------
   Presentation-only normalization for the existing baseline surfaces. The
   application structure, handlers, geometry, and state classes remain owned
   by their existing components. */
body.baseline-ui{
  color:var(--hud-text);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.baseline-ui ::-webkit-scrollbar{width:8px;height:8px}
body.baseline-ui ::-webkit-scrollbar-track{background:rgba(1,7,12,.32)}
body.baseline-ui ::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:var(--hud-radius-md);background-clip:padding-box;background-color:rgba(var(--edge-rgb),.3)}
body.baseline-ui ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--edge-rgb),.52)}
body.baseline-ui *{scrollbar-color:rgba(var(--edge-rgb),.34) transparent;scrollbar-width:thin}

body.baseline-ui .baseline-shell button,
body.baseline-ui .buyModal button,
body.baseline-ui .gui-side-drawer button,
body.baseline-ui .detailDrawer button,
body.baseline-ui .placementHud button,
body.baseline-ui .galaxyMinimap button{
  border-color:var(--hud-border);
  border-radius:var(--hud-radius-sm);
  background:var(--hud-bg);
  color:var(--hud-text);
  transition:border-color var(--hud-transition-fast),background var(--hud-transition-fast),color var(--hud-transition-fast),box-shadow var(--hud-transition-fast),opacity var(--hud-transition-fast);
}
body.baseline-ui .baseline-shell button:hover,
body.baseline-ui .buyModal button:hover,
body.baseline-ui .gui-side-drawer button:hover,
body.baseline-ui .detailDrawer button:hover,
body.baseline-ui .placementHud button:hover,
body.baseline-ui .galaxyMinimap button:hover{
  border-color:var(--hud-border-strong);
  background:var(--hud-bg-soft);
  color:#fff;
}
body.baseline-ui .baseline-shell button:focus-visible,
body.baseline-ui .buyModal button:focus-visible,
body.baseline-ui .gui-side-drawer button:focus-visible,
body.baseline-ui .detailDrawer button:focus-visible,
body.baseline-ui .placementHud button:focus-visible,
body.baseline-ui .galaxyMinimap button:focus-visible,
body.baseline-ui input:focus-visible,
body.baseline-ui select:focus-visible,
body.baseline-ui textarea:focus-visible{
  outline:2px solid rgba(var(--accent-rgb),.84);
  outline-offset:2px;
}
/* THE primary button. Every confirm/commit action in the product resolves to
   this one treatment: a filled accent surface with dark readable text. It used
   to be flattened to the same dark glass as every secondary control, which left
   the product with no visual primary anywhere. */
body.baseline-ui button.primary,
body.baseline-ui .baseline-shell .baseline-create,
body.baseline-ui .placementTools .place{
  border:1px solid rgba(var(--accent-rgb),.5);
  background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  color:#04121a;
  font-weight:700;
  box-shadow:0 10px 30px -12px rgba(var(--accent-rgb),.75),inset 0 1px 0 rgba(255,255,255,.3);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui button.primary:hover,
  body.baseline-ui .baseline-shell .baseline-create:hover,
  body.baseline-ui .placementTools .place:hover{
    background:linear-gradient(180deg,var(--accent-bright),var(--accent));
    border-color:rgba(var(--accent-rgb),.7);
    color:#04121a;
    filter:brightness(1.06);
  }
}
body.baseline-ui button:disabled{
  border-color:var(--border);
  background:var(--surface-3);
  color:var(--text-tertiary);
  box-shadow:none;
  filter:none;
  opacity:.55;
}

body.baseline-ui #liveTicker,
body.baseline-ui #hudDock .galaxyMinimap,
body.baseline-ui #profilePanel .gui-core-panel,
body.baseline-ui #contribModal>.buyPanel,
body.baseline-ui #historyModal>.historyPanel,
body.baseline-ui #galaxyEventsModal>.galaxyEventsPanel,
body.baseline-ui #imageManageModal>.imageManagePanel,
body.baseline-ui #buyModal>.buyPanel,
body.baseline-ui #placementReviewModal>.buyPanel,
body.baseline-ui #detailDrawer,
body.baseline-ui .gui-side-drawer{
  border-color:var(--hud-border);
  background:var(--hud-bg-strong);
  box-shadow:0 18px 54px rgba(0,0,0,.48),inset 0 0 28px rgba(var(--edge-rgb),.035);
}
body.baseline-ui #liveTicker{background:rgba(var(--ink-rgb),.76);box-shadow:0 8px 24px rgba(0,0,0,.28)}
body.baseline-ui #liveTicker .tickerLiveToggle{color:var(--hud-cyan);border-right-color:var(--hud-cyan-soft)}
body.baseline-ui #liveTicker .tickerItem{color:#cfe2eb}
body.baseline-ui #liveTicker .tickerSep{color:rgba(var(--edge-rgb),.42)}

body.baseline-ui #searchPanel,
body.baseline-ui .gui-side-drawer,
body.baseline-ui .gui-core-panel,
body.baseline-ui .buyPanel,
body.baseline-ui .placementCard,
body.baseline-ui .baselineObjectCard{
  border-radius:var(--hud-radius-lg);
}
body.baseline-ui #searchPanel .gui-search-input input,
body.baseline-ui .buyPanel input,
body.baseline-ui .buyPanel select,
body.baseline-ui .buyPanel textarea,
body.baseline-ui .gui-side-drawer input,
body.baseline-ui .baselineObjectSignalEditor textarea{
  border:1px solid var(--hud-border);
  border-radius:var(--hud-radius-sm);
  background:rgba(var(--ink-rgb),.78);
  color:var(--hud-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body.baseline-ui input::placeholder,
body.baseline-ui textarea::placeholder{color:#6f8998;opacity:1}
body.baseline-ui .gui-search-status.error,
body.baseline-ui .imageManageStatus.is-error,
body.baseline-ui .historyState.is-error{color:var(--hud-danger)}
body.baseline-ui .gui-search-status.loading,
body.baseline-ui .historyState{color:var(--hud-cyan)}
body.baseline-ui .placementModeValidity[data-state="ready"],
body.baseline-ui .placementStatus.pGood{color:var(--hud-success)}
body.baseline-ui .placementModeValidity[data-state="warning"],
body.baseline-ui .placementStatus.pWarn{color:var(--hud-warning)}
body.baseline-ui .placementModeValidity[data-state="blocked"],
body.baseline-ui .placementStatus.pBad{color:var(--hud-danger)}

body.baseline-ui .baselineObjectCard,
body.baseline-ui.baseline-object-panel #objectBar{
  border-color:var(--hud-border-strong);
  background:var(--hud-bg-strong);
  box-shadow:0 18px 48px rgba(0,0,0,.52),inset 0 0 22px rgba(var(--edge-rgb),.035);
}
body.baseline-ui .baselineObjectSection{border-top-color:rgba(var(--edge-rgb),.16)}
body.baseline-ui .baselineObjectSection h3,
body.baseline-ui .baselineObjectSectionHead h3{color:var(--hud-cyan)}
body.baseline-ui .baselineObjectSignalUpdated,
body.baseline-ui #baselineObjectSignalUpdated{color:var(--hud-text-muted)}
body.baseline-ui .baselineObjectSignalText{color:var(--hud-text);line-height:1.5}
body.baseline-ui .baselineObjectSignalEditor{border-top-color:rgba(var(--edge-rgb),.16)}
body.baseline-ui .baselineObjectSignalEditorMeta span:first-child{color:var(--hud-danger)}

body.baseline-ui .placementModeBar,
body.baseline-ui .placementCard,
body.baseline-ui .placementTools,
body.baseline-ui .placementCameraTools{
  border-color:var(--hud-border);
  background:var(--hud-bg-strong);
  box-shadow:0 14px 36px rgba(0,0,0,.4),inset 0 0 20px rgba(var(--edge-rgb),.03);
}
body.baseline-ui .placementModeValidity{border-color:var(--hud-border)}
body.baseline-ui .placementCompactItem{border-color:rgba(var(--edge-rgb),.16);background:rgba(var(--ink-rgb),.6)}

body.baseline-ui .gui-side-drawer-scrim,
body.baseline-ui .buyModal,
body.baseline-ui .gui-drawer-scrim{background:rgba(var(--ink-rgb),.68)}
body.baseline-ui .gui-side-drawer-head,
body.baseline-ui .historyPanelHead,
body.baseline-ui .activityPanelHead,
body.baseline-ui .buyPanel>.buyHead,
body.baseline-ui .baselineCreateHeader{border-bottom-color:rgba(var(--edge-rgb),.16)}
body.baseline-ui .gui-menu-section,
body.baseline-ui .gui-notification-list>* + *,
body.baseline-ui .historyTimeline>* + *{border-top-color:rgba(var(--edge-rgb),.14)}
body.baseline-ui .gui-menu-status,
body.baseline-ui .gui-empty-state,
body.baseline-ui .historyEmpty{color:var(--hud-text-muted)}
body.baseline-ui .gui-notification-list [data-unread="true"],
body.baseline-ui .gui-notification-list .unread{border-left-color:var(--hud-cyan);background:rgba(var(--ink-rgb),.2)}

/* -- MDG menu ---------------------------------------------------------------
   A navigation panel, not a wall of shouting buttons: one title, grouped
   destinations with quiet structural headings, and left-aligned sentence-case
   rows that read as a list. */
body.baseline-ui #menuDrawer .gui-side-drawer-head b{
  color:var(--text-primary);
  font:600 var(--fs-xl)/1.2 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #menuDrawer .gui-menu-section h2{
  margin:0 0 var(--sp-2);
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body.baseline-ui #menuDrawer .gui-menu-section{padding-top:var(--sp-5);margin-top:var(--sp-5)}
body.baseline-ui #menuDrawer .gui-menu-section:first-child{padding-top:0;margin-top:0;border-top:0}
body.baseline-ui #menuDrawer .gui-menu-section > button{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  width:100%;
  min-height:var(--ctl-h-touch);
  margin-bottom:var(--sp-1);
  padding:0 var(--sp-3);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--text-primary);
  font:500 var(--fs-md)/1.3 var(--font-ui);
  letter-spacing:0;
  text-align:left;
  text-transform:none;
  justify-content:flex-start;
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui #menuDrawer .gui-menu-section > button:hover{
    background:var(--surface-3);
    border-color:var(--border);
  }
}
/* The account footer is a real sibling, so nothing is hidden behind it - but a
   row clipped flat at the scroll boundary reads as broken rather than as "more
   below". A short fade at the bottom edge signals scrollability instead. */
body.baseline-ui #menuDrawer .gui-side-drawer-scroll{
  padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom));
  scroll-padding-bottom:var(--sp-6);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%);
}

@media (max-width:700px) and (orientation:portrait){
  body.baseline-ui #profilePanel .gui-core-panel,
  body.baseline-ui #contribModal>.buyPanel,
  body.baseline-ui #historyModal>.historyPanel,
  body.baseline-ui #galaxyEventsModal>.galaxyEventsPanel,
  body.baseline-ui #imageManageModal>.imageManagePanel,
  body.baseline-ui #buyModal>.buyPanel,
  body.baseline-ui #placementReviewModal>.buyPanel{
    border-radius:var(--hud-radius-lg) var(--hud-radius-lg) 0 0;
  }
  body.baseline-ui .buyPanel input,
  body.baseline-ui .buyPanel select,
  body.baseline-ui .buyPanel textarea,
  body.baseline-ui .baselineObjectSignalEditor textarea{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  body.baseline-ui *{scroll-behavior:auto!important;transition-duration:0ms!important;animation-duration:0ms!important}
}

/* ============================================================================
   PASS 2 · WORKFLOW SURFACES
   ----------------------------------------------------------------------------
   Create, Contribution, My Galaxy, History, Map and Notifications. These all
   inherited the palette and controls from the token migration in pass 1; this
   section gives them the same information hierarchy, concentric geometry and
   spacing rhythm as the galaxy shell.

   Presentation only: no handler, endpoint, validation rule or Mass semantic is
   touched anywhere below.
   ========================================================================== */

/* -- shared: modal shells ---------------------------------------------------
   One level-1 treatment for every focused surface, so Create, Add Mass,
   History and the rest read as the same product. */
body.baseline-ui #buyModal>.buyPanel,
body.baseline-ui #contribModal>.buyPanel,
body.baseline-ui #placementReviewModal>.buyPanel,
body.baseline-ui #historyModal>.historyPanel,
body.baseline-ui #galaxyEventsModal>.galaxyEventsPanel,
body.baseline-ui #imageManageModal>.imageManagePanel,
body.baseline-ui #profilePanel .gui-core-panel{
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface-1);
  box-shadow:var(--shadow-lg),var(--edge-highlight);
  backdrop-filter:blur(24px) saturate(1.1);
  -webkit-backdrop-filter:blur(24px) saturate(1.1);
}

/* -- shared: modal headers -------------------------------------------------- */
body.baseline-ui .baselineCreateHeader h1,
body.baseline-ui .historyPanelHead b,
body.baseline-ui #profilePanelTitle{
  margin:0;
  color:var(--text-primary);
  font:600 var(--fs-xl)/1.25 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui .baselineCreateHeader p{
  margin:var(--sp-1) 0 0;
  color:var(--text-secondary);
  font:400 var(--fs-md)/1.45 var(--font-ui);
  text-transform:none;
  letter-spacing:0;
}
body.baseline-ui .baselineCreateHeader{
  gap:var(--sp-4);
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--border);
}

/* -- shared: structural labels ---------------------------------------------
   Every small uppercase key in these surfaces resolves to one style. */
body.baseline-ui #buyModal .massAccountCard span,
body.baseline-ui .createMassControls>label,
body.baseline-ui #buyModal .economyPreview>span:first-child,
body.baseline-ui .baselineMassPreviewLabel,
body.baseline-ui .buyTitle,
body.baseline-ui #contribTargetCard span,
body.baseline-ui .contribPreviewLabel{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}

/* -- segmented control: NEW OBJECT | ADD MASS | BUY MASS --------------------
   Was three separate boxes with a top-border active marker. Now a real
   segmented control: track radius --r-lg, segments --r-md, inset by --r-nest,
   which is the concentric relationship used everywhere else. */
body.baseline-ui #buyModal .massModeTabs{
  display:flex;
  gap:var(--sp-1);
  margin:var(--sp-4) 0 0;
  padding:var(--r-nest);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-sunken);
}
body.baseline-ui #buyModal .massModeTabs>button{
  flex:1 1 0;
  min-height:var(--ctl-h-sm);
  padding:0 var(--sp-3);
  border:0!important;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--text-secondary);
  font:600 var(--fs-sm)/1 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui #buyModal .massModeTabs>button:hover{color:var(--text-primary)}
}
body.baseline-ui #buyModal .massModeTabs>button[aria-selected="true"]{
  background:var(--surface-4);
  color:var(--text-primary);
  box-shadow:var(--edge-highlight);
}

/* -- available Mass ---------------------------------------------------------
   The balance is the number that governs the whole flow, so it is a level-2
   surface with the value set large, not a line of body copy. */
body.baseline-ui #buyModal .massAccountCard{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-4) 0 0;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui #buyModal .massAccountCard>div{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
body.baseline-ui #buyModal .massAccountCard b{
  color:var(--text-primary);
  font:700 var(--fs-xl)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
body.baseline-ui #buyModal .massAccountCard i{
  justify-self:end;
  padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.4 var(--font-ui);
  font-style:normal;
  letter-spacing:var(--track-label);
}
body.baseline-ui #buyModal .massAccountCard p{
  grid-column:1/-1;
  margin:0;
  color:var(--text-secondary);
  font:400 var(--fs-xs)/1.45 var(--font-ui);
  text-transform:none;
  letter-spacing:0;
}
/* Signed out is an ordinary state, not an error: keep it quiet. */
body.baseline-ui #buyModal .massAccountCard[data-state="signed-out"] b{
  font-size:var(--fs-md);
  font-weight:600;
  color:var(--text-secondary);
}

/* -- Mass stepper -----------------------------------------------------------
   [ − ][ value ][ + ] as one concentric group: the group is --r-lg, the
   controls inside it are --r-md, inset by --r-nest. */
body.baseline-ui #buyModal .massStepper{
  display:grid;
  grid-template-columns:var(--ctl-h) minmax(0,1fr) var(--ctl-h);
  gap:var(--sp-1);
  margin-top:var(--sp-2);
  padding:var(--r-nest);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-sunken);
}
body.baseline-ui #buyModal .massStepper>button{
  min-height:var(--ctl-h);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-3);
  color:var(--text-primary);
  font:500 20px/1 var(--font-ui);
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui #buyModal .massStepper>button:hover{background:var(--surface-4);border-color:var(--border-strong)}
}
body.baseline-ui #buyModal .massStepper>input{
  min-height:var(--ctl-h);
  border:0;
  border-radius:var(--r-md);
  background:transparent;
  box-shadow:none;
  color:var(--text-primary);
  font:700 var(--fs-2xl)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  text-align:center;
}
body.baseline-ui #buyModal .massStepper>input:focus{box-shadow:none;border:0;outline:2px solid rgba(var(--accent-rgb),.9);outline-offset:-2px}
/* Chrome/Safari number spinners fight the custom stepper. */
body.baseline-ui #buyModal .massStepper>input::-webkit-outer-spin-button,
body.baseline-ui #buyModal .massStepper>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.baseline-ui #buyModal .massStepper>input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* -- Mass presets ----------------------------------------------------------- */
body.baseline-ui #buyModal .massQuickPicks{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--sp-2);
  margin-top:var(--sp-2);
}
body.baseline-ui #buyModal .massQuickPicks>button{
  min-height:var(--ctl-h-sm);
  padding:0 var(--sp-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-3);
  color:var(--text-secondary);
  font:600 var(--fs-sm)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui #buyModal .massQuickPicks>button:hover{background:var(--surface-4);color:var(--text-primary)}
}
/* The selected preset was a pale lavender fill that read as a disabled state.
   Selection is an accent tint with an accent border instead. */
body.baseline-ui #buyModal .massQuickPicks>button.active{
  border-color:rgba(var(--accent-rgb),.5);
  background:rgba(var(--accent-rgb),.14);
  color:var(--accent);
}
@media (max-width:560px){
  body.baseline-ui #buyModal .massQuickPicks{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* -- result / preview ------------------------------------------------------- */
body.baseline-ui #buyModal .economyPreview{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui #buyModal .economyPreview b{
  color:var(--text-primary);
  font:700 var(--fs-lg)/1.2 var(--font-ui);
  letter-spacing:0;
}
body.baseline-ui #buyModal .economyPreview>span#buyNextStage{
  color:var(--text-tertiary);
  font:400 var(--fs-xs)/1.4 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui .economyTrack{
  height:4px;
  margin-top:var(--sp-2);
  border-radius:var(--r-pill);
  background:var(--surface-sunken);
  overflow:hidden;
}
body.baseline-ui .economyTrack>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
body.baseline-ui #buyModal .massScaleCard{
  padding:var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}

/* -- step dots --------------------------------------------------------------
   Three quiet dots; the current step is the only bright one. */
body.baseline-ui #buyModal .createSteps{
  display:flex;
  gap:var(--sp-2);
  margin:var(--sp-4) 0 0;
  padding:0;
  list-style:none;
}
body.baseline-ui #buyModal .createStepDot{
  flex:1 1 0;
  height:3px;
  border-radius:var(--r-pill);
  background:var(--surface-4);
  text-indent:-9999px;
  overflow:hidden;
}
body.baseline-ui #buyModal .createStepDot.active,
body.baseline-ui #buyModal .createStepDot[aria-current="step"]{background:var(--accent)}

/* -- modal footers ---------------------------------------------------------- */
body.baseline-ui #buyModal .buyActions,
body.baseline-ui #contribModal .buyActions,
body.baseline-ui .createActions{
  display:flex;
  justify-content:flex-end;
  gap:var(--sp-2);
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px solid var(--border);
}

/* -- Add Mass ---------------------------------------------------------------
   Mirrors Create deliberately: same title treatment, same stepper, same preset
   chips, same primary CTA. The two flows spend Mass in the same way and should
   not look like different products. */
body.baseline-ui #contribModal .purchaseStep{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body.baseline-ui #contribModal .buyTitle{
  margin-top:var(--sp-2);
  color:var(--text-primary);
  font:600 var(--fs-xl)/1.25 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #contribModal .buySub{
  margin-top:var(--sp-1);
  color:var(--text-secondary);
  font:400 var(--fs-md)/1.45 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #contribModal .massAccountCard{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui #contribModal .massAccountCard b{
  color:var(--text-primary);
  font:600 var(--fs-md)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
}
body.baseline-ui #contribModal .massAccountCard i{
  justify-self:end;
  padding:var(--sp-1) var(--sp-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.4 var(--font-ui);
  font-style:normal;
  letter-spacing:var(--track-label);
}
body.baseline-ui #contribModal .field>label{
  display:block;
  margin-bottom:var(--sp-2);
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body.baseline-ui #contribModal .massStepper{
  display:grid;
  grid-template-columns:var(--ctl-h) minmax(0,1fr) var(--ctl-h);
  gap:var(--sp-1);
  padding:var(--r-nest);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-sunken);
}
body.baseline-ui #contribModal .massStepper>button{
  min-height:var(--ctl-h);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-3);
  color:var(--text-primary);
  font:500 20px/1 var(--font-ui);
}
body.baseline-ui #contribModal .massStepper>input{
  min-height:var(--ctl-h);
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--text-primary);
  font:700 var(--fs-2xl)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  text-align:center;
}
body.baseline-ui #contribModal #contribPresets{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--sp-2);
  margin-top:var(--sp-2);
}
body.baseline-ui #contribModal #contribPresets>button{
  min-height:var(--ctl-h-sm);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface-3);
  color:var(--text-secondary);
  font:600 var(--fs-xs)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
body.baseline-ui #contribModal #contribPresets>button.active{
  border-color:rgba(var(--accent-rgb),.5);
  background:rgba(var(--accent-rgb),.14);
  color:var(--accent);
}
/* The ownership rule, stated where the decision happens. */
body.baseline-ui .contribOwnershipNote{
  margin:var(--sp-4) 0 0;
  color:var(--text-tertiary);
  font:400 var(--fs-xs)/1.45 var(--font-ui);
  text-align:right;
}
@media (max-width:560px){
  body.baseline-ui #contribModal #contribPresets{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.baseline-ui .contribOwnershipNote{text-align:left}
}

/* -- My Galaxy --------------------------------------------------------------
   A personal index, not a second dashboard: one balance, three tabs, then
   quiet rows. */
body.baseline-ui #profilePanel .gui-portfolio-stats{
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
body.baseline-ui #profilePanel .gui-portfolio-stats>*{
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui #profilePanel .gui-portfolio-stats b{
  color:var(--text-primary);
  font:700 var(--fs-xl)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
}
body.baseline-ui #profilePanel .gui-portfolio-stats span{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
/* Tabs: same segmented control as Create. */
body.baseline-ui #profilePanel [role="tablist"]{
  display:flex;
  gap:var(--sp-1);
  margin-bottom:var(--sp-4);
  padding:var(--r-nest);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-sunken);
}
body.baseline-ui #profilePanel [role="tablist"]>button{
  flex:1 1 0;
  min-height:var(--ctl-h-sm);
  border:0!important;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--text-secondary);
  font:600 var(--fs-sm)/1 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #profilePanel [role="tablist"]>button[aria-selected="true"]{
  background:var(--surface-4);
  color:var(--text-primary);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui #profilePanel .gui-profile-objects>*{
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-2);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui #profilePanel .gui-profile-objects>*:hover{
    border-color:var(--border-strong);
    background:var(--surface-3);
  }
}

/* -- Object history ---------------------------------------------------------
   A deliberate deeper read: generous vertical rhythm, date grouping, minimal
   dividers, no raw event log. */
body.baseline-ui #historyModal .historyPanelHead{
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--border);
}
body.baseline-ui #historyModal .historyProvenance{
  padding:var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui #historyModal .historyProvenance h2,
body.baseline-ui #historyModal .historyDateGroup>h3{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body.baseline-ui #historyModal .historyEvent{
  padding:var(--sp-3) 0;
  border-top:1px solid var(--border);
}
body.baseline-ui #historyModal .historyEvent .hText{
  color:var(--text-primary);
  font:400 var(--fs-md)/1.45 var(--font-ui);
}

/* -- Map --------------------------------------------------------------------
   A navigation aid that must not compete with the real galaxy. */
body.baseline-ui #hudDock .galaxyMinimap{
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--surface-1);
  box-shadow:var(--shadow-lg),var(--edge-highlight);
}
body.baseline-ui #galaxyMinimap #minimapTitle{
  color:var(--text-primary);
  font:600 var(--fs-md)/1.2 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #galaxyMinimap #minimapInstructions,
body.baseline-ui #galaxyMinimap #minimapScale,
body.baseline-ui #galaxyMinimap #minimapAddress{
  color:var(--text-tertiary);
  font:400 var(--fs-xs)/1.4 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}

/* -- Notifications ----------------------------------------------------------
   Unread is a slightly brighter surface plus a small accent marker - never a
   glow. */
body.baseline-ui .gui-notification-list>*{
  padding:var(--sp-3);
  border-radius:var(--r-md);
}
body.baseline-ui .gui-notification-list [data-unread="true"],
body.baseline-ui .gui-notification-list .unread{
  border-left:2px solid var(--accent);
  background:var(--surface-2);
}
body.baseline-ui #menuNotificationsBadge{
  min-width:18px;
  padding:0 var(--sp-1);
  border-radius:var(--r-pill);
  background:var(--accent);
  color:#04121a;
  font:700 var(--fs-2xs)/18px var(--font-ui);
  text-align:center;
}

/* -- Add Mass: target + before/after preview --------------------------------
   These two blocks are written by JS at open time, so they were empty during
   the first design pass and never got laid out. Stress-tested with a 56-char
   object name and a 7-figure Mass. */
body.baseline-ui #contribModal .contribTargetCard{
  margin-top:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui #contribModal .ctTop{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--sp-3);
  min-width:0;
}
body.baseline-ui #contribModal .ctOrb{
  width:28px;
  height:28px;
  border-radius:var(--r-pill);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
}
body.baseline-ui #contribModal .ctText{display:flex;flex-direction:column;gap:2px;min-width:0}
body.baseline-ui #contribModal .ctText>b{
  color:var(--text-primary);
  font:600 var(--fs-md)/1.3 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
  overflow-wrap:anywhere;
}
body.baseline-ui #contribModal .ctText>span{
  color:var(--text-secondary);
  font:400 var(--fs-xs)/1.4 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #contribModal .ctTrack{
  height:4px;
  margin-top:var(--sp-3);
  border-radius:var(--r-pill);
  background:var(--surface-sunken);
  overflow:hidden;
}
body.baseline-ui #contribModal .ctTrack>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}

/* BEFORE -> AFTER is the whole point of this surface: three columns, the
   delta called out in the middle, sizes drawn to real proportion. */
body.baseline-ui #contribModal .contribPreview{margin-top:var(--sp-4)}
body.baseline-ui #contribModal .massChangeVisual{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  box-shadow:var(--edge-highlight);
}
body.baseline-ui #contribModal .massChangeSide{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-1);
  min-width:0;
  text-align:center;
}
body.baseline-ui #contribModal .massChangeSide>span{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body.baseline-ui #contribModal .massChangeSide>b{
  color:var(--text-primary);
  font:700 var(--fs-lg)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
}
body.baseline-ui #contribModal .massChangeSide>small{
  color:var(--text-secondary);
  font:400 var(--fs-xs)/1.35 var(--font-ui);
  overflow-wrap:anywhere;
}
body.baseline-ui #contribModal .massChangeViewport{
  display:grid;
  place-items:center;
  min-height:72px;
}
body.baseline-ui #contribModal .massChangeArrow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:0 var(--sp-2);
}
body.baseline-ui #contribModal .massChangeArrow>b{
  color:var(--mint);
  font:700 var(--fs-lg)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
}
body.baseline-ui #contribModal .massChangeArrow>span{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
}
body.baseline-ui #contribModal .massChangeArrow>i{color:var(--text-tertiary);font-style:normal;font-size:var(--fs-lg)}
body.baseline-ui #contribModal .massChangeScale,
body.baseline-ui #contribModal .massChangeSummary>span{
  color:var(--text-tertiary);
  font:400 var(--fs-xs)/1.45 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #contribModal .massChangeScale{margin-top:var(--sp-2);text-align:center}
body.baseline-ui #contribModal .massChangeSummary{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:var(--sp-3);
}
body.baseline-ui #contribModal .massChangeSummary>b{
  color:var(--text-primary);
  font:600 var(--fs-md)/1.35 var(--font-ui);
  overflow-wrap:anywhere;
}
body.baseline-ui #contribModal .massChangeSummary .critical{color:var(--warning)}
/* Projected facts: label over value, never label-run-into-value. */
body.baseline-ui #contribModal .projected{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-3);
  margin-top:var(--sp-4);
  padding-top:var(--sp-4);
  border-top:1px solid var(--border);
}
body.baseline-ui #contribModal .projected>div{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
body.baseline-ui #contribModal .projected span{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body.baseline-ui #contribModal .projected b{
  color:var(--text-primary);
  font:600 var(--fs-md)/1.35 var(--font-ui);
  overflow-wrap:anywhere;
}
@media (max-width:560px){
  body.baseline-ui #contribModal .massChangeVisual{grid-template-columns:1fr;gap:var(--sp-2)}
  body.baseline-ui #contribModal .massChangeArrow{flex-direction:row;gap:var(--sp-2)}
  body.baseline-ui #contribModal .massChangeArrow>i{transform:rotate(90deg)}
}
/* The proportional orbs sit directly on the card. The inherited viewport had
   its own border/background, which read as a third nesting level for no reason
   (card > preview card > orb box). */
body.baseline-ui #contribModal .massChangeViewport,
body.baseline-ui #buyModal .massScaleViewport{
  border:0;
  background:transparent;
  box-shadow:none;
}

/* -- History filters --------------------------------------------------------
   MAJOR EVENTS / ALL ACTIVITY is a two-way choice, so it uses the same
   segmented control as Create and My Galaxy rather than two loose pills. */
body.baseline-ui #historyModal #historyFilters{
  display:inline-flex;
  gap:var(--sp-1);
  padding:var(--r-nest);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface-sunken);
}
body.baseline-ui #historyModal #historyFilters>button{
  min-height:var(--ctl-h-sm);
  padding:0 var(--sp-4);
  border:0!important;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--text-secondary);
  font:600 var(--fs-sm)/1 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #historyModal #historyFilters>button.active{
  background:var(--surface-4);
  color:var(--text-primary);
  box-shadow:var(--edge-highlight);
}

/* -- My Galaxy tabs ---------------------------------------------------------
   galaxy-ui.js renders these as role="tab" buttons carrying a count <span>.
   Same segmented treatment; the count is a quiet trailing number. */
body.baseline-ui #profilePanel [role="tablist"]>button>span{
  margin-left:var(--sp-2);
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
}
body.baseline-ui #profilePanel [role="tablist"]>button[aria-selected="true"]>span{color:var(--accent)}
/* Empty states stay calm and offer the next step rather than apologising. */
body.baseline-ui #profilePanel .gui-empty-state{
  padding:var(--sp-8) var(--sp-4);
  color:var(--text-secondary);
  font:400 var(--fs-md)/1.5 var(--font-ui);
  text-align:center;
}
body.baseline-ui #profilePanel .gui-loading{
  padding:var(--sp-6);
  color:var(--text-tertiary);
  font:400 var(--fs-md)/1.5 var(--font-ui);
  text-align:center;
}

/* -- My Galaxy: stats + object rows -----------------------------------------
   Both are rendered by galaxy-ui.js and were empty during the first pass, so
   their inner elements had never been laid out: <span> label and <b> value sat
   inline and ran straight into each other ("AVAILABLE MASS1,275",
   "Vega MinorGiant Planet · 71 MASS"). Real structure is:
     .gui-profile-stat   > span + b
     .gui-object-result  > i.resultOrb + span.resultCopy + span.resultMeta   */
body.baseline-ui #profilePanel .gui-portfolio-stats{
  display:grid;
  /* galaxy-ui.css pins .gui-portfolio-stats to `repeat(6,...)!important` for
     the old six-card dashboard, and an earlier baseline rule forces the
     sibling .gui-profile-stats class to display:block. This element carries
     BOTH classes, so the layout has to be asserted at the same strength.
     110px lets all three stats share one row inside the ~430px panel; below
     that they wrap to two, then one, rather than stacking immediately. */
  display:grid!important;
  /* auto-fit at 150px: three-up on a wide panel, two-up on the ~396px drawer.
     At 110px all three fitted but a 7-figure Mass ("1,625,219") clipped, and a
     truncated number is worse than a wrapped row. */
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
}
body.baseline-ui #profilePanel .gui-profile-stat{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  min-width:0;
}
body.baseline-ui #profilePanel .gui-profile-stat>span{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
}
body.baseline-ui #profilePanel .gui-profile-stat>b{
  color:var(--text-primary);
  font:700 var(--fs-lg)/1.1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;          /* never clip a Mass value */
}

body.baseline-ui #profilePanel .gui-profile-objects{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
body.baseline-ui #profilePanel .gui-object-result{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-3);
  width:100%;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-2);
  text-align:left;
  cursor:pointer;
}
body.baseline-ui #profilePanel .resultOrb{
  width:32px;
  height:32px;
  border-radius:var(--r-pill);
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
}
body.baseline-ui #profilePanel .resultOrb>img{width:100%;height:100%;object-fit:cover;display:block}
body.baseline-ui #profilePanel .resultCopy{display:flex;flex-direction:column;gap:2px;min-width:0}
body.baseline-ui #profilePanel .gui-object-result-top{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-width:0;
}
body.baseline-ui #profilePanel .gui-object-result-top>b{
  color:var(--text-primary);
  font:600 var(--fs-md)/1.3 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
  overflow-wrap:anywhere;
}
body.baseline-ui #profilePanel .gui-object-status{
  flex:0 0 auto;
  padding:2px var(--sp-2);
  border-radius:var(--r-pill);
  background:var(--surface-4);
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.4 var(--font-ui);
  font-style:normal;
  letter-spacing:var(--track-label);
}
body.baseline-ui #profilePanel .resultCopy>span{
  color:var(--text-secondary);
  font:400 var(--fs-xs)/1.4 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
body.baseline-ui #profilePanel .resultCopy>small{
  color:var(--text-tertiary);
  font:400 var(--fs-2xs)/1.4 var(--font-ui);
  letter-spacing:0;
  text-transform:none;
}
/* Mass is the number people scan this list for: right-aligned column. */
body.baseline-ui #profilePanel .resultMeta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
  flex:0 0 auto;
}
body.baseline-ui #profilePanel .resultMeta>b{
  color:var(--text-primary);
  font:700 var(--fs-md)/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
}
body.baseline-ui #profilePanel .resultMeta>small{
  color:var(--text-tertiary);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  letter-spacing:var(--track-label);
}
body.baseline-ui #profilePanel .resultMeta>em{
  color:var(--accent);
  font:600 var(--fs-2xs)/1.2 var(--font-ui);
  font-style:normal;
  letter-spacing:var(--track-label);
}
@media (hover:hover) and (pointer:fine){
  body.baseline-ui #profilePanel .gui-object-result:hover{
    border-color:var(--border-strong);
    background:var(--surface-3);
  }
}
@media (max-width:560px){
  /* VIEW -> and the status pill are the first things to go when space is tight. */
  body.baseline-ui #profilePanel .resultMeta>em{display:none}
}

/* The same row component is reused by Find, so it inherits this layout there. */
body.baseline-ui #searchResults .gui-object-result{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-3);
}