/*
 * Retro desktop shell — the 1998-desktop metaphor layer that sits on top of
 * 98.css. Migrated from the Clippy landing-page framework (desktop icons +
 * movable windows + responsive fallback), extended with a taskbar and a
 * Start menu so the desktop behaves like the real thing.
 */

:root {
  --desktop-teal: #008080;
  --taskbar-h: 32px;
  --brand-navy: #000080;
}

html {
  height: 100%;
  background: var(--desktop-teal);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--desktop-teal);
  /* Framework default: silver/white surfaces carry black text. The desktop
     itself is the only white-on-teal surface (see .desktop-icons). */
  color: #000;
  font-family: "Pixelated MS Sans Serif", Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 12px;
  overflow: hidden;
}

/* Every framework control keeps the pixel font, never a system-ui fallback. */
.window,
button,
input,
label,
legend,
option,
select,
table,
textarea {
  font-family: "Pixelated MS Sans Serif", Tahoma, "MS Sans Serif", Arial, sans-serif;
}

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

.desktop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--taskbar-h);
  overflow: hidden;
}

.desktop-icons {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  max-height: calc(100% - 20px);
  color: #fff;
  z-index: 1;
}

/* Windows live in their own layer: full-bleed on the desktop, and on mobile the
   second flex row under the icon band (see the media query below). */
.window-layer {
  position: absolute;
  inset: 0;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84px;
  padding: 6px 4px;
  border: 1px dotted transparent;
  background: none;
  box-shadow: none;
  color: #fff;
  cursor: default;
  text-align: center;
}

/* Desktop icons are <button> elements so they can be focused and opened from the
   keyboard, but a desktop does not "press" them: 98.css gives every button an
   inset bevel on :hover and an indented one on :active, and those two-class
   state selectors outrank a bare `.desktop-icon` — hence the extra class here.
   Only selection/hover highlight is feedback; nothing moves or indents. */
.desktop-icons .desktop-icon:hover,
.desktop-icons .desktop-icon:active,
.desktop-icons .desktop-icon:focus,
.desktop-icons .desktop-icon:focus-visible {
  box-shadow: none;
  outline: none;
  transform: none;
}

.desktop-icon:hover {
  background: rgba(255, 255, 255, 0.14);
}

.desktop-icon:focus-visible,
.desktop-icon.selected {
  background: rgba(0, 0, 128, 0.6);
  border-color: #fff;
  outline: none;
}

.desktop-icon img {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  image-rendering: pixelated;
}

.desktop-icon span {
  font-size: 11px;
  line-height: 1.25;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
  padding: 1px 2px;
}

/* ------------------------------------------------------------------- windows */

.window {
  position: absolute;
  display: none;
  z-index: 2;
  min-width: 260px;
  max-width: calc(100% - 16px);
  /* 98.css supplies the raised frame as four inset layers; keep them (never
     `box-shadow: none` on .window — it flattens every window) and add the hard
     2px drop shadow the era's windows cast onto the desktop. */
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf,
    inset -2px -2px grey,
    inset 2px 2px #fff,
    2px 2px 0 rgba(0, 0, 0, 0.45);
}

.window.maximized {
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf,
    inset -2px -2px grey,
    inset 2px 2px #fff;
}

.window.open {
  display: block;
}

.window > .title-bar {
  cursor: default;
}

.window > .title-bar .title-bar-text {
  cursor: move;
}

/* Title-bar icon (16x16 asset, exactly 1:1 so the pixel art stays crisp). */
.window[data-icon] > .title-bar > .title-bar-text::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  vertical-align: -3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  image-rendering: pixelated;
  /* The glyph comes from the page, which emits one rule per icon key it uses
     (see icon_title_bar_css()). One rule per key here stopped scaling once the
     whole h4w set — 1000+ keys — was imported; the folder is the fallback. */
  background-image: var(--window-icon, url("/assets/img/app-folder@16.png"));
}

.window-body {
  color: #000;
  max-height: min(60vh, 520px);
  overflow: auto;
}

/* Sunken silver panels read black on silver, never white on silver. */
.status-bar,
.status-bar-field {
  color: #000;
}

.window .window-body p:first-child {
  margin-top: 0;
}

.window .window-body ul {
  padding-inline-start: 18px;
}

.window-narrow {
  width: 320px;
}

.window-medium {
  width: 460px;
}

.window-wide {
  width: 620px;
}

/* ------------------------------------------------- welcome window (About) */

/* Layout after the Windows 95 "Welcome" dialog: a heading, then a two-column row
   with the pale-yellow tip box on the left and the action buttons stacked on the
   right, over an etched footer holding the persistence checkbox. */
.window-welcome {
  width: 520px;
}

.welcome-heading {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.2;
}

.welcome-heading-to {
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
}

.welcome-columns {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.welcome-tipbox {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  background: #ffffe0;
  color: #000;
  box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px #808080;
}

.welcome-tipbox-title {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px;
  font-weight: 700;
}

.welcome-tipbox-title img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.welcome-panel {
  min-height: 78px;
}

.welcome-tip {
  margin: 0;
}

.welcome-whats-new {
  margin: 0;
  padding-inline-start: 18px;
}

.welcome-whats-new li {
  margin-bottom: 3px;
}

.welcome-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  width: 118px;
}

.welcome-buttons button {
  width: 100%;
}

.welcome-footer {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid #808080;
  box-shadow: inset 0 1px 0 #fff;
}

/* 98.css draws the checkbox itself (input:checked + label:before/after), so the
   footer only needs the label typography — no flex wrapper. */
.welcome-footer input[type="checkbox"] + label {
  font-size: 11px;
  line-height: 13px;
}

/* A window that hosts another page in an iframe: fixed frame, the body is a
   flush black pane and the frame fills it edge to edge. Sizes are relative to
   the desktop area (the positioned ancestor), never the raw viewport, so the
   window can't overlap the taskbar on a short screen. */
.window-embed {
  width: min(1180px, 94%);
  height: min(760px, 82%);
}

.window-embed > .window-body {
  margin: 2px;
  padding: 0;
  height: calc(100% - 46px);
  max-height: none;
  overflow: hidden;
  background: #000;
}

.window-embed > .window-body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Tabular data keeps 98.css's sunken look and stays readable on small screens. */
.sunken-panel.scroll-y {
  max-height: 240px;
  overflow-y: auto;
}

table.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

table.data-table th,
table.data-table td {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid #c0c0c0;
  vertical-align: top;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

table.data-table th {
  width: 38%;
  font-weight: 700;
  color: #000;
}

/* Service rows open on a single click (desktop icons keep the double-click). */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 6px;
  background: none;
  border: 1px dotted transparent;
  box-shadow: none;
  color: #000;
  text-align: left;
  cursor: default;
}

/* Same rule as the desktop icons: a list row highlights, it never indents. */
.service-list .service-row:hover,
.service-list .service-row:active,
.service-list .service-row:focus,
.service-list .service-row:focus-visible {
  box-shadow: none;
  outline: none;
}

.service-row:hover {
  background: #dcdcdc;
}

.service-row:focus-visible {
  background: var(--brand-navy);
  color: #fff;
  outline: none;
}

.service-row img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

.service-row .service-meta {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.service-row .service-name {
  font-weight: 700;
}

.service-row .service-url {
  color: #444;
  font-size: 11px;
}

.service-row:focus-visible .service-url {
  color: #dcdcdc;
}

.status-bar-service {
  margin-top: 8px;
}

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

.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taskbar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  background: silver;
  color: #000;
  border-top: 1px solid #dfdfdf;
  box-shadow: inset 0 1px 0 #fff;
  z-index: 9000;
}

.taskbar .start-button {
  display: flex;
  align-items: center;
  gap: 5px;
  height: calc(var(--taskbar-h) - 8px);
  padding: 0 8px;
  font-weight: 700;
  flex: 0 0 auto;
}

.taskbar .start-button img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.taskbar-windows {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.taskbar-windows::-webkit-scrollbar {
  display: none;
}

.task-button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--taskbar-h) - 8px);
  padding: 0 8px;
  max-width: 168px;
  flex: 0 0 auto;
  text-align: left;
  font-weight: 400;
}

.task-button img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.task-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-button.active {
  font-weight: 700;
  box-shadow:
    inset 1px 1px #0a0a0a,
    inset -1px -1px #fff,
    inset 2px 2px grey,
    inset -2px -2px #dfdfdf;
}

.taskbar-tray {
  display: flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--taskbar-h) - 8px);
  padding: 0 8px;
  flex: 0 0 auto;
  background: silver;
  color: #000;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #fff,
    inset -2px -2px grey,
    inset 2px 2px #dfdfdf;
}

.taskbar-tray .taskbar-clock {
  font-variant-numeric: tabular-nums;
}

/* Tray speaker, next to the clock. A tray icon is not a push button: no bevel
   and no press indent (same rule as the desktop icons), just a hover highlight. */
.taskbar-tray .tray-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: calc(var(--taskbar-h) - 10px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin-right: 2px;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: default;
}

.taskbar-tray .tray-sound:hover,
.taskbar-tray .tray-sound:active,
.taskbar-tray .tray-sound:focus,
.taskbar-tray .tray-sound:focus-visible {
  box-shadow: none;
  outline: none;
}

.taskbar-tray .tray-sound:hover {
  background: rgba(0, 0, 0, 0.14);
}

.taskbar-tray .tray-sound img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

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

.start-menu {
  position: fixed;
  left: 4px;
  bottom: calc(var(--taskbar-h) + 2px);
  width: 216px;
  display: none;
  padding: 2px;
  background: silver;
  color: #000;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px #fff,
    inset -1px -1px grey,
    2px 2px 0 rgba(0, 0, 0, 0.45);
  z-index: 9500;
}

.start-menu.open {
  display: block;
}

.start-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  background: none;
  border: 0;
  box-shadow: none;
  color: #000;
  font: inherit;
  text-align: left;
  cursor: default;
}

/* Menu entries highlight on hover/focus like the real Start menu; no bevel and
   no press indent (see the desktop-icon note above). */
.start-menu .menu-item:hover,
.start-menu .menu-item:active,
.start-menu .menu-item:focus,
.start-menu .menu-item:focus-visible {
  box-shadow: none;
  outline: none;
}

.start-menu .menu-item:hover,
.start-menu .menu-item:focus-visible {
  background: var(--brand-navy);
  color: #fff;
  outline: none;
}

.start-menu .menu-item img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.start-menu .menu-sep {
  height: 0;
  margin: 3px 2px;
  border-top: 1px solid grey;
  border-bottom: 1px solid #fff;
}

.start-menu .menu-title {
  padding: 6px 8px 4px 36px;
  color: #444;
  font-size: 11px;
}

/* ---------------------------------------------------------------- responsive
 * Mirrors the Clippy framework fallback: below 768px the desktop collapses to
 * a stacked, scrollable document, windows render statically (all visible) and
 * the title-bar controls are inert because nothing needs moving or hiding.
 */

@media (max-width: 768px) {
  body {
    overflow: hidden;
  }

  /* The desktop keeps the desktop's model — a fixed screen split into an icon
     band and a window area — so on mobile a window is opened, closed, minimised
     and switched from the taskbar exactly as on the desktop, instead of every
     window being dumped onto the page at once. */
  .desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--taskbar-h);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    overflow: hidden;
  }

  .desktop-icons {
    position: static;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 2px;
    max-height: 44%;
    overflow-y: auto;
    margin: 0;
    padding: 0;
  }

  .desktop-icon {
    width: 74px;
  }

  .window-layer {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* An open window fills the window area; its body scrolls inside. border-box is
     required: with content-box the 3px frame padding is added on top of the 100%
     and the right/bottom edge gets clipped by the layer. */
  .window {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    margin: 0;
  }

  .window.open {
    display: flex;
    flex-direction: column;
  }

  .window > .title-bar {
    flex: 0 0 auto;
    pointer-events: auto;
    cursor: default;
  }

  .window > .window-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }

  .window > .status-bar {
    flex: 0 0 auto;
  }

  /* Controls are live on mobile now (close/minimise), but Maximize is a no-op
     for a window that already fills the area — so it isn't offered. */
  .window .title-bar-controls {
    display: flex;
  }

  .window .title-bar-controls button[aria-label="Maximize"],
  .window .title-bar-controls button[aria-label="Restore"] {
    display: none;
  }

  .window-embed > .window-body {
    height: auto;
  }

  .window-embed > .window-body iframe {
    height: 100%;
  }

  .taskbar-windows {
    overflow-x: auto;
  }

  .taskbar-tray {
    padding: 0 6px;
  }

  /* Bigger tap target for the tray speaker on a phone. */
  .taskbar-tray .tray-sound {
    width: 30px;
  }

  /* The Welcome window stacks: tip box on top, its buttons side by side below. */
  .window-welcome .welcome-columns {
    flex-direction: column;
  }

  .window-welcome .welcome-buttons {
    flex-direction: row;
    width: auto;
  }

  .window-welcome .welcome-buttons button {
    flex: 1 1 auto;
    width: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .window.open {
    animation: window-open 90ms steps(3, end);
  }

  @keyframes window-open {
    from {
      transform: scale(0.96);
      opacity: 0.6;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
}

@media print {
  .taskbar,
  .start-menu {
    display: none !important;
  }
}