/* Taylor Drew — the desktop
 *
 * The site is one window on a desktop of the early 2000s: a wallpapered
 * background with shortcuts down the left, a window with a glossy title bar,
 * the menu as that window's sidebar, the page as its document, the footer as
 * its status bar, and a taskbar along the bottom.
 *
 * The pages themselves are untouched — every word still comes from the admin
 * panel, and site.css still lays out the hero, the link wall, the reel grid
 * and the rest. This sheet loads after site.css and after the theme block, so
 * it re-points the theme's neutral variables at the period palette while
 * leaving `--accent` alone: whichever scheme is served still colours the
 * featured link, the section captions and the default button.
 */

/* `html[data-theme]` outranks the per-theme blocks the server injects. */
html[data-theme] {
  --bg: #fdfeff;
  --surface: #eaf0f9;
  --text: #1d2a3c;
  --muted: #5b6d86;
  --line: #b9c7da;

}

html {
  background: #0a2a5e;
}

body {
  display: block;
  margin: 0;
  min-height: 0;
  background: transparent;
  color: var(--xp-ink);
  /* The design's own stack, exactly: Tahoma (1994), Verdana (1996). Nothing
     here postdates the machine it is pretending to be — Segoe UI, which used
     to close this stack, arrived with Vista and is the wrong decade's face.
     Same rule for --xp-mono: Courier New, 1955. */
  font-family: var(--xp-font);
  font-size: 15px;
}

/* Several things here are display:flex and hidden by the `hidden` attribute,
   and a class beats the user-agent's `[hidden]` rule every time. */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent);
  color: var(--accent-text);
}

:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: 2px;
}

.win :focus-visible,
.startmenu :focus-visible {
  outline: 1px dotted var(--xp-deep);
}

/* ---------------------------------------------------------- the desktop */

.desk {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

/* The wallpaper itself is defined in desktop.css, which the admin panel reads
   from too, so the two halves of the machine cannot drift apart. */
.wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--xp-wall-color);
  background-image: var(--xp-wallpaper);
}

.icons {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 82px;
  gap: 4px;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 82px;
  padding: 5px 2px;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.icon:focus-visible {
  border-color: #fff;
  border-style: dotted;
}

/*
 * 32 pixels square, with the soft shadow this machine set its icons down with.
 * No `crispEdges` here: these are shaded drawings, and the edges are meant to
 * smooth. What they never had is a tile behind them.
 */
.icon-art {
  display: block;
  width: 32px;
  height: 32px;
  filter: drop-shadow(1px 2px 1px rgba(0, 24, 56, 0.45));
}

.icon-label {
  padding: 1px 3px;
  font-size: 11px;
  line-height: 1.25;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 20, 48, 0.85);
  overflow-wrap: anywhere;
}

/* Selecting a shortcut washed its picture blue and boxed its name in navy. */
.icon:focus-visible .icon-label,
.icon:active .icon-label,
.icon[aria-current='page'] .icon-label {
  background: #0a246a;
}


/* ----------------------------------------------------------- the window */

.win {
  position: absolute;
  left: 116px;
  top: 34px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: min(1020px, calc(100% - 146px));
  max-height: calc(100% - 92px);
  overflow: hidden;
  background: var(--xp-face);
  border: 1px solid var(--xp-edge);
  border-radius: 9px 9px 4px 4px;
  box-shadow: 0 8px 22px rgba(4, 18, 44, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.win.is-max {
  left: 0;
  top: 0;
  width: 100%;
  max-height: calc(100% - 46px);
  height: calc(100% - 46px);
  border-radius: 0;
}

.topbar {
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 5px 5px 9px;
  background: var(--xp-title);
  border-bottom: 1px solid var(--xp-edge);
  user-select: none;
}

/* A title bar you can pick the window up by — pointer only, and never when
   the window fills the screen or the desktop has collapsed to one column. */
@media (min-width: 720px) and (pointer: fine) {
  .win:not(.is-max) .topbar {
    cursor: move;
  }
}

.logo {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);
}

.win-buttons {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.win-button {
  width: 21px;
  height: 18px;
  padding: 0;
  border: 1px solid #0a3d8f;
  border-radius: 3px;
  background: linear-gradient(180deg, #f8fcff, #a9cbf2 52%, #6ea6e2);
  color: #083b86;
  font: 700 11px Tahoma, Verdana, sans-serif;
  line-height: 1;
  cursor: pointer;
}

.win-button.is-close {
  border-color: #8f1c12;
  background: linear-gradient(180deg, #ffdad5, #e8705f 52%, #c0301c);
  color: #fff;
}

.win-button:active {
  background: linear-gradient(180deg, #6ea6e2, #a9cbf2 52%, #f8fcff);
}

.win-button.is-close:active {
  background: linear-gradient(180deg, #c0301c, #e8705f 52%, #ffdad5);
}

.win-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* --------------------------------------------------- the picture viewer */

/*
 * A second window, holding the home page's photo. It sits over the bottom
 * right of the main one the way a file you just opened lands on top of what
 * you were already doing — and it can be dragged out from there, or shut.
 */
.photo-win {
  left: auto;
  top: auto;
  right: 26px;
  bottom: 70px;
  width: min(340px, calc(100% - 180px));
  max-height: calc(100% - 140px);
}

.photo-win-body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  /* The chequerboard a viewer of the era put behind a picture. */
  background: repeating-conic-gradient(#ffffff 0% 25%, #eef2f8 0% 50%) 0 0 / 16px 16px;
  border: 1px solid #9fb3cd;
  border-width: 0 0 1px;
}

.photo-win-body img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.photo-win-status {
  justify-content: space-between;
}

.photo-win-size {
  flex: 0 0 auto;
}

/* Two windows on a narrow screen is one window too many: the viewer becomes
   the block of the page it came out of, under the document it belongs to. */
@media (max-width: 719px) {
  .photo-win {
    right: auto;
    bottom: auto;
    width: 100%;
    max-height: none;
    margin-top: 10px;
  }

  .photo-win-body {
    max-height: 60vh;
  }
}

/* ---------------------------------------------------------- the sidebar */

.sidebar {
  flex: 0 0 auto;
  width: 138px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 7px;
  border-right: 1px solid var(--xp-line);
  background: linear-gradient(180deg, #fbfcfe, #dde6f2);
}

.sidebar-label {
  margin: 0;
  padding: 2px 6px 6px;
  font: 10px var(--xp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xp-mute);
}

.sidebar .nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.sidebar-foot {
  margin: auto 0 0;
  padding: 8px 6px 2px;
  font: 10px var(--xp-mono);
  line-height: 1.5;
  color: #7c8ca3;
}

.nav-link {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #22334c;
  white-space: nowrap;
}

/* The sliding accent rule is a modern gesture; a shortcut lights up instead. */
.nav-link::after {
  display: none;
}

.nav-link.is-active {
  border-color: #7ba2d4;
  background: linear-gradient(180deg, #ffffff, #d3e3f8 55%, #b7d1ef);
  box-shadow: inset 0 1px 0 #fff;
  font-weight: 700;
  color: var(--xp-deep);
}

@media (hover: hover) {
  .nav-link:hover {
    background: #dbe8fa;
  }

  .nav-link.is-active:hover {
    background: linear-gradient(180deg, #ffffff, #d3e3f8 55%, #b7d1ef);
  }
}

/* --------------------------------------------------------- the document */

.win-doc {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  min-height: 0;
  /* The page scrolls inside its window, which is what a window is for. */
  overflow: auto;
  background: linear-gradient(180deg, #fdfeff, #eaf0f9);
}

/* site.css sizes the hero against the viewport; in here the window is the
   viewport, and a hero taller than it would push the fold inside the frame. */
.hero-main {
  min-height: 0;
}

/* With the photo opened in its own window, the hero's second column holds only
   the upcoming block — so it stops where that stops instead of ruling a line
   down a panel of nothing. */
.hero-side:not(:has(.hero-photo-wrap)) {
  align-self: start;
}

.hero-photo,
.side-photo img {
  max-height: 46vh;
}

/* ------------------------------------------------------------- the type */

.display {
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--xp-deep);
}

.display-sm {
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
}

/*
 * Where the design puts Courier: the labels and the machine's own voice — the
 * eyebrow over a heading, a fact's label, a date, the text of a document. The
 * running prose it writes in Tahoma, so the intro under a title and a link's
 * sub-label are not in this list.
 */
.eyebrow,
.fact dt,
.credit-meta,
.show-meta {
  font-family: var(--xp-mono);
}

/* About is a text file open in a text editor, so its body is typed. */
.page-about .prose p,
.page-about .credit-title,
.page-about .quote p {
  font-family: var(--xp-mono);
}

.eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--xp-mute);
}

.subhead {
  font-size: 13px;
  line-height: 1.55;
  color: #33465f;
}

/* ------------------------------------------------------------- controls */

.btn {
  min-height: 0;
  padding: 8px 18px;
  border: 1px solid #6f8fb8;
  border-radius: 5px;
  background: var(--xp-gloss);
  box-shadow: inset 0 1px 0 #fff;
  color: var(--xp-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* The served scheme's accent survives as the default button's left edge. */
.btn-accent {
  border-left: 3px solid var(--accent);
  color: var(--xp-blue);
}

.btn-ghost {
  background: linear-gradient(180deg, #fdfdfd, #e8ecf2 48%, #d3d9e3);
  border-color: #9fb3cd;
  color: #3c4a60;
}

.btn:active {
  transform: none;
  background: linear-gradient(180deg, #bed3ee, #dde8f6 48%, #ffffff);
}

.btn-ghost:active {
  background: linear-gradient(180deg, #d3d9e3, #e8ecf2 48%, #fdfdfd);
  color: #3c4a60;
}

@media (hover: hover) {
  .btn-accent:hover,
  .btn:hover {
    filter: none;
    background: linear-gradient(180deg, #ffffff, #d5e5fb 50%, #b8d2f1);
    color: var(--xp-blue);
  }

  .btn-ghost:hover {
    background: linear-gradient(180deg, #ffffff, #eef1f6 48%, #dde2ea);
    color: #3c4a60;
  }
}

/* Everything the site lists becomes a glossy row of the same family. */
.link-card,
.reel,
.show-cta,
.quote,
.hero-upcoming,
.play-stat {
  border: 1px solid #93b2d8;
  border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #e4ecf8 50%, #cfdef2);
  box-shadow: inset 0 1px 0 #fff;
}

.link-grid,
.reel-grid {
  gap: 9px;
  padding: 9px;
}

.link-card {
  border-right: 1px solid #93b2d8;
}

.link-label {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.link-arrow {
  font-family: var(--xp-mono);
  color: var(--xp-mute);
}

@media (hover: hover) {
  .link-card:hover {
    background: linear-gradient(180deg, #ffffff, #d5e5fb 50%, #b8d2f1);
  }
}

.link-card:active {
  background: linear-gradient(180deg, #cfdef2, #e4ecf8 50%, #ffffff);
}

/* A reel wall is a media player's window: dark, so the clips carry the light. */
.page-reels .main {
  background: linear-gradient(180deg, #22304a, #101a2c);
}

.page-reels .reel {
  border-color: #47597a;
  background: repeating-linear-gradient(45deg, #2b3a55 0 8px, #33425e 8px 16px);
  box-shadow: none;
}

.page-reels .reel-title,
.page-reels .reel-intro,
.page-reels .reel-empty,
.page-reels .display,
.page-reels .eyebrow,
.page-reels .subhead,
.page-reels .muted {
  color: #a8bad6;
}

.page-reels .display {
  color: #e8f0fb;
}

/* The game is the one thing on the machine that is not a document. */
.page-play .main {
  background: #0b1220;
}

.page-play .display,
.page-play .play-line,
.page-play .play-stat strong {
  color: #6ef3a5;
}

.page-play .eyebrow,
.page-play .subhead,
.page-play .play-stat-label {
  color: #7d93b5;
}

.page-play .play-stat {
  border-color: #2c4160;
  background: linear-gradient(180deg, #25385a, #16243c);
  box-shadow: none;
}

.page-play .seat {
  border: 1px solid #2c4160;
  background: repeating-linear-gradient(45deg, #111d31 0 8px, #16243c 8px 16px);
}

.page-play .btn {
  border-color: #2c4160;
  background: linear-gradient(180deg, #25385a, #16243c);
  color: #9fd8ff;
}

/* ------------------------------------------------------- the message */

/*
 * Contact is a message being composed. The values are text, not inputs —
 * there is no form behind them — but a mail window is what they look like,
 * so they sit in the sunken white boxes that in this era meant "typed here".
 */
.compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 28px 28px;
}

.compose-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.compose-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compose-row dt {
  font: 700 12px Tahoma, Verdana, sans-serif;
  color: var(--xp-deep);
}

.compose-row dd,
.compose-body {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #9fb3cd;
  background: #fff;
  font: 12px/1.6 var(--xp-mono);
  color: #33465f;
}

.compose-body {
  flex: 1;
  min-height: 120px;
  color: #8797ad;
}

.compose .cta-row {
  padding: 0;
}

/* Photographs sit in the hatched wells an image control gave an empty slot. */
.hero-photo-wrap,
.side-photo,
.show-flyer,
.photo-placeholder {
  border: 1px solid #b6c6dd;
  background: repeating-linear-gradient(45deg, #dfe7f2 0 8px, #eef3fa 8px 16px);
}

.rule,
.rule-accent {
  height: 1px;
}

.hero-side,
.split-side,
.show,
.fact,
.faq-item,
.credit,
.quote {
  border-color: var(--xp-line);
}

/* ---------------------------------------------------------- status bar */

.footer {
  flex: 0 0 auto;
  gap: 10px;
  padding: 5px 10px;
  border-top: 1px solid #c3d0e2;
  background: linear-gradient(180deg, #f3f6fb, #e3eaf4);
  font: 11px var(--xp-mono);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--xp-mute);
}

.footer-path {
  flex: 0 0 auto;
}

.footer-left {
  flex: 1;
  min-width: 0;
}

/* The design bookends its status bar with the path and the word `ready`; the
   footer the admin panel writes sits between them. */
.footer-ready {
  flex: 0 0 auto;
}

@media (hover: hover) {
  a.footer-right:hover {
    color: var(--xp-blue);
  }
}

/* ------------------------------------------------------------- taskbar */

.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  padding-bottom: max(5px, env(safe-area-inset-bottom));
  background: linear-gradient(
    180deg,
    #5fa3ea 0%,
    #2367c8 10%,
    #124da9 52%,
    #0c3f96 60%,
    #2f78d4 100%
  );
  border-top: 1px solid #7fb6f5;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.35);
}

.start {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 5px 16px 5px 10px;
  border: 1px solid #1d6b2d;
  border-radius: 5px;
  background: linear-gradient(180deg, #7fd48c, #2f9e4a 48%, #1f7a37);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font: italic 700 14px Tahoma, Verdana, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.start-mark {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: linear-gradient(135deg, #fff, #cdebd3);
}

.start[aria-expanded='true'] {
  background: linear-gradient(180deg, #1f7a37, #2f9e4a 48%, #7fd48c);
}

.tasks {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 5px;
  overflow: hidden;
}

.task {
  max-width: 220px;
  padding: 5px 12px;
  border: 1px solid #0a3d8f;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.14));
  font: 700 12px Tahoma, Verdana, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* A minimised window's button stops looking pressed. */
.task.is-idle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
  font-weight: 400;
}

.tray {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid #0a3d8f;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05));
  font: 12px Tahoma, Verdana, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
}

.clock {
  letter-spacing: 0.06em;
}

/* ---------------------------------------------------------- start menu */

.startmenu {
  position: absolute;
  left: 9px;
  bottom: 50px;
  z-index: 8100;
  width: 196px;
  overflow: hidden;
  border: 1px solid var(--xp-edge);
  border-radius: 7px 7px 4px 4px;
  box-shadow: 0 10px 26px rgba(4, 18, 44, 0.5);
}

.startmenu-head {
  margin: 0;
  padding: 9px 12px;
  background: linear-gradient(180deg, #2b6fd0, #0d3f96);
  font: 700 13px Tahoma, Verdana, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.startmenu-list {
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: #fff;
}

.startmenu-list .nav-link {
  border-color: transparent;
  background: none;
  box-shadow: none;
  font-weight: 400;
  color: #12263f;
}

.startmenu-list .nav-link.is-active {
  font-weight: 700;
  color: var(--xp-deep);
}

/* ------------------------------------------------------------- dialogs */

.dialog {
  position: absolute;
  z-index: 8500;
  width: 390px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  border: 1px solid var(--xp-edge);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 12px 30px rgba(4, 18, 44, 0.5);
}

.dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 5px 5px 9px;
  background: var(--xp-title);
  border-bottom: 1px solid var(--xp-edge);
}

.dialog-title {
  font: 700 12px Tahoma, Verdana, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55);
}

.dialog-body {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px;
  background: linear-gradient(180deg, #fdfeff, #eef2f8);
}

.dialog-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid #8f1c12;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffdad5, #c0301c);
  color: #fff;
  font: 700 16px Tahoma, Verdana, sans-serif;
}

.dialog-glyph.is-info {
  border-color: #1d6b2d;
  background: linear-gradient(180deg, #d9f7e0, #4aa85f);
}

.dialog-main {
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
  min-width: 0;
}

.dialog-text {
  margin: 0;
  font: 12px/1.55 Tahoma, Verdana, sans-serif;
  color: var(--xp-ink);
  text-wrap: pretty;
}

.dialog-ok {
  align-self: flex-end;
  padding: 6px 20px;
  border: 1px solid #6f8fb8;
  border-radius: 5px;
  background: var(--xp-gloss);
  box-shadow: inset 0 1px 0 #fff;
  font: 700 12px Tahoma, Verdana, sans-serif;
  color: var(--xp-blue);
  cursor: pointer;
}

/* ----------------------------------------------------------- the splash */

.boot {
  position: absolute;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(120% 90% at 50% 40%, #1b4f9c, #061a3c 70%);
}

.boot-name {
  margin: 0;
  font: 700 38px Tahoma, Verdana, sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.boot-sub {
  margin: -15px 0 0;
  font: 11px var(--xp-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #9fc2ef;
}

.boot-bar {
  width: 230px;
  height: 14px;
  padding: 2px;
  border: 1px solid #6a97d8;
  border-radius: 3px;
  background: #0a2450;
}

.boot-bar span {
  display: block;
  width: 4%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #6ef3a5, #2fb4e0);
  animation: bootbar 2.1s linear forwards;
}

@keyframes bootbar {
  from {
    width: 4%;
  }
  to {
    width: 100%;
  }
}

.boot-skip {
  padding: 6px 16px;
  border: 1px solid #6a97d8;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  font: 11px Tahoma, Verdana, sans-serif;
  color: #cfe2fb;
  cursor: pointer;
}

/* Someone who asked for less motion gets the desktop, not the show. */
@media (prefers-reduced-motion: reduce) {
  .boot {
    display: none;
  }
}

/* ------------------------------------------------------------ narrow */

/*
 * Under 720px there is no room for a desktop: the wallpaper stays, the
 * shortcuts go, and the window becomes the page — full width, scrolling with
 * the document rather than inside itself, with the taskbar pinned to the
 * bottom of the screen the way it is on the real thing.
 */
@media (max-width: 719px) {
  .desk {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    padding: 10px 10px 62px;
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
    overflow: visible;
  }

  .wall {
    position: fixed;
  }

  .icons {
    display: none;
  }

  .win {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-height: none;
  }

  .win.is-max {
    height: auto;
    max-height: none;
    border-radius: 9px 9px 4px 4px;
  }

  .main {
    overflow: visible;
  }

  .sidebar {
    width: 112px;
  }

  .sidebar-label,
  .sidebar-foot {
    display: none;
  }

  .taskbar,
  .startmenu {
    position: fixed;
  }

  .dialog {
    position: fixed;
    left: 5%;
    top: 16%;
    width: 90%;
  }
}

/* Very narrow: the sidebar becomes a row of tabs above the document. */
@media (max-width: 479px) {
  .win-body {
    flex-direction: column;
  }

  .sidebar {
    width: auto;
    flex-direction: row;
    gap: 4px;
    padding: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--xp-line);
    overflow-x: auto;
  }

  .sidebar .nav {
    flex-direction: row;
    gap: 4px;
  }
}