/* Everside OS shade: chrome on the edge, the system announces and retreats. */
:root { --os-top: 72px; --os-handle: 52px; } /* the strip is 72px tall (motion.css); the handle begins where it ends */
@media (max-width: 700px) { :root { --os-top: 64px; } }
/* the strip hides until the pointer reaches the top edge */
#hud .top { transform: translateY(-100%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); pointer-events: auto; }
body.strip #hud .top, body.shade-open #hud .top { transform: none; }
#hud .top .hleft { display: flex; align-items: center; gap: 18px; min-width: 0; }
#ossys { display: flex; align-items: center; gap: 10px; color: var(--bone-55, rgba(255, 250, 248, .55)); min-width: 0; white-space: nowrap; overflow: hidden; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
#ossys i { width: 6px; height: 6px; border-radius: 1px; background: rgba(255, 250, 248, .25); flex: none; }
#ossys.live i { background: #2BB673; box-shadow: 0 0 8px #2BB673; }
#ossys .cur { border-right: 2px solid rgba(255, 250, 248, .55); margin-left: 1px; animation: oscur 1s steps(1) infinite; }
@keyframes oscur { 50% { border-color: transparent; } }
#osbell { all: unset; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--bone-70); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
#osbell .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bone); color: var(--ink); font-weight: 600; display: inline-grid; place-items: center; transition: transform .25s; }
#osbell .n.zero { background: transparent; color: var(--bone-45, rgba(255, 250, 248, .45)); border: 1px solid var(--line); }
#osbell .dot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 10px #2BB673; opacity: 0; transition: opacity .3s; }
#osbell.new .dot { opacity: 1; animation: ospulse2 3s ease-in-out infinite; }
@keyframes ospulse2 { 0%, 100% { box-shadow: 0 0 6px #2BB673; } 50% { box-shadow: 0 0 16px #2BB673; } }
/* switches */
.ossw { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 4px; border-top: 1px solid var(--line); color: var(--bone-70); font: 500 13px var(--sans); }
.ossw:first-of-type { border-top: 0; }
.ossw i { position: relative; width: 30px; height: 16px; border-radius: 8px; background: rgba(255, 250, 248, .12); transition: background .25s; flex: none; }
.ossw i:after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 250, 248, .55); transition: transform .25s, background .25s; }
.ossw[aria-checked="true"] i { background: rgba(43, 182, 115, .3); }
.ossw[aria-checked="true"] i:after { transform: translateX(14px); background: #2BB673; box-shadow: 0 0 8px #2BB673; }
.ossw.small { height: 30px; padding: 0 10px 0 6px; border: 1px solid var(--line); border-radius: 6px; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ossw.small i { width: 26px; height: 14px; }
.ossw.small i:after { width: 10px; height: 10px; }
.ossw.small[aria-checked="true"] i:after { transform: translateX(12px); }
/* the edge: a sensor and a hairline that says the system is up there */
#osedge { position: fixed; left: 0; right: 0; top: 0; height: 14px; z-index: 45; }
#osedgeline { position: fixed; left: 50%; top: 6px; width: 44px; height: 2px; margin-left: -22px; border-radius: 1px; background: rgba(255, 250, 248, .25); z-index: 44; transition: opacity 1.2s var(--ease, ease); }
body.hasnew #osedgeline { background: #2BB673; box-shadow: 0 0 10px #2BB673; animation: ospulse2 3s ease-in-out infinite; }
body.noambient #osedgeline, body.still #osedgeline { animation: none; }
body.strip #osedgeline, body.shade-open #osedgeline, body.immersive #osedgeline { opacity: 0; }
/* the handle: the old gap becomes the shade's edge */
#oshandle { position: fixed; left: 0; right: 0; top: var(--os-top); height: var(--os-handle); z-index: 39; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 28px; background: linear-gradient(180deg, rgba(14, 15, 18, .72), rgba(14, 15, 18, .35)); cursor: grab; user-select: none; transform: translateY(calc(-100% - var(--os-top))); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .3s; }
body.strip #oshandle, body.shade-open #oshandle { transform: none; }
#oshandle:hover { background: linear-gradient(180deg, rgba(14, 15, 18, .8), rgba(14, 15, 18, .5)); }
#oshead { display: flex; align-items: center; gap: 10px; color: var(--bone-55, rgba(255, 250, 248, .55)); min-width: 0; overflow: hidden; }
#oshead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#oshead i { width: 6px; height: 6px; border-radius: 1px; background: rgba(255, 250, 248, .45); flex: none; }
#osgrab { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--bone-55, rgba(255, 250, 248, .55)); background: rgba(21, 22, 26, .7); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s, border-color .2s; }
#osgrab:hover { color: var(--bone); border-color: rgba(255, 250, 248, .25); }
#osgrab .bar { width: 26px; height: 2px; border-radius: 1px; background: rgba(255, 250, 248, .45); }
#osgrab b { font-weight: 500; }
#osgrab .n { color: var(--bone); }
#osgrab .chev { display: inline-block; transition: transform .35s; }
body.shade-open #osgrab .chev { transform: rotate(180deg); }
#oschips { display: flex; justify-content: flex-end; gap: 8px; min-width: 0; overflow: hidden; }
#oschips .chip { flex: none; }
/* Community owns its own header: no strip there, only the handle at the edge, and the shade beneath it */
/* Community restyles the OS top for its scene; this must outrank that :has() rule */
body[data-os-scene="feed"]:has(.scene[data-key="feed"].on) #hud .top, body[data-os-scene="feed"] #hud .top { display: none; }
body[data-os-scene="feed"] #oshandle { top: 64px; background: rgba(14, 15, 18, .92); border-bottom: 1px solid var(--line); transform: translateY(calc(-100% - 64px)); }
body[data-os-scene="feed"].strip #oshandle, body[data-os-scene="feed"].shade-open #oshandle { transform: none; }
body[data-os-scene="feed"] #osshade { top: calc(64px + var(--os-handle)); }
body[data-os-scene="feed"].shade-open #osshade { height: calc(100vh - 64px - var(--os-handle) - 96px); }
body[data-os-scene="feed"] #osedgeline { top: 4px; }
/* the scene steps back */
#screen { transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s; transform-origin: 50% 40%; }
body.shade-peek #screen { filter: brightness(.8); }
body.shade-open #screen { transform: scale(.982); filter: brightness(.45) saturate(.8); }
/* the shade */
#osshade { position: fixed; left: 0; right: 0; top: calc(var(--os-top) + var(--os-handle)); z-index: 38; height: 0; overflow: hidden; background: rgba(14, 15, 18, .86); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); transition: height .55s cubic-bezier(.2, .8, .2, 1), visibility 0s .55s; }
/* closed, it must not draw a seam across the art: a zero-height box still paints its border and blur */
body:not(.shade-peek):not(.shade-open) #osshade { visibility: hidden; }
body.shade-peek #osshade { height: 132px; visibility: visible; transition-delay: 0s; }
body.shade-open #osshade { height: calc(100vh - var(--os-top) - var(--os-handle) - 96px); overflow-y: auto; visibility: visible; transition-delay: 0s; }
#osshade .osin { padding: 22px 28px 28px; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.4fr) minmax(240px, .8fr); gap: 26px; min-height: 100%; }
.oscol h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; color: var(--bone-45, rgba(255, 250, 248, .45)); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.oscol h3 i { width: 6px; height: 6px; border-radius: 1px; background: rgba(255, 250, 248, .25); }
.oscol h3 .act { all: unset; cursor: pointer; margin-left: auto; color: var(--bone-45, rgba(255, 250, 248, .45)); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.oscol h3 .act:hover, .osnote-empty .act:hover { color: var(--bone); }
.rise { opacity: 0; transform: translateY(8px); }
body.shade-open .rise { animation: osrise .5s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes osrise { to { opacity: 1; transform: none; } }
.osgreet { font-family: 'Doto', var(--mono); font-weight: 700; font-size: 34px; letter-spacing: .02em; line-height: 1; margin: 2px 0 16px; }
.oscard { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(21, 22, 26, .75); margin-bottom: 10px; font-family: var(--sans); }
.oscard .k { color: var(--bone-45, rgba(255, 250, 248, .45)); margin-bottom: 6px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.oscard b { font-weight: 600; font-size: 14px; }
.oscard p { margin: 4px 0 0; color: var(--bone-70); font-size: 13px; line-height: 1.45; }
.oscard .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.oscard .muted { color: var(--bone-45, rgba(255, 250, 248, .45)); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.osbar { height: 2px; background: rgba(255, 250, 248, .12); border-radius: 1px; overflow: hidden; margin-top: 10px; }
.osbar i { display: block; height: 100%; background: var(--bone); }
.osbtn { all: unset; cursor: pointer; height: 32px; padding: 0 14px; border-radius: 7px; border: 1px solid rgba(255, 250, 248, .25); color: var(--bone); font: 500 12px var(--sans); display: inline-flex; align-items: center; }
.osbtn.primary { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.osbtn.primary:hover { background: #fff; }
.oswl { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border-top: 1px solid var(--line); text-align: left; }
.oswl:first-of-type { border-top: 0; }
.oswl .av { width: 36px; height: 36px; border-radius: 9px; overflow: hidden; flex: none; background: var(--panel); }
.oswl .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oswl .t { min-width: 0; flex: 1; }
.oswl .t b { display: block; font-weight: 600; font-size: 13px; }
.oswl .t span { color: var(--bone-45, rgba(255, 250, 248, .45)); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.oswl .st { display: inline-flex; align-items: center; gap: 6px; color: var(--bone-45, rgba(255, 250, 248, .45)); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.oswl .st i { width: 6px; height: 6px; border-radius: 1px; background: rgba(255, 250, 248, .25); }
.oswl:hover .st { color: var(--bone); }
/* notifications */
.osnote { all: unset; cursor: pointer; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: 12px 14px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 10px; background: rgba(21, 22, 26, .6); box-sizing: border-box; transition: background .2s, border-color .2s; font-family: var(--sans); }
.osnote:hover { background: rgba(21, 22, 26, .95); border-color: rgba(255, 250, 248, .12); }
.osnote.unread { border-color: rgba(255, 250, 248, .12); }
.osnote .px { width: 6px; height: 6px; border-radius: 1px; background: rgba(255, 250, 248, .25); margin-top: 7px; }
.osnote .px.r { background: #F04E4E; box-shadow: 0 0 8px #F04E4E; }
.osnote .px.g { background: #2BB673; box-shadow: 0 0 8px #2BB673; }
.osnote .px.b { background: #2E44E6; box-shadow: 0 0 8px #2E44E6; }
.osnote .t { font-size: 13.5px; line-height: 1.45; color: var(--bone-70); }
.osnote .t b { font-weight: 600; color: var(--bone); }
.osnote .m { color: var(--bone-45, rgba(255, 250, 248, .45)); white-space: nowrap; text-align: right; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.osnote .m em { display: block; margin-top: 6px; font-style: normal; color: var(--bone-70); }
.osnote:hover .m em { color: var(--bone); }
.osnote-empty { padding: 16px; border: 1px dashed rgba(255, 250, 248, .12); border-radius: 10px; color: var(--bone-55, rgba(255, 250, 248, .55)); font: 400 13px/1.5 var(--sans); }
.osnote-empty .act { all: unset; cursor: pointer; color: var(--bone-70); text-decoration: underline; }
.osread { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 14px; color: var(--bone-45, rgba(255, 250, 248, .45)); font: 500 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.osread b { color: var(--bone-70); font-weight: 500; font-variant-numeric: tabular-nums; }
.osscenes { display: grid; gap: 4px; margin-top: 14px; }
.osscenes button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 7px; color: var(--bone-55, rgba(255, 250, 248, .55)); font: 500 13px var(--sans); }
.osscenes button:hover { background: rgba(255, 250, 248, .06); color: var(--bone); }
.osscenes button.on { color: var(--bone); background: rgba(255, 250, 248, .06); }
.osscenes button .n { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-45, rgba(255, 250, 248, .45)); }
/* Originals: the art owns the top of the screen; the scene keeps its name over the art */
.cols { padding-top: 0 !important; }
.cols::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(14, 15, 18, .55), transparent); }
.ohead { top: 26px !important; left: 30px !important; right: 30px !important; transition: opacity .4s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.ohead .ro.slate { display: none; }
body.strip .ohead, body.shade-open .ohead { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* Originals: the chosen world stays lit, the others fall back into the dark */
.col { transition: flex .7s var(--ease), filter .5s cubic-bezier(.2, .8, .2, 1) !important; }
.cols:hover .col:not(.focus), body.keyboard-nav .scene.on .cols .col:not(.focus) { filter: brightness(.38) saturate(.6); }
/* touch: no edge to reach, so the strip stays */
@media (pointer: coarse) {
  #hud .top, #oshandle { transform: none; }
  #osedge, #osedgeline { display: none; }
  .ohead { opacity: 0; }
  .cols { padding-top: calc(var(--os-top) + var(--os-handle)) !important; }
  .cols:hover .col:not(.focus) { filter: none; }
}
@media (max-width: 900px) {
  #osshade .osin { grid-template-columns: 1fr; }
  .oscol.ossys { display: none; }
  #oschips, #ossys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #hud .top, #oshandle, #osshade, #screen, .rise, .col { transition: none !important; animation: none !important; opacity: 1; transform: none; }
  #osbell.new .dot, body.hasnew #osedgeline { animation: none; }
}

/* ── the strip, unified (Sept 10 2026) ──
   One chip grammar for every control on the right: 30px tall, hairline, 4px corners, mono uppercase; the groups
   are separated by a hairline. The bell is a pixel and a count in pixel type; sound is a pixel, on or off; the clock
   is pixel type; the system line has its own words and never repeats the handle's eyebrow. */
#hud .right { gap: 8px; }
#hud .right > span:not(.search):not(.clock) { display: none; } /* the prototype's live dot and credits; the modules replace them */
#hud .right button#osbell, #hud .right button#ossnd, #hud .search, #hud .clock, #hud .right button#aboutbtn, #hud .right a.os-profile-launch, #hud .right button.os-account-launch, #hud .right button.os-preview-badge { box-sizing: border-box; margin: 0; cursor: pointer; text-decoration: none; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone-70); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: color .2s ease, border-color .2s ease, background .2s ease; }
#hud .right button#osbell:hover, #hud .right button#ossnd:hover, #hud .search:hover, #hud .right button#aboutbtn:hover, #hud .right a.os-profile-launch:hover, #hud .right button.os-account-launch:hover, #hud .right button.os-preview-badge:hover { color: var(--bone); border-color: rgba(255, 250, 248, .3); background: rgba(14, 15, 18, .5); }
#hud .search { margin-left: 8px; position: relative; }
#hud .clock, #hud .right a.os-profile-launch { margin-left: 8px; position: relative; }
#hud .search::before, #hud .clock::before, #hud .right a.os-profile-launch::before { content: ''; position: absolute; left: -9px; top: 8px; width: 1px; height: 14px; background: var(--line); }
#hud .search b { padding: 3px 5px; }
#hud .clock { font: 700 13px/1 'Doto', var(--mono); letter-spacing: .06em; color: var(--bone); font-variant-numeric: tabular-nums; }
#hud .right button#aboutbtn { width: 30px; padding: 0; justify-content: center; }
#hud .right a.os-profile-launch span { font-size: 14px; color: var(--bone-70); line-height: 1; }
#hud .right button.os-account-launch { width: 30px; padding: 0; justify-content: center; font-size: 15px; color: var(--bone-70); }
#hud .right button.os-preview-badge { cursor: pointer; }
/* the bell: pixel, count, word */
#hud .right button#osbell { gap: 8px; padding: 0 10px; }
#osbell .px { width: 6px; height: 6px; border-radius: 1px; background: var(--bone-25, rgba(255, 250, 248, .25)); flex: none; transition: background .3s, box-shadow .3s; }
#osbell.new .px { background: var(--g); box-shadow: 0 0 8px var(--g); animation: ospulse2 3s ease-in-out infinite; }
#osbell .n { min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--bone); font: 700 13px/1 'Doto', var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; display: inline-block; transition: transform .25s, color .3s; }
#osbell .n.zero { background: transparent; border: 0; color: var(--bone-45, rgba(255, 250, 248, .45)); }
#osbell .l { color: inherit; }
#osbell .dot { display: none; }
/* sound: a pixel, on or off; no track in the strip */
#hud .right button#ossnd.ossw.small { gap: 8px; padding: 0 10px; border-top: 1px solid var(--line); }
#ossnd.ossw.small i { width: 6px; height: 6px; border-radius: 1px; background: var(--bone-25, rgba(255, 250, 248, .25)); flex: none; transition: background .25s, box-shadow .25s; }
#ossnd.ossw.small i::after { display: none; }
#ossnd.ossw.small[aria-checked="true"] i { background: var(--g); box-shadow: 0 0 8px var(--g); }
/* the system line */
#ossys { max-width: min(38vw, 520px); text-overflow: ellipsis; }
#ossys .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the handle: the count in pixel type, the bar goes green when something is new */
#osgrab { gap: 10px; }
#osgrab .n .c { font: 700 12px/1 'Doto', var(--mono); letter-spacing: .06em; color: var(--bone); font-variant-numeric: tabular-nums; margin-right: 2px; }
body.hasnew #osgrab .bar { background: var(--g); box-shadow: 0 0 8px var(--g); }
#osgrab:hover .bar { background: var(--bone-70); }
/* peeked or open, the three bands are one panel: the strip and the handle take the shade's density and blur, and a
   hairline sits between each band, so the top reads as a stack and not as three fades over the scene */
body.shade-peek #hud .top, body.shade-open #hud .top { background: rgba(14, 15, 18, .86); backdrop-filter: blur(18px); }
body.shade-peek #oshandle, body.shade-open #oshandle, body.shade-peek #oshandle:hover, body.shade-open #oshandle:hover { background: rgba(14, 15, 18, .86); backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
/* the handle's eyebrow keeps the scene's own type (an Original's red mark, its slate) but not a name the strip already shows;
   Community has no strip, so there the name stays */
#oshead.same { visibility: hidden; }
body[data-os-scene="feed"] #oshead.same { visibility: visible; }
/* below this the left column cannot hold the system line whole; a cut line says less than no line */
@media (max-width: 1320px) { #ossys { display: none; } }