/* ==== Windows 98 mode ====
   Everything here is scoped under .mode-win98, .taskbar/.start-*, or the
   Win98 system-overlay classes (which may appear in either mode while a
   switch is animating). Base chrome shared with Mac mode stays in style.css. */

/* ---- The four-pane flag logo (boot screen + Start button) ---- */
.w98-flag {
  display: grid; grid-template-columns: 13px 13px; grid-template-rows: 13px 13px;
  gap: 2px; transform: skewY(-8deg); flex: none;
}
.w98-flag i { display: block; }
.w98-flag i:nth-child(1) { background: #f35325; }
.w98-flag i:nth-child(2) { background: #81bc06; }
.w98-flag i:nth-child(3) { background: #05a6f0; }
.w98-flag i:nth-child(4) { background: #ffba08; }

/* ---- Boot screen ---- */
.sys-boot98 { background: #000; }
.boot98 { display: flex; flex-direction: column; align-items: center; gap: 44px; }
.boot98-logo {
  display: flex; align-items: center; gap: 12px;
  color: #fff; font-size: 30px; font-family: Tahoma, "Segoe UI", sans-serif;
}
.boot98-logo b { font-weight: bold; }
.boot98-98 { font-weight: bold; font-size: 20px; vertical-align: super; margin-left: 2px; }
.boot98-bar { width: 260px; height: 12px; border: 1px solid #555; overflow: hidden; }
.boot98-fill {
  height: 100%; width: 40%;
  background: repeating-linear-gradient(90deg, #1084d0 0 12px, #000080 12px 24px);
  animation: boot98Slide 1.4s linear infinite;
}
@keyframes boot98Slide { from { transform: translateX(-110%); } to { transform: translateX(280%); } }

/* ---- Shutdown screen ---- */
.sys-shutdown98 { background: #000; }
.shutdown98-msg {
  color: #f8a01a; font-size: 26px; font-weight: bold; text-align: center;
  font-family: "Times New Roman", serif; line-height: 1.4;
}

/* ---- Desktop ---- */
#stage.mode-win98 { background: #008080; font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif; }
#stage.mode-win98 .menubar { display: none; }
.mode-win98 .icons { left: 8px; right: auto; top: 8px; gap: 16px; }
.mode-win98 .desktop-icon .icon-label { background: transparent; color: #fff; text-shadow: 1px 1px 0 #000; }
.mode-win98 .desktop-icon.selected .icon-label { background: #000080; }
.mode-win98 .desktop-icon.selected .icon-glyph { filter: brightness(0.75) saturate(1.3); }

/* ---- Window chrome ---- */
.w98-window {
  background: #c0c0c0; border: 2px outset #fff; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; overflow: hidden;
  font-size: 12px; color: #000;
}
.w98-titlebar { flex: none; gap: 4px; }
.w98-title {
  flex: 1; font-weight: bold; font-size: 11px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w98-tb-buttons { display: flex; gap: 2px; }
.w98-tb-buttons button {
  width: 16px; height: 14px; padding: 0; font-size: 9px; line-height: 1;
  background: #c0c0c0; border: 1px outset #fff; color: #000; cursor: default;
}
.w98-tb-buttons button:active { border-style: inset; }
.w98-tb-buttons .w98-max { color: #808080; }
.w98-body { flex: 1; min-height: 0; overflow: auto; background: #fff; display: flex; flex-direction: column; }

/* ---- Explorer ---- */
.w98-toolbar { flex: none; display: flex; gap: 4px; padding: 3px; background: #c0c0c0; border-bottom: 1px solid #808080; }
.w98-tool { height: 20px; padding: 0 8px; font-size: 11px; background: #c0c0c0; border: 1px outset #fff; cursor: default; }
.w98-tool:active { border-style: inset; }
.explorer-view { flex: 1; min-height: 0; overflow: auto; background: #fff; }

/* Windows 98 scrollbars: a dithered grey trough with a raised thumb. Styling
   ::-webkit-scrollbar at all is the point — without it macOS hands Chrome an
   overlay scrollbar that fades out and reserves no width, which is undraggable
   without a working scroll wheel. overflow stays auto, so windows whose
   contents fit get no empty trough. */
.w98-body::-webkit-scrollbar,
.explorer-view::-webkit-scrollbar { width: 16px; }
.w98-body::-webkit-scrollbar-track,
.explorer-view::-webkit-scrollbar-track {
  /* The 50% white-on-silver checkerboard Win98 used for the trough. */
  background: repeating-conic-gradient(#c0c0c0 0% 25%, #fff 0% 50%) 0 0 / 2px 2px;
}
.w98-body::-webkit-scrollbar-thumb,
.explorer-view::-webkit-scrollbar-thumb {
  background: #c0c0c0; border: 2px outset #fff;
  min-height: 24px; /* stays grabbable in a long folder */
}
.w98-body::-webkit-scrollbar-thumb:active,
.explorer-view::-webkit-scrollbar-thumb:active { border-style: inset; }
.w98-body::-webkit-scrollbar-corner,
.explorer-view::-webkit-scrollbar-corner { background: #c0c0c0; }
.mode-win98 .finder-item.selected .fi-label { background: #000080; color: #fff; }
.mode-win98 .finder-item.selected .fi-glyph { filter: brightness(0.85) saturate(1.3); }

/* ---- Shared push buttons get the Win98 face ---- */
.mode-win98 .w98-button { border-radius: 0; background: #c0c0c0; border: 2px outset #fff; box-shadow: none; }
.mode-win98 .w98-button:active { border-style: inset; background: #c0c0c0; }
.mode-win98 .w98-button.primary { outline: 1px solid #000; font-weight: normal; }

/* ---- Notepad ---- */
.notepad-content {
  font-family: "Courier New", monospace; font-size: 12px; color: #000;
  padding: 8px 10px; white-space: pre-wrap; line-height: 1.4;
}

/* ---- Properties ---- */
.w98-body.props { background: #c0c0c0; padding: 8px; display: block; }
.props-tabs { display: flex; position: relative; top: 1px; }
.props-tab { padding: 3px 12px; font-size: 11px; background: #c0c0c0; border: 1px outset #fff; border-bottom: none; }
.props-sheet { border: 1px outset #fff; padding: 10px; background: #c0c0c0; }

/* ---- About Windows ---- */
.w98-body.about98 { background: #c0c0c0; padding: 14px; display: block; font-size: 11px; }
.about98-top { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #808080; padding-bottom: 12px; }
.about98-name { font-weight: bold; margin-bottom: 3px; }
.about98-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.about98-indent { padding-left: 14px; }
.about98-mem { margin-top: 10px; }

/* ---- Calculator ---- */
.w98-body.calc { background: #c0c0c0; padding: 6px; gap: 6px; }
.mode-win98 .calc-display { background: #fff; color: #000; border: 1px inset #808080; font-size: 16px; }
.mode-win98 .calc-keys { flex: 1; }
.mode-win98 .calc-key { background: #c0c0c0; border: 1px outset #fff; border-radius: 0; }
.mode-win98 .calc-key:active { border-style: inset; background: #c0c0c0; }
.mode-win98 .calc-key.calc-op { background: #c0c0c0; color: #000080; }

/* ---- Taskbar ---- */
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: #c0c0c0; border-top: 1px solid #fff; box-shadow: 0 -1px 0 #808080;
  display: flex; align-items: center; gap: 4px; padding: 2px 4px;
  font-size: 11px; z-index: 5000;
}
#stage.mode-mac .taskbar { display: none; }
.start-btn {
  height: 22px; display: flex; align-items: center; gap: 4px; flex: none;
  font-weight: bold; font-size: 11px; font-family: inherit; padding: 0 6px;
  background: #c0c0c0; border: 2px outset #fff; cursor: default;
}
.start-btn .w98-flag { grid-template-columns: 6px 6px; grid-template-rows: 6px 6px; gap: 1px; }
.start-btn:active, .start-btn.open { border-style: inset; }
.task-buttons { flex: 1; display: flex; gap: 3px; overflow: hidden; }
/* flex: 1 1 0 lets buttons compress the way real Win98 did. Without it they
   hold 60px each and the strip's overflow clips the surplus — a minimized
   window whose button is clipped has no way back, since the taskbar button is
   minimize's only affordance. */
.task-btn {
  height: 22px; flex: 1 1 0; min-width: 24px; max-width: 150px; padding: 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
  font-size: 11px; font-family: inherit;
  background: #c0c0c0; border: 2px outset #fff; cursor: default;
}
.task-btn.active {
  border-style: inset; font-weight: bold;
  background: repeating-conic-gradient(#fff 0% 25%, #c0c0c0 0% 50%) 0 0 / 2px 2px;
}
.tray { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; flex: none; border: 1px inset #fff; }

/* ---- Start menu ---- */
/* openStart() shrinks the menu to fit when the logical stage is short (high
   zoom on a wide screen); the origin keeps it pinned to the Start button. */
.start-menu {
  position: absolute; left: 2px; bottom: calc(100% + 2px); width: 200px;
  background: #c0c0c0; border: 2px outset #fff; display: flex; z-index: 6000;
  color: #000; transform-origin: bottom left;
}
.start-side {
  width: 26px; flex: none; background: linear-gradient(#000080, #1084d0);
  color: #c0c0c0; display: flex; align-items: center; justify-content: flex-end;
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 6px 0; font-size: 15px; gap: 3px;
}
.start-side b { color: #fff; }
.start-items { flex: 1; display: flex; flex-direction: column; padding: 2px 0; }
.start-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12px; cursor: default; }
.start-item:hover { background: #000080; color: #fff; }
.si-glyph { width: 20px; text-align: center; flex: none; }
.si-label { flex: 1; white-space: nowrap; }
.si-arrow { font-size: 8px; flex: none; }
.start-sep { height: 1px; background: #808080; border-bottom: 1px solid #fff; margin: 3px 2px; }
.start-submenu {
  display: none; position: absolute; left: 100%; top: -3px; min-width: 175px;
  background: #c0c0c0; border: 2px outset #fff; padding: 2px 0; color: #000;
}
.start-item:hover > .start-submenu { display: block; }

/* ---- Mode-switch blackout ---- */
/* Deliberately unscoped: it covers the outgoing mode as well as the incoming one. */
.sys-blackout { background: #000; }

/* ---- Dialogs get the Win98 face ---- */
/* The ✕ is Win98-only chrome; dialogs.js builds it in both modes. */
.dialog-x { display: none; }
.mode-win98 .dialog { background: #c0c0c0; border: 2px outset #fff; border-radius: 0; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); }
.mode-win98 .dialog .title-bar {
  height: 18px; padding: 0 3px; justify-content: space-between;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; border-bottom: none;
}
.mode-win98 .dialog .title-text { background: transparent; padding: 0; font-weight: bold; font-size: 11px; }
.mode-win98 .dialog-x {
  display: block; width: 16px; height: 14px; padding: 0; font-size: 9px; line-height: 1;
  background: #c0c0c0; border: 1px outset #fff; color: #000; cursor: default;
}
.mode-win98 .dialog-x:active { border-style: inset; }
.mode-win98 .dialog-buttons { flex-wrap: wrap; }