/* ==========================================================================
   Y · OS V01D skin — v1m  (supersedes custom-v2.css + ue-desk.css)
   Anti-Twitter · chronological · no bury · cobalt #1e4ed8 · uranium #d4ff00
   ========================================================================== */
:root{
  --y-cobalt:#1e4ed8;--y-cobalt-mid:#2f5fe6;--y-cobalt-hot:#5b82ff;--y-uranium:#d4ff00;
  --y-r:14px;--y-r-sm:10px;--y-bar:34px;
  --y-f-d:"Big Shoulders Display","Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --y-f-s:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --y-f-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* light tokens (default when html:not(.dark)) */
  --y-bg:#eef2fa;--y-ink:#0b1220;--y-muted:#5b6b88;--y-line:rgb(30 78 216/.16);
  --y-glass:rgb(255 255 255/.78);--y-glass-2:rgb(255 255 255/.92);--y-glass-b:rgb(30 78 216/.18);
  --y-hover:rgb(30 78 216/.06);--y-shadow:0 8px 30px rgb(15 30 70/.10),0 1px 0 rgb(255 255 255/.8) inset;
  --y-blur:blur(16px) saturate(1.3);
}
html.dark{
  --y-bg:#050505;--y-ink:#e8e8ea;--y-muted:#8a8f98;--y-line:rgb(30 78 216/.22);
  --y-glass:rgb(10 10 12/.62);--y-glass-2:rgb(17 18 22/.86);--y-glass-b:rgb(30 78 216/.38);
  --y-hover:rgb(30 78 216/.10);--y-shadow:0 12px 40px rgb(0 0 0/.55),inset 0 1px 0 rgb(255 255 255/.05);
  --color-gray-900:5 5 5;--color-primary-900:8 13 28;color-scheme:dark;
}
html:not(.dark){color-scheme:light}

/* ---------- desktop wallpaper ---------- */
html,body{background:var(--y-bg)!important;color:var(--y-ink)}
body{font-family:var(--y-f-s)!important;-webkit-font-smoothing:antialiased;
  background:
   radial-gradient(900px 520px at 80% -5%,rgb(30 78 216/.22),transparent 60%),
   radial-gradient(700px 480px at 5% 105%,rgb(212 255 0/.05),transparent 60%),
   linear-gradient(var(--y-line) 1px,transparent 1px) 0 0/48px 48px,
   linear-gradient(90deg,var(--y-line) 1px,transparent 1px) 0 0/48px 48px,
   var(--y-bg)!important;background-attachment:fixed!important}
html.dark body{background:
   radial-gradient(900px 520px at 80% -5%,rgb(30 78 216/.30),transparent 60%),
   radial-gradient(700px 480px at 5% 105%,rgb(212 255 0/.06),transparent 60%),
   linear-gradient(rgb(30 78 216/.08) 1px,transparent 1px) 0 0/48px 48px,
   linear-gradient(90deg,rgb(30 78 216/.08) 1px,transparent 1px) 0 0/48px 48px,
   #050505!important;background-attachment:fixed!important}
#soapbox,#soapbox>div{background:transparent!important}
::selection{background:rgb(30 78 216/.35)}
*{scrollbar-width:thin;scrollbar-color:rgb(30 78 216/.45) transparent}

/* legacy v1k/v1l overlays retired: vignette rim + moving grid sat above UI */
#soapbox::before{content:none!important}
#y-ue-sfx{z-index:-1!important;opacity:.55}
#y-ue-sfx .grid,#y-ue-sfx .vignette{display:none!important}
html:not(.dark) #y-ue-sfx{display:none!important}
/* NB: no z-index on #soapbox — a stacking context there put Soapbox modals/lightbox under the top bar */
#soapbox article:hover,#soapbox [data-testid="status"]:hover{outline:none!important}
#soapbox a:hover,#soapbox button:hover{text-shadow:none!important}
#soapbox [data-testid*="card"]:hover{outline:none!important;box-shadow:none!important}

/* ---------- typography ---------- */
#soapbox h1,#soapbox h2{letter-spacing:.01em}
#soapbox .status__content-wrapper,#soapbox [data-testid="status"] p{line-height:1.55}
#soapbox time,#soapbox .y-mono{font-variant-numeric:tabular-nums}

/* ---------- OS top bar (injected by y-v01d.js) ---------- */
#y-topbar{position:fixed;inset:0 0 auto 0;height:var(--y-bar);z-index:60;display:none;align-items:center;gap:14px;padding:0 14px;
  background:var(--y-glass-2);border-bottom:1px solid var(--y-glass-b);backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur);
  font:500 12.5px/1 var(--y-f-s);color:var(--y-ink)}
#y-topbar a,#y-topbar button{color:inherit;text-decoration:none;background:none;border:0;cursor:pointer;font:inherit;padding:6px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:6px}
#y-topbar a:hover,#y-topbar button:hover,#y-topbar a:focus-visible,#y-topbar button:focus-visible{background:rgb(30 78 216/.22);outline:none}
#y-topbar a.on{background:rgb(30 78 216/.28)}
#y-topbar .y-brand{font:800 14px/1 var(--y-f-d);letter-spacing:.14em;gap:8px;padding-left:4px}
#y-topbar .y-glyph{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--y-uranium);color:#000;font:800 14px/1 var(--y-f-d);letter-spacing:0}
#y-topbar .y-os{font:600 10.5px/1 var(--y-f-m);letter-spacing:.14em;color:var(--y-muted)}
#y-topbar .y-sep{width:1px;height:16px;background:var(--y-glass-b)}
#y-topbar .y-menu{display:flex;gap:2px}
#y-topbar .y-right{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--y-muted)}
#y-topbar .y-chip{font:600 10.5px/1 var(--y-f-m);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid var(--y-glass-b);color:var(--y-ink);display:inline-flex;gap:6px;align-items:center}
#y-topbar .y-dot{width:7px;height:7px;border-radius:50%;background:var(--y-uranium);box-shadow:0 0 8px var(--y-uranium)}
html:not(.dark) #y-topbar .y-dot{background:var(--y-cobalt);box-shadow:none}
#y-topbar time{font:500 12px var(--y-f-m);color:var(--y-ink);padding:0 4px}
@media (min-width:1024px){
  #y-topbar{display:flex}
  body{padding-top:var(--y-bar)}
  #soapbox .sticky.top-0,#soapbox .lg\:top-0{top:var(--y-bar)!important}
  #soapbox .min-h-screen{min-height:calc(100vh - var(--y-bar))}
}

/* ---------- layout windows ---------- */
@media (min-width:1024px){
  #soapbox main{margin-top:14px;border:1px solid var(--y-glass-b)!important;border-radius:var(--y-r);overflow:clip;
    background:var(--y-glass-2)!important;box-shadow:var(--y-shadow);min-height:calc(100vh - var(--y-bar) - 28px)}
  /* window title strip on the main column */
  #soapbox main::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--y-cobalt),var(--y-cobalt-hot) 55%,var(--y-uranium));opacity:.9}
  #soapbox aside>div{padding-top:14px}
}
/* inner surfaces become transparent so the glass window reads as one panel */
#soapbox main .bg-white,#soapbox main [class*="dark:bg-primary-900"]{background-color:transparent!important}
#soapbox main .sticky{background:var(--y-glass-2)!important}
/* NB: no backdrop-filter on main/.sticky — it makes them containing blocks and traps position:fixed children (CTA banner, FAB, modals). */
/* cards in right rail + everywhere */
#soapbox aside [data-testid="card"],#soapbox aside .rounded-lg,#soapbox aside .rounded-xl,
#soapbox [data-testid="sign-up-panel"]{background:var(--y-glass)!important;border:1px solid var(--y-glass-b);border-radius:var(--y-r)!important;padding:16px;backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur);box-shadow:var(--y-shadow)}

/* ---------- left sidebar = launcher ---------- */
@media (min-width:1024px){
  #soapbox .lg\:col-span-3>div{position:sticky;top:var(--y-bar)}
  #soapbox .lg\:col-span-3 a[href]{border-radius:var(--y-r-sm);transition:background .15s,color .15s}
  #soapbox .lg\:col-span-3 nav a:hover,#soapbox .lg\:col-span-3 .space-y-2 a:hover{background:var(--y-hover)}
  #soapbox .lg\:col-span-3 a.active,#soapbox .lg\:col-span-3 a[aria-current="page"]{background:rgb(30 78 216/.16);box-shadow:inset 3px 0 0 var(--y-cobalt)}
}
/* primary buttons: cobalt, calm glow, readable */
#soapbox button.bg-primary-500,#soapbox a.bg-primary-500{background:var(--y-cobalt)!important;color:#fff!important;border:1px solid rgb(91 130 255/.35)!important;box-shadow:0 6px 22px rgb(30 78 216/.35)}
#soapbox button.bg-primary-500:hover,#soapbox a.bg-primary-500:hover{background:var(--y-cobalt-mid)!important}
#soapbox .button.button-primary,#soapbox button.button-primary{color:#fff!important;border-color:rgb(91 130 255/.35)!important}
#soapbox input,#soapbox textarea,#soapbox select{border-radius:var(--y-r-sm)}
#soapbox input:focus,#soapbox textarea:focus{box-shadow:0 0 0 2px rgb(30 78 216/.45)!important;border-color:transparent!important}

/* ---------- post cards ---------- */
#soapbox [data-testid="status"]{padding:14px 18px 10px!important;transition:background .15s}
#soapbox .status--wrapper{border-bottom:1px solid var(--y-line)}
#soapbox .status--wrapper:hover{background:var(--y-hover)}
#soapbox [data-testid="status"] [data-testid="account"] img,#soapbox [data-testid="account"] .rounded-full img{border-radius:12px!important}
#soapbox [data-testid="status"] [data-testid="account"] .rounded-full{border-radius:12px!important}
#soapbox [data-testid="status-action-bar"]{margin-top:6px;gap:6px}
#soapbox [data-testid="status-action-bar"] button{border-radius:999px!important;padding:6px 10px!important;transition:background .15s,color .15s}
#soapbox [data-testid="status-action-bar"] button:hover{background:rgb(30 78 216/.14)}
#soapbox [data-testid="status-action-bar"] button[title*="Like"]:hover,#soapbox [data-testid="status-action-bar"] button[aria-label*="Like"]:hover{background:rgb(244 63 94/.14);color:#fb7185}
#soapbox [data-testid="status-action-bar"] button[title*="Repost"]:hover,#soapbox [data-testid="status-action-bar"] button[aria-label*="Repost"]:hover{background:rgb(34 197 94/.14);color:#4ade80}
/* media grid + lightbox */
#soapbox .media-gallery,#soapbox [data-testid="status"] .grid{border-radius:12px;overflow:hidden;gap:3px}
#soapbox [data-testid="still-image-container"],#soapbox .media-gallery__item{border-radius:10px;overflow:hidden}
#soapbox [data-testid="status"] img[alt]:not([class*="rounded-full"]){transition:filter .2s}
#soapbox .media-modal,.media-modal{z-index:1000;background:rgb(5 5 5/.92)!important;backdrop-filter:blur(10px)}

/* ---------- composer ---------- */
#soapbox [data-testid="card-body"] textarea,#soapbox .compose-form textarea{font-size:16px}
#soapbox main>div:first-child:has(textarea),#soapbox main>div:first-child:has([data-testid="card-body"]){border-bottom:1px solid var(--y-line)!important}
#soapbox .compose-form,[role="dialog"] .compose-form{border-radius:var(--y-r)}
[role="dialog"]>div,[data-testid="modal"]{border-radius:var(--y-r)!important}
html.dark [data-testid="modal"]{background:var(--y-glass-2)!important;border:1px solid var(--y-glass-b);backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur);box-shadow:0 30px 80px rgb(0 0 0/.6)}

/* ---------- tabs (Follows / Local) ---------- */
#soapbox main .sticky .bg-primary-500{background:linear-gradient(90deg,var(--y-cobalt),var(--y-uranium))!important;height:2px!important;border-radius:2px}
#soapbox main .sticky .bg-primary-200,#soapbox main .sticky [class*="dark:bg-gray-800"]{height:1px!important;background:var(--y-line)!important}

/* ---------- profile header ---------- */
#soapbox main img[alt*="header" i],#soapbox main [class*="header"] img{object-fit:cover}
#soapbox main .h-32,#soapbox main .md\:h-48{border-radius:0 0 var(--y-r) var(--y-r)}
#soapbox main .-mt-12 img.rounded-full,#soapbox main .-mt-12 .rounded-full,#soapbox main .ring-4{border-radius:18px!important}
#soapbox main .ring-4{--tw-ring-color:var(--y-bg)!important}

/* ---------- notifications ---------- */
#soapbox [data-testid="notification"]{border-bottom:1px solid var(--y-line);padding-top:6px}
#soapbox [data-testid="notification"]:hover{background:var(--y-hover)}

/* ---------- empty / loading ---------- */
#soapbox .spinner,.loading-indicator{filter:drop-shadow(0 0 10px rgb(30 78 216/.6))}
#soapbox [data-testid="empty-message"],#soapbox .empty-column-indicator{font-family:var(--y-f-m);letter-spacing:.04em;color:var(--y-muted)!important;padding:48px 16px!important;text-align:center}
.loading-indicator .border-gray-200{border-color:var(--y-cobalt)!important;border-right-color:transparent!important}

/* ---------- mobile: frosted top bar + floating dock ---------- */
@media (max-width:1023px){
  #soapbox nav[data-testid="navbar"]{background:var(--y-glass-2)!important;border-bottom:1px solid var(--y-glass-b)!important;box-shadow:none!important;backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur)}
  #soapbox main{background:transparent!important}
  #soapbox .hide-scrollbar.fixed.inset-x-0.bottom-0{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;width:auto!important;border-radius:20px;border:1px solid var(--y-glass-b)!important;
    background:var(--y-glass-2)!important;backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur);box-shadow:0 10px 30px rgb(0 0 0/.35);padding:2px 4px}
  #soapbox .hide-scrollbar.fixed.inset-x-0.bottom-0 a{border-radius:14px;margin:4px 0;padding-top:7px!important;padding-bottom:7px!important}
  #soapbox .hide-scrollbar.fixed.inset-x-0.bottom-0 a.active{background:rgb(30 78 216/.2)}
  #soapbox .hide-scrollbar.fixed.inset-x-0.bottom-0 a.active svg{color:var(--y-cobalt-hot)}
  #soapbox main{padding-bottom:120px!important}
  #soapbox .fixed.bottom-24.right-4{bottom:92px!important}
  #soapbox .fixed.bottom-24.right-4 button{background:var(--y-cobalt)!important;box-shadow:0 8px 24px rgb(30 78 216/.45)!important;border-color:rgb(91 130 255/.4)!important}
  /* v1l bug: Ask Y FAB covered the bottom nav — park it above the dock, left side */
  #y-hector-fab{right:auto!important;left:14px!important;bottom:92px!important;width:48px!important;height:48px!important;font-size:11px!important}
  #soapbox [data-testid="cta-banner"]>div{bottom:84px!important;left:10px!important;right:10px!important;width:auto!important;border-radius:16px;border:1px solid var(--y-glass-b)}
}
/* desktop: keep Ask Y clear of the Chats pane */
@media (min-width:1280px){#y-hector-fab{bottom:84px!important}}
#soapbox [data-testid="cta-banner"]>div{background:var(--y-glass-2)!important;backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur);border-top:1px solid var(--y-glass-b)}

/* ---------- chats pane ---------- */
#soapbox [data-testid="pane"]{background:var(--y-glass-2)!important;border:1px solid var(--y-glass-b)!important;backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur)}

/* ---------- Anti-Twitter ethos stamp on timelines (injected) ---------- */
.y-ethos{display:flex;align-items:center;gap:8px;padding:8px 18px;font:600 10.5px/1.2 var(--y-f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--y-muted);border-bottom:1px solid var(--y-line)}
.y-ethos b{color:var(--y-ink);font-weight:700}
.y-ethos i{width:6px;height:6px;border-radius:50%;background:var(--y-uranium);box-shadow:0 0 8px var(--y-uranium);font-style:normal}
html:not(.dark) .y-ethos i{background:var(--y-cobalt);box-shadow:none}

/* ---------- sign-in window ---------- */
html[data-y-route="auth"] #soapbox main form{max-width:420px;margin-left:auto;margin-right:auto}
#soapbox form[data-testid="form"] input[name="username"],#soapbox form[data-testid="form"] input[name="password"]{height:44px;font-size:15px}
.y-auth-kicker{font:600 11px var(--y-f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--y-cobalt-hot);margin:0 0 6px}

@media (prefers-reduced-motion:reduce){#y-ue-sfx{display:none!important}*{transition:none!important;animation:none!important}}

/* default (1x1) banners -> OS V01D wallpaper strip instead of an empty slab */
#soapbox div:has(> img[src$="/images/banner.png"]),#soapbox div:has(> a > img[src$="/images/banner.png"]){background:
  radial-gradient(420px 160px at 85% 0%,rgb(212 255 0/.18),transparent 70%),
  linear-gradient(rgb(91 130 255/.12) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgb(91 130 255/.12) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(135deg,#0b1a4a,#1e4ed8 55%,#0b1220)!important}
#soapbox img[src$="/images/banner.png"]{opacity:0}
/* Ask Y FAB sat above Soapbox modals/sheets (z 2147483000) — keep it under every Soapbox overlay/modal (z>=50); drawer itself stays on top */
#y-hector-fab{z-index:45!important}

/* mobile explore search (injected) */
.y-msearch{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--y-line)}
.y-msearch input{flex:1;height:42px;border-radius:12px;border:1px solid var(--y-glass-b);background:var(--y-glass);color:var(--y-ink);padding:0 14px;font:15px var(--y-f-s)}
.y-msearch input:focus{outline:none;box-shadow:0 0 0 2px rgb(30 78 216/.5)}
.y-msearch button{width:42px;border-radius:12px;border:1px solid rgb(91 130 255/.35);background:var(--y-cobalt);color:#fff;font-size:20px}
/* xl: keep form footers (Save etc.) scrollable clear of the fixed Chats pane */
@media (min-width:1280px){#soapbox main{margin-bottom:96px}}
#y-theme-m{position:fixed;top:6px;right:10px;z-index:60;width:36px;height:36px;border-radius:10px;border:1px solid var(--y-glass-b);background:var(--y-glass);color:var(--y-ink);font-size:16px;display:grid;place-items:center}
@media (min-width:1024px){#y-theme-m{display:none}}