/* ================= Moshpit =================
   Fielder's interface, set the way unveil.fr/research is: a near-white page, small grotesk type in
   capitals with a little tracking, controls as pale tabs with a hairline, and the images left to
   carry the color. Geist stands in for NB International. Light is the default; dark stays a choice.
   What is Moshpit's own is the orb: Artifactory's moving Orb in magenta and ember, printed as a
   halftone on its shadow side (orb.js). It is the loader, the cursor and the mark beside the name.
   Ember is the one accent. */
:root, :root[data-theme="light"] {
  --font: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mp-magenta: #da82d8; --mp-pink: #ff708a; --mp-ember: #ff481e;
  --mp-red: var(--mp-ember);
  --signal: var(--mp-ember); --signal-deep: var(--mp-ember);
  --caps: 10.5px; --track: .015em;
}
:root[data-theme="light"] {
  --frame: #fafafa; --stage: #fafafa; --surface: #f4f4f4; --surface-2: #efefef;
  --cream: #f0f0f0; --white: #fff; --chip-hover: #ebebeb; --tile: #e6e6e6;
  --ink: #000; --ink-hover: #000; --text: #000; --muted: #8c8c8c; --faint: #a6a6a6;
  --line: #e2e2e2; --ring: rgba(0,0,0,.45); --fill: #f2f2f2; --well: #efefef; --raised: #fff;
}

/* Small capitals for everything that names or labels; sentences (notes, captions, the intro) stay
   in sentence case at the same size so they still read as sentences. */
.tile-name, .tile-owner, #spaceHeading, #spaceHeading .title-count, #spaceHeading .live-from, .omni-group, .home-menu .label,
.chip, .seg button, .menu-row span, .del-pop p, .view-switch button, #settingsBtn, .card-name, .card-meta, .card-count,
.world-head h2, .dlg-head h2, .strip-tile .card-text, .crumb, #resultLabel, .kind, .omni-chip .label, .strip-new {
  font-family: var(--font) !important; font-size: var(--caps) !important; font-weight: 400 !important;
  letter-spacing: var(--track) !important; text-transform: uppercase; line-height: 1.25;
}
#spaceHeading { line-height: 32px; }
#spaceHeading .title-text, #spaceHeading .title-btn { color: var(--ink); }
.strip-tile[aria-current="true"] .tile-name { font-weight: 400 !important; text-decoration: underline; text-underline-offset: 3px; }
body, input, textarea, .menu-note, .p-meta, .hint { font-family: var(--font); }

/* Controls as tabs: pale fill, a hairline, square-ish corners, the label set low and left. */
:root[data-theme="light"] .chip, :root[data-theme="light"] .seg button, :root[data-theme="light"] #settingsBtn {
  background: var(--fill) !important; box-shadow: inset 0 0 0 1px var(--line) !important; border-radius: 4px !important; color: var(--muted) !important;
}
:root[data-theme="light"] .chip:hover, :root[data-theme="light"] .seg button:hover,
:root[data-theme="light"] .seg button[aria-pressed="true"], :root[data-theme="light"] .chip.dark { color: #000 !important; background: #fff !important; }
.seg { border-radius: 6px !important; }

/* The orb. Its canvas fills the element; the still image shows until WebGL draws. */
.mp-orb { position: relative; display: block; pointer-events: none; user-select: none; }
.mp-orb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mp-orb .mp-orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-orb.gl img { visibility: hidden; }

/* The name: a pale tab, the orb then MOSHPIT in small capitals. It is Home. */
.mp-mark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: var(--caps); letter-spacing: var(--track);
  text-transform: uppercase; line-height: 1; color: var(--ink); white-space: nowrap; }
.mp-dot { width: 14px; height: 14px; flex: none; }
.brand .mp-mark { height: 32px; padding: 0 12px 0 8px; border-radius: 4px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); }

/* Loading: the orb over the name. */
.loader { flex-direction: column; gap: 14px; }
.loader .mp-orb { width: min(36vw, 180px); height: min(36vw, 180px); }
.loader .mp-mark .mp-dot { display: none; }

/* You: the cursor is the orb. */
.depth-blob { mix-blend-mode: normal; }
.depth-blob i { left: -17px !important; top: -17px !important; width: 34px !important; height: 34px !important; border-radius: 0 !important;
  background: url(./orb.png?v=shell-1) center / contain no-repeat !important; box-shadow: none !important; }
.depth-blob i.gl { background: none !important; }
.depth-blob i .mp-orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.depth-blob.over i { transform: scale(2); }
.depth-blob svg { stroke: var(--mp-pink); }
.loader .mp-orb img { width: 100% !important; height: 100% !important; animation: none !important; transform: none !important; }