/* My Little Desktop — Phase 7 styles (startup, power, screensaver, menus, cursors, motion) */

/* ---------- Startup ---------- */
#boot { background: radial-gradient(circle at 50% 40%, #fff9ef, #fbe9dc 60%, var(--a3) 100%); }
#boot.run { display: flex; animation: bootIn .25s ease-out; }
#boot.fade { opacity: 0; transition: opacity .28s; }
#boot .boot-bar i { animation: load var(--boot-ms, 2300ms) cubic-bezier(.4, .1, .4, 1) forwards; }
.boot-by { font: 18px var(--f-hand); color: var(--ink-soft); margin-top: -12px; }
.boot-msg { font: 18px var(--f-hand); color: var(--ink-soft); }
.boot-skip { position: absolute; bottom: 18px; font-size: 12px; color: var(--ink-soft); opacity: .8; }
@keyframes bootIn { from { opacity: 0; } }

/* ---------- Power screens ---------- */
.lock-saving { background: linear-gradient(160deg, var(--a2), #3a1714); color: #fff3e6; font: 26px var(--f-hand); }
.lock-saving small { font-family: var(--f-body); }
.lock-black { background: #000; }
.saving-apple { width: 70px; height: 70px; background: var(--apple-svg) center/contain no-repeat; animation: bob 1s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.power-modal { width: min(440px, 100%); }
.pw-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 14px 14px; }
.pw-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; text-align: center; }
.pw-opt:hover, .pw-opt:focus-visible { border-color: var(--a); background: var(--a4); }
.pw-opt .pw { width: 44px; height: 44px; }
.pw-opt .pw::before { inset: 11px; }
.pw-log .pw { background: linear-gradient(#ffd98a, #e3a816 55%, #b8860f); }
.pw-restart .pw { background: linear-gradient(#a8d47a, #6fa83a 55%, #4a7e22); }
.pw-opt strong { font: 19px var(--f-hand); }
.pw-opt small { font-size: 11px; color: var(--ink-soft); line-height: 1.2; }
.compact .pw-opts { grid-template-columns: 1fr; }

/* ---------- Screensaver ---------- */
.screensaver { position: absolute; inset: 0; z-index: 8800; background: #120c0b; animation: bootIn .6s ease; }
.screensaver canvas { display: block; width: 100%; height: 100%; }
.screensaver.out { opacity: 0; transition: opacity .25s; }
.ss-hint { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: rgba(255, 240, 225, .8); font: 16px var(--f-hand); animation: hintFade 4s ease forwards; pointer-events: none; }
@keyframes hintFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Toast with an action (Undo, Open) ---------- */
.toast { display: flex; align-items: center; gap: 10px; }
.toast-act { border: 1px solid var(--a2); background: var(--a); color: var(--on-a); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: 12px; cursor: pointer; flex: none; }

/* ---------- Desktop shortcuts ---------- */
.dicon { position: relative; }
.sc-arrow { position: absolute; top: calc(var(--ic, 54px) - 14px); left: calc(50% - var(--ic, 54px) / 2); width: 18px; height: 18px; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sc-arrow::before { content: ''; position: absolute; inset: 3px; background: var(--a2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 10V7a3 3 0 0 1 3-3h3M7 1.5 9.5 4 7 6.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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 12 12'%3E%3Cpath d='M3 10V7a3 3 0 0 1 3-3h3M7 1.5 9.5 4 7 6.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Right-click menu ---------- */
.ctx-menu { position: absolute; z-index: 7000; min-width: 230px; padding: 6px; background: var(--cream); border: 3px solid var(--a); border-radius: 14px; box-shadow: 0 12px 28px rgba(60, 25, 20, .32); display: flex; flex-direction: column; animation: pop .12s ease-out; }
.ctx-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; font: 16px/1.2 var(--f-hand); color: var(--ink); }
.ctx-item img, .ctx-noicon { width: 20px; height: 20px; flex: none; object-fit: contain; }
.ctx-item span { flex: 1; }
.ctx-item.bold span { font-weight: 700; color: var(--a2); }
.ctx-item kbd { font: 11px var(--f-body); color: var(--ink-soft); background: none; border: 0; }
.ctx-item:hover, .ctx-item:focus-visible { background: var(--a3); outline: none; }
.ctx-item[disabled] { opacity: .45; }
.ctx-sep { height: 0; border-top: 2px dashed var(--a3); margin: 4px 6px; }
.ctx-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 36px; font: 16px var(--f-hand); }
.ctx-row span { flex: 1; }
.ctx-chip { min-width: 30px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 1px 6px; font-weight: 800; font-size: 12px; cursor: pointer; }
.ctx-chip.on { background: var(--a); color: var(--on-a); border-color: var(--a2); }
.compact .ctx-item { padding: 9px 10px; font-size: 18px; }

/* ---------- Settings additions ---------- */
.stack { display: flex; flex-direction: column; gap: 8px; }
.toggle.is-disabled { opacity: .5; }
.saver-grid, .cursor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.saver-card, .cursor-card { border: 3px solid transparent; background: #fff; border-radius: 14px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 1px 4px rgba(60, 25, 20, .15); font-weight: 700; font-size: 12px; }
.saver-card[aria-checked="true"], .cursor-card[aria-checked="true"] { border-color: var(--a); background: var(--a4); }
.saver-prev { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; background: linear-gradient(#2b1a17, #160f0e); position: relative; overflow: hidden; }
.sv-apples .saver-prev { background: var(--apple-svg) 20% 30%/22px no-repeat, var(--apple-green-svg) 70% 60%/30px no-repeat, var(--apple-svg) 45% 85%/18px no-repeat, linear-gradient(#2b1a17, #160f0e); }
.sv-logo .saver-prev::after { content: 'Orchard OS'; position: absolute; left: 18%; top: 34%; font: 20px var(--f-hand); color: #e0688f; padding-left: 22px; background: var(--apple-svg) left center/18px no-repeat; }
.sv-bubbles .saver-prev { background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .5) 0 8px, transparent 9px), radial-gradient(circle at 70% 70%, rgba(200, 240, 255, .45) 0 13px, transparent 14px), radial-gradient(circle at 55% 25%, rgba(255, 220, 250, .45) 0 6px, transparent 7px), linear-gradient(#2a5170, #162a3d); }
.sv-random .saver-prev { background: var(--apple-svg) 25% 40%/22px no-repeat, radial-gradient(circle at 70% 60%, rgba(200, 240, 255, .5) 0 12px, transparent 13px), linear-gradient(135deg, #2b1a17, #2a5170); }
.cursor-prev { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; width: 100%; border-radius: 8px; background: repeating-conic-gradient(var(--ivory) 0 25%, #fff 0 50%) 0 0/12px 12px; }
.cursor-prev img { width: 32px; height: 32px; image-rendering: pixelated; }
.std-arrow { width: 14px; height: 22px; background: #111; clip-path: polygon(0 0, 0 80%, 25% 62%, 42% 100%, 56% 94%, 40% 58%, 75% 58%); }
.keys-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.keys-table th, .keys-table td { text-align: left; padding: 5px 8px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.keys-table th { width: 40%; font-weight: 400; }
kbd { font: 12px var(--f-body); font-weight: 800; background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }

/* ---------- Animation preference ---------- */
#os.motion-off *, #os.motion-off *::before, #os.motion-off *::after { animation: none !important; transition: none !important; }
#os.motion-reduced *, #os.motion-reduced *::before, #os.motion-reduced *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
#os.motion-reduced .win.opening, #os.motion-reduced .win.closing { transform: none; }
#os.motion-off .screensaver, #os.motion-reduced .screensaver { animation: none; }

/* Notifications sit above the clock in the taskbar, like classic system balloons. */
#toastLayer { top: auto; bottom: calc(var(--tb-h) + 10px); }
.compact .ctx-item kbd { display: none; }