/* An alternate launcher only: app rooms, notebook and state stay shared. */
/* Switching back to the room shows its monitor in place from the first frame. */
@view-transition { navigation:none; }
.monitor-view { --monitor-art-width:min(1536px,calc(100vw - 16px),calc((100svh - 12px)*1.5)); display:grid; place-items:center; min-height:100svh; margin:0; overflow:hidden; background:#a87b50 url('../../assets/gateway-monitor-room-v2.webp') center calc((100svh - var(--monitor-art-width)*.666667)/2) / calc(var(--monitor-art-width)*1.263158) auto no-repeat; --chrome-ink:#50483e; --chrome-mark-shadow:none; --chrome-nav-bg:#fffdf4dc; }
.monitor-view::before { display:none; }
.monitor-view .desk { position:relative; display:block; width:var(--monitor-art-width); height:auto; min-height:0; aspect-ratio:3/2; margin:0; padding:0; overflow:visible; }
.monitor-view .stage,.monitor-view .stage:has(.notebook.is-open) { position:absolute; inset:12.5% 20.3% 28.5% 20.9%; display:block; width:auto; height:auto!important; min-height:0; margin:0; padding:0; perspective:none; isolation:auto; background:#5b8ecc url('../../assets/bliss.jpg') center/cover; border-radius:1.3%; box-shadow:inset 0 0 25px #001a3d66; }
.monitor-view .stage > .object-rack,.monitor-view .stage > .desk-sticker { display:none!important; }
.monitor-icons { container-type:inline-size; position:absolute; inset:4% 3% 13%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:3% 2%; align-items:center; }
.monitor-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:stretch; min-width:0; min-height:0; gap:5px; padding:4px; border:1px solid transparent; border-radius:0; background:transparent; color:#fff; font:clamp(10px,1.55cqw,17px)/1.12 Tahoma,Arial,sans-serif; text-decoration:none; text-align:center; text-shadow:1px 1px 2px #001333; cursor:pointer; }
.monitor-icon:hover { background:#ffffff18; border-color:#ffffff50; }
.monitor-icon:focus-visible { outline:1px dotted #fff; outline-offset:-3px; background:#09257088; }
.monitor-icon-art { position:relative; display:block; width:clamp(30px,7.6cqw,82px); height:clamp(28px,7.6cqw,82px); flex:0 1 auto; min-height:0; }
.monitor-icon-art img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(1px 2px 1px #13202b60); }
.monitor-icon[href="/myspace/"] img { border:2px solid #eee; object-fit:cover; }
.monitor-icon[href="/solitaire/"] img { clip-path:polygon(23% 18%,29% 9%,43% 6%,69% 6%,74% 10%,74% 28%,80% 34%,78% 38%,74% 38%,74% 79%,36% 88%,27% 80%,27% 40%,21% 39%,18% 35%,26% 26%); }
.monitor-mine { display:grid; grid-template-columns:repeat(3,1fr); width:80%; aspect-ratio:1; border:2px outset #ddd; background:#c0c0c0; }
.monitor-mine i { display:grid; place-items:center; border:1px outset #ddd; color:#0000ba; font:bold clamp(9px,2cqw,19px)/1 Tahoma,sans-serif; text-shadow:none; font-style:normal; }
.monitor-mine i:nth-child(2) { color:#bc0000; }.monitor-mine i:nth-child(3) { color:#111; }
.monitor-taskbar { position:absolute; z-index:2; bottom:0; left:0; right:0; height:10%; min-height:26px; display:flex; align-items:center; gap:6px; padding:3px 5px; border-top:3px outset #eee; background:#c0c0c0; color:#111; font:clamp(10px,1.7cqw,18px)/1 Tahoma,Arial,sans-serif; }
.monitor-taskbar a { color:inherit; text-decoration:none; }
.monitor-start { display:flex; align-items:center; gap:5px; height:100%; padding:0 8px; border:2px outset #eee; font-weight:bold; }
.monitor-start { background:#c0c0c0; color:#111; font:inherit; font-weight:bold; cursor:pointer; }
.monitor-start b { color:#258232; }
.monitor-start-menu { position:absolute; z-index:5; left:0; bottom:10%; width:min(235px,70%); max-height:80%; overflow:auto; padding:4px; border:2px outset #eee; background:#c0c0c0; box-shadow:2px 3px 8px #00142a88; }
.monitor-start-menu[hidden] { display:none; }
.monitor-start-menu button,.monitor-start-menu a { display:block; width:100%; min-height:30px; padding:6px 9px; border:0; background:transparent; color:#111; font:14px Tahoma,Arial,sans-serif; text-align:left; text-decoration:none; cursor:pointer; }
.monitor-start-menu button:hover,.monitor-start-menu a:hover,.monitor-start-menu button:focus-visible,.monitor-start-menu a:focus-visible { background:#000080; color:#fff; }
.monitor-start-menu a { border-top:1px solid #888; }
.monitor-task-name { display:flex; align-items:center; height:100%; padding:0 8px; border:2px inset #ddd; }
.monitor-program-open .monitor-task-name { display:none; }
.monitor-room-link { margin-left:auto; padding:4px; }
#monitor-clock { white-space:nowrap; padding:5px; border:2px inset #ddd; }
.monitor-view .stage .notebook:not(.is-open) { display:none; }
.monitor-view .stage .notebook.is-open { display:block; position:fixed; z-index:210; left:50%; top:50%; width:min(430px,calc(100vw - 96px)); max-width:none; height:min(590px,calc(100svh - 56px)); min-height:0; margin:0; transform:translate(-50%,-50%); translate:none!important; filter:drop-shadow(0 18px 30px #0007); }
.monitor-view .stage .notebook.is-open .cover { opacity:1; visibility:visible; transform:rotateY(-100deg); }
.monitor-view .stage .notebook.is-open .cover-front { visibility:hidden; }
.monitor-view .stage .notebook.is-open .cover-back { transform:rotateY(180deg); }
.monitor-reading::after { content:''; position:fixed; z-index:200; inset:0; background:#17140788; backdrop-filter:blur(3px); pointer-events:none; }
@media(max-height:500px) {
  .monitor-icons { gap:0 2%; inset:2% 2% 15%; }
  .monitor-icon { gap:1px; padding:1px; font-size:10px; }
  .monitor-icon-art { width:clamp(25px,6cqw,45px); height:clamp(25px,6cqw,45px); }
  .monitor-taskbar { height:13%; padding:1px 3px; gap:3px; }
  .monitor-task-name { padding:0 4px; }
}
@media (max-width:700px) and (orientation:portrait), (pointer:coarse) and (orientation:portrait) {
  .monitor-view { --chrome-ink:#fff8e4; --chrome-mark-shadow:0 1px 4px #001b4d; --chrome-nav-bg:#172237dd; }
  .monitor-view .desk { position:fixed; inset:0; width:auto; height:100%; aspect-ratio:auto; background:#171512; }
  .monitor-view .stage,.monitor-view .stage:has(.notebook.is-open) { inset:0; border-radius:0; box-shadow:none; }
  .monitor-icons { inset:calc(106px + env(safe-area-inset-top)) 10px calc(66px + env(safe-area-inset-bottom)); grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); gap:10px 4px; }
  .monitor-icon { font-size:12px; }
  .monitor-icon-art { width:clamp(36px,11cqw,56px); height:clamp(36px,11cqw,56px); }
  .monitor-taskbar { height:calc(54px + env(safe-area-inset-bottom)); min-height:54px; padding-bottom:env(safe-area-inset-bottom); font-size:14px; }
  .monitor-view .stage .notebook.is-open { width:calc(100vw - 84px); height:calc(100svh - 130px); transform:translate(calc(-50% + 30px),-50%); }
}

.monitor-mine { margin:10%; }
.monitor-board-face { position:absolute; display:block; left:0; top:16.6667%; width:100%; height:66.6667%; }
.monitor-board-face .board-preview { position:absolute; inset:9% 5%; display:block; overflow:hidden; }
.monitor-icon-art #etch-desk-screen { inset:26.53% auto auto 15.4%; width:69%; height:40.87%; object-fit:fill; filter:none; }

.monitor-icon .destroyer-art { display:grid; place-items:center; font: bold clamp(34px,5.5cqw,64px)/1 Georgia,serif; color:#f7cc45; text-shadow:2px 3px 0 #92551a,0 2px 6px #14264c; }

/* Standalone programs keep their own scripts and state inside the screen. */
.monitor-program-host { position:absolute; z-index:3; inset:2% 1.5% 10%; pointer-events:none; }
.monitor-program-window { position:absolute; inset:0; display:flex; flex-direction:column; min-width:0; min-height:0; border:2px solid; border-color:#fff #4b4b4b #4b4b4b #fff; background:#c0c0c0; box-shadow:2px 3px 6px #06172c88; pointer-events:auto; }
.monitor-program-window[hidden] { display:none; }
.monitor-program-titlebar { height:32px; flex:none; display:flex; align-items:center; gap:4px; padding:3px; background:linear-gradient(90deg,#080c75,#176baa); color:#fff; font:700 clamp(11px,1.7cqw,18px) Tahoma,Arial,sans-serif; }
.monitor-program-titlebar span { flex:1; padding-left:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.monitor-program-titlebar button { width:30px; height:100%; padding:0; border:2px outset #eee; background:#c0c0c0; color:#111; font:bold 20px/1 Arial,sans-serif; cursor:pointer; }
.monitor-program-titlebar button:focus-visible,.monitor-task:focus-visible { outline:2px dotted #111; outline-offset:-4px; }
.monitor-program-window iframe { display:block; flex:1; width:100%; min-height:0; border:0; background:#c0c0c0; }
.monitor-tasks { display:flex; gap:4px; min-width:0; overflow:auto hidden; scrollbar-width:thin; }
.monitor-task { flex:0 1 auto; min-width:65px; max-width:160px; height:100%; overflow:hidden; padding:0 8px; border:2px outset #eee; background:#c0c0c0; color:#111; font:inherit; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.monitor-task[aria-pressed="true"] { border-style:inset; background:#d6d6d6; }

@media (max-width:700px) and (orientation:portrait), (pointer:coarse) and (orientation:portrait) {
  .monitor-view .monitor-program-host { inset:calc(108px + env(safe-area-inset-top)) 5px calc(54px + env(safe-area-inset-bottom)); }
  .monitor-view .monitor-start-menu { bottom:calc(54px + env(safe-area-inset-bottom)); }
  .monitor-view .monitor-program-titlebar { height:44px; }
  .monitor-view .monitor-program-titlebar button { width:40px; }
  .monitor-view .monitor-task { min-width:72px; }
}
@media (max-height:500px) and (orientation:landscape) and (max-width:950px) {
  .monitor-program-open .monitor-program-host { position:fixed; z-index:3; inset:104px 8px 48px; }
  .monitor-program-open .monitor-taskbar { position:fixed; z-index:4; left:0; right:0; bottom:0; height:48px; font-size:14px; }
  .monitor-program-open .monitor-start-menu { position:fixed; z-index:5; left:0; bottom:48px; }
}


/* Keep the monitor dimmer beneath its book, not over the entire page. */
@media(max-width:650px) {
  .monitor-reading::after { content:none; }
  .monitor-reading .stage::after { content:''; position:fixed; z-index:100; inset:0; background:#17140788; backdrop-filter:blur(3px); pointer-events:none; }
  .monitor-view .stage .notebook.is-open {
    left:50%; top:50dvh; width:calc((100vw - 24px)/2);
    height:min(540px,calc(100dvh - 155px)); transform:translateY(-50%);
  }
  .monitor-view .stage .notebook.is-open .cover { transform:rotateY(-180deg); }
}