/* ==========================================================================
   Y · OS V01D — v1n layer (calm feed, quiet, reading, posting, Hector, onboarding)
   Loads after y-v01d.css. Tokens from y-v01d.css (--y-*).
   ========================================================================== */
:root{--y-ok:#22c55e;--y-warn:#f59e0b;--y-bad:#ef4444;--y-ease:cubic-bezier(.2,.7,.2,1);--y-focus:#5b82ff}
html:not(.dark){--y-focus:#1e4ed8}
.y-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- focus-visible pass (keyboard users see exactly where they are) ---------- */
#soapbox :focus-visible,#y-topbar :focus-visible,.y-modal :focus-visible,#y-banner :focus-visible,.y-toast :focus-visible,#y-cc-m:focus-visible,#y-theme-m:focus-visible{outline:2px solid var(--y-focus)!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgb(30 78 216/.25)!important;border-radius:8px}
#soapbox .status.focusable:focus-visible,#soapbox #thread .focusable:focus-visible{outline-offset:-2px!important;border-radius:0}
#soapbox [data-testid="status"] .focusable:focus{background:transparent}
.y-skip{position:fixed;left:12px;top:-60px;z-index:200;padding:10px 14px;border-radius:10px;background:var(--y-cobalt);color:#fff!important;font:600 14px var(--y-f-s);text-decoration:none;transition:top .15s}
.y-skip:focus{top:10px;outline:2px solid #fff;outline-offset:2px}

/* ---------- shared atoms ---------- */
.y-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--y-glass-b);background:var(--y-glass);color:var(--y-ink);font:600 13.5px/1 var(--y-f-s);cursor:pointer;transition:background .15s,transform .08s,border-color .15s}
.y-btn:hover{background:rgb(30 78 216/.14);border-color:rgb(91 130 255/.45)}
.y-btn:active{transform:scale(.97)}
.y-btn-p{background:var(--y-cobalt);color:#fff;border-color:rgb(91 130 255/.4);box-shadow:0 6px 20px rgb(30 78 216/.3)}
.y-btn-p:hover{background:var(--y-cobalt-mid)}
.y-ghost{background:transparent;border-color:transparent;color:var(--y-muted)}
.y-pill{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--y-glass-b);background:transparent;color:var(--y-muted);font:600 12px/1 var(--y-f-s);cursor:pointer;transition:background .15s,color .15s,transform .08s}
.y-pill:hover{color:var(--y-ink);background:var(--y-hover)}
.y-pill:active{transform:scale(.96)}
.y-pill[aria-pressed="true"]{background:rgb(30 78 216/.2);color:var(--y-ink);border-color:rgb(91 130 255/.55)}
.y-pill-p{background:var(--y-cobalt);color:#fff;border-color:rgb(91 130 255/.4)}
.y-pill-p:hover{background:var(--y-cobalt-mid);color:#fff}
.y-muted{color:var(--y-muted)}
.y-i{font-style:normal}
.y-grow{flex:1}

/* ---------- labels (automated / moderation / announcement / OP) ---------- */
.y-label{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:6px;font:700 10.5px/1 var(--y-f-m);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid}
.y-label i{font-style:normal;letter-spacing:0}
.y-label-auto{color:#5b82ff;background:rgb(30 78 216/.14);border-color:rgb(91 130 255/.4)}
.y-label-mod{color:#fbbf24;background:rgb(245 158 11/.12);border-color:rgb(245 158 11/.45)}
.y-label-ann{color:#d4ff00;background:rgb(212 255 0/.08);border-color:rgb(212 255 0/.4)}
.y-label-op{color:var(--y-ink);background:rgb(30 78 216/.22);border-color:rgb(91 130 255/.5)}
html:not(.dark) .y-label-auto{color:#1e4ed8;background:#eef3ff;border-color:#bcd0fd}
html:not(.dark) .y-label-mod{color:#92400e;background:#fffbeb;border-color:#fcd34d}
html:not(.dark) .y-label-ann{color:#3f4a00;background:#f7ffd1;border-color:#c9e000}
html:not(.dark) .y-label-op{color:#1e3a8a;background:#dbe5fe;border-color:#8fb0fb}
.y-label-notif{margin:6px 0 0 52px}

/* ---------- per-post meta row: reading time · listen · why ---------- */
.y-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;min-height:26px;animation:y-fade .25s var(--y-ease)}
.y-chip-sm{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--y-hover);color:var(--y-muted);font:600 11px/1 var(--y-f-m);letter-spacing:.03em}
.y-mbtn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--y-muted);font:600 12px/1 var(--y-f-s);cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .08s}
.y-mbtn:hover{background:var(--y-hover);color:var(--y-ink);border-color:var(--y-glass-b)}
.y-mbtn:active{transform:scale(.95)}
.y-mbtn .y-i{font-size:12px;line-height:1}
.y-mbtn[aria-expanded="true"],.y-mbtn.on{color:var(--y-ink);background:rgb(30 78 216/.18);border-color:rgb(91 130 255/.5)}
.y-say.on .y-i{animation:y-pulse 1s ease-in-out infinite}
.y-why{flex-basis:100%;margin-top:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--y-glass-b);background:var(--y-glass);font:13px/1.45 var(--y-f-s);color:var(--y-muted);animation:y-drop .2s var(--y-ease)}
.y-why p{margin:0}
.y-why p+p{margin-top:4px}
.y-why .y-why-main{color:var(--y-ink);font-weight:600}
.y-why[hidden]{display:none}
@media (max-width:480px){.y-mbtn .y-l{font-size:11.5px}.y-meta{gap:4px}}

/* ---------- quiet mode: hide counts ---------- */
html.y-quiet #soapbox .y-count{display:none!important}
html.y-quiet #y-topbar .y-calm-btn{color:var(--y-ink)}
/* digest hold: badge counters wait for the next batch */
html.y-digest-hold #soapbox a[href="/notifications"] span.bg-secondary-500,
html.y-digest-hold #soapbox a[href="/notifications"] .rounded-full.bg-secondary-500{display:none!important}
#y-topbar a.y-has-digest{position:relative}
#y-topbar a.y-has-digest::after{content:"";position:absolute;top:4px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--y-uranium);box-shadow:0 0 6px var(--y-uranium)}
html:not(.dark) #y-topbar a.y-has-digest::after{background:var(--y-cobalt);box-shadow:none}

/* ---------- caught-up marker ---------- */
.y-caught{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;outline:none;animation:y-fade .35s var(--y-ease)}
.y-caught-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgb(91 130 255/.55),transparent)}
.y-caught-c{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.y-caught-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgb(30 78 216/.18);border:1px solid rgb(91 130 255/.55);color:var(--y-cobalt-hot);font:700 14px/1 var(--y-f-s);box-shadow:0 0 18px rgb(30 78 216/.35)}
.y-caught-c b{font:700 14px/1.2 var(--y-f-s);color:var(--y-ink)}
.y-caught-c small{font:500 11.5px/1.3 var(--y-f-m);color:var(--y-muted);letter-spacing:.02em}
.y-caught:focus-visible{outline:2px solid var(--y-focus);outline-offset:-4px;border-radius:12px}
html:not(.dark) .y-caught-ic{color:var(--y-cobalt);background:#eef3ff}
/* ethos stamp: pill + tools */
.y-ethos{flex-wrap:wrap;row-gap:6px}
.y-newpill{display:inline-flex;align-items:center;gap:6px;margin-left:6px;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--y-glass-b);background:transparent;color:var(--y-muted);font:600 10.5px/1 var(--y-f-m);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.y-newpill.fresh{color:var(--y-ink);border-color:rgb(91 130 255/.55);background:rgb(30 78 216/.14)}
.y-newpill .y-dot2{width:6px;height:6px;border-radius:50%;background:var(--y-muted)}
.y-newpill.fresh .y-dot2{background:var(--y-cobalt-hot);box-shadow:0 0 6px var(--y-cobalt-hot)}
.y-ethos-tools{margin-left:auto;display:inline-flex;gap:4px}
.y-ethos-b{height:22px;padding:0 8px;border-radius:7px;border:0;background:transparent;color:var(--y-muted);font:600 10.5px/1 var(--y-f-m);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.y-ethos-b:hover{background:var(--y-hover);color:var(--y-ink)}
@media (min-width:1024px){.y-ethos-tools{display:none}}  /* desktop has them in the top bar */

/* paged feed: Soapbox's own Load more button, restyled as a page break */
#soapbox main [data-testid="virtuoso-item-list"]+div button[data-testid="button"],#soapbox main [data-virtuoso-scroller] button.w-full{margin:6px 0}
html.y-paged-note #soapbox main [data-virtuoso-scroller] > div > div:last-child button{position:relative}

/* ---------- conversation / thread ---------- */
.y-threadbar{scroll-margin-top:76px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0 6px;padding:10px 14px;border-radius:12px;border:1px solid var(--y-glass-b);background:var(--y-glass)}
.y-threadbar .y-tb-t{font:500 12.5px var(--y-f-m);color:var(--y-muted);letter-spacing:.02em;flex:1;min-width:180px}
.y-threadbar .y-tb-t b{color:var(--y-ink);font-family:var(--y-f-s);font-weight:700;letter-spacing:0}
.y-say-thread{min-height:32px}
.y-say-thread.on{background:var(--y-bad);border-color:rgb(248 113 113/.5)}
#soapbox #thread .thread__status>.absolute{display:block!important;background:linear-gradient(var(--y-cobalt),rgb(30 78 216/.25))!important;width:2px!important;opacity:.7}
#soapbox #thread [data-item-index]>.pb-4{position:relative;border-left:3px solid var(--y-cobalt);background:linear-gradient(90deg,rgb(30 78 216/.10),transparent 60%);padding-left:12px;margin:6px 0 6px -3px;border-radius:0 12px 12px 0}
#soapbox #thread .thread__status [data-testid="status"] .status--content-wrapper>.mb-1,#soapbox #thread .pb-4 .mb-1.text-sm{font:500 11.5px var(--y-f-m);letter-spacing:.03em;color:var(--y-muted)!important}

/* ---------- composer tools ---------- */
.y-compose-tools{display:flex;flex-direction:column;gap:8px}
#soapbox form:has(> .flex-wrap.hidden) > .y-compose-tools:not(.has-draft){display:none}
#soapbox form:has(> .flex-wrap.hidden) > .y-compose-tools.has-draft .y-ct-row,
#soapbox form:has(> .flex-wrap.hidden) > .y-compose-tools.has-draft .y-preview,
#soapbox form:has(> .flex-wrap.hidden) > .y-compose-tools.has-draft .y-alt-nudge{display:none}
.y-ct-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.y-draft-st{margin-left:auto;font:500 11px var(--y-f-m);color:var(--y-muted);letter-spacing:.03em}
.y-restore{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:8px 10px;border-radius:12px;border:1px dashed rgb(91 130 255/.5);background:rgb(30 78 216/.08);font:13px/1.35 var(--y-f-s);color:var(--y-muted);animation:y-drop .2s var(--y-ease)}
.y-restore .y-restore-t{flex:1;min-width:180px;overflow-wrap:anywhere}
.y-restore b{color:var(--y-ink)}
.y-restore[hidden],.y-alt-nudge[hidden],.y-preview[hidden]{display:none!important}
.y-alt-nudge{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:10px 12px;border-radius:12px;border:1px solid rgb(245 158 11/.45);background:rgb(245 158 11/.08);font:13px/1.4 var(--y-f-s);color:var(--y-muted);animation:y-drop .2s var(--y-ease)}
.y-alt-nudge .y-nudge-t{flex:1;min-width:200px}
.y-alt-nudge b{color:var(--y-ink)}
html:not(.dark) .y-alt-nudge{background:#fffbeb}
.y-preview{border-radius:12px;border:1px solid var(--y-glass-b);background:var(--y-glass);padding:10px 12px;animation:y-drop .2s var(--y-ease)}
.y-pv-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;font:700 11px var(--y-f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--y-muted)}
.y-pv-h small{font-weight:500;letter-spacing:.02em;text-transform:none}
.y-pv-card{font:15px/1.5 var(--y-f-s);color:var(--y-ink);overflow-wrap:anywhere}
.y-pv-cw{display:flex;flex-direction:column;gap:2px;padding:8px 10px;margin-bottom:8px;border-radius:10px;background:rgb(245 158 11/.1);border:1px solid rgb(245 158 11/.4)}
.y-pv-cw small{font:500 11px var(--y-f-m);color:var(--y-muted)}
.y-pv-body a,.y-pv-tag{color:var(--y-cobalt-hot)}
html:not(.dark) .y-pv-body a,html:not(.dark) .y-pv-tag{color:var(--y-cobalt)}
/* character ring: bigger, calmer, colored as you approach the limit */
#soapbox form div[title^="Used "] svg{width:26px!important;height:26px!important;transition:transform .2s var(--y-ease)}
#soapbox form:has(.y-compose-tools[data-ring="warn"]) div[title^="Used "] svg circle:last-child{stroke:var(--y-warn)!important}
#soapbox form:has(.y-compose-tools[data-ring="over"]) div[title^="Used "] svg circle:last-child{stroke:var(--y-bad)!important}
#soapbox form:has(.y-compose-tools[data-ring="warn"]) div[title^="Used "]~*,#soapbox form:has(.y-compose-tools[data-ring="warn"]) div[title^="Used "]{color:var(--y-warn)}
#soapbox form:has(.y-compose-tools[data-ring="over"]) div[title^="Used "] svg{transform:scale(1.12)}
#soapbox form:has(.y-compose-tools[data-ring="warn"]) span.text-sm.font-medium,#soapbox form:has(.y-compose-tools[data-ring="warn"]) .items-center.space-x-1>span{color:var(--y-warn)!important}
#soapbox form:has(.y-compose-tools[data-ring="over"]) .items-center.space-x-1>span{color:var(--y-bad)!important;font-weight:700}
#soapbox form .items-center.space-x-1>span.text-sm{font-family:var(--y-f-m);font-variant-numeric:tabular-nums}

/* ---------- Hector banner ---------- */
#y-banner{display:flex;flex-direction:column;gap:8px;padding:10px 12px 0}
.y-note-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--y-glass-b);background:var(--y-glass);animation:y-drop .25s var(--y-ease)}
.y-note-item.lvl-warn{border-color:rgb(245 158 11/.5);background:linear-gradient(90deg,rgb(245 158 11/.08),var(--y-glass))}
.y-note-item.lvl-critical{border-color:rgb(239 68 68/.55);background:linear-gradient(90deg,rgb(239 68 68/.1),var(--y-glass))}
.y-note-tx{flex:1;min-width:0;font:13.5px/1.45 var(--y-f-s);color:var(--y-ink);overflow-wrap:anywhere}
.y-note-tx small{display:block;margin-top:3px;font:500 11px var(--y-f-m);color:var(--y-muted);letter-spacing:.02em}
.y-note-tx a{color:var(--y-cobalt-hot)}
.y-note-item .y-label{margin-top:1px}
.y-x{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--y-muted);font:14px/1 var(--y-f-s);cursor:pointer}
.y-x:hover{background:var(--y-hover);color:var(--y-ink)}
@media (max-width:480px){.y-note-item{flex-wrap:wrap}.y-note-tx{flex-basis:calc(100% - 40px);order:3}.y-note-item .y-x{margin-left:auto}}

/* ---------- notification digest ---------- */
.y-digest{margin:12px;padding:14px 16px;border-radius:14px;border:1px solid rgb(91 130 255/.4);background:linear-gradient(135deg,rgb(30 78 216/.14),var(--y-glass));animation:y-drop .25s var(--y-ease)}
.y-digest header{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font:14px var(--y-f-s);color:var(--y-muted)}
.y-digest header b{color:var(--y-ink)}
.y-digest header small{margin-left:auto;font:500 11px var(--y-f-m)}
.y-dg-badge{color:var(--y-cobalt-hot)}
.y-digest ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.y-digest li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:13.5px var(--y-f-s);color:var(--y-ink)}
.y-dg-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--y-hover);color:var(--y-cobalt-hot);font:700 12px/1 var(--y-f-s)}
.y-dg-n{color:var(--y-muted)}
.y-digest-empty,.y-digest-foot{margin:8px 0 0;font:12.5px/1.4 var(--y-f-s);color:var(--y-muted)}
.y-digest-foot{font:500 11px var(--y-f-m);letter-spacing:.02em}

/* ---------- top bar additions ---------- */
#y-topbar .y-hec-chip{font:600 10.5px/1 var(--y-f-m)!important;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--y-glass-b)!important;border-radius:999px!important;padding:5px 9px!important;color:var(--y-ink)!important}
#y-topbar .y-hdot{width:7px;height:7px;border-radius:2px;background:var(--y-cobalt-hot);box-shadow:0 0 8px rgb(91 130 255/.8)}
#y-topbar .y-calm-btn.on{background:rgb(30 78 216/.22);color:var(--y-ink)}
#y-topbar .y-keys-btn{width:26px;justify-content:center;padding:6px 0!important;font:700 12px/1 var(--y-f-m)!important;border:1px solid var(--y-glass-b)!important}
@media (max-width:1200px){#y-topbar .y-chip{display:none!important}}
#y-cc-m{position:fixed;top:6px;right:52px;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}
#y-cc-m.on{background:rgb(30 78 216/.28);border-color:rgb(91 130 255/.6)}
@media (min-width:1024px){#y-cc-m{display:none}}

/* ---------- OS-window modals (calm, shortcuts, hector, welcome) ---------- */
.y-modal-wrap{position:fixed;inset:0;z-index:2147483100;display:grid;place-items:center;padding:16px;background:rgb(5 5 5/.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:y-fade .18s ease}
html:not(.dark) .y-modal-wrap{background:rgb(15 23 42/.28)}
.y-modal-wrap.out{animation:y-fadeout .16s ease forwards}
.y-modal{width:min(560px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--y-glass-b);background:var(--y-glass-2);backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur);box-shadow:0 30px 90px rgb(0 0 0/.55),inset 0 1px 0 rgb(255 255 255/.06);color:var(--y-ink);overflow:hidden;animation:y-pop .22s var(--y-ease)}
html:not(.dark) .y-modal{background:rgb(255 255 255/.96);box-shadow:0 30px 80px rgb(15 30 70/.22)}
.y-wide .y-modal{width:min(760px,100%)}
.y-modal-h{position:relative;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--y-line);background:linear-gradient(180deg,rgb(30 78 216/.10),transparent)}
.y-modal-h::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--y-cobalt),var(--y-cobalt-hot) 55%,var(--y-uranium));opacity:.9}
.y-modal-h h2{flex:1;margin:0;font:800 15px/1.2 var(--y-f-d);letter-spacing:.08em;text-transform:uppercase}
.y-lights{display:inline-flex;gap:6px}
.y-lights i{width:10px;height:10px;border-radius:50%;background:rgb(122 138 168/.35)}
.y-lights i:first-child{background:var(--y-uranium);opacity:.85}
html:not(.dark) .y-lights i:first-child{background:var(--y-cobalt)}
.y-modal-b{padding:14px 16px 18px;overflow:auto;overscroll-behavior:contain}
.y-lead{margin:0 0 12px;color:var(--y-muted);font:14px/1.5 var(--y-f-s)}
.y-note{margin:8px 0 0;color:var(--y-muted);font:12.5px/1.45 var(--y-f-s)}
.y-sec{padding:12px 0;border-top:1px solid var(--y-line)}
.y-sec:first-of-type{border-top:0}
.y-sec h3{margin:0 0 8px;font:700 10.5px/1 var(--y-f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--y-cobalt-hot)}
html:not(.dark) .y-sec h3{color:var(--y-cobalt)}
.y-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0}
.y-row label,.y-row .y-lbl{display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer}
.y-row b{font:600 14px/1.3 var(--y-f-s)}
.y-row small{font:12.5px/1.35 var(--y-f-s);color:var(--y-muted)}
.y-row select{flex:none;max-width:52%;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--y-glass-b);background:var(--y-glass);color:var(--y-ink);font:13.5px var(--y-f-s)}
html.dark .y-row select option{background:#111216}
.y-switch{flex:none;position:relative;width:46px;height:28px;border-radius:999px;border:1px solid var(--y-glass-b);background:rgb(122 138 168/.28);cursor:pointer;transition:background .18s}
.y-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgb(0 0 0/.3);transition:transform .18s var(--y-ease)}
.y-switch[aria-checked="true"]{background:var(--y-cobalt);border-color:rgb(91 130 255/.6)}
.y-switch[aria-checked="true"] .y-knob{transform:translateX(18px)}
.y-seg{display:inline-flex;padding:3px;border-radius:12px;border:1px solid var(--y-glass-b);background:var(--y-glass)}
.y-seg button{height:30px;padding:0 12px;border-radius:9px;border:0;background:transparent;color:var(--y-muted);font:600 13px var(--y-f-s);cursor:pointer}
.y-seg button[aria-checked="true"]{background:var(--y-cobalt);color:#fff}
.y-links{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--y-line)}
@media (max-width:640px){
  .y-modal-wrap{place-items:end center;padding:0}
  .y-modal{width:100%!important;max-height:88vh;border-radius:20px 20px 0 0;animation:y-sheet .25s var(--y-ease);padding-bottom:env(safe-area-inset-bottom)}
  .y-row select{max-width:48%}
}
/* shortcuts */
.y-keys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.y-keys-grid .y-sec{border-top:0;padding-top:0}
.y-keys-grid dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-items:center}
.y-keys-grid dt{display:flex;align-items:center;gap:4px;white-space:nowrap}
.y-keys-grid dd{margin:0;font:13px/1.3 var(--y-f-s);color:var(--y-muted)}
kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:7px;border:1px solid var(--y-glass-b);border-bottom-width:2px;background:var(--y-glass);font:700 11.5px/1 var(--y-f-m);color:var(--y-ink)}
.y-or{font:500 10px var(--y-f-m);color:var(--y-muted)}
@media (max-width:760px){.y-keys-grid{grid-template-columns:1fr}.y-keys-grid .y-sec{padding-top:10px;border-top:1px solid var(--y-line)}.y-keys-grid .y-sec:first-child{border-top:0}}
/* hector */
.y-hec-hero{display:flex;gap:14px;align-items:flex-start;padding:4px 0 12px}
.y-hec-hero b{display:block;font:700 16px/1.3 var(--y-f-s)}
.y-hec-hero p{margin:4px 0 0;color:var(--y-muted);font:14px/1.5 var(--y-f-s)}
.y-hec-glyph{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--y-cobalt),#0b1a4a);color:#fff;font:800 22px/1 var(--y-f-d);border:1px solid rgb(91 130 255/.5);box-shadow:0 0 24px rgb(30 78 216/.45)}
.y-hec-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.y-hec-cols ul,.y-sec ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.y-hec-cols li{position:relative;padding-left:22px;font:13.5px/1.45 var(--y-f-s)}
.y-does li::before{content:"✓";position:absolute;left:0;top:0;color:var(--y-ok);font-weight:700}
.y-doesnt li::before{content:"✕";position:absolute;left:0;top:0;color:var(--y-bad);font-weight:700}
.y-label-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.y-label-ex{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.y-label-ex small{font:12.5px/1.35 var(--y-f-s);color:var(--y-muted)}
.y-kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.y-kv dt{font:600 12px var(--y-f-m);color:var(--y-muted);letter-spacing:.02em}
.y-kv dd{margin:0;font:13.5px/1.4 var(--y-f-s);overflow-wrap:anywhere}
.y-sec p{margin:0 0 6px;font:13.5px/1.5 var(--y-f-s)}
.y-sec a{color:var(--y-cobalt-hot)}
@media (max-width:640px){.y-hec-cols,.y-label-row{grid-template-columns:1fr}.y-kv{grid-template-columns:1fr}.y-kv dd{margin-bottom:6px}}
.y-skel-block{display:flex;flex-direction:column;gap:10px;padding:8px 0}
.y-skel-block i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--y-hover),rgb(91 130 255/.18),var(--y-hover));background-size:200% 100%;animation:y-shimmer 1.2s linear infinite}
.y-skel-block i:nth-child(2){width:80%}.y-skel-block i:nth-child(3){width:60%}
/* welcome */
.y-welcome-m .y-modal{width:min(480px,100%)}
.y-welcome-m .y-modal-b{padding:22px 22px 18px}
.y-wel-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--y-uranium);color:#000;font:800 28px/1 var(--y-f-d);box-shadow:0 0 30px rgb(212 255 0/.35);margin-bottom:14px}
html:not(.dark) .y-wel-ic{background:var(--y-cobalt);color:#fff;box-shadow:0 10px 30px rgb(30 78 216/.3)}
.y-kicker{margin:0 0 6px;font:700 10.5px/1 var(--y-f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--y-cobalt-hot)}
html:not(.dark) .y-kicker{color:var(--y-cobalt)}
.y-wel-t{margin:0 0 12px;font:800 22px/1.2 var(--y-f-s);outline:none}
.y-wel-l{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.y-wel-l li{position:relative;padding-left:20px;font:14.5px/1.5 var(--y-f-s);color:var(--y-muted)}
.y-wel-l li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--y-cobalt-hot)}
.y-dots{display:flex;gap:6px;margin:0 0 16px}
.y-dots span{width:22px;height:4px;border-radius:2px;background:var(--y-line);transition:background .2s,width .2s}
.y-dots span.on{background:var(--y-cobalt-hot);width:34px}
.y-wel-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- toasts (time reminder etc.) ---------- */
#y-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2147483050;display:flex;flex-direction:column;gap:8px;width:min(460px,calc(100vw - 24px));pointer-events:none}
.y-toast{pointer-events:auto;display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--y-glass-b);background:var(--y-glass-2);backdrop-filter:var(--y-blur);-webkit-backdrop-filter:var(--y-blur);box-shadow:0 16px 40px rgb(0 0 0/.4);color:var(--y-ink);font:14px/1.45 var(--y-f-s);animation:y-up .22s var(--y-ease)}
.y-toast.out{animation:y-fadeout .2s ease forwards}
.y-toast-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.y-toast.y-time{border-color:rgb(91 130 255/.55)}
@media (max-width:1023px){#y-toasts{bottom:96px}}

/* ---------- skeleton loaders ---------- */
#soapbox .status-placeholder{border-bottom:1px solid var(--y-line)}
#soapbox .animate-pulse{animation:none!important}
#soapbox .animate-pulse .bg-primary-50,#soapbox .animate-pulse [class*="bg-primary-"],#soapbox .animate-pulse [class*="bg-gray-"],#soapbox .animate-pulse .rounded-full,
#soapbox [class*="placeholder"] .rounded-full,#soapbox .status-placeholder p,#soapbox .status-placeholder .rounded{background:linear-gradient(90deg,rgb(30 78 216/.10),rgb(91 130 255/.24),rgb(30 78 216/.10))!important;background-size:200% 100%!important;animation:y-shimmer 1.3s linear infinite!important;color:transparent!important;border-radius:8px}
#soapbox .status-placeholder .rounded-full{border-radius:12px!important}
html:not(.dark) #soapbox .animate-pulse [class*="bg-"]{background:linear-gradient(90deg,#e8ecf5,#f5f7fc,#e8ecf5)!important;background-size:200% 100%!important}
/* boot skeleton (index.html, before React mounts) */
.y-boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:56px 12px 0;gap:12px}
.y-boot-bar{position:fixed;inset:0 0 auto 0;height:34px;background:rgb(17 18 22/.86);border-bottom:1px solid rgb(30 78 216/.38)}
html:not(.dark) .y-boot-bar{background:rgb(255 255 255/.92);border-color:rgb(30 78 216/.18)}
.y-boot-card{width:min(600px,100%);padding:16px;border-radius:14px;border:1px solid rgb(30 78 216/.28);display:flex;gap:12px}
.y-boot-card i{display:block;border-radius:10px;background:linear-gradient(90deg,rgb(30 78 216/.10),rgb(91 130 255/.24),rgb(30 78 216/.10));background-size:200% 100%;animation:y-shimmer 1.3s linear infinite}
.y-boot-card .a{flex:none;width:42px;height:42px;border-radius:12px}
.y-boot-card .l{flex:1;display:flex;flex-direction:column;gap:8px}
.y-boot-card .l i{height:11px}.y-boot-card .l i:nth-child(1){width:40%}.y-boot-card .l i:nth-child(3){width:75%}
.y-boot-t{font:600 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#8a8f98;margin-top:6px}

/* ---------- empty states (v1m grey "no results" slab fixed) ---------- */
#soapbox main .y-empty,#soapbox main .y-empty [data-testid="card-body"]{background:transparent!important;box-shadow:none!important}
#soapbox main .y-empty{margin:16px!important;border:1px dashed var(--y-glass-b)!important;border-radius:var(--y-r)!important}
#soapbox main [data-y-empty]{padding:34px 18px 30px!important;text-align:center;color:var(--y-muted)!important;font:14px/1.5 var(--y-f-s)}
#soapbox main [data-y-empty]::before{content:"⌕";display:grid;place-items:center;width:44px;height:44px;margin:0 auto 10px;border-radius:14px;background:rgb(30 78 216/.14);border:1px solid rgb(91 130 255/.4);color:var(--y-cobalt-hot);font:22px/1 var(--y-f-s)}
#soapbox main [data-y-empty]::after{content:"Try a @username, a #tag or different words. Search on Y is chronological too.";display:block;margin-top:6px;font:12.5px/1.4 var(--y-f-m);letter-spacing:.02em}
#soapbox main [data-y-empty] *{color:inherit!important;background:transparent!important}
#soapbox main .y-empty-msg{border:1px dashed var(--y-glass-b);border-radius:var(--y-r);margin:16px;background:transparent!important}
#soapbox main .y-empty-msg::before{content:"◌";display:block;font:26px/1 var(--y-f-s);color:var(--y-cobalt-hot);margin-bottom:8px}

/* ---------- micro-interactions ---------- */
#soapbox [data-testid="status-action-bar"] button{transition:background .15s,color .15s,transform .1s var(--y-ease)!important}
#soapbox [data-testid="status-action-bar"] button:active{transform:scale(.9)}
#soapbox [data-testid="status-action-bar"] button svg{transition:transform .2s var(--y-ease)}
#soapbox [data-testid="status-action-bar"] button[title="Like"]:active svg,#soapbox [data-testid="status-action-bar"] button[title="Unlike"]:active svg{transform:scale(1.25)}
#soapbox .status--wrapper,#soapbox [data-testid="status"]{transition:background .2s}
#soapbox button[data-testid="button"]{transition:background .15s,transform .08s,box-shadow .15s}
#soapbox button[data-testid="button"]:active:not(:disabled){transform:scale(.98)}
#y-topbar a,#y-topbar button{transition:background .15s,color .15s}
@keyframes y-fade{from{opacity:0}to{opacity:1}}
@keyframes y-fadeout{to{opacity:0}}
@keyframes y-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes y-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes y-pop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes y-sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes y-pulse{50%{opacity:.35}}
@keyframes y-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
html.y-reduce-motion *,html.y-reduce-motion *::before,html.y-reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.y-reduce-motion #y-ue-sfx{display:none!important}

/* ---------- mobile polish (390px) ---------- */

@media (max-width:1023px){
  #soapbox [data-testid="status"]{padding:12px 14px 8px!important}
  .y-ethos{padding:8px 14px}
  #soapbox [data-testid="status-action-bar"] button{min-width:40px;min-height:36px;justify-content:center}
  .y-threadbar{margin:20px 0 8px}
  .y-caught{padding:16px 12px}
  html.y-modal-open{overflow:hidden}
}
@media (max-width:420px){.y-ethos{font-size:10px;letter-spacing:.08em}.y-newpill{margin-left:0}}
/* v1m: grey native search input on light theme -> glass */
html:not(.dark) .y-msearch input{background:#fff}
/* alt nudge "Describe": keep Soapbox's hover-only description field open while focused */
#soapbox form [draggable].y-describing [class*="bottom-0"],#soapbox form [draggable]:focus-within [class*="bottom-0"]{opacity:1!important;transform:none!important;visibility:visible!important}
#soapbox form [draggable] textarea[placeholder*="Describe"]:focus{outline:2px solid var(--y-focus)}
#soapbox main .y-empty-inner{margin:14px 16px!important;border:1px dashed var(--y-glass-b)!important;border-radius:var(--y-r)!important}