/* ==========================================================================
   Win95 base: palette, bevels, buttons, windows, form controls, scrollbars
   ========================================================================== */
:root {
  --face: #c0c0c0;
  --light: #dfdfdf;
  --hilight: #ffffff;
  --shadow: #808080;
  --dark: #0a0a0a;
  --navy: #000080;
  --teal: #008080;

  --font: "MS Sans Serif", "Microsoft Sans Serif", "Pixelated MS Sans Serif", Tahoma, Geneva, "Segoe UI", sans-serif;
  --mono: Fixedsys, "Fixedsys Excelsior 3.01", "Lucida Console", Consolas, "Courier New", monospace;
  --fs: 12px;
  --taskbar-h: 30px;
  --title-h: 18px;
  --tb-w: 16px;
  --tb-h: 14px;

  --raised: inset -1px -1px var(--dark), inset 1px 1px var(--hilight), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  --pressed: inset -1px -1px var(--hilight), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
  --frame: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hilight);
  --sunken: inset -1px -1px var(--hilight), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  --thin-in: inset -1px -1px var(--hilight), inset 1px 1px var(--shadow);
  --thin-out: inset 1px 1px var(--hilight), inset -1px -1px var(--shadow);
  --dither: conic-gradient(var(--face) 25%, var(--hilight) 0 50%, var(--face) 0 75%, var(--hilight) 0) 0 0 / 2px 2px;

  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='22'%3E%3Cpath d='M.5.5v16l4-4 3.2 7 2.6-1.2-3.1-6.8h5.5z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E") 0 0, default;
}

@media (pointer: coarse) {
  :root {
    --fs: 14px;
    --taskbar-h: 42px;
    --title-h: 28px;
    --tb-w: 26px;
    --tb-h: 24px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font: var(--fs)/1.4 var(--font);
  color: #000;
  background: #000;
  cursor: var(--cursor);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.busy, body.busy * { cursor: progress !important; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: inherit; }
a { color: #0000ff; cursor: pointer; }
p { margin: 0 0 .8em; }
u { text-decoration: underline; text-underline-offset: 1px; }

.selectable, .selectable * { -webkit-user-select: text; user-select: text; cursor: text; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  --py: 3px;
  display: inline-block;
  min-width: 75px;
  min-height: 23px;
  padding: var(--py) 12px;
  border: 0;
  border-radius: 0;
  background: var(--face);
  box-shadow: var(--raised);
  color: #000;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
}
.btn:not(:disabled):active {
  box-shadow: var(--pressed);
  padding: calc(var(--py) + 1px) 11px calc(var(--py) - 1px) 13px;
}
@media (pointer: coarse) { .btn { --py: 8px; } }
.btn:focus { outline: none; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn.default {
  box-shadow: inset 0 0 0 1px var(--dark), inset -2px -2px var(--dark), inset 2px 2px var(--hilight),
              inset -3px -3px var(--shadow), inset 3px 3px var(--light);
}
.btn.default:not(:disabled):active { box-shadow: inset 0 0 0 1px var(--dark), inset 0 0 0 2px var(--shadow); }
.btn:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hilight); }

/* ---- Windows ---------------------------------------------------------------- */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--frame);
  outline: none;
}

.title-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 3px;
  height: var(--title-h);
  padding: 0 2px 0 3px;
  background: var(--shadow);
  color: var(--face);
  font-weight: bold;
  touch-action: none;
}
.window.active .title-bar { background: var(--navy); color: #fff; }
.title-icon { flex: none; width: 16px; height: 16px; }
.title-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.title-controls { flex: none; display: flex; }

.tb-btn {
  width: var(--tb-w);
  height: var(--tb-h);
  padding: 0;
  border: 0;
  background: var(--face) no-repeat center;
  box-shadow: var(--raised);
}
.tb-btn:active { box-shadow: var(--pressed); }
.tb-btn:focus { outline: none; }
.tb-max { margin-right: 2px; }
.tb-min {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2'%3E%3Cpath d='M0 0h6v2H0z'/%3E%3C/svg%3E");
  background-position: center calc(50% + 3px);
}
.tb-max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath fill-rule='evenodd' d='M0 0h9v9H0zM1 2v6h7V2z'/%3E%3C/svg%3E");
}
.tb-max.is-max {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9'%3E%3Cpath d='M2 0h6v6H7V2H3v1H2z'/%3E%3Cpath fill-rule='evenodd' d='M0 3h6v6H0zM1 5v3h4V5z'/%3E%3C/svg%3E");
}
.tb-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0h2v1H0zM6 0h2v1H6zM1 1h2v1H1zM5 1h2v1H5zM2 2h4v1H2zM3 3h2v1H3zM2 4h4v1H2zM1 5h2v1H1zM5 5h2v1H5zM0 6h2v1H0zM6 6h2v1H6z'/%3E%3C/svg%3E");
}

.window-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  overflow: auto;
}

.window.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.window.maximized .resize-grip { display: none; }

.resize-grip {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  touch-action: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M11 1 1 11M11 5 5 11M11 9 9 11' stroke='%23808080'/%3E%3Cpath d='M11 2 2 11M11 6 6 11M11 10 10 11' stroke='%23fff'/%3E%3C/svg%3E") no-repeat right bottom;
}
/* Bigger grab area for fingers (the drawn grip stays the same size) */
@media (pointer: coarse) {
  .resize-grip { right: 0; bottom: 0; width: 20px; height: 20px; background-position: right 3px bottom 3px; }
}

/* ---- Form controls ---------------------------------------------------------------- */
.field,
input[type="text"],
input[type="email"],
textarea,
select {
  min-height: 21px;
  padding: 3px 4px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: var(--sunken);
  color: #000;
  outline: none;
}
input[type="text"], input[type="email"], textarea { cursor: text; -webkit-user-select: text; user-select: text; }
textarea { resize: none; }
select option:checked { background: var(--navy); color: #fff; }
@media (pointer: coarse) {
  input[type="text"], input[type="email"], textarea, select { font-size: 16px; }
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 13px;
  height: 13px;
  margin: 0;
  background: #fff no-repeat center;
}
input[type="checkbox"] { box-shadow: var(--sunken); }
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M6 0h1v1H6zM5 1h2v1H5zM0 2h1v1H0zM4 2h3v1H4zM0 3h2v1H0zM3 3h3v1H3zM0 4h5v1H0zM1 5h3v1H1zM2 6h1v1H2z'/%3E%3C/svg%3E");
}
input[type="radio"] {
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='5.5' fill='%23fff'/%3E%3Cpath d='M1 8.5A5.5 5.5 0 0 1 8.5 1' fill='none' stroke='%23808080'/%3E%3Cpath d='M2 8A4.5 4.5 0 0 1 8 2' fill='none' stroke='%230a0a0a'/%3E%3Cpath d='M3.5 11A5.5 5.5 0 0 0 11 3.5' fill='none' stroke='%23fff'/%3E%3Cpath d='M4 10A4.5 4.5 0 0 0 10 4' fill='none' stroke='%23dfdfdf'/%3E%3C/svg%3E") no-repeat center;
}
input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='5.5' fill='%23fff'/%3E%3Cpath d='M1 8.5A5.5 5.5 0 0 1 8.5 1' fill='none' stroke='%23808080'/%3E%3Cpath d='M2 8A4.5 4.5 0 0 1 8 2' fill='none' stroke='%230a0a0a'/%3E%3Cpath d='M3.5 11A5.5 5.5 0 0 0 11 3.5' fill='none' stroke='%23fff'/%3E%3Cpath d='M4 10A4.5 4.5 0 0 0 10 4' fill='none' stroke='%23dfdfdf'/%3E%3Ccircle cx='6' cy='6' r='2'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible + span,
input[type="radio"]:focus-visible + span { outline: 1px dotted #000; }
@media (pointer: coarse) {
  input[type="checkbox"], input[type="radio"] { transform: scale(1.35); margin: 2px; }
}

.check, .radio {
  display: flex;
  align-items: center;
  gap: 7px;
}
.radio { align-items: flex-start; }
.radio input { margin-top: 2px; }

.group {
  min-width: 0;
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--shadow);
  box-shadow: inset 1px 1px var(--hilight), 1px 1px var(--hilight);
}
/* The etched edge is a box-shadow, which a legend doesn't cut through on its own:
   give the legend the face colour so it breaks the border like in Win95 */
.group > legend {
  position: relative;
  margin-left: 2px;
  padding: 0 4px;
  background: var(--face);
  line-height: 1.2;
}

.sunken { background: #fff; box-shadow: var(--sunken); }

/* ---- Tabs ------------------------------------------------------------------- */
.tabbed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tabs { position: relative; z-index: 1; flex: none; display: flex; padding-left: 2px; }
/* Same bevel order as the panel frame (light outside, white inside) so the edges join up.
   The selected tab grows 2px left/right/up and 2px down over the panel's top edge;
   with the strip's 2px left padding, a selected first tab lines up with the panel's left edge. */
.tab {
  position: relative;
  margin-top: 2px;
  padding: 2px 10px 3px;
  border: 0;
  border-radius: 2px 2px 0 0;
  background: var(--face);
  box-shadow: inset -1px 0 var(--dark), inset 1px 1px var(--light), inset -2px 0 var(--shadow), inset 2px 2px var(--hilight);
}
.tab[aria-selected="true"] { z-index: 2; margin: 0 -2px -2px; padding: 3px 12px 6px; }
.tab:focus { outline: none; }
.tab:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.tab:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hilight); }
.tab-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow: auto;
  background: var(--face);
  box-shadow: var(--frame);
}

/* ---- List view ------------------------------------------------------------------ */
.listview {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 2px;
  background: #fff;
  box-shadow: var(--sunken);
}
.listview table { width: 100%; border-collapse: collapse; }
.listview th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2px 6px;
  background: var(--face);
  box-shadow: var(--raised);
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}
.listview td { padding: 3px 6px; vertical-align: top; }
.listview td:first-child { white-space: nowrap; }
.listview td img { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }

/* ---- Bars ------------------------------------------------------------------------- */
.menubar { flex: none; display: flex; flex-wrap: wrap; padding: 0 0 2px; }
.menubar > span, .menubar-btn { padding: 2px 7px; border: 0; background: none; }
.menubar-btn:active, .menubar-btn:focus-visible { box-shadow: var(--thin-in); outline: none; }

.toolbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 2px;
  margin-bottom: 2px;
  box-shadow: inset 0 1px var(--hilight), inset 0 -1px var(--shadow), inset 1px 0 var(--hilight), inset -1px 0 var(--shadow);
}
.tool-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 50px;
  padding: 3px 6px;
  border: 0;
  background: none;
  white-space: nowrap;
}
.tool-btn img { width: 20px; height: 20px; }
.tool-btn:hover:not(:disabled) { box-shadow: var(--thin-out); }
.tool-btn:active:not(:disabled) { box-shadow: var(--thin-in); }
.tool-btn:focus { outline: none; }
.tool-btn:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.tool-btn:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hilight); }
.tool-btn:disabled img { filter: grayscale(1); opacity: .5; }

.statusbar { flex: none; display: flex; gap: 2px; margin-top: 2px; }
.statusbar > * {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 5px;
  box-shadow: var(--thin-in);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.statusbar > :last-child:not(:first-child) { flex: 0 1 auto; padding-right: 16px; }

.divider {
  height: 2px;
  margin: 6px 0;
  border: 0;
  box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--hilight);
}

.progress { height: 20px; padding: 2px; background: var(--face); box-shadow: var(--thin-in); }
.progress-fill {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--navy) 0 9px, transparent 9px 11px);
}

.dialog-buttons { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dialog-buttons.centered { justify-content: center; }
.pad { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 8px; }

/* ---- Scrollbars (Chromium / Safari) -------------------------------------------------- */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--dither); }
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--raised); }
::-webkit-scrollbar-corner { background: var(--face); }
::-webkit-scrollbar-button:single-button {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--face) no-repeat center;
  box-shadow: var(--raised);
}
::-webkit-scrollbar-button:single-button:active { box-shadow: var(--pressed); }
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E");
}
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--face) #dfdfdf; }
}