/* 50 Components: desktop icons, draggable windows, status panels. */
.desktop-icons { position: absolute; z-index: 8; top: 6%; right: .6%; width: 8.4%; display: grid; gap: clamp(10px, 1.8vh, 25px); }
.desktop-icons button { display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; color: #d6d7ce; background: transparent; font-size: .8em; cursor: pointer; text-shadow: 1px 1px #000; }
.desktop-icons button span { padding:1px 3px; border:1px solid transparent; }
.desktop-icons button.is-selected span,
.desktop-icons button:focus-visible span { color:white; background:var(--blue); border-color:rgba(255,255,255,.7); outline:0; }
.desktop-icons button:focus-visible { outline:0; }
.disk-icon, .folder-icon, .trash-icon { position: relative; display: block; width: clamp(20px, 2.4vw, 37px); height: clamp(18px, 2vw, 31px); filter: drop-shadow(1px 2px #000); }
.disk-icon { border: 2px solid #c7c4b9; border-radius: 5px; background: linear-gradient(155deg,#b9b7ad 0 60%,#777 61%); transform: skew(-7deg); }
.disk-icon::after { content: ""; position: absolute; inset: 35% 20% 15%; border: 1px solid #333; background: #777; }
.folder-icon { margin-top: 4px; border: 1px solid #dad6c6; background: #aaa473; }
.folder-icon::before { content: ""; position: absolute; left: 1px; top: -5px; width: 45%; height: 5px; border: 1px solid #dad6c6; border-bottom: 0; background: #aaa473; }
.trash-icon { width: 22px; border: 2px solid #bfbdb4; border-top-width: 4px; transform: perspective(20px) rotateX(-5deg); }
.trash-icon::before { content: ""; position: absolute; left: -3px; right: -3px; top: -7px; height: 3px; border: 1px solid #ccc; }
.trash-icon::after { content: "|||"; position: absolute; inset: 1px; color: #555; font-size: 10px; }

.os-window { position: absolute; z-index: 10; left: var(--x); top: var(--y); width: min(var(--w), 40%); min-width: 150px; color: #111; background: var(--paper); border: 2px solid #dad9d0; box-shadow: 0 0 0 1px #111, 5px 6px 0 rgba(0,0,0,.28); text-shadow: none; }
.about-window { --x:calc(91% - min(20rem,40%)); --y:3%; --w:20rem; }
.project-window { --x:calc(91% - min(22rem,40%)); --y:31%; --w:22rem; }
.status-window { --x:calc(96% - min(20rem,40%)); --y:70%; --w:20rem; }
.os-window.is-closed { display: none; }
.os-window.is-minimized { display:none; }
.os-window.is-minimizing { pointer-events:none; }
.os-window.is-maximized { left:24% !important; top:2% !important; width:66% !important; height:94% !important; display:grid; grid-template-rows:auto minmax(0,1fr); }
.os-window.is-maximized .window-content { min-height:0; max-height:none; overflow:auto; }
.window-titlebar { height: clamp(18px, 1.7vw, 26px); display: flex; align-items: center; justify-content: space-between; padding-left: 6px; color: #e6e6dc; background: var(--blue); border-bottom: 1px solid #111; cursor: move; user-select: none; }
.os-window:not(.is-active-window) .window-titlebar { color:#292923; background:#9c9a91; }
.window-titlebar.has-warped-control-hover { cursor: var(--cursor-action) !important; }
.window-titlebar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-titlebar > span i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid #ddd; background: repeating-linear-gradient(90deg,#aaa 0 1px,#333 1px 2px); vertical-align: middle; }
.window-titlebar div { display: flex; align-items: center; height: 100%; }
.window-titlebar button { width: clamp(17px, 1.55vw, 24px); height: calc(100% - 2px); padding: 0; border: 1px solid #111; background: #bcbab0; box-shadow: inset 1px 1px #eee, inset -1px -1px #555; cursor: pointer; line-height: 1; touch-action: manipulation; }
.crt-screen.screen-warp-ready .window-titlebar button { pointer-events: none; }
.window-titlebar button:active,
.window-titlebar button.is-warp-proxy-pressed { box-shadow: inset 2px 2px #555, inset -1px -1px #eee; transform: translateY(1px); }
.os-window.is-maximized .window-titlebar button { width: clamp(24px, 1.85vw, 29px); }
.window-content { position: relative; padding: clamp(8px, 1vw, 14px); line-height: 1.3; }
.window-content h2, .window-content h3, .window-content p { margin: 0 0 .6em; }
.about-content h2 { font: 900 2em/1 Arial, sans-serif; letter-spacing: -.06em; }
.about-content strong { font-size: .9em; }
.about-content p { margin-top: 1.25em; width: 65%; }
.wire-globe { position: absolute; right: 7%; bottom: 12%; width: 60px; aspect-ratio: 1; border: 1px solid #333; border-radius: 50%; background: repeating-radial-gradient(ellipse at center,transparent 0 6px,#555 7px 7.5px); }
.wire-globe::before,.wire-globe::after { content:""; position:absolute; border:1px solid #333; border-radius:50%; }.wire-globe::before{inset:5% 33%}.wire-globe::after{inset:33% 5%}
.project-content { padding: 8px; }
.project-content img { display:block; width: 100%; height:clamp(72px,8.2vw,126px); object-fit: cover; object-position: center 62%; border: 1px solid #111; filter: saturate(.78) contrast(1.1) brightness(1.28); }
.project-content h3 { margin: 6px 0 1px; }
.project-content p { margin: 0 0 7px; font-size: .8em; }
.os-window.is-maximized .project-content { display: grid; grid-template-rows: minmax(0,1fr) auto auto auto; gap: 6px; overflow: hidden; }
.os-window.is-maximized .project-content img { height: 100%; min-height: 0; }
.os-window.is-maximized .project-content h3,
.os-window.is-maximized .project-content p { margin: 0; }
.os-window.is-maximized .project-content .ui-button { justify-self: start; }
.compact { min-height: 24px; padding: .35em 1.25em; }
.status-content dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; margin: 0; }
.status-content dt { font-weight: 700; }.status-content dd { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 0; }
meter { width: 100%; height: 11px; border: 1px solid #555; background: #aaa; }
meter::-webkit-meter-bar { background: #aaa; border-radius: 0; box-shadow: inset 1px 1px #666; }
meter::-webkit-meter-optimum-value { background: #218a3d; }
meter::-moz-meter-bar { background: #218a3d; }
.status-content > strong { display: block; margin-top: 9px; color: var(--blue); }
.empty-trash { min-height: 120px; display: grid; place-content: center; text-align: center; }.empty-trash span { font: 900 2.5em/1 Arial,sans-serif; color: #777; }

@media (hover:hover) and (pointer:fine) {
  .desktop-icons button:hover span { color:white; background:var(--blue); }
}