/* 20 RNDMD/OS shell: raster, menu bar, desktop surface, taskbar. */
.crt-screen {
  position: absolute;
  inset: 0;
  overflow: clip;
  contain: strict;
  border-radius: var(--curvature);
  background: #020503;
  filter: brightness(var(--screen-brightness)) contrast(var(--screen-contrast)) saturate(.94);
  transform: scale(var(--warp-overscan, 1.006));
  transform-origin: center;
  isolation: isolate;
}

.os {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 3;
  display: grid;
  grid-template-rows: clamp(25px, 2vw, 34px) minmax(0,1fr) clamp(33px, 2.8vw, 44px);
  color: #11130e;
  background: #080c0a;
  font-size: clamp(8px, .78vw, 13px);
  text-shadow: var(--convergence) 0 rgba(255,0,0,.18), calc(var(--convergence) * -1) 0 rgba(0,80,255,.25), 0 0 var(--bleed) currentColor;
  transition: opacity .12s ease, transform .12s ease, filter .12s ease;
}

.crt-screen.screen-warp-ready {
  clip-path: ellipse(var(--warp-radius-x) var(--warp-radius-y) at 50% 50%);
  filter: brightness(var(--screen-brightness)) contrast(var(--screen-contrast)) saturate(.94) var(--screen-warp-filter);
}

.os-menubar, .os-taskbar {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  background: #bbb9ae;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #25251f;
  color: #111;
  text-shadow: none;
  white-space: nowrap;
}

.os-menubar { padding: 0 clamp(7px, 1vw, 16px); gap: clamp(8px, 1.5vw, 24px); overflow: visible; }
.os-menu-strip { display: flex; height: 100%; }
.os-menu-group { position: relative; display: flex; height: 100%; }
.os-menubar button, .os-taskbar button { border: 0; background: transparent; cursor: pointer; }
.os-menu-group > [data-os-menu-trigger] { padding: 0 clamp(5px, .7vw, 11px); }
.os-menu-group > [data-os-menu-trigger][aria-expanded="true"],
.os-menu-group > [data-os-menu-trigger]:focus-visible { color: white; background: var(--blue); outline: 0; }
.os-brand { font-weight: 700; padding: 0; }
.menubar-clock { margin-left: auto; font-size: .92em; }

.os-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 1px);
  left: 0;
  display: grid;
  min-width: max-content;
  padding: 3px;
  color: #111;
  background: #bbb9ae;
  border: 1px solid #171712;
  box-shadow: inset 1px 1px #f4f3eb, inset -1px -1px #74736b, 3px 4px 0 rgba(0,0,0,.38);
  text-shadow: none;
  transform-origin: top left;
}
.os-menu[hidden] { display: none; }
.os-menu-align-right { right: 0; left: auto; transform-origin: top right; }
.os-menu button {
  position: relative;
  width: 100%;
  min-height: 23px;
  padding: 3px 18px;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.os-menu button:focus-visible { color: #fff; background: var(--blue); outline: 0; }
.os-menu button:active { transform: scale(.97); }
.os-menu button.is-current-window::before { content: "◆"; position: absolute; left: 6px; top: 50%; font-size: .7em; transform: translateY(-50%); }
.os-menu [role="separator"] { display: block; height: 2px; margin: 3px 2px; border-top: 1px solid #66665f; border-bottom: 1px solid #e5e3d8; }

.os-taskbar { gap: 2px; padding: 2px 6px; }
.os-taskbar > button { height: calc(100% - 2px); min-width: clamp(52px, 8.5vw, 130px); padding: 0 10px; border: 1px solid #333; box-shadow: inset 1px 1px #eee, inset -1px -1px #666; }
.os-taskbar > button:active { box-shadow: inset 2px 2px #555; }
.os-taskbar > button:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.os-taskbar button.is-window-open:not(.is-active-task) { box-shadow: inset 1px 1px #eee, inset -1px -1px #666, inset 0 -3px var(--blue); }
.os-taskbar button.is-active-task,
.os-taskbar button.is-view-open { color:#fff; background:var(--blue); box-shadow:inset 2px 2px #111,inset -1px -1px #94a4ff; transform:translateY(1px); }
.os-taskbar button.is-window-minimized { color:#444; background:#aaa89e; box-shadow:inset 1px 1px #eee,inset -1px -1px #666,inset 0 -2px #5c5c56; transform:none; }
.os-taskbar .start-button { min-width: auto; padding: 0 8px; font: 900 1.35em/1 Arial,sans-serif; }
.os-taskbar .start-button[aria-expanded="true"] { color:#fff; background:var(--blue); box-shadow:inset 2px 2px #111,inset -1px -1px #94a4ff; }
.start-menu { top:auto; right:auto; bottom:calc(100% + 1px); left:5px; grid-template-columns:28px minmax(155px,auto); padding:3px; transform-origin:bottom left; }
.start-menu-brand { display:grid; place-items:center; padding:6px 3px; color:#fff; background:var(--blue); font-weight:700; letter-spacing:.08em; writing-mode:vertical-rl; transform:rotate(180deg); }
.start-menu-items { display:grid; }
.window-tabs { min-width:0; max-width:28%; height:100%; display:flex; align-items:center; gap:2px; }
.window-tabs:empty { display:none; }
.window-tabs button { height:calc(100% - 2px); max-width:clamp(64px,9vw,130px); overflow:hidden; padding:0 8px; border:1px solid #333; color:#111; background:#aaa89e; box-shadow:inset 2px 2px #555,inset -1px -1px #e1dfd5; transform:translateY(1px); text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.taskbar-spacer { flex: 1; }.os-taskbar .audio-button { min-width: 30px; border: 0; box-shadow:none; transition:opacity 140ms cubic-bezier(.23,1,.32,1); }.os-taskbar .audio-button[aria-pressed="true"]{opacity:.48}.os-taskbar .audio-button:disabled{opacity:.25;cursor:not-allowed}.os-taskbar time { margin: 0 8px; }
.mini-folder,.mini-doc,.mini-lab,.mini-mail,.mini-status { display:inline-block; width:14px; height:11px; margin-right:6px; border:1px solid #333; vertical-align:middle; }.mini-folder{background:#aaa473}.mini-doc{background:#ddd}.mini-lab{border-radius:45% 45% 20% 20%}.mini-mail{background:linear-gradient(35deg,transparent 46%,#333 47% 52%,transparent 53%),linear-gradient(-35deg,transparent 46%,#333 47% 52%,transparent 53%)}.mini-status{background:linear-gradient(to top,#2c8342 0 36%,#bbb9ae 37%)}

@media (hover:hover) and (pointer:fine) {
  .os-menu-group > [data-os-menu-trigger]:hover,
  .os-menu button:hover { color:#fff; background:var(--blue); }
}