/* The desktop viewer continues the room's cream CRT housing. The document
   inside the glass remains the original, independently scrollable computer. */
.site-dialog {
  --case-light: #eee6c9;
  --case-cream: #d8d0b1;
  --case-shadow: #aaa28a;
  --case-ink: #4d5143;
  --case-margin: 12px;
  width: min(1200px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  color: var(--case-ink);
  overflow: hidden;
  border-radius: 9px 9px 6px 6px;
  box-shadow: 0 18px 60px #161b1766;
}
.site-dialog::backdrop { background: #1720188c; backdrop-filter: blur(2px); }
.site-dialog .computer-bezel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: clamp(10px, 1.6vw, 22px) clamp(10px, 1.6vw, 22px) 0;
  border: 1px solid #797a64;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--case-light), var(--case-cream) 42%, #c4bca0);
  box-shadow: inset 2px 2px 0 #fff5d8, inset -3px -3px 0 #9a957d, inset -6px -5px 0 #b9b298;
}
.site-dialog .site-frame {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  width: 100%;
  border: 5px solid #41483c;
  border-top-color: #555c4c;
  border-left-color: #555c4c;
  border-bottom-color: #31392f;
  border-right-color: #31392f;
  border-radius: 5px;
  background: #070a07;
  box-shadow: 0 1px 0 #fff3cf, 0 -2px 0 #8e917a, -2px 0 0 #a7aa90, 2px 0 0 #eee8c9;
}
.site-dialog .site-frame iframe { min-height: 0; border-radius: 0; }
.site-dialog .computer-footer {
  flex: 0 0 auto;
  min-height: 58px;
  gap: 16px;
  padding: 5px 2px 6px;
}
.site-dialog .computer-wordmark {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--case-ink);
  font: 10px/1.3 var(--mono);
  letter-spacing: .11em;
  text-shadow: 0 1px #fff0cf;
}
.site-dialog .computer-wordmark span {
  color: #616452;
  font-size: 7px;
  letter-spacing: .12em;
  margin-top: 4px;
}
/* A quiet stamped vent, with no extra control or space taken from the screen. */
.site-dialog .computer-footer::before {
  content: '';
  order: 1;
  width: 55px;
  height: 12px;
  margin-left: auto;
  background: repeating-linear-gradient(0deg, #7d816b 0 1px, #eee7c9 1px 2px, transparent 2px 4px);
  opacity: .75;
  pointer-events: none;
}
.site-dialog #site-back {
  order: 2;
  flex: 0 0 auto;
  min-height: 44px;
  margin-left: 0;
  padding: 9px 13px;
  border: 1px solid #969680;
  border-radius: 3px;
  background: #e3dcc0;
  color: #414d3b;
  box-shadow: inset 1px 1px #fff6d7, inset -1px -1px #b1ac92, 0 1px #a3a089;
  font: 12px/1.35 var(--sans);
  white-space: nowrap;
}
.site-dialog #site-back span { color: #686e59; margin-left: 12px; }
.site-dialog #site-back:hover { background: #f0e8cb; color: #263c2b; }
.site-dialog #site-back:active { background: #cbc5ab; box-shadow: inset 1px 1px 2px #8c8f75; }
.site-dialog #site-back:focus-visible { outline: 2px solid #476a4b; outline-offset: -4px; }
.site-dialog .computer-led {
  order: 3;
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  margin: 0 4px 0 0;
  background: #8db67a;
  box-shadow: 0 0 0 2px #a4a990, 0 0 5px #7ba86366;
}
.site-dialog .computer-boot { color: #c4d3ae; background: #141c14; }
.site-dialog #site-retry { min-height: 44px; color: #e7e7c9; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) {
  .site-dialog { --case-margin: 6px; width: calc(100vw - 12px); max-width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); border-radius: 6px; }
  .site-dialog .computer-bezel { padding: 8px 7px 0; }
  .site-dialog .site-frame { border-width: 3px; border-radius: 3px; }
  .site-dialog .computer-footer { min-height: 53px; gap: 8px; padding: 4px 1px 5px; }
  .site-dialog .computer-footer::before { display: none; }
  .site-dialog .computer-wordmark { font-size: 8px; letter-spacing: .025em; }
  .site-dialog .computer-wordmark span { font-size: 6px; letter-spacing: .025em; margin-top: 3px; }
  .site-dialog #site-back { margin-left: auto; padding: 9px 10px; font-size: 11px; }
  .site-dialog #site-back span { display: none; }
  .site-dialog .computer-led { margin-right: 2px; }
}
@media (max-height: 500px) {
  .site-dialog { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
  .site-dialog .computer-bezel { padding-top: 7px; }
  .site-dialog .computer-footer { min-height: 50px; padding-top: 3px; padding-bottom: 3px; }
}
@supports (padding: env(safe-area-inset-bottom)) {
  .site-dialog {
    max-width: calc(100vw - max(var(--case-margin), env(safe-area-inset-left)) - max(var(--case-margin), env(safe-area-inset-right)));
    max-height: calc(100dvh - max(6px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-bottom)));
  }
}