@import url('/assets/sim/windows/desk.css');
/* Window placement wheel (Source/Wheel/WheelWindowPlacement.swift: 390 pt wheel in a 410 panel, keys r 72…178,
   lacquer / ivory, blue glow; target preview inset 4, radius 15, accent 16% / 80%) and ⌥Tab (WindowSwitcher.swift
   AppSwitcherView: 86% × 74% of the screen, radius 26, tiles radius 16, pictures radius 10 / 7). */
[data-sim="windows"] .cv { --acc: #b5bfcf; }
[data-sim="windows"] .cv :where(button) { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
[data-sim="windows"] .isd-win .isd-bar, [data-sim="windows"] .isd-win .isd-tabs { cursor: default; touch-action: none; }
[data-sim="windows"] .isd-win.drag { transition: none; }

[data-sim="windows"] .wheel { position: absolute; z-index: 50; width: 410px; height: 410px; pointer-events: none; opacity: 0; transform: scale(.92); transition: opacity .14s ease, transform .18s cubic-bezier(.3,1.3,.5,1); }
[data-sim="windows"] .wheel.on { opacity: 1; transform: none; }
[data-sim="windows"] .wheel svg { position: absolute; left: 10px; top: 10px; overflow: visible; }
[data-sim="windows"] .wheel .key path { transition: fill .14s ease; }
[data-sim="windows"] .wheel .lbl { font: 600 10px var(--ui); fill: rgba(255,255,255,.55); transition: fill .14s; }
[data-sim="windows"] .wheel .on .lbl { fill: #14306b; }
[data-sim="windows"] .wheel .ctr { font: 600 12px var(--ui); fill: rgba(255,255,255,.92); }

[data-sim="windows"] .target { position: absolute; z-index: 45; pointer-events: none; opacity: 0; transition: opacity .12s, left .14s ease, width .14s ease; }
[data-sim="windows"] .target.on { opacity: 1; }
[data-sim="windows"] .target i { position: absolute; inset: 4px; border-radius: 15px; background: rgba(181,191,207,.16); box-shadow: inset 0 0 0 2px rgba(181,191,207,.8); }
[data-sim="windows"] .target b { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); height: 38px; padding: 0 16px; border-radius: 11px; background: rgba(18,19,23,.95); color: #fff; font: 600 14px/38px var(--ui); white-space: nowrap; }

/* ⌥Tab */
[data-sim="windows"] .sw { position: absolute; z-index: 55; left: 106px; top: 160px; width: 1300px; height: 699px; border-radius: 26px; overflow: hidden;
  background: rgba(18,19,24,.62); -webkit-backdrop-filter: blur(30px) saturate(1.3); backdrop-filter: blur(30px) saturate(1.3);
  box-shadow: inset 0 0 0 .8px rgba(255,255,255,.10), 0 30px 80px rgba(0,0,0,.5);
  opacity: 0; transform: scale(.96); pointer-events: none; transition: opacity .2s ease, transform .26s cubic-bezier(.3,1.2,.4,1); }
[data-sim="windows"] .sw.on { opacity: 1; transform: none; pointer-events: auto; }
[data-sim="windows"] .sw .g { position: absolute; inset: 22px; display: grid; gap: 12px; align-content: center; justify-content: center; }
[data-sim="windows"] .tl { padding: 8px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; transform: scale(.975); transition: transform .2s cubic-bezier(.3,1.3,.5,1), background .15s; box-shadow: inset 0 0 0 2px transparent; cursor: pointer; }
[data-sim="windows"] .tl.on { transform: none; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 2px var(--acc); }
[data-sim="windows"] .tl .pic { position: relative; border-radius: 10px; background: rgba(255,255,255,.045); overflow: hidden; display: grid; place-items: center; }
[data-sim="windows"] .tl .pic .mini { position: relative; border-radius: 7px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
[data-sim="windows"] .tl .pic .mini .isd-win { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: none; border-radius: 0; }
[data-sim="windows"] .tl.dim .pic .mini { opacity: .72; }
[data-sim="windows"] .tl .pic .bdg { position: absolute; top: 6px; right: 6px; height: 19px; padding: 0 7px; border-radius: 10px; background: rgba(0,0,0,.55); display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; }
[data-sim="windows"] .tl .pic .bdg img { height: 9px; }
[data-sim="windows"] .tl .cap { height: 28px; display: flex; align-items: center; gap: 7px; }
[data-sim="windows"] .tl .cap img { width: 20px; height: 20px; }
[data-sim="windows"] .tl .cap div { min-width: 0; }
[data-sim="windows"] .tl .cap b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
[data-sim="windows"] .tl .cap small { display: block; font-size: 10.5px; color: rgba(255,255,255,.55); white-space: nowrap; line-height: 1.2; }

/* the keys a visitor without a keyboard taps (site control, not app UI) */
[data-sim="windows"] .keys { position: absolute; z-index: 58; left: 22px; bottom: 98px; display: flex; gap: 6px; padding: 5px; border-radius: 20px; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14); }
[data-sim="windows"] .keys button { height: 34px; min-width: 44px; padding: 0 12px; border-radius: 10px; font: 600 15px var(--ui); color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.16), 0 1px 0 rgba(0,0,0,.4); transition: background .12s, color .12s; }
[data-sim="windows"] .keys button.on { background: #fff; color: #000; }
[data-sim="windows"] .try { bottom: 98px; }
/* phone canvas (480 × 780) */
[data-sim="windows"] .cv.phone .keys { left: 12px; bottom: 94px; }
[data-sim="windows"] .cv.phone .try { left: 12px; right: 12px; bottom: 146px; transform: none; white-space: normal; text-align: center; line-height: 1.5; }
[data-sim="windows"] .cv.phone .sw .g { inset: 14px; }