/* ============================================================
   Archive — Windows 95 desktop, luxury F1-in-America agency
   ============================================================ */

/* Design tokens (colors, typography, spacing, effects, @font-face) live in
   styles/tokens/*.css and are loaded before this file in index.html. They are
   the single source of truth for the Archive design system — do not redefine
   palette / font / spacing values here; reference the tokens instead. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--ui-font);
  font-size: 13px;
  -webkit-font-smoothing: none;
  user-select: none;
  cursor: default;
}

/* Crisp scaling for the small pixel-art icons */
img { image-rendering: pixelated; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; }

/* ---------- Bevel helpers ---------- */
.bevel-out { border: 2px solid; border-color: var(--white) var(--dark) var(--dark) var(--white); box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow); }
.bevel-in  { border: 2px solid; border-color: var(--shadow) var(--white) var(--white) var(--shadow); box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--face-light); }

/* ============================================================
   Desktop
   ============================================================ */
#desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  background: var(--desktop-blue);
  overflow: hidden;
}

/* ---------- Wordmark / header ---------- */
#wordmark {
  position: absolute;
  top: 26px;
  left: 34px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
.wm-headline {
  font-family: var(--font-serif-display);
  font-weight: 700;
  font-size: clamp(20px, 3.6vw, 44px);
  letter-spacing: 0.5px;
  vertical-align: baseline;
}

/* ---------- Desktop icons ---------- */
#icon-layer { position: absolute; inset: 0; }

.desk-icon {
  position: absolute;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 3px;
  cursor: default;
  text-align: center;
}
.desk-icon img,
.desk-icon .icon-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
}
.desk-icon .label {
  color: #fff;
  font-size: 13px;
  line-height: 1.1;
  padding: 1px 3px;
  max-width: 82px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}
.desk-icon.selected .icon-img { filter: brightness(0.6) sepia(1) hue-rotate(190deg) saturate(4); }
.desk-icon.selected .label { background: #000080; color: #fff; outline: 1px dotted #fff; outline-offset: -1px; text-shadow: none; }

/* Marquee selection */
#selection-box {
  position: absolute;
  border: 1px dotted #fff;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
  z-index: 5;
}

/* ============================================================
   Windows
   ============================================================ */
.win {
  position: absolute;
  min-width: 180px;
  min-height: 120px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--white) var(--dark) var(--dark) var(--white);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow), 1px 1px 0 var(--dark);
  display: flex;
  flex-direction: column;
  padding: 2px;
}
.win.maximized { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; }

.win-titlebar {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--title-active-a), var(--title-active-b));
  color: #fff;
  font-weight: 700;
  cursor: move;
  flex: 0 0 auto;
}
.win.inactive .win-titlebar { background: linear-gradient(90deg, var(--title-inactive-a), var(--title-inactive-b)); }
/* Restrained gold hairline along the active titlebar — the luxury tell */
.win:not(.inactive) .win-titlebar { box-shadow: inset 0 1px 0 var(--accent-gold); }
.win-titlebar img { width: 16px; height: 16px; }
.win-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; letter-spacing: 0.3px; }

.win-controls { display: flex; gap: 2px; }
.win-btn {
  width: 16px; height: 14px;
  background: var(--face);
  border: 1px solid; border-color: var(--white) var(--dark) var(--dark) var(--white);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
  font: 700 9px/1 var(--ui-font);
  color: #000;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: default;
}
.win-btn:active { border-color: var(--dark) var(--white) var(--white) var(--dark); box-shadow: inset 1px 1px 0 var(--shadow); }
.win-btn.close { margin-left: 2px; }
.win-btn .glyph { display: block; transform: translateY(-1px); }

.win-menubar {
  display: flex; gap: 12px;
  padding: 1px 6px;
  font-size: 12px;
  border-bottom: 1px solid var(--shadow);
}
.win-menubar span u { text-decoration: underline; }

.win-body {
  flex: 1;
  margin: 2px;
  background: #fff;
  border: 2px solid; border-color: var(--shadow) var(--white) var(--white) var(--shadow);
  box-shadow: inset 1px 1px 0 var(--dark);
  overflow: auto;
  padding: 13px 15px;
  font-size: 13px;
  color: #000;
  line-height: 1.55;
  user-select: text;
  cursor: auto;
}
.win-body.plain { background: var(--face); border: none; box-shadow: none; }
/* Editorial serif headers — premium without leaving the Win95 register */
.win-body h2 { margin: 0 0 11px; font-family: var(--font-serif-display); font-weight: 700; font-size: 18px; letter-spacing: 0.2px; color: #111; }
.win-body p { margin: 0 0 10px; }
.win-body a { color: #0000ee; }
.win-body ul { margin: 6px 0 12px; padding-left: 22px; }

/* Notepad-style body */
.win-body.notepad { font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; }

/* DOS prompt body */
.win-body.dos {
  background: #000; color: #c0c0c0;
  font-family: var(--font-mono);
  border-color: var(--shadow) var(--white) var(--white) var(--shadow);
}
.win-body.dos .cursor { display: inline-block; width: 8px; height: 14px; background: #c0c0c0; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Game body (Circuit) — fills the window, black letterbox, crisp scaling */
.win-body.game { padding: 0; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: default; }
.win-body.game canvas { display: block; height: 100%; width: auto; max-width: 100%; image-rendering: pixelated; outline: none; }

/* Resize grip */
.win-resize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }

/* Mail form */
.mail-form { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; }
.mail-form label { font-size: 12px; }
.mail-form input, .mail-form textarea {
  font-family: var(--ui-font); font-size: 12px; padding: 2px 4px;
  border: 2px solid; border-color: var(--shadow) var(--white) var(--white) var(--shadow); background: #fff;
}
.mail-form textarea { grid-column: 1 / -1; min-height: 90px; resize: vertical; }
.win-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; }

/* Reusable Win95 button */
.btn95 {
  min-width: 68px; padding: 4px 10px;
  background: var(--face); font-family: var(--ui-font); font-size: 12px; color: #000;
  border: 2px solid; border-color: var(--white) var(--dark) var(--dark) var(--white);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
  cursor: default;
}
.btn95:active { border-color: var(--dark) var(--white) var(--white) var(--dark); box-shadow: inset 1px 1px 0 var(--shadow); }

/* Primary CTA — a restrained gold accent strip inside the Win95 bevel */
.btn-primary { font-weight: 700; box-shadow: inset 0 2px 0 var(--accent-gold), inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow); }
.btn-primary:active { box-shadow: inset 0 2px 0 var(--accent-gold-dim), inset 1px 1px 0 var(--shadow); }

/* ============================================================
   Taskbar
   ============================================================ */
#taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--taskbar-h);
  background: var(--face);
  border-top: 2px solid var(--white);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 3px;
  z-index: 9000;
}

#start-button {
  height: 22px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 7px 0 4px;
  font-family: var(--ui-font); font-size: 13px; font-weight: 700; color: #000;
  background: var(--face);
  border: 2px solid; border-color: var(--white) var(--dark) var(--dark) var(--white);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
  cursor: default;
}
#start-button img { width: 18px; height: 18px; }
#start-button.active { border-color: var(--dark) var(--white) var(--white) var(--dark); box-shadow: inset 1px 1px 0 var(--shadow); }
#start-button.active img { transform: translate(1px, 1px); }

#taskbar-divider { width: 0; align-self: stretch; margin: 2px 2px; border-left: 1px solid var(--shadow); border-right: 1px solid var(--white); }

#taskbar-windows { flex: 1; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.task-btn {
  height: 22px;
  min-width: 130px; max-width: 160px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 6px;
  background: var(--face);
  border: 2px solid; border-color: var(--white) var(--dark) var(--dark) var(--white);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow);
  font-family: var(--ui-font); font-size: 12px; color: #000;
  cursor: default; overflow: hidden;
}
.task-btn img { width: 16px; height: 16px; }
.task-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-btn.active {
  border-color: var(--dark) var(--white) var(--white) var(--dark);
  box-shadow: inset 1px 1px 0 var(--shadow);
  background-image: repeating-conic-gradient(#c0c0c0 0% 25%, #b0b0b0 0% 50%);
  background-size: 3px 3px;
  font-weight: 700;
}

#tray {
  height: 22px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px 0 8px;
  border: 2px solid; border-color: var(--shadow) var(--white) var(--white) var(--shadow);
  box-shadow: inset 1px 1px 0 var(--dark);
}
#audio-toggle { background: none; border: none; padding: 0; display: flex; cursor: default; }
#audio-toggle img { width: 16px; height: 16px; }
#clock { font-family: var(--ui-font); font-size: 12px; color: #000; min-width: 56px; text-align: center; }

/* ============================================================
   Start menu
   ============================================================ */
#start-menu {
  position: fixed;
  left: 3px;
  bottom: var(--taskbar-h);
  width: 200px;
  background: var(--face);
  border: 2px solid; border-color: var(--white) var(--dark) var(--dark) var(--white);
  box-shadow: inset 1px 1px 0 var(--face-light), inset -1px -1px 0 var(--shadow), 2px 2px 3px rgba(0,0,0,0.4);
  z-index: 9500;
  display: flex;
  padding: 3px;
}
#start-menu-banner {
  width: 26px;
  background: linear-gradient(0deg, #000080, #0a0a4a);
  flex: 0 0 auto;
  margin-right: 3px;
}
#start-menu-banner span {
  display: block;
  transform: rotate(180deg);
  writing-mode: vertical-lr;
  color: #c0c0c0;
  font-family: var(--font-banner);
  font-weight: 700;
  font-size: var(--text-banner);
  padding: 8px 4px;
  white-space: nowrap;
}
#start-menu-banner span b, #start-menu-banner b { color: #fff; }
#start-menu-list { list-style: none; margin: 0; padding: 0; flex: 1; }
#start-menu-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 18px 4px 6px;
  font-size: 13px; color: #000;
  position: relative;
}
#start-menu-list li img { width: 24px; height: 24px; }
#start-menu-list li .chev { position: absolute; right: 5px; font-style: normal; }
#start-menu-list li.sep { height: 0; padding: 0; margin: 3px 2px; border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--white); }
#start-menu-list li:not(.sep):hover { background: #000080; color: #fff; }
#start-menu-list li u { text-decoration: underline; }

/* Shutdown overlay */
#shutdown-screen {
  position: fixed; inset: 0; z-index: 99999;
  background: #000; color: #c0c0c0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: var(--ui-font);
}
#shutdown-screen .msg { font-size: 22px; line-height: 1.6; }
#shutdown-screen .amber { color: #ffb000; font-size: 15px; margin-top: 20px; }

[hidden] { display: none !important; }

/* ---------- Small screens: keep it usable ---------- */
@media (max-width: 720px) {
  #wordmark { top: 14px; left: 16px; right: 16px; }
}