/* ══════════════════════════════════════════════════════════════════════
   MARBLELENS · PRODUCT UNIVERSE — the night gets inside the tools.

   The sky canvas and the engine were already running on both product
   pages; nobody could see them, because every large surface was painted
   opaque on top: the builder's brief panel and canvas were solid, its
   footer and cards were still WARM BROWN (rgb 36,32,28) left over from
   the paper era, and AI Content's product shell was flat rgb(3,9,11).

   So this file does not add a background. It takes away the four or five
   lids that were sitting on the one we already had, and replaces them
   with glass: dark enough to read against, clear enough that the galaxy
   keeps drifting underneath while you work.

   Linked LAST on both product pages. Product LAYOUT is never touched —
   only the fill, the blur and the hairline of surfaces that already
   existed.
   ══════════════════════════════════════════════════════════════════════ */

/* ── the glass recipe ────────────────────────────────────────────────────
   Three depths, used consistently so the whole tool reads as one stack:
     deep  — panels you read long text in
     mid   — cards and rails
     clear — the big working areas, where the galaxy should dominate       */
:root{
  --u-glass-deep:rgba(7,9,11,.92);
  --u-glass-mid:rgba(10,12,14,.86);
  --u-glass-clear:rgba(3,5,7,.28);
  --u-glass-line:rgba(244,239,228,.09);
  --u-blur:blur(22px) saturate(115%);
}

/* ══ WEBSITE BUILDER ═══════════════════════════════════════════════════ */

/* the app bar — glass, so the stars run behind the progress stages */
body.u-night .hd{
  background:var(--u-glass-deep)!important;
  -webkit-backdrop-filter:var(--u-blur);backdrop-filter:var(--u-blur);
  border-bottom:1px solid var(--u-glass-line);
}

/* the brief column: you read here, so it is the deepest glass */
body.u-night .brief{
  background:var(--u-glass-deep)!important;
  -webkit-backdrop-filter:var(--u-blur);backdrop-filter:var(--u-blur);
  border-right:1px solid var(--u-glass-line);
}

/* the canvas: the galaxy's own room. Its wireframe rings stay — they now
   read as an instrument overlaid on the sky rather than a dark plate. */
body.u-night .canvas{
  background-color:var(--u-glass-clear)!important;
}

/* was a warm brown gradient — the last of the paper era on this page */
body.u-night .foot{
  background:var(--u-glass-deep)!important;
  background-image:none!important;
  -webkit-backdrop-filter:var(--u-blur);backdrop-filter:var(--u-blur);
  border-top:1px solid var(--u-glass-line);
}

/* cards sat at rgba(33,30,26,.9) — warm, and opaque enough to be a wall */
body.u-night .panelcard,
body.u-night .q-card,
body.u-night .rail{
  background:var(--u-glass-mid)!important;
  -webkit-backdrop-filter:var(--u-blur);backdrop-filter:var(--u-blur);
  border:1px solid var(--u-glass-line);
}

/* ══ AI CONTENT ════════════════════════════════════════════════════════ */

/* AI Content never got its own palette retuned in the merge: --aic-bg is
   #12110f and the panels run #1a1815 → #302b25 — warm browns, not the
   night. Worse, --aic-bg is the base LAYER of .overview-view's background
   SHORTHAND, so overriding background-image alone left the colour behind
   it untouched and the sky stayed walled off. Re-point the surfaces; the
   text tokens (--aic-text, --aic-muted) were already correct. */
body.u-night{
  --aic-bg:transparent;
  --aic-panel:rgba(10,12,14,.9);
  --aic-panel-2:rgba(16,18,21,.95);
  --aic-panel-3:rgba(22,25,28,.98);
  --aic-line:rgba(244,239,228,.09);
  --aic-line-hi:rgba(244,239,228,.17);
}

body.u-night .explore-nav{
  background:var(--u-glass-deep)!important;
  -webkit-backdrop-filter:var(--u-blur);backdrop-filter:var(--u-blur);
  border-right:1px solid var(--u-glass-line);
}

/* this was rgb(3,9,11) — a solid lid over the entire workspace */
body.u-night .product-shell{
  background:transparent!important;
}

/* the overview kept a .7 scrim over the whole column; at .34 the field
   below it is legible as a field, and the type is still AA on it */
body.u-night .overview-view{
  /* both halves of the shorthand, or the colour wins */
  background-color:transparent!important;
  background-image:
    radial-gradient(circle at 74% 10%,rgba(145,170,157,.10),transparent 34%),
    radial-gradient(circle at 18% 0%,rgba(201,162,87,.11),transparent 26%),
    linear-gradient(rgba(2,8,11,.06),rgba(2,8,11,.22))!important;
}

/* a 539×620 warm-brown plate, rgb(36,33,29) */
body.u-night .template-media{
  background:var(--u-glass-mid)!important;
}

body.u-night .content-track-hero,
body.u-night .format-card,
body.u-night .studio-panel{
  background-color:var(--u-glass-mid)!important;
  -webkit-backdrop-filter:var(--u-blur);backdrop-filter:var(--u-blur);
}

/* ══ THE MOMENT ════════════════════════════════════════════════════════
   Every time a step lands, the sky answers: a streak crosses (fired from
   js/product-universe.js) and the surfaces take one breath of gold. It is
   two seconds of "how did it know" for zero interaction cost — you get it
   for doing the thing you were already doing. */
@keyframes uPulse{
  0%  {box-shadow:0 0 0 0 rgba(201,162,87,0)}
  22% {box-shadow:0 0 0 1px rgba(201,162,87,.42),0 0 46px -8px rgba(201,162,87,.34)}
  100%{box-shadow:0 0 0 0 rgba(201,162,87,0)}
}
body.u-night .u-answered{animation:uPulse 1.9s var(--ease-out,ease)}

/* Pointer light stays inside surfaces; input targets and mobile drawers
   keep the positions and transforms owned by their product layout. */
body.u-night :is(.panelcard,.q-card,.content-track-hero){
  background-image:radial-gradient(ellipse at calc(50% + var(--u-px,0) * 35%) calc(50% + var(--u-py,0) * 35%),rgba(201,162,87,.075),transparent 64%);
}
@media (prefers-reduced-motion:reduce){body.u-night .u-answered{animation:none}}

/* Backdrop-filter is expensive on a long scroll and unsupported on a few
   engines; without it the glass would be flat translucency over a moving
   field, which shimmers. Opaque-up the two reading panels in that case. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.u-night .brief,body.u-night .explore-nav,body.u-night .hd,body.u-night .foot{
    background:rgba(6,16,20,.93)!important;
  }
}

/* ── the lid nobody could see ─────────────────────────────────────────────
   .ambient-universe is absolute, inset:0 0 auto, height min(900px,100dvh),
   and its background ended in a FULLY OPAQUE
   linear-gradient(145deg,#020709,#041012,#020607). That is what was
   walling the sky off from AI Content — and it is invisible to a hit test,
   because the element is pointer-events:none, which is why it survived
   three rounds of looking for it.

   The radial tint stays: it is the Sky/Water realm signal and it changes
   with the track. Only the opaque sheet underneath it goes. */
body.u-night .ambient-universe{
  background:radial-gradient(ellipse at 52% 47%,rgba(235,218,174,.07),transparent 27%)!important;
}
body.u-night[data-content-track="long"] .ambient-universe{
  background:radial-gradient(ellipse at 52% 47%,rgba(139,200,193,.08),transparent 29%)!important;
}

/* the canvas inside it now carries the gathering field (see the engine).
   Its saturate(.48) was tuned to mute a different, greener animation; at
   full strength the gold dust reads as the same material as the home. */
body.u-night .ambient-universe canvas{
  opacity:1;
  filter:none;
}

/* Workspaces, composers and secondary views share the same material. */
body.u-night :is(.studio-head,.composer-dock .composer,.workspace-state,
  .content-track-switch-studio,.prompt-choice,.dockbtn){
  background:rgba(8,10,12,.97);border-color:var(--u-glass-line);
}
body.u-night :is(.setup-board,.marble-agent-panel,.module-card,.module-card-featured){
  background:linear-gradient(135deg,rgba(201,162,87,.045),transparent 70%),var(--u-glass-mid);
  border-color:var(--u-glass-line);
}
body.u-night .agent-orb{
  background: url('../media/marble-agent/dock-idle.webp') center / cover no-repeat;
  border:1px solid rgba(201,162,87,.45);box-shadow:0 0 18px rgba(201,162,87,.12);
}
body.u-night .composer-dock .send:hover{background:var(--gold-hi)}
body.u-night .overview-head h1{line-height:1.04;letter-spacing:-.035em}
body.u-night :is(.content-track-copy p,.agent-panel-copy){font-size:1rem;line-height:1.6}
body.u-night :is(.module-card small,.setup-list small,.module-section > header > p){font-size:.875rem;line-height:1.5}
body.u-night :is(.module-card strong,.setup-list strong,.agent-quick-actions button,.studio-back,.studio-link){font-size:.875rem}
body.u-night .setup-list .is-next .setup-mark{color:var(--gold-hi);border-color:rgba(201,162,87,.4);background:rgba(201,162,87,.09)}
@media (pointer:coarse){
  body.u-night{--u-blur:blur(12px)}
}

/* Keep the working surface transparent in every content track, not just
   overview. Explicitly replace the old opaque background-image too. */
body.u-night .studio-grid .canvas,
body.u-night[data-content-track="long"] .studio-grid .canvas{
  background:radial-gradient(ellipse at 70% 35%,rgba(201,162,87,.035),transparent 65%),rgba(3,5,7,.24)!important;
}
body.u-night .studio-controls{background:rgba(5,7,9,.92)}
body.u-night .studio-controls :is(.card,.direction,.review){background:#0c0f12;color:var(--ob-ink)}
body.u-night .studio-controls :is(.chip,.mini,.q-input,.act){background:#14171a;color:var(--ob-ink2)}
body.u-night .studio-grid .cv-empty{color:var(--ob-muted)}
body.u-night .ambient-universe canvas{opacity:.24;mask-image:linear-gradient(90deg,transparent 20%,#000 65%,rgba(0,0,0,.45))}
body.u-night .ambient-universe::before,body.u-night .ambient-universe::after{display:none}
body.u-night .composer-dock{z-index:24}
body.u-night .composer-dock .composer{background:rgba(9,11,14,.98);border-color:rgba(232,197,126,.3)}
body.u-night .composer-dock .cmp-input{font-size:1rem}
body.u-night .explore-view{scroll-padding-bottom:190px}
body.u-night .studio-controls{padding-bottom:190px;scroll-padding-bottom:190px}
body.u-night .template-copy :is(small,.template-kind){color:var(--ob-muted)}
/* A compact two-row mobile header: brand + product destinations, then
   the creation navigation. The workspace owns the remaining viewport. */
@media(max-width:760px){
  body.u-night:has(.product-shell){display:flex;flex-direction:column;height:100dvh;overflow:hidden}
  body.u-night .explore-nav{position:relative;flex:0 0 auto;display:grid;
    grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:8px 12px;border-bottom:1px solid var(--ob-line)}
  body.u-night .nav-brand{grid-column:1;grid-row:1;min-width:0}
  body.u-night .product-title span{display:none}
  body.u-night .explore-nav .ml-xnav--stack{grid-column:2;grid-row:1;flex-direction:row;
    margin:0;padding:0;border:0;gap:0}
  body.u-night .explore-nav .ml-xnav a{font-size:.8rem;padding:8px;min-height:44px}
  body.u-night .explore-nav .ml-xnav a[aria-current="page"]{display:none}
  body.u-night .product-local-nav{grid-column:1 / -1;grid-row:2;gap:4px}
  body.u-night .product-local-nav .nav-action{font-size:.72rem}
  body.u-night .product-local-nav .nav-action-primary{font-size:0}
  body.u-night .product-shell{height:auto;flex:1;min-height:0;width:100%}
  body.u-night .studio-view{height:100%;padding:0;display:flex;flex-direction:column}
  body.u-night .studio-view[hidden]{display:none}
  body.u-night .studio-grid{height:auto;flex:1;min-height:0;padding-bottom:180px;scroll-padding-bottom:180px}
  body.u-night .studio-controls{padding-bottom:20px}
  body.u-night .composer-dock{position:absolute;bottom:10px;width:calc(100% - 20px)}
  body.u-night .composer-mode{font-size:.65rem}
  body.u-night .ambient-universe canvas{opacity:.16}
  body.u-night .studio-head-actions .studio-link{font-size:.75rem}
  body.u-night .studio-head .stage-l{font-size:.72rem}
}
@media(max-width:760px){
  body.u-night .studio-grid{display:block}
  body.u-night .studio-controls{height:auto;overflow:visible;padding-bottom:24px}
  body.u-night .studio-controls .stream{max-height:none;min-height:180px;overflow:visible;padding-bottom:24px}
  body.u-night .studio-grid .canvas{min-height:340px}
  body.u-night .studio-head .stage-n{display:none}
  body.u-night .studio-head .stage-l{font-size:.75rem;letter-spacing:.025em}
  body.u-night[data-view="studio"] .ma-dock,
  body.u-night[data-view="explore"] .ma-dock{bottom:156px}
}
body.u-night[data-realm="land"] .canvas{
  background-image:linear-gradient(rgba(220,220,215,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(220,220,215,.035) 1px,transparent 1px),
    radial-gradient(ellipse at 75% 35%,rgba(201,162,87,.025),transparent 65%)!important;
  background-size:44px 44px,44px 44px,auto!important;
}
@media(max-width:360px){
  body.u-night[data-view="studio"] .ma-dock,
  body.u-night[data-view="explore"] .ma-dock{bottom:182px}
}

/* Focused working surfaces. One format control; secondary choices disclose
   on demand without removing any existing creation capability. */
body.u-night #aicShortNav,body.u-night #aicLongNav{display:none}
body.u-night .explore-nav{width:224px}
body.u-night:has(.product-shell){grid-template-columns:224px minmax(0,1fr)}
body.u-night .product-shell{margin-left:0;width:100%}
body.u-night .product-title span{display:none}
body.u-night .nav-brand{flex-wrap:wrap;gap:8px}
body.u-night .product-title{padding-left:0}
body.u-night .product-local-nav{gap:6px}
body.u-night .creative-settings{border:1px solid var(--ob-line);border-radius:12px;margin:12px 0;background:rgba(10,12,14,.88)}
body.u-night .creative-settings summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 16px;cursor:pointer;font-size:.875rem;color:var(--ob-ink);list-style:none}
body.u-night .creative-settings summary::-webkit-details-marker{display:none}
body.u-night .creative-settings summary::after{content:'+';color:var(--gold);font-size:1.2rem}
body.u-night .creative-settings[open] summary::after{content:'−'}
body.u-night .creative-settings summary span{margin-left:auto;text-transform:capitalize;color:var(--ob-muted);font-size:.75rem}
body.u-night .settings-body{padding:0 14px 14px}
body.u-night .capability-note{font:400 .75rem/1.5 var(--sans);margin:12px 4px 18px;color:var(--ob-muted)}
body.u-night .studio-controls .hero h1{font-size:clamp(1.9rem,3.2vw,2.65rem);line-height:1.12;max-width:20ch}
body.u-night .studio-controls .hero p{font-size:1rem;line-height:1.6;max-width:45ch}
body.u-night .studio-controls .hero .hand{font-size:1.1rem;margin-top:18px}
body.u-night .studio-controls .agent-head span{font-size:.8rem}
body.u-night .studio-controls :is(.chip,.mini,.q-input,.act,.card-hint){font-size:.875rem;line-height:1.45}
body.u-night .studio-controls .note-t{font-size:1rem;line-height:1.6}
body.u-night .content-track-switch button span{font:500 .875rem/1.2 var(--sans);letter-spacing:0}
body.u-night .content-track-switch button small{font-size:.75rem;line-height:1.4;color:var(--ob-muted)}
body.u-night .mode-tabs button{font-size:.875rem}
body.u-night .selected-template :is(small,span:last-child){font-size:.75rem}
body.u-night .studio-link:disabled{opacity:.42;cursor:not-allowed}
body.u-night[data-view="studio"][data-has-canvas="0"] .studio-grid{display:block;overflow-y:auto;padding:24px 24px 190px}
body.u-night[data-view="studio"][data-has-canvas="0"] .studio-controls{max-width:740px;margin:auto;border:0;background:transparent;padding:0;overflow:visible}
body.u-night[data-view="studio"][data-has-canvas="0"] .studio-controls .stream{max-height:none;overflow:visible;min-height:160px;padding:24px}
body.u-night[data-view="studio"][data-has-canvas="0"] .studio-controls .sheet{background:rgba(7,9,11,.88)}
body.u-night[data-view="studio"][data-has-canvas="0"] .canvas{display:none}
body.u-night[data-view="studio"][data-has-canvas="0"] .canvas:has(.studio-info:not([hidden])){display:block;min-height:0;padding:0}
body.u-night[data-view="studio"] .composer-dock{width:min(740px,calc(100% - 48px));left:50%;transform:translateX(-50%)}
body.u-night .prompt-choice{font-size:.8rem}
body.u-night .studio-head .stage-l{font-size:.75rem;letter-spacing:.035em}
body.u-night .studio-head .stage-n{display:none}
body.u-night .overview-head{grid-template-columns:1fr;min-height:0;margin-bottom:32px}
body.u-night .overview-head h1{font-size:clamp(2.3rem,4vw,3.5rem);max-width:none}
body.u-night .overview-copy>p{max-width:62ch;font-size:1rem}
body.u-night .overview-head .universe-portal,body.u-night .realm-legend{display:none}
body.u-night .overview-actions{margin-top:20px}
body.u-night .overview-start{min-height:56px;min-width:0;padding:14px 22px;width:auto}
body.u-night .overview-start>span{display:none}
body.u-night .overview-start strong{font-size:1rem}
body.u-night .overview-start small{font-size:.75rem}
body.u-night .overview-view{padding-top:40px}
body.u-night .inspiration-grid{gap:20px}
body.u-night .inspiration-grid .template-media{aspect-ratio:4/3}
body.u-night .template-copy strong{font-size:1rem;line-height:1.4}
body.u-night[data-realm="land"] .canvas-welcome{width:min(610px,100%);max-width:none;text-align:left;padding:32px}
body.u-night .canvas-welcome h2{font:500 clamp(2rem,3vw,2.7rem)/1.12 var(--serif);color:var(--ob-ink);margin:18px 0}
body.u-night .canvas-welcome .rail-note{font:400 1rem/1.65 var(--sans);max-width:48ch;color:var(--ob-muted)}
body.u-night .canvas-journey{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:0}
body.u-night .canvas-journey li{display:flex;align-items:center;gap:20px;padding:18px 0;border-top:1px solid var(--ob-line)}
body.u-night .canvas-journey li>span{font:.8rem var(--mono);color:var(--gold)}
body.u-night .canvas-journey strong{font:500 1rem var(--sans);color:var(--ob-ink)}
body.u-night .canvas-journey p{font:.875rem/1.5 var(--sans);margin:4px 0 0;color:var(--ob-muted)}
body.u-night .brief-download{display:block;width:100%;min-height:44px;border:1px solid var(--ob-line);border-radius:8px;background:transparent;color:var(--ob-ink);font:.875rem var(--sans);cursor:pointer;margin-top:10px}
body.u-night[data-realm="land"] :is(.d-input,.stage-p,.card-p){font-size:1rem;line-height:1.5}
body.u-night[data-realm="land"] :is(.fineprint,.notice,.save-state){font-size:.75rem;letter-spacing:0;line-height:1.5}
body.u-night[data-realm="land"] .hd-surface{display:none}
@media(max-width:1100px) and (min-width:761px){
 body.u-night .studio-head{grid-template-columns:auto 1fr;row-gap:6px;height:auto;min-height:92px}
 body.u-night .studio-head .stages{grid-column:1 / -1;grid-row:2}
 body.u-night .studio-head-actions{justify-self:end}
 body.u-night .studio-grid{height:calc(100dvh - 92px)}
}
@media(max-width:760px){
 body.u-night .explore-nav{width:100%}
 body.u-night .product-shell{margin:0;width:100%}
 body.u-night .product-local-nav{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
 body.u-night .product-local-nav .nav-action{font-size:.875rem;justify-content:center}
 body.u-night .product-local-nav .nav-action-primary{font-size:.875rem}
 body.u-night .product-local-nav .nav-action-primary span{display:none}
 body.u-night .studio-head{min-height:90px;grid-template-rows:40px 32px;padding:4px 12px;gap:4px}
 body.u-night .studio-head .stage-l{font-size:.75rem}
 body.u-night .studio-head-actions .studio-link{font-size:.75rem;padding-inline:6px}
 body.u-night .studio-head-actions [data-studio-info="history"]{display:none}
 body.u-night .studio-back{font-size:.875rem}
 body.u-night .content-track-switch-studio{position:static}
 body.u-night[data-view="studio"][data-has-canvas="0"] .studio-grid{padding:14px 14px 190px}
 body.u-night[data-view="studio"][data-has-canvas="0"] .studio-controls .stream{padding:18px;min-height:160px}
 body.u-night .creative-settings summary{padding:10px 12px}
 body.u-night .creative-settings summary span{display:none}
 body.u-night .capability-note{margin:8px 4px 12px}
 body.u-night .studio-controls .hero{padding-block:0}
 body.u-night .studio-controls .hero h1{font-size:1.9rem}
 body.u-night .studio-controls .hero .hand{display:none}
 body.u-night[data-view="studio"] .composer-dock{width:calc(100% - 20px)}
 body.u-night[data-view="studio"] .ma-dock{display:none}
 body.u-night .overview-view{padding-top:24px}
 body.u-night .overview-head h1{font-size:2.5rem}
 body.u-night .overview-start{width:100%}
 body.u-night .canvas-welcome{padding:18px!important}
 body.u-night .canvas-welcome h2{font-size:2rem}
}
/* The shell clips its children but must not become a second scroll target
   when a phone focuses the composer. The conversation owns scrolling. */
body.u-night .product-shell{overflow:clip}
body.u-night .creative-settings summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
body.u-night .studio-info{position:fixed;z-index:70;top:76px;right:24px;max-height:calc(100dvh - 106px);overflow:auto;background:#0b0e11;border-color:var(--ob-line)}
body.u-night .studio-info :is(p,li){font-size:.875rem;color:var(--ob-muted)}
@media(max-width:760px){
 body.u-night .studio-info{top:210px;right:14px;left:14px;width:auto;max-height:calc(100dvh - 240px)}
}