/* ============================================================
   Windows 98 Disk Defragmenter Simulator — classic chrome
   Palette and bevel geometry follow the Win98 UI conventions.
   ============================================================ */

:root {
  /* chrome */
  --face:        #c0c0c0;
  --face-light:  #dfdfdf;
  --white:       #ffffff;
  --shadow-gray: #808080;
  --near-black:  #0a0a0a;
  --title-a:     #000080;
  --title-b:     #1084d0;
  --desktop:     #008080;
  --disabled-ink:#808080;

  /* cluster states (grid and legend share the same variables) */
  --c-free:         #ffffff;
  --c-unoptimized:  #6ae5fb;
  --c-optimized:    #0208aa;
  --c-reading:      #64d940;
  --c-writing:      #ea3a2e;

  /* geometry */
  --cell: 9px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  color: var(--near-black);
  background: var(--desktop);
}

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

.desktop {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 12px;
}

/* ---------- window frame ---------- */

.window {
  position: relative;
  background: var(--face);
  padding: 3px;
  box-shadow:
    inset -1px -1px var(--near-black),
    inset  1px  1px var(--face-light),
    inset -2px -2px var(--shadow-gray),
    inset  2px  2px var(--white);
  width: max-content;
  max-width: calc(100vw - 24px);
  cursor: default;
  user-select: none;
}

.window.maximized {
  position: fixed;
  inset: 12px;
  width: auto;
  max-width: none;
  z-index: 40;
  display: flex;
  flex-direction: column;
}

.window.minimized .menubar,
.window.minimized .window-body { display: none; }

.window.closed { display: none; }

/* ---------- title bar ---------- */

.titlebar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 2px 2px 2px 3px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
}

.titlebar-icon { display: flex; }
.titlebar-icon svg { display: block; }

.titlebar-text {
  flex: 1;
  margin: 0;
  font-size: 11px;
  font-weight: bold;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titlebar-buttons { display: flex; gap: 2px; }

.tb-btn {
  width: 16px;
  height: 14px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--face);
  border: 0;
  color: var(--near-black);
  box-shadow:
    inset -1px -1px var(--near-black),
    inset  1px  1px var(--white),
    inset -2px -2px var(--shadow-gray),
    inset  2px  2px var(--face-light);
}

.tb-btn:active {
  box-shadow:
    inset  1px  1px var(--near-black),
    inset -1px -1px var(--white),
    inset  2px  2px var(--shadow-gray),
    inset -2px -2px var(--face-light);
}

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

.menubar {
  display: flex;
  padding: 1px 0 2px;
}

.menu-btn {
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 2px 7px;
}

.menu-btn[aria-expanded="true"] {
  background: var(--title-a);
  color: var(--white);
}

.menu-panel {
  position: absolute;
  z-index: 30;
  min-width: 170px;
  background: var(--face);
  padding: 2px;
  box-shadow:
    inset -1px -1px var(--near-black),
    inset  1px  1px var(--white),
    inset -2px -2px var(--shadow-gray),
    inset  2px  2px var(--face-light);
}

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 3px 20px 3px 18px;
  white-space: nowrap;
}

.menu-item:hover:not(:disabled) {
  background: var(--title-a);
  color: var(--white);
}

.menu-item:disabled {
  color: var(--disabled-ink);
  text-shadow: 1px 1px 0 var(--white);
}

/* ---------- window body ---------- */

.window-body { padding: 10px 12px 12px; }

.details {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* map */

.map-frame {
  background: var(--white);
  padding: 3px;
  box-shadow:
    inset -1px -1px var(--white),
    inset  1px  1px var(--shadow-gray),
    inset -2px -2px var(--face-light),
    inset  2px  2px var(--near-black);
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 42), var(--cell));
  gap: 1px;
  background: var(--face);
}

.cl { width: var(--cell); height: var(--cell); }

.cl-free         { background: var(--c-free); }
.cl-unoptimized  { background: var(--c-unoptimized); }
.cl-optimized    { background: var(--c-optimized); }
.cl-unmovable    { background: var(--c-free); box-shadow: inset 0 0 0 1px var(--near-black); }

@keyframes read-blink {
  0%, 49.9%  { background-color: var(--c-reading); }
  50%, 100%  { background-color: var(--c-unoptimized); }
}

@keyframes write-blink {
  0%, 49.9%  { background-color: var(--c-writing); }
  50%, 100%  { background-color: var(--c-optimized); }
}

.cl-reading { animation: read-blink  300ms steps(1, end) infinite; }
.cl-writing { animation: write-blink 300ms steps(1, end) infinite; }

.map-grid.is-paused .cl-reading,
.map-grid.is-paused .cl-writing { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .cl-reading  { animation: none; background: var(--c-reading); }
  .cl-writing  { animation: none; background: var(--c-writing); }
}

/* legend */

.legend { padding-top: 1px; }

.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  max-width: 190px;
}

.chip {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  box-shadow:
    inset  1px  1px var(--shadow-gray),
    inset -1px -1px var(--white);
}

.chip-unoptimized { background: var(--c-unoptimized); }
.chip-optimized   { background: var(--c-optimized); }
.chip-free        { background: var(--c-free); }
.chip-unmovable   {
  background: var(--c-free);
  box-shadow:
    inset  1px  1px var(--shadow-gray),
    inset -1px -1px var(--white),
    inset  0    0    0 1px var(--near-black);
}
.chip-reading     { background: var(--c-reading); }
.chip-writing     { background: var(--c-writing); }

/* ---------- progress bar (classic chunky segments) ---------- */

.progress-frame {
  height: 18px;
  margin-top: 10px;
  padding: 2px;
  background: var(--face);
  box-shadow:
    inset  1px  1px var(--shadow-gray),
    inset -1px -1px var(--white),
    inset  2px  2px var(--near-black),
    inset -2px -2px var(--face-light);
}

/* Blocks are drawn by a repeating gradient so the trough shows between them. */
.progress-fill {
  height: 100%;
  width: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--title-a) 0, var(--title-a) 8px,
    transparent    8px, transparent   10px
  );
  background-position: left center;
  background-repeat: repeat-x;
}

/* compact (details hidden) view */

.window.no-details { min-width: 415px; }

.compact-progress {
  margin: 2px 0 0;
  text-align: center;
  font-weight: bold;
}

/* ---------- command buttons ---------- */

.button-row {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.cmd-btn {
  min-width: 75px;
  min-height: 23px;
  font: inherit;
  color: var(--near-black);
  background: var(--face);
  border: 0;
  padding: 2px 10px 3px;
  box-shadow:
    inset -1px -1px var(--near-black),
    inset  1px  1px var(--white),
    inset -2px -2px var(--shadow-gray),
    inset  2px  2px var(--face-light);
}

.cmd-btn:not(:disabled):active {
  padding: 3px 9px 2px 11px;
  box-shadow:
    inset  1px  1px var(--near-black),
    inset -1px -1px var(--white),
    inset  2px  2px var(--shadow-gray),
    inset -2px -2px var(--face-light);
}

.cmd-btn:disabled {
  color: var(--disabled-ink);
  text-shadow: 1px 1px 0 var(--white);
}

/* ---------- under-construction banner (site mode) ---------- */

.uc-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 620px;
}

.uc-sign {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--face);
  padding: 5px 16px 5px 10px;
  box-shadow:
    inset -1px -1px var(--near-black),
    inset  1px  1px var(--white),
    inset -2px -2px var(--shadow-gray),
    inset  2px  2px var(--face-light);
}

.uc-icon { display: block; }

.uc-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--title-a);
  letter-spacing: 0.5px;
}

.uc-sitename {
  margin: 0;
  color: var(--white);
  font-size: 13px;
  font-weight: bold;
}

.uc-message {
  margin: 0;
  color: var(--white);
  max-width: 560px;
}

/* focus rings (classic dotted rect) */

.cmd-btn:focus-visible,
.menu-btn:focus-visible,
.tb-btn:focus-visible,
.menu-item:focus-visible {
  outline: 1px dotted var(--near-black);
  outline-offset: -4px;
}

.menu-item:focus-visible { outline-offset: -3px; }

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

.statusbar {
  display: flex;
  gap: 2px;
  margin-top: 12px;
}

.status-cell {
  padding: 2px 6px;
  box-shadow:
    inset  1px  1px var(--shadow-gray),
    inset -1px -1px var(--white);
  white-space: nowrap;
}

.status-msg { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.status-pct { min-width: 96px; text-align: right; }

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

.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
}

.dialog {
  width: 350px;
  max-width: calc(100vw - 32px);
  background: var(--face);
  padding: 3px;
  box-shadow:
    inset -1px -1px var(--near-black),
    inset  1px  1px var(--face-light),
    inset -2px -2px var(--shadow-gray),
    inset  2px  2px var(--white);
}

.dialog-titlebar {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 2px 2px 2px 5px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
}

.dialog-titlebar h2 {
  margin: 0;
  font-size: 11px;
  font-weight: bold;
  color: var(--white);
}

.dialog-body {
  display: flex;
  gap: 14px;
  padding: 16px 14px 14px;
}

.dialog-icon { flex: 0 0 32px; }
.dialog-icon svg { display: block; }

/* legend shown inside the Legend dialog */
.dialog-body .legend { padding-top: 0; }
.dialog-body .legend-row { max-width: none; margin-bottom: 7px; }
.dialog-body .legend-row:last-child { margin-bottom: 0; }

.dialog-text {
  margin: 0;
  line-height: 1.45;
  overflow-wrap: break-word;
  white-space: pre-line;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 14px 14px;
}

/* ---------- selftest report (dev harness, ?selftest=1) ---------- */

.selftest-report {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(680px, calc(100vw - 24px));
  max-height: 72vh;
  overflow: auto;
  background: var(--white);
  border: 1px solid var(--near-black);
  padding: 8px 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

.selftest-report .pass { color: #0a7a0a; }
.selftest-report .fail { color: #b00000; font-weight: bold; }

.noscript-note {
  margin: 40vh auto 0;
  max-width: 420px;
  text-align: center;
  color: var(--white);
  font-size: 13px;
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  :root { --cell: 6px; }

  .details { flex-direction: column; }
  .legend-row { max-width: none; }

  .window.no-details { min-width: 280px; }

  .cmd-btn { min-width: 64px; padding: 2px 6px 3px; }
  .button-row { flex-wrap: wrap; }
  .uc-title { font-size: 13px; }
}