/* ==========================================================================
   CodeForge 8.1 — "Fluent Glass" material layer (loaded last).

   Windows 11 materials, pushed a little further:
     - Mica-like ambient backdrop: soft accent/amber/violet light behind the app
     - Acrylic chrome: title bar + nav are frosted glass over that backdrop
     - Content stays near-solid so code is always crisp (no glass behind text
       you read character by character)
     - Overlays (palette, dialogs, menus, toasts) are the strongest glass,
       with a specular top edge (Liquid Glass) and deep soft elevation
       (spatial depth); the scrim blurs what's behind for focus.

   Only surfaces/tokens are restyled — no layout, ids or classes change, so
   every tool keeps working. Respects prefers-reduced-transparency (Windows
   "Transparency effects" off) and browsers without backdrop-filter.
   ========================================================================== */

:root{
  --r-control:6px; --r-card:10px; --r-overlay:14px; --r-window:12px;

  --g-backdrop:#e8ecf3;
  --g-glow-1:rgba(10,110,138,.20);   /* accent, top-left */
  --g-glow-2:rgba(106,60,204,.11);   /* violet, right */
  --g-glow-3:rgba(199,119,0,.10);    /* amber, bottom */
  --g-chrome:rgba(244,246,250,.66);
  --g-sheet:rgba(251,252,254,.66);
  --g-overlay:rgba(250,251,253,.74);
  --g-edge:rgba(255,255,255,.75);      /* specular top highlight */
  --g-rim:rgba(255,255,255,.55);       /* glass rim */
  --g-blur-chrome:saturate(170%) blur(28px);
  --g-blur-overlay:saturate(180%) blur(40px);

  --card:rgba(255,255,255,.74); --card-hover:rgba(255,255,255,.92); --layer:rgba(255,255,255,.82);
  --pane:rgba(255,255,255,.90);

  --shadow-card:0 1px 2px rgba(15,23,42,.04),0 2px 8px rgba(15,23,42,.04);
  --shadow-lift:0 6px 18px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.05);
  --shadow-flyout:0 14px 34px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.08);
  --shadow-dialog:0 40px 90px rgba(15,23,42,.24),0 6px 18px rgba(15,23,42,.10);
  --scrim:rgba(20,26,38,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --g-backdrop:#0a0c11;
    --g-glow-1:rgba(92,200,230,.22);
    --g-glow-2:rgba(184,156,255,.16);
    --g-glow-3:rgba(242,180,65,.09);
    --g-chrome:rgba(20,22,28,.62);
    --g-sheet:rgba(26,28,35,.62);
    --g-overlay:rgba(34,36,44,.72);
    --g-edge:rgba(255,255,255,.10);
    --g-rim:rgba(255,255,255,.08);
    --card:rgba(46,48,58,.58); --card-hover:rgba(56,58,70,.72); --layer:rgba(36,38,46,.78);
    --pane:rgba(30,32,40,.86);
    --shadow-card:0 1px 2px rgba(0,0,0,.25);
    --shadow-lift:0 8px 22px rgba(0,0,0,.40),0 2px 4px rgba(0,0,0,.30);
    --shadow-flyout:0 16px 40px rgba(0,0,0,.50),0 2px 6px rgba(0,0,0,.40);
    --shadow-dialog:0 40px 100px rgba(0,0,0,.65),0 6px 18px rgba(0,0,0,.45);
    --scrim:rgba(0,0,0,.38);
  }
}
:root[data-theme="dark"]{
  --g-backdrop:#0a0c11;
  --g-glow-1:rgba(92,200,230,.22);
  --g-glow-2:rgba(184,156,255,.16);
  --g-glow-3:rgba(242,180,65,.09);
  --g-chrome:rgba(20,22,28,.62);
  --g-sheet:rgba(26,28,35,.62);
  --g-overlay:rgba(34,36,44,.72);
  --g-edge:rgba(255,255,255,.10);
  --g-rim:rgba(255,255,255,.08);
  --card:rgba(46,48,58,.58); --card-hover:rgba(56,58,70,.72); --layer:rgba(36,38,46,.78);
  --pane:rgba(30,32,40,.86);
  --shadow-card:0 1px 2px rgba(0,0,0,.25);
  --shadow-lift:0 8px 22px rgba(0,0,0,.40),0 2px 4px rgba(0,0,0,.30);
  --shadow-flyout:0 16px 40px rgba(0,0,0,.50),0 2px 6px rgba(0,0,0,.40);
  --shadow-dialog:0 40px 100px rgba(0,0,0,.65),0 6px 18px rgba(0,0,0,.45);
  --scrim:rgba(0,0,0,.38);
}

/* ---- ambient backdrop (Mica-like) ---- */
html,body{
  background-color:var(--g-backdrop);
  background-image:
    radial-gradient(60vw 60vh at 0% 0%,var(--g-glow-1),transparent 70%),
    radial-gradient(50vw 55vh at 100% 35%,var(--g-glow-2),transparent 70%),
    radial-gradient(60vw 50vh at 45% 110%,var(--g-glow-3),transparent 70%);
  background-attachment:fixed;
}
.app-shell{background:transparent}

/* ---- acrylic chrome ---- */
.titlebar,.nav{
  background:var(--g-chrome);
  -webkit-backdrop-filter:var(--g-blur-chrome);backdrop-filter:var(--g-blur-chrome);
}
.titlebar{border-bottom-color:transparent;box-shadow:inset 0 -1px 0 var(--stroke)}
.nav{border-right:0}
.tb-search{background:var(--card);border-color:var(--g-rim);border-bottom-color:var(--stroke);box-shadow:inset 0 1px 0 var(--g-edge),var(--shadow-card);border-radius:var(--r-pill);padding-left:14px}
.tb-search:hover{background:var(--card-hover)}

/* ---- content sheet: one calm layer, rounded like a Windows 11 page ---- */
.content{
  background:var(--g-sheet);
  border-top:0;
  border-top-left-radius:var(--r-window);
  box-shadow:inset 1px 1px 0 var(--g-rim),-1px -1px 0 var(--stroke);
}
@media (max-width:600px){.content{border-radius:0}}

/* ---- cards: soft glass, lift on hover (spatial) ---- */
.card,.tile,.toolbar,.plan,.infobar{border-color:var(--g-rim);box-shadow:inset 0 1px 0 var(--g-edge),var(--shadow-card)}
.tile{transition:background var(--dur-fast),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur-fast)}
.tile:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--g-edge),var(--shadow-lift);border-color:color-mix(in srgb,var(--accent) 30%,var(--g-rim))}
.tile .t-icon{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent-text)}
/* "Recently used" is a label, not code. */
.recent .snip{font:12px/16px var(--font-ui)}
/* Editors stay near-solid: code must read crisp. */
.pane{background:var(--pane)}

/* ---- controls ---- */
.btn{border-color:var(--g-rim);border-bottom-color:var(--stroke);box-shadow:inset 0 1px 0 var(--g-edge)}
.btn.subtle,.btn-ghost,.btn.danger,.btn-danger{box-shadow:none}
.btn.primary,.btn-primary,.btn.pro{
  background-image:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0) 60%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.14),0 4px 12px color-mix(in srgb,var(--accent) 22%,transparent);
}
.btn.pro{box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 1px 2px rgba(0,0,0,.14),0 4px 14px color-mix(in srgb,var(--pro-strong) 28%,transparent)}
.input,textarea.input{border-color:var(--g-rim);border-bottom-color:var(--stroke-strong)}

/* ---- nav: active item is a tinted glass pill ---- */
.nav-item{border-radius:var(--r-control)}
.nav-item[aria-current="page"]{background:color-mix(in srgb,var(--accent) 13%,var(--card));box-shadow:inset 0 1px 0 var(--g-edge)}
.nav-foot{border-top-color:var(--stroke)}

/* ---- overlays: strongest acrylic + specular edge + deep elevation ---- */
.dialog,.command-bar,.palette,.menu,.toast{
  background:var(--g-overlay);
  -webkit-backdrop-filter:var(--g-blur-overlay);backdrop-filter:var(--g-blur-overlay);
  border:1px solid var(--g-rim);
  box-shadow:inset 0 1px 0 var(--g-edge),var(--shadow-dialog);
}
.menu,.toast{box-shadow:inset 0 1px 0 var(--g-edge),var(--shadow-flyout)}
.scrim,.palette-scrim,.command-bar-overlay{
  -webkit-backdrop-filter:blur(4px) saturate(120%);backdrop-filter:blur(4px) saturate(120%);
}
.dlg-foot{background:color-mix(in srgb,var(--g-chrome) 70%,transparent)}
.command-bar-input-wrap,.palette-input{border-bottom-color:var(--stroke)}
.command-bar-results .cb-result-item[aria-selected="true"],.command-bar-results .cb-selected,.palette-list li[aria-selected="true"]{
  background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent);
}

/* ---- toasts: bottom-right on wide windows so they never cover the editors ---- */
@media (min-width:900px){
  .toasts{left:auto;right:20px;transform:none;width:min(400px,calc(100% - 40px))}
}
/* Upsell toast: the icon wrapper is a <span>, which the generic
   `.toast span{flex:1}` rule stretched to half the toast. */
.milestone-toast > span:first-child{flex:none;display:inline-flex;color:var(--pro)}
.milestone-toast-btn{flex:none;height:28px;padding:0 10px;border-radius:var(--r-control);border:1px solid var(--g-rim);background:var(--card);color:var(--text);font:600 12px var(--font-ui);cursor:pointer}
.milestone-toast-btn:hover{background:var(--card-hover)}

/* ---- accessibility / support fallbacks: solid surfaces ---- */
@media (prefers-reduced-transparency:reduce){
  html,body{background-image:none}
  .titlebar,.nav,.dialog,.command-bar,.palette,.menu,.toast,.scrim,.palette-scrim,.command-bar-overlay{-webkit-backdrop-filter:none;backdrop-filter:none}
  .titlebar,.nav{background:var(--mica)}
  .content{background:var(--ground)}
  .dialog,.command-bar,.palette,.menu,.toast{background:var(--mica)}
  :root{--card:#ffffff;--card-hover:#f6f7fa;--layer:#f9fafc;--pane:#ffffff}
}
@media (prefers-reduced-transparency:reduce) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--card:#2a2b33;--card-hover:#30313a;--layer:#212229;--pane:#2a2b33}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .titlebar,.nav{background:var(--mica)}
  .dialog,.command-bar,.palette,.menu,.toast{background:var(--layer)}
}
@media (prefers-reduced-motion:reduce){
  .tile,.tile:hover{transition:none;transform:none}
}