/* =====================================================================
   GIAN Glass v5 — image-based thick-glass COMPONENT SYSTEM (local mockup)
   Assets: AI-generated glass (Grok Imagine) + frames extracted from Saleh's Grok reference,
           processed by glass_v5/pipeline (matte → 9-slice) → css/glass-v5-assets.css (generated tokens).
   Components (add to any element; paint only — never changes layout):
     .g-panel        large slab          (--g-radius: its border-radius)
     .g-panel--mini  low-height slab (short cards / rows)
     .g-tile         thick tile / stat card / nested slab
     .g-photo-frame  glass rim + gloss over a photo (centre open)
     .g-btn          glossy glass pill (tint via --g-tint) · sizes --xs --sm (default) --lg · colours --sand --wa
     .g-key          small glass icon key / circle button
     .g-bar          floating pill bar (top bar, dock)
     .g-dock         container whose links render as .g-key
     .g-drops        modifier: sparse droplet specks on the face
   Tokens per component: --g-src --g-slice --g-ratio --g-radius → --g-edge = radius × ratio (9-slice width)
   Layering: element bg (tint) → ::before 9-slice glass (z -1, isolated) → content → ::after overlays (spec/drops)
   ===================================================================== */
body.gv5{
  --g-shade:62,54,48;
  --g-ease:180ms cubic-bezier(.2,.7,.2,1);
  background:
    radial-gradient(1200px 700px at 80% -10%,#FBFAF8 0%,rgba(251,250,248,0) 60%),
    radial-gradient(900px 600px at 0% 30%,rgba(250,248,246,.8) 0%,rgba(250,248,246,0) 60%),
    radial-gradient(1000px 800px at 50% 120%,#DCD6D0 0%,rgba(220,214,208,0) 70%),
    linear-gradient(180deg,#F0EDEA 0%,#ECE9E5 50%,#E4DFDA 100%);
  background-attachment:fixed}

/* ---------- component tokens ---------- */
body.gv5 :where(.g-panel,.g-tile,.g-photo-frame,.g-btn,.g-key,.g-bar,.g-dock a){--g-tint:transparent}
body.gv5 .g-panel{--g-src:var(--gA-panel-src);--g-slice:var(--gA-panel-slice);--g-ratio:var(--gA-panel-ratio);--g-radius:var(--r-xl)}
body.gv5 .g-panel--mini{--g-src:var(--gA-mini-src);--g-slice:var(--gA-mini-slice);--g-ratio:var(--gA-mini-ratio)}
body.gv5 .g-tile{--g-src:var(--gA-tile-src);--g-slice:var(--gA-tile-slice);--g-ratio:var(--gA-tile-ratio);--g-radius:var(--r-md)}
body.gv5 .g-tile--lg{--g-radius:var(--r-lg)}
body.gv5 .g-tile--xl{--g-radius:var(--r-xl)}
body.gv5 .g-photo-frame{--g-src:var(--gA-photo-src);--g-slice:var(--gA-photo-slice);--g-ratio:var(--gA-photo-ratio);--g-radius:var(--r-xl)}
body.gv5 .g-photo-frame--inset{--g-radius:26px;--g-ratio:calc(var(--gA-photo-ratio) * .62)}
body.gv5 .g-btn{--g-src:var(--gA-btn-src);--g-slice:var(--gA-btn-slice);--g-ratio:var(--gA-btn-ratio);--g-radius:25.15px;
  --g-tint:linear-gradient(180deg,#FBFBFC 0%,#F1F1F4 55%,#E6E6EB 100%)}
body.gv5 .g-btn--lg{--g-radius:29px} body.gv5 .g-btn--sm{--g-radius:19.25px} body.gv5 .g-btn--xs{--g-radius:14.95px} body.gv5 .g-btn--nav{--g-radius:22.15px}
body.gv5 .g-btn--sand{--g-tint:linear-gradient(180deg,#EADBCB 0%,#DCC6B1 55%,#CFB69E 100%)}
body.gv5 .g-btn--wa{--g-tint:linear-gradient(180deg,#46DE87 0%,#25C266 55%,#1AA956 100%)}
body.gv5 :is(.g-key,.g-dock a){--g-src:var(--gA-key-src);--g-slice:var(--gA-key-slice);--g-ratio:var(--gA-key-ratio);--g-radius:16.2px}
body.gv5 .g-key--sm{--g-radius:12.9px}
body.gv5 .g-key--sand{--g-tint:linear-gradient(180deg,rgba(241,230,218,.9),rgba(226,209,191,.85))}
body.gv5 .g-bar{--g-src:var(--gA-bar-src);--g-slice:var(--gA-bar-slice);--g-ratio:var(--gA-bar-ratio);--g-radius:33px}
body.gv5 .dock .g-bar{--g-radius:42px}
body.gv5 :is(.g-panel,.g-tile,.g-photo-frame,.g-btn,.g-key,.g-bar,.g-dock a){
  --g-edge:calc(var(--g-radius) * var(--g-ratio));
  --g-shadow:0 1px 2px rgba(var(--g-shade),.12),0 calc(var(--g-radius) * .45) calc(var(--g-radius) * 1.1) calc(var(--g-radius) * -.3) rgba(var(--g-shade),.30)}
body.gv5 :is(.g-key,.g-dock a){--g-shadow:0 1px 1.5px rgba(var(--g-shade),.16),0 5px 10px -4px rgba(var(--g-shade),.28)}
body.gv5 .g-btn{--g-shadow:0 1px 1.5px rgba(var(--g-shade),.16),0 7px 14px -6px rgba(var(--g-shade),.30)}
body.gv5 .g-btn--wa{--g-shadow:0 1px 1.5px rgba(10,90,40,.2),0 7px 14px -6px rgba(20,140,70,.42)}
@media (max-width:720px){body.gv5 :is(.g-panel,.g-photo-frame){--g-radius:var(--r-xl)} body.gv5 .g-tile--lg{--g-radius:var(--r-lg)} body.gv5 .g-bar{--g-radius:31px} body.gv5 .dock .g-bar{--g-radius:34px} body.gv5 .g-dock a{--g-radius:14px}}

/* ---------- surface: the element itself only carries the tint + soft shadow ---------- */
body.gv5.gv5.gv5 :where(.g-panel,.g-tile,.g-photo-frame,.g-btn,.g-key,.g-bar,.g-dock a){
  background:var(--g-tint);box-shadow:var(--g-shadow);isolation:isolate;border-color:transparent}
body.gv5.gv5.gv5 :where(.g-panel,.g-tile,.g-btn,.g-key,.g-dock a){-webkit-backdrop-filter:none;backdrop-filter:none}
body.gv5.gv5 .g-bar{-webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%)}
body.gv5.gv5 .g-btn{position:relative}                       /* static pills only: no offsets → no layout change */
body.gv5.gv5 .g-photo-frame{background:#1b1b1d}

/* ---------- the glass: 9-slice image frame ---------- */
body.gv5.gv5.gv5 :where(.g-panel,.g-tile,.g-photo-frame,.g-btn,.g-key,.g-bar,.g-dock a)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-sizing:border-box;
  border-radius:inherit;border-style:solid;border-color:transparent;border-width:var(--g-edge);
  border-image-source:var(--g-src);border-image-slice:var(--g-slice) fill;border-image-width:var(--g-edge);border-image-repeat:stretch;
  background:none;box-shadow:none;-webkit-mask:none;mask:none;filter:none;opacity:1;transform:none;mix-blend-mode:normal;animation:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:filter var(--g-ease)}
body.gv5.gv5 details.g-panel::before{inset:0!important;border-radius:inherit!important}
/* photo frames sit ABOVE the photo (bg z0) and below the text (z3) */
body.gv5.gv5 .g-photo-frame::before{z-index:2}

/* ---------- overlays: crisp top specular streak (Grok asset) + optional droplets ---------- */
body.gv5.gv5.gv5 :where(.g-panel,.g-tile,.g-photo-frame,.g-btn,.g-key,.g-bar,.g-dock a)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;box-sizing:border-box;
  background:var(--gA-spec) no-repeat calc(var(--g-edge) * .28) calc(var(--g-edge) * .06)/var(--g-spec-w,46%) auto;
  box-shadow:none;border:0;-webkit-mask:none;mask:none;filter:none;opacity:var(--g-spec-o,.9);transform:none;mix-blend-mode:normal;animation:none}
body.gv5 .g-tile{--g-spec-w:52%;--g-spec-o:.75}
body.gv5 :is(.g-key,.g-dock a,.g-btn){--g-spec-w:62%;--g-spec-o:.55}
body.gv5 .g-bar{--g-spec-w:18%;--g-spec-o:.35}
body.gv5 .g-photo-frame{--g-spec-w:40%;--g-spec-o:1}
body.gv5.gv5 .g-photo-frame::after{z-index:2;box-shadow:inset 0 0 calc(var(--g-edge) * .9) rgba(255,255,255,.22);
  background:var(--gA-spec) no-repeat calc(var(--g-edge) * .22) 4px/var(--g-spec-w) auto,
             linear-gradient(170deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.10) 24%,rgba(255,255,255,0) 40%)}
body.gv5.gv5 .g-drops::after{
  background:var(--gA-spec) no-repeat calc(var(--g-edge) * .28) calc(var(--g-edge) * .06)/var(--g-spec-w,46%) auto,
             var(--gA-drops) 0 0/420px 380px repeat,var(--gA-drops) 210px 190px/280px 253px repeat}
body.gv5.gv5 .g-photo-frame.g-drops::after{box-shadow:inset 0 0 calc(var(--g-edge) * .9) rgba(255,255,255,.22);
  background:var(--gA-spec) no-repeat calc(var(--g-edge) * .22) 4px/var(--g-spec-w) auto,
             var(--gA-drops) 0 0/420px 380px repeat,
             linear-gradient(170deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.10) 24%,rgba(255,255,255,0) 40%)}

/* ---------- adapters for the existing page (base glass.css / keys.css paint) ---------- */
body.gv5 .glass.photo .bg::after{background:linear-gradient(270deg,rgba(10,10,12,.6),rgba(10,10,12,.25) 55%,rgba(10,10,12,.05))}
html[dir=ltr] body.gv5 .glass.photo .bg::after{background:linear-gradient(90deg,rgba(10,10,12,.6),rgba(10,10,12,.25) 55%,rgba(10,10,12,.05))}
body.gv5 .tray.g-photo-frame{background:#111}
body.gv5 .tray:not(.g-photo-frame){box-shadow:inset 0 2px 6px rgba(40,36,34,.20),inset 0 -1.5px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(60,58,62,.10),0 1px 0 rgba(255,255,255,.7)}
body.gv5 :is(.mega,.sheet,.hdr-search).g-panel{--g-tint:linear-gradient(180deg,rgba(253,253,253,.92),rgba(246,246,247,.88));
  -webkit-backdrop-filter:blur(20px) saturate(118%);backdrop-filter:blur(20px) saturate(118%)}
body.gv5 .pill.wa>svg.i{color:var(--ink-ic)}
body.gv5 :is(.pill>svg.i:not(.i-arrow):not(.i-arrow-r),.kicker>svg.i){
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(250,250,252,.62) 50%,rgba(236,236,240,.75));
  box-shadow:inset 0 0 0 1px #fff,inset 0 1.5px 0 .5px #fff,inset 0 -1.5px 1px rgba(150,150,160,.22),0 0 0 1px rgba(78,76,84,.16),0 2px 5px -2px rgba(var(--g-shade),.3)}
body.gv5 .dock a .tip{background:rgba(252,252,252,.95);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(78,76,84,.12),0 6px 14px -6px rgba(var(--g-shade),.25)}
body.gv5 .shimmer::before{animation:none;display:none}

/* ---------- states: brighter / pressed, never move ---------- */
body.gv5 :is(.g-btn,.g-key,.g-dock a,.g-tile,.g-panel){transition:box-shadow var(--g-ease),background-color var(--g-ease)}
body.gv5 :is(.g-btn,.g-key,.g-dock a,.chip,.glass,.ico-orb):is(:hover,:active,:focus-visible,.near),body.gv5 a:hover>.ico-orb,body.gv5 a .ico-orb:hover{transform:none}
body.gv5 :is(.g-btn,.g-key,.g-dock a,a.g-panel,a.g-tile):hover::before{filter:brightness(1.05) saturate(1.08)}
body.gv5 .g-dock a.wa:hover{background:var(--g-tint);box-shadow:0 0 0 1px rgba(37,211,102,.35),var(--g-shadow)}
body.gv5 :is(.g-btn,.g-key,.g-dock a):active{box-shadow:inset 0 2px 5px rgba(40,36,34,.25),0 1px 2px rgba(var(--g-shade),.16)}
body.gv5 :is(.g-btn,.g-key,.g-dock a):active::before{filter:brightness(.96)}
body.gv5 :is(.pill,.nav a,.fgrid a,.crumbs a,.brand,.chip,a.glass,summary,.g-key,.g-dock a):focus-visible{outline:2px solid #1d1d1f;outline-offset:3px}
body.gv5 .nav a:not(.on):hover{background:rgba(255,255,255,.4)}
@media (prefers-reduced-motion:reduce){body.gv5 *{transition:none!important}}
@supports not (border-image-source:url(x.png)){body.gv5 :is(.g-panel,.g-tile){background:rgba(255,255,255,.55)}}