/* =====================================================================================================
   VYBEON FINAL 1.0 - the last layer on top of 3.10.0 + Nova 1.0.1 + Avava 1.1. Loaded AFTER avava.css.
   1. Phone header: nothing can be pushed off the right edge any more (profile icon stays inside).
   2. Search suggestions: a solid box that sits above everything under it.
   3. Spectrum follows the theme: Dark = black studio + ember colours, Light = old paper + ink colours.
   4. Luna: a small, still, circular profile picture (dark and light portraits), never floating.
   5. "For support" line under the credit.
   Everything here is scoped so that removing the <link> gives you Avava 1.1 back exactly as it was.
   The  [data-final]:not(#fn)  parts only raise the priority above the earlier layers; they do not match anything.
   ===================================================================================================== */

/* ---------- 1. PHONE HEADER ---------- */
html[data-view=mobile][data-final]:not(#fn) .topbar{gap:6px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));overflow:hidden}
html[data-view=mobile][data-final]:not(#fn) .topbar>*{min-width:0}
html[data-view=mobile][data-final]:not(#fn) .topbar .brand{flex:1 1 0;min-width:0;overflow:hidden}
html[data-view=mobile][data-final]:not(#fn) .topbar .av-logo{gap:8px;max-width:100%;overflow:hidden}
html[data-view=mobile][data-final]:not(#fn) .topbar .av-mark{width:32px;height:32px}
html[data-view=mobile][data-final]:not(#fn) .topbar .av-word b{font-size:16px;letter-spacing:.2em;margin-right:-.2em;white-space:nowrap}
html[data-view=mobile][data-final]:not(#fn) .topbar .av-word small{display:none}
html[data-view=mobile][data-final]:not(#fn) .top-actions{flex:none;margin-left:auto;gap:2px}
html[data-view=mobile][data-final]:not(#fn) .top-actions>*{flex:none}
html[data-view=mobile][data-final]:not(#fn) .top-actions .icon-btn{width:34px;height:34px}
html[data-view=mobile][data-final]:not(#fn) #accountTop{width:34px;height:34px;min-width:34px;font-size:13px}
/* Install: a compact button with a download arrow (the word stays for screen readers) */
html[data-view=mobile][data-final]:not(#fn) #installTop{font-size:0;width:34px;height:34px;min-width:34px;padding:0;display:inline-grid;place-items:center;line-height:1;letter-spacing:0}
html[data-view=mobile][data-final]:not(#fn) #installTop[hidden]{display:none}
html[data-view=mobile][data-final]:not(#fn) #installTop::before{content:"";display:block;width:17px;height:17px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.2l3.3-3.3 1.4 1.4L12 16l-5.7-5.7 1.4-1.4 3.3 3.3V3zM5 18h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.2l3.3-3.3 1.4 1.4L12 16l-5.7-5.7 1.4-1.4 3.3 3.3V3zM5 18h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:339px){html[data-view=mobile][data-final]:not(#fn) .topbar .av-word{display:none}}
@media(max-width:359px){html[data-view=mobile][data-final]:not(#fn) .topbar .av-word b{font-size:14px;letter-spacing:.14em;margin-right:-.14em}}

/* ---------- 2. SEARCH SUGGESTIONS ---------- */
html[data-final]:not(#fn) .searchwrap{position:relative;z-index:80;isolation:isolate}
html[data-final]:not(#fn) .suggest{z-index:90;opacity:1;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--sheet)}
html[data-theme=dark][data-final]:not(#fn) .suggest{background-color:#101013}
html[data-theme=light][data-final]:not(#fn) .suggest{background-color:#f8f1df}
html[data-final]:not(#fn) .suggest .sg{background-clip:padding-box}
html[data-theme=dark][data-final]:not(#fn) .suggest .sg.on,html[data-theme=dark][data-final]:not(#fn) .suggest .sg:hover{background-color:#1c1c21}
html[data-theme=light][data-final]:not(#fn) .suggest .sg.on,html[data-theme=light][data-final]:not(#fn) .suggest .sg:hover{background-color:#eadfc6}

/* ---------- 3. SPECTRUM FOLLOWS THE THEME ---------- */
/* Dark keeps the black studio. Light turns every spectrum surface into old paper so the ink-coloured scenes read on it. */
html[data-theme=light][data-final]:not(#fn) .np{
  --bg:#eadfc8;--card:#f5edda;--card2:#fbf5e6;--surface:#f5edda;--surface2:#e6d9bb;--line:#2b211833;--track:#cdbf9f;
  --text:#2b2118;--muted:#6e5f4c;--hover:#2b211812;--sheet:#f8f1df;--scrim:#2b211899;
  --vio:#d9541e;--rose:#b8401a;--teal:#2f6f5e;--amber:#a8680f;--ring:#d9541e;
  --grad:linear-gradient(135deg,#e8682c 0%,#d9541e 100%);--on-grad:#fff7e8;
  background:#efe5cf;color:#2b2118;color-scheme:light}
html[data-theme=light][data-final]:not(#fn) .np-screen{background:radial-gradient(circle at 50% 38%,#f8f0dc,#efe5cf 74%)}
html[data-theme=light][data-final]:not(#fn) .np-top{color:#4a3d2d}
html[data-theme=light][data-final]:not(#fn) .np-top .icon-btn{background:#2b21180d;border:1px solid #2b211833;color:#2b2118;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme=light][data-final]:not(#fn) .np-overlay{background:linear-gradient(transparent,#efe5cfd9 30%,#efe5cff5)}
html[data-theme=light][data-final]:not(#fn) .np-info h2{color:#2b2118}
html[data-theme=light][data-final]:not(#fn) .np-info p,html[data-theme=light][data-final]:not(#fn) .np-seek{color:#5c4e3c}
html[data-theme=light][data-final]:not(#fn) .np-hint{color:#6e5f4c}
html[data-theme=light][data-final]:not(#fn) .np-btns .icon-btn{color:#2b2118}
html[data-theme=light][data-final]:not(#fn) .np-seek input{accent-color:#d9541e}
html[data-theme=light][data-final]:not(#fn) .np .vinyl{background:#e6d9bb;box-shadow:0 18px 40px -22px #2b211899,0 0 0 8px #2b21180f,0 0 0 9px #2b211833}
html[data-theme=light][data-final]:not(#fn) .np .vinyl::after{color:#2b211880}
html[data-theme=light][data-final]:not(#fn) .np .vinyl .hole{background:#efe5cf;box-shadow:0 0 0 5px #2b211833 inset,0 0 0 2px #2b211826,0 0 0 7px #2b211826}
html[data-theme=light][data-final]:not(#fn) .hero.live{background:#efe5cf}
html[data-theme=light][data-final]:not(#fn) .hero.live>canvas{mix-blend-mode:normal;opacity:1}   /* Nova blends the canvas with 'screen', which turns paper white */
html[data-theme=light][data-final]:not(#fn) .hero.live .hero-live{background:linear-gradient(transparent,#efe5cfd9 45%,#efe5cff5)}
html[data-theme=light][data-final]:not(#fn) .hero.live small{color:#d9541e}
html[data-theme=light][data-final]:not(#fn) .hl-meta strong{color:#2b2118}
html[data-theme=light][data-final]:not(#fn) .hl-meta span{color:#5c4e3c}
html[data-theme=light][data-final]:not(#fn) .hl-btns .icon-btn{color:#2b2118}
html[data-theme=light][data-final]:not(#fn) .hero-live .vinyl{box-shadow:0 10px 24px -14px #2b2118aa,0 0 0 4px #2b21180f,0 0 0 5px #2b211833}
html[data-theme=light][data-final]:not(#fn) .hero-live .vinyl .hole{background:#efe5cf}
html[data-theme=light][data-final]:not(#fn) .lab canvas{background:#efe5cf;border-color:#2b211866}
html[data-theme=dark][data-final]:not(#fn) .lab canvas{background:#09090b}
/* the extra scenes list scrolls sideways on a phone instead of wrapping into a wall of buttons */
#vizModes{scrollbar-width:thin}

/* ---------- 4. LUNA (small, still, round) ---------- */
.fn-lu{--s:40px;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);border-radius:50%;padding:2px;box-sizing:border-box;line-height:0;vertical-align:middle;pointer-events:none;user-select:none;animation:none!important;transition:none!important}
.fn-lu img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;animation:none!important;transition:none!important}
.fn-lu .lu-l{display:none}
html[data-theme=dark] .fn-lu{background:conic-gradient(from 200deg,#3ddcff,#8a6bff 38%,#ff5a36 70%,#3ddcff);box-shadow:0 0 0 1px #ffffff1f,0 6px 16px -8px #3ddcffaa}
html[data-theme=dark] .fn-lu img{box-shadow:0 0 0 2px #09090b}
html[data-theme=light] .fn-lu{background:linear-gradient(135deg,#d9541e,#2f6f5e);box-shadow:2px 2px 0 #2b2118;border:1.5px solid #2b2118}
html[data-theme=light] .fn-lu img{box-shadow:0 0 0 2px #f5edda}
html[data-theme=light] .fn-lu .lu-d{display:none}
html[data-theme=light] .fn-lu .lu-l{display:block}
/* sidebar row (desktop) */
.fn-lu-side{display:flex;align-items:center;gap:11px;padding:2px 12px 12px}
.fn-lu-side .fn-lu{--s:42px}
.fn-lu-txt{display:grid;gap:1px;min-width:0;line-height:1.15}
.fn-lu-txt b{font-size:14px;letter-spacing:.02em;color:var(--text)}
.fn-lu-txt small{font-family:var(--av-mono,ui-monospace,monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
html[data-view=mobile] .fn-lu-side{display:none}
/* Home hero kicker (phone) */
.fn-lu-kick{display:flex;align-items:center;gap:10px;min-width:0}
.fn-lu-kick .fn-lu{--s:38px}
.fn-lu-kick small{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
html:not([data-view=mobile]) .fn-lu-kick .fn-lu{display:none}
/* anything an earlier patch left floating is retired by final-boot.js */
.fn-gone{display:none!important}

/* ---------- 5. SUPPORT LINE ---------- */
.fn-support{margin:3px 0 0;text-align:center;font-size:11.5px;line-height:1.4;color:var(--muted);letter-spacing:.02em;overflow-wrap:anywhere}
.fn-support a{color:var(--vio);text-decoration:underline;text-underline-offset:2px;font-weight:700}
.fn-support a:hover{color:var(--text)}
.site-foot .fn-support{font-size:13px;margin:4px 0 8px}
html[data-avava] .fn-support{font-family:var(--av-mono,ui-monospace,monospace);font-size:10.5px;letter-spacing:.06em}
html[data-avava] .site-foot .fn-support{font-size:12px}