/* 98.css — handwritten Windows 98 chrome for dsizzle.exe
   (modelled on jdan/98.css, MIT; rewritten here so the site has no external deps) */

:root {
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;
  --desktop-teal: #008080;

  --border-raised-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);
  --border-window-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
  --border-field: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow),
                  inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);
  --border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);

  --font: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, "Segoe UI", Arial, sans-serif;
  --mono: "Perfect DOS VGA 437", "Fixedsys", "Lucida Console", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.3;
  color: #000;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

img { image-rendering: pixelated; image-rendering: crisp-edges; }

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

.window {
  position: absolute;
  background: var(--surface);
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  padding: 3px;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  min-height: 60px;
}

.title-bar {
  background: linear-gradient(90deg, var(--dialog-gray), var(--dialog-gray-light));
  padding: 3px 2px 3px 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  touch-action: none;
  flex: 0 0 auto;
}
.window.active > .title-bar {
  background: linear-gradient(90deg, var(--dialog-blue), var(--dialog-blue-light));
}
.title-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.title-bar-text {
  font-weight: bold;
  color: #fff;
  letter-spacing: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}
.window:not(.active) > .title-bar .title-bar-text { color: var(--surface); }

.title-bar-controls { display: flex; gap: 0; flex: 0 0 auto; }
.title-bar-controls button {
  width: 16px;
  height: 14px;
  min-width: 16px;
  min-height: 14px;
  padding: 0;
  margin: 0 0 0 2px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.title-bar-controls button[aria-label="Close"] { margin-left: 4px; }
.title-bar-controls button[aria-label="Minimize"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2'%3E%3Crect width='6' height='2' fill='%23000'/%3E%3C/svg%3E");
  background-position: 4px 9px;
}
.title-bar-controls button[aria-label="Maximize"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 0h9v9H0z M1 2h7v6H1z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.window.maximized .title-bar-controls button[aria-label="Maximize"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M2 0h8v7H8V3H2z M0 3h7v7H0z M1 5h5v4H1z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.title-bar-controls button[aria-label="Close"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0h2l2 2 2-2h2v1L5.5 3.5 8 6v1H6L4 5 2 7H0V6l2.5-2.5L0 1z' fill='%23000'/%3E%3C/svg%3E");
}
.title-bar-controls button:active { background-position: center; }

.window-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 3px 0 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M10 2h2v2h-2zM10 6h2v2h-2zM6 6h2v2H6zM10 10h2v2h-2zM6 10h2v2H6zM2 10h2v2H2z' fill='%23808080'/%3E%3Cpath d='M11 3h1v1h-1zM11 7h1v1h-1zM7 7h1v1H7zM11 11h1v1h-1zM7 11h1v1H7zM3 11h1v1H3z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right bottom;
}

.status-bar {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.status-bar-field {
  box-shadow: var(--border-status-field);
  padding: 2px 4px;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 18px;
}
.status-bar-field.fixed { flex: 0 0 auto; }

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

button, .button {
  font-family: var(--font);
  font-size: 11px;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  border: none;
  border-radius: 0;
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
  color: #000;
  cursor: default;
  user-select: none;
}
button:not(:disabled):active, button.pressed {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  padding: 2px 11px 0 13px;
}
button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
button:disabled { color: var(--button-shadow); text-shadow: 1px 1px 0 var(--button-highlight); }
button.default { box-shadow: inset 0 0 0 1px #000, var(--border-raised-outer), var(--border-raised-inner); }
button.small { min-width: 0; min-height: 0; padding: 0 4px; }

input[type="text"], input[type="number"], input[type="search"], textarea, select {
  font-family: var(--font);
  font-size: 11px;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: var(--border-field);
  padding: 3px 4px;
  color: #000;
  outline: none;
}
textarea { font-family: var(--mono); resize: none; }
input[type="text"]:focus, textarea:focus { outline: none; }

input[type="radio"], input[type="checkbox"] {
  margin: 0 6px 0 0;
  vertical-align: middle;
}
label { user-select: none; }

fieldset {
  border: none;
  box-shadow: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow),
              inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
  padding: 10px;
  margin: 0;
}
legend { background: var(--surface); padding: 0 2px; }

a { color: var(--link-blue); }

.sunken-panel {
  box-shadow: var(--border-field);
  background: #fff;
  overflow: auto;
}

/* ---------- menu bar ---------- */

.menu-bar {
  display: flex;
  flex: 0 0 auto;
  padding: 1px 0;
  user-select: none;
}
.menu-bar > .menu-item {
  padding: 2px 6px;
  position: relative;
}
.menu-bar > .menu-item > span:first-letter { text-decoration: underline; }
.menu-bar > .menu-item:hover, .menu-bar > .menu-item.open {
  background: var(--dialog-blue);
  color: #fff;
}
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surface);
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  padding: 3px;
  min-width: 140px;
  z-index: 50;
  color: #000;
  display: none;
}
.menu-item.open > .menu { display: block; }
.menu > div {
  padding: 3px 20px 3px 24px;
  white-space: nowrap;
  position: relative;
}
.menu > div:hover { background: var(--dialog-blue); color: #fff; }
.menu > div.checked::before {
  content: "";
  position: absolute;
  left: 8px; top: 6px;
  width: 6px; height: 3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.menu > div.disabled { color: var(--button-shadow); text-shadow: 1px 1px 0 var(--button-highlight); }
.menu > div.disabled:hover { background: none; color: var(--button-shadow); }
.menu > hr {
  border: none;
  border-top: 1px solid var(--button-shadow);
  border-bottom: 1px solid var(--button-highlight);
  margin: 3px 1px;
}

/* ---------- tree / list ---------- */

.tree { list-style: none; margin: 0; padding: 2px; }
.tree ul { list-style: none; margin: 0; padding-left: 16px; }
.tree li { white-space: nowrap; }
.tree .node {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 2px;
  cursor: default;
}
.tree .node img { width: 16px; height: 16px; }
.tree .node.selected { background: var(--dialog-blue); color: #fff; }
.tree .twisty {
  display: inline-block;
  width: 9px; height: 9px;
  border: 1px solid var(--button-shadow);
  background: #fff;
  margin-right: 3px;
  font-size: 9px;
  line-height: 7px;
  text-align: center;
  color: #000;
  flex: 0 0 9px;
}
.tree li.collapsed > ul { display: none; }

table.list {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  user-select: none;
}
table.list th {
  text-align: left;
  font-weight: normal;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  padding: 2px 6px;
  position: sticky;
  top: 0;
}
table.list td {
  padding: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
table.list tr.selected td { background: var(--dialog-blue); color: #fff; }
table.list td img { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }

/* ---------- dialog ---------- */

.window.dialog { min-width: 240px; }
.dialog-content {
  display: flex;
  gap: 12px;
  padding: 10px 12px 8px;
  align-items: flex-start;
}
.dialog-content > img { width: 32px; height: 32px; flex: 0 0 32px; }
.dialog-content .text { flex: 1 1 auto; white-space: pre-wrap; line-height: 1.4; }
.dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px 8px;
}

/* ---------- scrollbars (webkit) ---------- */

::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background: repeating-conic-gradient(var(--surface) 0 25%, #fff 0 50%) 0 0 / 2px 2px;
}
::-webkit-scrollbar-thumb {
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}
::-webkit-scrollbar-button {
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  width: 16px; height: 16px;
  display: block;
}
::-webkit-scrollbar-corner { background: var(--surface); }