/*! © 2026 Soluber. All rights reserved.
 * Soluber polish layer, served at /soluber-brand/polish.css next to the brand guard and injected
 * before </head> by nginx. Glass on floating chrome, refined depth, spring entrances, the Atlas
 * glass-grid look. Never styles the doc editor or the edgeless canvas surface; user content is
 * untouched. Motion is transform/opacity only and is off under prefers-reduced-motion.
 * No :has() and no :not(<ancestor> *): both make style recalculation dearer while a busy canvas pans.
 */
:root {
  --sp-spring: linear(0, .0409, .1401, .2693, .4078, .5417, .6625, .7657, .8497, .9151, .9635, .9973, 1.0192, 1.0318, 1.0375, 1.0382, 1.0358, 1.0315, 1.0264, 1.0211, 1.0161, 1.0116, 1.0079, 1.0049, 1.0026, 1.0009, .9998, .9991, 1);
  --sp-out: cubic-bezier(.23, 1, .32, 1);
  --sp-drawer: cubic-bezier(.32, .72, 0, 1);
  --sp-glass: rgba(255, 255, 255, .80);
  --sp-glass-soft: rgba(255, 255, 255, .66);
  --sp-glass-edge: rgba(255, 255, 255, .72);
  --sp-glass-hi: rgba(255, 255, 255, .92);
  --sp-blur: blur(22px) saturate(180%);
  --sp-hair: rgba(40, 22, 70, .09);
  --sp-depth: 0 0 0 1px rgba(40, 22, 70, .07), 0 2px 4px -1px rgba(40, 22, 70, .06), 0 14px 30px -10px rgba(40, 22, 70, .22), 0 34px 68px -28px rgba(40, 22, 70, .26);
  --sp-depth-sm: 0 0 0 1px rgba(40, 22, 70, .06), 0 1px 2px rgba(40, 22, 70, .06), 0 8px 18px -8px rgba(40, 22, 70, .2);
  --sp-scrim: rgba(24, 16, 40, .30);
  --sp-glow: rgba(168, 110, 243, .20);
}
html[data-theme="dark"] {
  --sp-glass: rgba(30, 27, 38, .84);
  --sp-glass-soft: rgba(34, 30, 44, .72);
  --sp-glass-edge: rgba(255, 255, 255, .10);
  --sp-glass-hi: rgba(255, 255, 255, .08);
  --sp-hair: rgba(255, 255, 255, .08);
  --sp-depth: 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 4px -1px rgba(0, 0, 0, .4), 0 16px 32px -10px rgba(0, 0, 0, .6), 0 38px 76px -28px rgba(0, 0, 0, .65);
  --sp-depth-sm: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(0, 0, 0, .55);
  --sp-scrim: rgba(0, 0, 0, .48);
  --sp-glow: rgba(150, 96, 240, .24);
}

/* ---------- glass: menus, popovers, the command palette, dialogs, toasts ---------- */
html [data-radix-menu-content],
html [data-radix-popper-content-wrapper] > [role="dialog"],
html [role="dialog"][data-state="entered"],
html [data-sonner-toast] [data-title] > div:first-child {
  background-color: var(--sp-glass) !important;
  -webkit-backdrop-filter: var(--sp-blur);
  backdrop-filter: var(--sp-blur);
  border-color: var(--sp-glass-edge) !important;
  box-shadow: var(--sp-depth), inset 0 1px 0 var(--sp-glass-hi) !important;
}
html [data-radix-menu-content] { border-radius: 14px !important; }
html [data-radix-popper-content-wrapper] > [role="dialog"] { border-radius: 16px; }
html [role="dialog"][data-state="entered"] { border-radius: 18px !important; }
html [data-sonner-toast] [data-title] > div:first-child { border-radius: 14px !important; }
/* modal dialogs (settings and the like; not views that hold an editor) */
html modal-transition-container [role="dialog"] {
  background-color: var(--sp-glass) !important;
  -webkit-backdrop-filter: var(--sp-blur);
  backdrop-filter: var(--sp-blur);
  box-shadow: var(--sp-depth), inset 0 1px 0 var(--sp-glass-hi) !important;
  border-radius: 20px !important;
}
html modal-transition-container [role="dialog"] [data-testid="settings-sidebar"] { background-color: transparent !important; box-shadow: inset -1px 0 0 var(--sp-hair); }
/* a lighter, tinted scrim; no full-screen backdrop blur (without GPU compositing it slowed the
   app's own close transition ~2.5x); the dialog on top is the frosted layer */
html modal-transition-container > [data-state] {
  background-color: var(--sp-scrim) !important;
}

/* ---------- floating canvas chrome: zoom dock + minimap, the AI button ---------- */
.mn-nav .mn-nav-pill, .mn-nav .mn-nav-mini {
  background: var(--sp-glass) !important;
  -webkit-backdrop-filter: var(--sp-blur);
  backdrop-filter: var(--sp-blur);
  border-color: var(--sp-glass-edge) !important;
  box-shadow: var(--sp-depth-sm), inset 0 1px 0 var(--sp-glass-hi) !important;
  border-radius: 14px !important;
}
.mn-nav[data-app-theme="dark"] .mn-nav-pill, .mn-nav[data-app-theme="dark"] .mn-nav-mini {
  background: rgba(30, 27, 38, .84) !important; border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 8px 20px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
[data-testid="ai-island"] {
  background: var(--sp-glass) !important;
  -webkit-backdrop-filter: var(--sp-blur);
  backdrop-filter: var(--sp-blur);
  border-color: var(--sp-glass-edge) !important;
  box-shadow: var(--sp-depth-sm), inset 0 1px 0 var(--sp-glass-hi), 0 0 0 0 var(--sp-glow) !important;
  transition: transform .2s var(--sp-out), box-shadow .3s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  [data-testid="ai-island"]:hover { transform: translateY(-2px); box-shadow: var(--sp-depth), inset 0 1px 0 var(--sp-glass-hi), 0 0 0 6px var(--sp-glow) !important; }
}

/* ---------- buttons: depth on primary, a real press everywhere it is safe ---------- */
html button[data-variant="primary"] {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 1px 2px rgba(40, 22, 70, .18), 0 6px 16px -6px rgba(117, 59, 189, .55);
}
html :is(button[data-variant="primary"], button[data-variant="secondary"], [data-testid="ai-island"], .mn-at-pillbtn, .mn-at-chip, .mn-nav-btn):active:not(:disabled) {
  transform: scale(.97);
}
html :is(button[data-variant="primary"], button[data-variant="secondary"], .mn-at-pillbtn, .mn-at-chip, .mn-nav-btn) {
  transition: transform .16s var(--sp-out), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

/* ---------- motion: spring entrances, quick exits (Radix waits for the exit) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html [data-radix-menu-content][data-state="open"],
  html [data-radix-popper-content-wrapper] > [role="dialog"][data-state="open"] {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin, var(--radix-context-menu-content-transform-origin, var(--radix-popover-content-transform-origin, 50% 0)));
    animation: sp-fade-in .14s ease-out both, sp-pop-in .36s var(--sp-spring) both !important;
  }
  html [data-radix-menu-content][data-state="closed"],
  html [data-radix-popper-content-wrapper] > [role="dialog"][data-state="closed"] {
    transform-origin: var(--radix-dropdown-menu-content-transform-origin, var(--radix-context-menu-content-transform-origin, var(--radix-popover-content-transform-origin, 50% 0)));
    animation: sp-pop-out .12s var(--sp-out) both !important;
  }
  html modal-transition-container > [data-state="open"] > div {
    animation: sp-fade-in .18s ease-out both, sp-rise-in .44s var(--sp-spring) both !important;
  }
  /* sidebars glide on the drawer curve (their own transitions, retimed) */
  html [data-testid="app-sidebar-wrapper"][data-enable-animation="true"],
  html [data-handle-position="left"][data-enable-animation="true"] { transition-timing-function: var(--sp-drawer) !important; }
}
@keyframes sp-fade-in { from { opacity: 0; } }
@keyframes sp-pop-in { from { transform: scale(.94); } }
@keyframes sp-pop-out { to { opacity: 0; transform: scale(.97); } }
@keyframes sp-rise-in { from { transform: translateY(10px) scale(.975); } }

/* ---------- Atlas (Default skin): the landing's glass-grid language ---------- */
.mn-at[data-skin="default"] { --sp-card-hi: rgba(255, 255, 255, .9); --sp-card-top: rgba(255, 255, 255, .98); --sp-card-bot: rgba(250, 248, 255, .86); }
.mn-at[data-skin="default"][data-mode="dark"] { --sp-card-hi: rgba(255, 255, 255, .07); --sp-card-top: rgba(46, 41, 58, .96); --sp-card-bot: rgba(32, 28, 42, .9); --sp-glass: rgba(30, 27, 38, .84); --sp-glass-edge: rgba(255, 255, 255, .10); --sp-glass-hi: rgba(255, 255, 255, .08); --sp-glow: rgba(150, 96, 240, .26); }
.mn-at[data-skin="default"] :is(.mn-at-bar, .mn-at-brand, .mn-at-pillbtn, .mn-at-chip) {
  background: var(--sp-glass) !important;
  -webkit-backdrop-filter: var(--sp-blur);
  backdrop-filter: var(--sp-blur);
  border-color: var(--sp-glass-edge) !important;
  box-shadow: var(--sp-depth-sm), inset 0 1px 0 var(--sp-glass-hi) !important;
}
.mn-at[data-skin="default"] .mn-at-bar { border-radius: 18px; }
.mn-at[data-skin="default"] .mn-at-bar:focus-within { box-shadow: var(--sp-depth), inset 0 1px 0 var(--sp-glass-hi), 0 0 0 4px var(--mn-ring) !important; border-color: var(--mn-primary) !important; }
.mn-at[data-skin="default"] :is(.mn-at-pop, .mn-at-ans, .mn-at-menu) {
  background: var(--sp-glass) !important;
  -webkit-backdrop-filter: var(--sp-blur);
  backdrop-filter: var(--sp-blur);
  border-color: var(--sp-glass-edge) !important;
  box-shadow: var(--sp-depth), inset 0 1px 0 var(--sp-glass-hi) !important;
  border-radius: 16px;
}
.mn-at[data-skin="default"] .mn-at-region:not(.loose) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(40, 22, 70, .04), 0 22px 44px -32px rgba(40, 22, 70, .3);
}
.mn-at[data-skin="default"][data-mode="dark"] .mn-at-region:not(.loose) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 44px -30px rgba(0, 0, 0, .6); }
.mn-at[data-skin="default"] .mn-at-card {
  background: linear-gradient(180deg, var(--sp-card-top), var(--sp-card-bot));
  border-color: color-mix(in srgb, var(--mn-border) 60%, transparent);
  box-shadow: inset 0 1px 0 var(--sp-card-hi), 0 1px 2px rgba(40, 22, 70, .06), 0 10px 24px -14px rgba(40, 22, 70, .3);
}
.mn-at[data-skin="default"][data-mode="dark"] .mn-at-card { box-shadow: inset 0 1px 0 var(--sp-card-hi), 0 1px 2px rgba(0, 0, 0, .35), 0 12px 28px -14px rgba(0, 0, 0, .6); }
.mn-at[data-skin="default"] .mn-at-card:hover { box-shadow: inset 0 1px 0 var(--sp-card-hi), 0 2px 4px rgba(40, 22, 70, .06), 0 22px 40px -18px rgba(54, 25, 99, .38), 0 0 0 1px color-mix(in srgb, var(--mn-primary) 22%, transparent); }
.mn-at[data-skin="default"] .mn-at-card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 320px; height: 320px; margin: -160px 0 0 -160px; z-index: 3; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  opacity: 0; transform: translate(var(--sp-x, 116px), var(--sp-y, 0px)); transition: opacity .35s ease;
}
.mn-at[data-skin="default"][data-mode="dark"] .mn-at-card::after { background: radial-gradient(closest-side, rgba(200, 170, 255, .16), rgba(200, 170, 255, 0)); }
.mn-at[data-skin="default"] .mn-at-card.sp-lit::after { opacity: 1; }
.sp-at-aura { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sp-at-aura::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(40% 50% at 78% 12%, rgba(168, 110, 243, .22), transparent 70%),
    radial-gradient(36% 46% at 12% 88%, rgba(226, 160, 255, .16), transparent 70%),
    radial-gradient(30% 40% at 88% 92%, rgba(242, 180, 91, .10), transparent 70%);
}
.mn-at[data-mode="dark"] .sp-at-aura::before {
  background:
    radial-gradient(40% 50% at 78% 12%, rgba(126, 70, 230, .22), transparent 70%),
    radial-gradient(36% 46% at 12% 88%, rgba(84, 52, 200, .18), transparent 70%),
    radial-gradient(30% 40% at 88% 92%, rgba(242, 160, 70, .07), transparent 70%);
}
.sp-at-spot {
  position: absolute; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--sp-glow), transparent);
  opacity: 0; transition: opacity .5s ease; will-change: transform;
}
.sp-at-spot.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sp-at-spot { display: none; } .mn-at .mn-at-card::after { display: none; } }
@media (prefers-reduced-motion: no-preference) { .sp-at-aura { animation: sp-fade-in .8s ease-out both; } }
