/* ---------- base ---------- */
[hidden] { display: none !important; }
html { height: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--body-fg); font: var(--ui-size)/1.4 var(--ui-font); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ico { display: block; flex: none; }
:focus-visible { outline: 2px dotted currentColor; outline-offset: 1px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--sel); outline-offset: 0; }
#os { position: relative; height: 100%; overflow: hidden; background: var(--ink); color: var(--body-fg); font: var(--ui-size)/1.4 var(--ui-font); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#wall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#desktop { position: absolute; inset: 0 0 var(--tb-h) 0; }
#windows { position: absolute; inset: 0; pointer-events: none; }

/* ---------- desktop icons ---------- */
#icons { list-style: none; margin: 0; height: 100%; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 88px); grid-auto-columns: 86px; gap: 4px 8px; align-content: start; justify-content: start; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.icon { width: 86px; height: 86px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; background: none; border: 1px solid transparent; border-radius: 3px; color: var(--icon-fg); text-shadow: var(--icon-shadow); cursor: default; }
.icon .ico { width: 40px; height: 40px; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.35)); }
.icon span { font: var(--icon-size)/1.2 var(--ui-font); text-align: center; padding: 1px 3px; border-radius: 2px; overflow-wrap: anywhere; }
.icon[aria-selected="true"] .ico { opacity: 0.75; }
.icon[aria-selected="true"] span, .icon:focus-visible span { background: var(--icon-sel); text-shadow: none; }
.icon:focus-visible { outline: none; }

/* server-rendered pages: content windows, the skip link, and the no-JavaScript view */
.wbody > turbo-frame { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 8px 12px; background: var(--panel); color: var(--panel-fg); border: 2px solid var(--sel); }
.skip-link:focus { top: 8px; }
.no-js .screen { display: none; }
.no-js #desktop { position: relative; inset: auto; overflow: auto; height: 100%; }
.no-js .win { position: relative; margin: 24px auto; max-width: 900px; height: auto; }
.js .os-noscript { display: none; }
.os-noscript { position: absolute; left: 50%; top: 12px; z-index: 150; transform: translateX(-50%); padding: 8px 14px; background: var(--tip-bg); color: var(--tip-fg); border: 1px solid var(--tip-border); font-size: var(--small-size); }