/* The desk's shell (shell.js): menu-bar calls to action, the Start menu, search, the Control Strip, Show all windows, roll-up windows,
   running dots, system notes, the shortcut sheet and the phones' pinned top-bar corner (Search · Start free). Tokens from site.css, so Classic light and dark both
   hold contrast. Nothing here animates on open; motion and glass follow html[data-motion] / html[data-transparency] (prefs.js). */

/* ---------- menu bar: Start menu button, system buttons, the calls to action ---------- */
.menubar button.brand{display:flex;align-items:center;gap:6px;min-height:30px;padding:0 9px 0 2px;font-weight:700;font-size:13.5px}
/* The Start-menu chevron: a crisp inline SVG in the bar's text colour (ink on paper, paper or lime on dark), not a blurred text glyph. The whole brand button is the tap target (full bar height). */
.menubar button.brand .chev{flex:none;width:12px;height:12px;margin-left:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.menubar button.brand:hover .mark,.menubar button.brand[aria-expanded="true"] .mark{background:var(--paper);color:var(--ink)}
.menubar .sys{display:inline-grid;place-items:center;width:30px;height:24px;padding:0 !important}
.menubar .sys svg,.desk-pin svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menubar .sys kbd{display:none}
.menubar .cta-group{display:flex;align-items:center;gap:6px;position:sticky;right:0;padding-left:8px;margin-right:-4px;background:inherit;z-index:1}
.menubar .cta-group .cta-demo{font-family:var(--display);font-weight:700;font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:2px 10px;background:var(--win);color:var(--ink);box-shadow:1px 1px 0 var(--line)}
.menubar .cta-group .cta-demo:hover,.menubar .cta-group .cta-demo:focus-visible{background:var(--ink);color:var(--paper)}
.menubar .cta-group .btn.small{padding:2px 12px;font-size:12.5px;line-height:1.45}
body.phone .menubar .cta-group,body.phone .menubar .sys.hide-sm{display:none}

/* ---------- Start menu (◆ PRFKT ADS) ---------- */
#menu-start{width:min(520px,calc(100vw - 16px));padding:8px}
#menu-start .go-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
#menu-start .go-cta button{display:grid;gap:1px;text-align:left;font-family:var(--display);font-weight:800;font-size:15px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;box-shadow:2px 2px 0 var(--line)}
#menu-start .go-cta .go-login{grid-column:1/-1;display:block;text-align:center;font:500 13px var(--body);color:var(--ink-2);padding:6px 10px;border:1px dashed var(--hair);border-radius:7px;box-shadow:none}
#menu-start .go-cta .go-login b{font-family:var(--display);color:var(--ink)}
#menu-start .go-cta .go-start{background:var(--lime);color:var(--lime-ink)}
#menu-start .go-cta .go-demo{background:var(--win-2);color:var(--ink)}
#menu-start .go-cta button small{font-family:var(--body);font-weight:500;font-size:12px;opacity:.85}
#menu-start .go-cta button:hover,#menu-start .go-cta button:focus-visible{outline:2px solid var(--ink);outline-offset:1px;background:var(--lime);color:var(--lime-ink)}
#menu-start .go-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
#menu-start .go-h{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:9px 10px 3px}
#menu-start button span,#menu-start a span{display:grid;gap:0}
#menu-start small{font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.3}
#menu-start button:hover small,#menu-start button:focus-visible small,#menu-start a:hover small,#menu-start a:focus-visible small{color:inherit;opacity:.8}
#menu-start a{display:flex;color:var(--ink);text-decoration:none;padding:7px 10px;border-radius:5px}
#menu-start a:hover,#menu-start a:focus-visible{background:var(--ink);color:var(--paper);outline:none}
body.phone #menu-start .go-cols{grid-template-columns:1fr}
body.phone #menu-start .desk-only{display:none}
@media (max-width:560px){#menu-start .go-cols{grid-template-columns:1fr}}
.menu button,.menu a{min-height:32px}

/* ---------- WindowShade: rolled up to the title bar ---------- */
.win.shaded{height:30px !important;min-height:0}
.win.shaded>.body,.win.shaded>.grip{display:none}
.win .tb .shade-box svg{opacity:0}
body.phone .win .tb .shade-box{display:none}
.dock .tab.shaded i{height:3px;border-radius:1px}

/* ---------- running dots under the icons of open windows ---------- */
.icon span{position:relative}
.icon.running span::after{content:"";position:absolute;left:50%;bottom:-6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--paper)}

/* ---------- search (Ctrl K / ⌘K): no animation on open ---------- */
.palette-wrap{position:fixed;inset:0;z-index:120;background:rgba(23,25,27,.28);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.palette{width:min(620px,100%);max-height:min(560px,76vh);display:flex;flex-direction:column;background:var(--win);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:6px 6px 0 var(--line),0 40px 80px -30px rgba(0,0,0,.5);overflow:hidden;animation:none}
.pal-in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--win-2)}
.pal-in svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round}
.pal-in input{flex:1;min-width:0;height:52px;border:0;background:none;color:var(--ink);font:500 17px/1.2 var(--body);outline:none}
.pal-in input::placeholder{color:var(--muted)}
.palette kbd,.keysheet kbd,.menu kbd{font-family:var(--mono);font-size:12.5px;border:1px solid var(--hair);border-bottom-width:2px;border-radius:4px;padding:1px 5px;background:var(--paper-2);color:var(--ink-2);white-space:nowrap}
.pal-esc{flex:none}
#pal-list{list-style:none;margin:0;padding:6px;overflow-y:auto;overscroll-behavior:contain;flex:1}
#pal-list .pal-h{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
#pal-list [role="option"]{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 10px;border-radius:7px;cursor:pointer;min-height:40px}
#pal-list [role="option"] b{font-family:var(--display);font-weight:700;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis}
#pal-list [role="option"] span{font-size:13px;color:var(--muted);text-align:right;flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pal-list [role="option"].on{background:var(--ink);color:var(--paper)}
#pal-list [role="option"].on span{color:inherit;opacity:.8}
#pal-list .pal-primary b::before{content:"◆ ";color:var(--lime)}
#pal-list .pal-faq b,#pal-list .pal-section b{font-weight:600;white-space:normal}
.pal-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--hair);font-size:12px;color:var(--muted);background:var(--win-2)}
.pal-hit{outline:3px solid var(--lime);outline-offset:4px;border-radius:4px}
body.phone .palette-wrap{padding:44px 8px 8px}
body.phone .palette{max-height:calc(100dvh - 60px)}
body.phone .pal-foot{display:none}
.sr-copy{position:fixed;left:-9999px;top:0;opacity:0}

/* ---------- Control Strip ---------- */
.strip{position:fixed;z-index:110;width:300px;background:var(--win);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:4px 4px 0 var(--line),0 30px 60px -30px rgba(0,0,0,.5);overflow:hidden;font-size:14px}
.strip-tb{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 4px 0 12px;background:var(--win-2);border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:13px}
.strip-x{width:28px;height:26px;border:0;background:none;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;border-radius:5px}
.strip-x:hover,.strip-x:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.strip-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--hair)}
.strip-k{display:grid;font-family:var(--display);font-weight:600}
.strip-k small{font-family:var(--body);font-weight:400;font-size:12.5px;color:var(--muted)}
.seg2{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg2 button{font:600 12.5px var(--display);background:var(--win);color:var(--ink);border:0;border-left:1px solid var(--line);padding:5px 9px;min-height:30px;cursor:pointer}
.seg2 button:first-child{border-left:0}
.seg2 button[aria-checked="true"]{background:var(--lime);color:var(--lime-ink)}
.seg2 button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.sw{position:relative;width:44px;height:26px;flex:none;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer;padding:0}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:left var(--fast) var(--ease)}
.sw[aria-checked="true"]{background:var(--lime)}
.sw[aria-checked="true"] i{left:21px;background:var(--lime-ink)}
.sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.strip-foot{display:flex;flex-wrap:wrap;gap:4px;padding:8px 8px 10px}
.strip-foot button{font:600 12.5px var(--display);background:none;border:1px solid transparent;color:var(--ink);padding:5px 8px;border-radius:6px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.strip-foot button:hover,.strip-foot button:focus-visible{background:var(--ink);color:var(--paper);outline:none;text-decoration:none}
body.phone .strip{left:8px !important;right:8px;width:auto;top:40px !important;bottom:auto}

/* ---------- keyboard shortcuts sheet ---------- */
.keysheet-wrap{position:fixed;inset:0;z-index:120;background:rgba(23,25,27,.28);display:grid;place-items:center;padding:16px}
.keysheet{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--win);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:6px 6px 0 var(--line)}
.keysheet dl{margin:0;padding:8px 14px 14px;display:grid;gap:2px}
.keysheet dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:6px 0;border-bottom:1px solid var(--hair)}
.keysheet dt{font-size:13px}
.keysheet dd{margin:0;font-size:14px}

/* ---------- system notes: bottom right, real events only ---------- */
.sysnotes{position:fixed;right:14px;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:95;display:grid;gap:8px;width:min(320px,calc(100vw - 28px));pointer-events:none}
.sysnote{pointer-events:auto;background:var(--win);color:var(--ink);border:1px solid var(--line);border-radius:9px;box-shadow:3px 3px 0 var(--line);overflow:hidden}
.sysnote-tb{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 2px 0 10px;background:var(--win-2);border-bottom:1px solid var(--line);font:700 11.5px var(--display);color:var(--ink-2)}
.sysnote-x{width:26px;height:22px;border:0;background:none;color:var(--ink);font-size:16px;cursor:pointer;border-radius:4px}
.sysnote-x:hover,.sysnote-x:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.sysnote-b{padding:8px 10px 10px;font-size:14px;line-height:1.35}
body.phone .sysnotes{right:8px;left:8px;width:auto;bottom:calc(70px + env(safe-area-inset-bottom,0px))}

/* ---------- Show all windows ---------- */
.expose{position:fixed;inset:0;z-index:2;background:color-mix(in srgb,var(--paper) 72%,transparent)}
.expose-h{position:fixed;top:36px;left:0;right:0;margin:0;max-width:none;text-align:center;font:600 12.5px var(--mono);letter-spacing:.06em;color:var(--ink-2)}
body.exposing .icons,body.exposing .socials,body.exposing .psst-note{visibility:hidden}
body.exposing .wins{z-index:3}
.win.exposed{transition:transform var(--mid) var(--ease);cursor:pointer;box-shadow:0 0 0 1px var(--line),3px 3px 0 var(--line) !important}
.win.exposed>*{pointer-events:none}
.win.exposed.expose-hover{outline:4px solid var(--lime);outline-offset:4px}
.expose-label{position:fixed;display:block;text-align:center;font:700 13px var(--display);color:var(--ink);background:none;border:0;padding:4px 6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:4}
.expose-label small{font-weight:500;color:var(--muted)}
.expose-label:hover,.expose-label:focus-visible{outline:none;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:3px}

/* ---------- reduce motion (the Control Strip, or the device) ---------- */
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation-duration:1ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:1ms !important;transition-delay:0s !important;scroll-behavior:auto !important}

/* ---------- reduce transparency: solid bars, no glass, no glow ---------- */
html[data-transparency="reduce"] .dock,html[data-transparency="reduce"] .socials,html[data-transparency="reduce"] .desk-body .menubar{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:var(--paper-2) !important}
html[data-transparency="reduce"] .desk::after,html[data-transparency="reduce"] .start::before{display:none}
html[data-transparency="reduce"] .lit,html[data-transparency="reduce"] .glow-btn{box-shadow:none}
html[data-transparency="reduce"] .palette-wrap,html[data-transparency="reduce"] .keysheet-wrap{background:rgba(23,25,27,.55)}
html[data-transparency="reduce"] .expose{background:var(--paper)}
.noscript-note{position:fixed;top:0;left:0;right:0;z-index:300;margin:0;padding:10px 16px;background:var(--lime);color:var(--lime-ink);font-weight:600}