/* Windows 98 look. No external assets: only this file is served before sign-in. */
:root {
  --desktop: #008080;
  --face: #c0c0c0;
  --light: #dfdfdf;
  --lighter: #ffffff;
  --shadow: #808080;
  --dark: #0a0a0a;
  --title-a: #000080;
  --title-b: #1084d0;
  --title-text: #ffffff;
  --text: #000000;
  --disabled: #808080;
  --field: #ffffff;
  --select: #000080;
  --font: "MS Sans Serif", "Pixelated MS Sans Serif", Tahoma, "Segoe UI", Arial, sans-serif;

  /* Classic two-pixel bevels */
  --raised: inset -1px -1px var(--dark), inset 1px 1px var(--lighter), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  --sunken: inset -1px -1px var(--lighter), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  --sunken-thin: inset -1px -1px var(--lighter), inset 1px 1px var(--shadow);
  --pressed: inset 1px 1px var(--dark), inset -1px -1px var(--lighter), inset 2px 2px var(--shadow), inset -2px -2px var(--light);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--desktop); color: var(--text);
  font: 11px/1.3 var(--font); -webkit-font-smoothing: none; font-smooth: never;
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
button, input { font: inherit; color: inherit; }

/* Desktop */
.desktop { position: fixed; inset: 0 0 28px 0; padding: 8px; }
.icons {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 6px 4px; height: 100%;
}
a.app {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 76px; padding: 2px 0;
  color: #fff; text-decoration: none; text-align: center; outline: none;
}
a.app .icon { width: 32px; height: 32px; image-rendering: pixelated; }
a.app .icon svg { width: 32px; height: 32px; shape-rendering: crispEdges; display: block; }
a.app .label {
  padding: 1px 2px; line-height: 1.2; max-width: 76px;
  text-shadow: 1px 1px 0 #000; border: 1px dotted transparent;
}
a.app:hover .label, a.app:focus-visible .label { background: var(--select); text-shadow: none; }
a.app:focus-visible .label { border-color: #ffff00; }
a.app:focus-visible .icon, a.app:hover .icon { filter: brightness(.8) sepia(1) hue-rotate(190deg) saturate(3); }

/* Taskbar */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 28px; background: var(--face);
  box-shadow: inset 0 1px var(--lighter), inset 0 2px var(--light);
  display: flex; align-items: center; gap: 4px; padding: 2px 2px 2px 2px; z-index: 20;
}
.start {
  height: 22px; padding: 0 6px 0 3px; background: var(--face); border: 0; box-shadow: var(--raised);
  display: inline-flex; align-items: center; gap: 4px; font-weight: bold; cursor: default;
}
.start:active, .start[aria-expanded="true"] { box-shadow: var(--pressed); padding: 1px 5px 0 4px; }
.start:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.start svg { width: 16px; height: 14px; display: block; }
.divider { width: 2px; height: 22px; box-shadow: inset 1px 0 var(--shadow), inset -1px 0 var(--lighter); margin: 0 2px; }
.quick { display: flex; gap: 2px; }
.quick a { display: grid; place-items: center; width: 22px; height: 22px; }
.quick a:hover { box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--lighter); }
.quick svg { width: 16px; height: 16px; display: block; shape-rendering: crispEdges; }
.tray {
  margin-left: auto; height: 22px; padding: 0 8px 0 6px; display: flex; align-items: center; gap: 6px;
  box-shadow: var(--sunken-thin);
}
.tray svg { width: 16px; height: 16px; display: block; shape-rendering: crispEdges; }
.clock { font-variant-numeric: tabular-nums; }

/* Start menu */
.menu {
  position: fixed; left: 2px; bottom: 28px; z-index: 30; display: flex; background: var(--face);
  box-shadow: var(--raised); padding: 3px;
}
.menu[hidden] { display: none; }
.banner {
  width: 21px; background: linear-gradient(to top, var(--title-b), var(--title-a)); color: var(--face);
  writing-mode: vertical-rl; transform: rotate(180deg); font-weight: bold; font-size: 15px; letter-spacing: 1px;
  padding: 6px 2px; display: flex; align-items: center; justify-content: flex-start;
}
.banner b { color: #fff; }
.menu ul { list-style: none; margin: 0; padding: 0; min-width: 160px; }
.menu li { display: block; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 12px 4px 6px; height: 32px;
  color: var(--text); text-decoration: none; background: none; border: 0; text-align: left; cursor: default;
}
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--select); color: #fff; outline: none; }
.menu svg { width: 24px; height: 24px; flex: none; shape-rendering: crispEdges; }
.menu li.sep { height: 2px; margin: 2px 1px; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--lighter); }

/* Window / dialog (login) */
body.login { display: grid; place-items: center; padding: 16px; }
.window { background: var(--face); box-shadow: var(--raised); padding: 3px; width: 100%; max-width: 400px; }
.titlebar {
  display: flex; align-items: center; gap: 4px; height: 18px; padding: 2px 3px;
  background: linear-gradient(to right, var(--title-a), var(--title-b)); color: var(--title-text); font-weight: bold;
}
.titlebar .title { flex: 1; padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar .controls { display: flex; gap: 2px; }
.titlebar .controls span {
  width: 16px; height: 14px; background: var(--face); box-shadow: var(--raised); color: #000;
  display: grid; place-items: center; font: bold 9px/1 var(--font);
}
.body { padding: 12px 10px 10px; display: grid; grid-template-columns: 32px 1fr; gap: 10px 12px; align-items: start; }
.body > svg { width: 32px; height: 32px; grid-row: 1 / span 2; shape-rendering: crispEdges; }
.body p { margin: 0 0 4px; }
.fields { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.fields label { white-space: nowrap; }
.fields label u { text-decoration: underline; }
.fields input {
  width: 100%; height: 21px; padding: 2px 4px; border: 0; background: var(--field); box-shadow: var(--sunken);
  user-select: text; -webkit-user-select: text;
}
.fields input:focus { outline: none; }
.buttons { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.btn {
  min-width: 75px; height: 23px; padding: 0 10px; background: var(--face); border: 0; box-shadow: var(--raised); cursor: default;
}
.btn.default { box-shadow: var(--raised), 0 0 0 1px #000; }
.btn:active { box-shadow: var(--pressed); }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.error { grid-column: 1 / -1; margin: 0; color: #000; display: flex; align-items: center; gap: 8px; }
.error svg { width: 16px; height: 16px; flex: none; }

/* Small screens */
@media (max-width: 480px) {
  .desktop { padding: 6px; }
  .icons { flex-direction: row; align-content: flex-start; gap: 10px 2px; }
  a.app { width: 72px; }
  .quick, .divider.q { display: none; }
  .body { grid-template-columns: 1fr; }
  .body > svg { display: none; }
  .fields { grid-template-columns: 1fr; gap: 4px; }
}
@media (hover: none) {
  a.app:hover .label { background: none; text-shadow: 1px 1px 0 #000; }
  a.app:hover .icon { filter: none; }
}