@font-face { font-family: 'Satoshi'; src: url('/_studio/fonts/satoshi-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/_studio/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/_studio/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/_studio/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('/_studio/fonts/satoshi-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/_studio/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/_studio/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ms-font-display: 'Satoshi', system-ui, sans-serif;
  --ms-font-body: 'Satoshi', system-ui, sans-serif;
  --ms-font-num: 'JetBrains Mono', ui-monospace, monospace;
  --ms-ink: #14161f;
  --ms-ink-soft: #4a4f63;
  --ms-gold: #9a7414;
  --ms-glass: rgba(255, 255, 255, 0.62);
  --ms-glass-strong: rgba(255, 255, 255, 0.82);
  --ms-glass-border: rgba(255, 255, 255, 0.9);
  --ms-shadow: 0 10px 40px rgba(40, 52, 90, 0.10);
  --ms-radius: 18px;
  --ms-blur: blur(22px) saturate(160%);
  --ms-bloom:
    radial-gradient(40vw 40vw at 8% 12%, rgba(255, 200, 221, 0.55), transparent 60%),
    radial-gradient(38vw 38vw at 92% 8%, rgba(190, 220, 255, 0.60), transparent 60%),
    radial-gradient(45vw 45vw at 70% 95%, rgba(214, 245, 226, 0.55), transparent 60%),
    #f7f8fc;
}

html, body { font-family: var(--ms-font-body); color: var(--ms-ink); background: var(--ms-bloom) fixed; }
h1, h2, h3, h4 { font-family: var(--ms-font-display); font-weight: 900; letter-spacing: -0.01em; }
code, pre, kbd, .tabular, [data-numeric] { font-family: var(--ms-font-num); font-variant-numeric: tabular-nums; }

.ms-glass {
  background: var(--ms-glass);
  backdrop-filter: var(--ms-blur);
  -webkit-backdrop-filter: var(--ms-blur);
  border: 1px solid var(--ms-glass-border);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow);
}

.ms-login { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 16px; }
.ms-login-card { width: min(420px, 100%); padding: 32px; display: grid; gap: 14px; box-sizing: border-box; }
.ms-login-card h1 { margin: 0; font-size: 28px; }
.ms-login-card p { margin: 0; color: var(--ms-ink-soft); font-weight: 400; }
.ms-login-card form { display: grid; gap: 10px; }
.ms-login-card label { font-weight: 500; font-size: 14px; }
.ms-login-card input {
  font: inherit; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(20, 22, 31, 0.12); background: var(--ms-glass-strong);
}
.ms-login-card button {
  font: inherit; font-weight: 700; padding: 12px 14px; border: 0; border-radius: 12px;
  background: var(--ms-ink); color: #fff; cursor: pointer;
}
.ms-login-card button:hover { background: var(--ms-gold); }
.ms-login-card [role="status"] { color: var(--ms-gold); font-weight: 500; }

/* STUDIO MAP: OpenDesign skin. Variables first; structural selectors only where OpenDesign has no variable.
   html:root beats OpenDesign's :root, and !important beats the inline --accent* style it writes on <html>.
   Dark theme is not mapped: the studio is light only, so the light values apply under every data-theme. */
html:root, html:root[data-theme] {
  --bg: #ffffff;
  --bg-app: #f7f8fc;
  --bg-panel: rgba(255, 255, 255, 0.72);
  --bg-subtle: rgba(20, 22, 31, 0.04);
  --bg-muted: rgba(20, 22, 31, 0.06);
  --bg-elevated: rgba(255, 255, 255, 0.86);
  --glass-regular: rgba(255, 255, 255, 0.62);
  --glass-regular-blur: 22px;
  --material-ultrathin: rgba(255, 255, 255, 0.38);
  --material-thin: rgba(255, 255, 255, 0.52);
  --material-regular: rgba(255, 255, 255, 0.62);
  --material-thick: rgba(255, 255, 255, 0.82);
  --border: rgba(20, 22, 31, 0.10);
  --border-strong: rgba(20, 22, 31, 0.16);
  --border-soft: rgba(20, 22, 31, 0.06);
  --text: #2c303d;
  --text-strong: #14161f;
  --text-muted: #4a4f63;
  --text-soft: #6b7086;
  --text-faint: #8a8ea3;
  --accent: #14161f !important;
  --accent-strong: #000000 !important;
  --accent-soft: rgba(154, 116, 20, 0.12) !important;
  --accent-tint: rgba(154, 116, 20, 0.06) !important;
  --accent-hover: #9a7414 !important;
  --accent-contrast: #ffffff;
  --brand: #9a7414;
  --send-ground: #14161f;
  --send-ink: #ffffff;
  --selected: rgba(154, 116, 20, 0.14);
  --selected-soft: rgba(154, 116, 20, 0.08);
  --sans: 'Satoshi', system-ui, sans-serif;
  --serif: 'Satoshi', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --app-wash: var(--ms-bloom);
  --veil-shell: transparent;
  --veil-page: transparent;
  --veil-canvas: transparent;
  --veil-panel: transparent;
  --shadow-sm: 0 2px 8px rgba(40, 52, 90, 0.08);
  --shadow-md: 0 10px 30px rgba(40, 52, 90, 0.10);
  --shadow-lg: 0 24px 60px rgba(40, 52, 90, 0.14);
  color-scheme: light;
}

/* OpenDesign paints body white with its own selector; the blooms sit behind every panel. */
html body { background: var(--ms-bloom) fixed; color: var(--text); font-family: var(--ms-font-body); }
html body .workspace-shell { background: transparent; }

/* Frosted panels: the solid colour is the fallback, the blur only applies where it is supported. */
.split-chat-slot, .workspace, .app-chrome-header, .chat-composer-fixed-layer .composer-shell, .artifact-version-panel {
  background: var(--ms-glass-strong);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .split-chat-slot, .workspace, .app-chrome-header, .artifact-version-panel {
    background: var(--ms-glass);
    backdrop-filter: var(--ms-blur);
    -webkit-backdrop-filter: var(--ms-blur);
  }
}

/* Layout A: chat left, canvas centre, versions right. Order and grid only, no DOM moves. */
.workspace-shell__body { padding: 8px; box-sizing: border-box; }
.split { gap: 8px; }
.split-chat-slot { order: 1; border: 1px solid var(--ms-glass-border); border-radius: var(--ms-radius); box-shadow: var(--ms-shadow); overflow: hidden; }
.split-resize-handle { order: 2; }
.workspace { order: 3; border: 1px solid var(--ms-glass-border); border-radius: var(--ms-radius); box-shadow: var(--ms-shadow); overflow: hidden; }
.ws-tabs-shell, .viewer-toolbar { background: transparent; }
.ws-body, .viewer-body { background: transparent; }
.comment-preview-canvas { border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }

/* Versions dock to the right edge as a full-height column instead of a floating popover. */
.artifact-version-panel {
  top: 52px !important; right: 8px !important; bottom: 8px !important; left: auto !important;
  width: 300px; max-height: none; border: 1px solid var(--ms-glass-border);
  border-radius: var(--ms-radius); box-shadow: var(--ms-shadow);
}
.artifact-version-card.is-selected { box-shadow: 0 0 0 2px var(--ms-gold) inset; }
.artifact-version-card__meta, .viewer-comment-count, .zoom-trigger, .file-version-source-badge { font-family: var(--ms-font-num); }

/* Device and design/code toggles read as one segmented control. */
.viewer-mode-tabs, .viewer-viewport-switcher {
  background: rgba(255, 255, 255, 0.7); border: 1px solid var(--border); border-radius: 12px; padding: 2px;
}
.viewer-tab.active { background: #ffffff; color: var(--ms-ink); border-color: transparent; box-shadow: var(--shadow-sm); }

/* Primary actions: ink with a gold hover. */
.chrome-action-dark, .composer-send { background: var(--ms-ink); color: #ffffff; border-color: var(--ms-ink); }
.chrome-action-dark:hover, .composer-send:hover { background: var(--ms-gold); border-color: var(--ms-gold); }
.composer-shell { border-radius: var(--ms-radius); border-color: var(--border); box-shadow: var(--ms-shadow); }

/* The Share link, Download PDF and Download PNG controls added by studio.js. */
.ms-actions { display: inline-flex; gap: 6px; margin-left: auto; margin-right: 12px; align-items: center; }
.ms-action {
  font: 700 12px/1 var(--ms-font-body); padding: 8px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.85); color: var(--ms-ink); white-space: nowrap;
}
.ms-actions .ms-action { display: inline-block; }
.ms-action--size { padding-right: 8px; }
.ms-action--pdf { background: var(--ms-ink); color: #ffffff; border-color: var(--ms-ink); }
.ms-action:hover:not([disabled]) { border-color: var(--ms-gold); color: var(--ms-gold); }
.ms-action--pdf:hover:not([disabled]) { background: var(--ms-gold); color: #ffffff; }
.ms-action[disabled] { opacity: 0.45; cursor: not-allowed; }
.ms-action:focus-visible { outline: 2px solid var(--ms-gold); outline-offset: 2px; }

/* Phones: one column, canvas first, chat below it. Order only, the DOM is untouched. */
@media (max-width: 760px) {
  .split { grid-template-columns: 100% !important; grid-template-rows: 58vh auto !important; }
  .split > .split-chat-slot, .split > .workspace { grid-column: 1 / -1 !important; }
  .split-chat-slot { order: 3; min-height: 60vh; }
  .split-resize-handle { display: none; }
  .workspace { order: 1; }
  .ms-action { padding: 7px 9px; }
  .ms-actions { gap: 4px; margin-right: 6px; }
  .ms-long { display: none; }
  .ms-action--size { max-width: 96px; }
  .artifact-version-panel { width: auto; left: 8px !important; top: auto !important; max-height: 60vh; }
}

.ms-admin { min-height: 100vh; margin: 0; padding: 16px; }
.ms-admin-card { max-width: 960px; margin: 24px auto; padding: 24px; display: grid; gap: 16px; }
.ms-admin-card nav { display: flex; gap: 16px; font-weight: 500; }
.ms-admin-card table { width: 100%; border-collapse: collapse; }
.ms-admin-card th, .ms-admin-card td { text-align: left; padding: 8px; border-bottom: 1px solid rgba(20, 22, 31, 0.08); }
.ms-admin-card [data-numeric] { font-family: var(--ms-font-num); }
.ms-admin-card small { display: block; color: var(--ms-ink-soft); }

/* OpenDesign controls that cannot work behind the gate. Hidden, never removed: React owns them.
   Share leads to deploy routes the gate denies; the Export entries flagged by studio.js answer 501. */
#app-chrome-file-actions button[aria-label="Share"],
[data-ms-hidden] { display: none !important; }

/* OpenDesign cloud sign-up and starter-credit upsell: those services are sinkholed. */
.onboarding-cloud__primary,
[class*="OnboardingWelcome-module"][class*="__credits"],
[class*="OnboardingWelcome-module"][class*="__divider"] { display: none !important; }

/* Product name in the onboarding chrome: the original text is collapsed and replaced by an overlay. */
.onboarding-cloud__title { font-size: 0 !important; }
.onboarding-cloud__title::after {
  content: "Welcome to Mindscope Design Studio";
  font: 700 32px/1.2 var(--ms-font-display); color: var(--ms-ink); letter-spacing: -0.01em;
}
.onboarding-cloud__footer > span { font-size: 0 !important; }
.onboarding-cloud__footer > span::after {
  content: "Mindscope Design Studio"; font: 500 12px/1.4 var(--ms-font-body); color: var(--text-muted);
}