/*
  Retro OS theme: design tokens and components.
  Keep styles simple, portable, and consistent across the site.
*/

:root {
  /* Core palette: Win9x-inspired */
  --desktop-bg: #F3E6D8; /* default pastel */
  --accent: #000080;     /* navy */
  --accent-2: #0870d8;   /* blue highlight */
  --titlebar-active-start: #0b5aa2;
  --titlebar-active-end: #1c88ff;
  --titlebar-inactive: #7f9fbf;
  --window-bg: #c0c0c0;  /* light gray */
  --panel-bg: #dfdfdf;   /* lighter gray */
  --text: #000;
  --text-inverse: #fff;
  --shadow: #00000055;
  --border-light: #ffffff; /* highlight */
  --border-mid: #c0c0c0;   /* flat */
  --border-dark: #808080;  /* shadow */
  --border-darker: #404040;/* deep shadow */

  --radius: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --z-taskbar: 1000;
  --z-startmenu: 1200;
}

/* Global base */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--desktop-bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
  image-rendering: pixelated;
}

/* Desktop */
.desktop {
  position: fixed;
  inset: 0 0 32px 0; /* leave space for taskbar */
  background: var(--desktop-bg);
  overflow: hidden;
}
.desktop::before {
  content: 'plmOS';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Lucida Console', 'Courier New', monospace;
  font-size: clamp(72px, 18vw, 140px);
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #00000022;
  text-transform: none;
  text-shadow: 2px 2px 0 #ffffff11, -2px -2px 0 #00000011;
  pointer-events: none;
}
.icons-layer {
  position: absolute; inset: 0; pointer-events: none;
}
.icons-layer .icon { pointer-events: auto; }

/* Icons */
.icon {
  width: 72px;
  user-select: none;
  cursor: default;
  text-align: center;
  position: absolute;
  outline: none;
}
.icon .glyph {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-2);
  display: grid; place-items: center;
  background: var(--panel-bg);
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  box-shadow: 1px 1px 0 var(--border-darker) inset,
              -1px -1px 0 var(--border-light) inset;
  font-size: 28px;
}
.icon .label {
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-size: 12px;
  line-height: 1.1;
}
.icon:focus .label,
.icon.selected .label {
  background: #00000066;
  border: 1px dotted #fff;
}

/* Window */
.window {
  position: absolute;
  background: var(--window-bg);
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  box-shadow: 6px 6px 0 var(--shadow);
  min-width: 260px;
  min-height: 160px;
  display: grid;
  grid-template-rows: 28px 1fr;
}
.window[aria-hidden="true"] { display: none; }
.titlebar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  color: var(--text-inverse);
  background: linear-gradient(180deg, var(--titlebar-active-start), var(--titlebar-active-end));
  cursor: move;
  user-select: none;
}
.window.inactive .titlebar {
  background: var(--titlebar-inactive);
}
.titlebar .title { font-weight: 600; font-size: 13px; padding-left: var(--space-2); }
.titlebar .controls { display: flex; gap: var(--space-2); }
.control {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: var(--panel-bg);
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  padding: 0; line-height: 1; cursor: pointer;
}
.control:active {
  border-left-color: var(--border-dark);
  border-top-color: var(--border-dark);
  border-right-color: var(--border-light);
  border-bottom-color: var(--border-light);
}
.window .content {
  background: var(--panel-bg);
  padding: var(--space-3);
  overflow: auto;
}
.window .content iframe {
  width: 100%; height: 100%; border: none; background: #fff;
}

/* Resize handles */
.resize-handle { position: absolute; z-index: 5; }
.resize-n { top: -2px; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.resize-s { bottom: -2px; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.resize-e { right: -2px; top: 6px; bottom: 6px; width: 6px; cursor: ew-resize; }
.resize-w { left: -2px; top: 6px; bottom: 6px; width: 6px; cursor: ew-resize; }
.resize-ne { right: -2px; top: -2px; width: 10px; height: 10px; cursor: nesw-resize; }
.resize-nw { left: -2px; top: -2px; width: 10px; height: 10px; cursor: nwse-resize; }
.resize-se { right: -2px; bottom: -2px; width: 10px; height: 10px; cursor: nwse-resize; }
.resize-sw { left: -2px; bottom: -2px; width: 10px; height: 10px; cursor: nesw-resize; }

/* Taskbar */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 32px; display: flex; align-items: center;
  gap: var(--space-3);
  background: var(--panel-bg);
  border-top: 2px solid var(--border-light);
  box-shadow: 0 -1px 0 var(--border-dark) inset;
  padding: 0 var(--space-3);
  z-index: var(--z-taskbar);
}
.start-button {
  height: 24px; padding: 0 10px; font-weight: 600; cursor: pointer;
  background: var(--panel-bg);
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
}
.taskbar-spacer { flex: 0 0 auto; }
.taskbar-tasks { display: flex; gap: var(--space-2); align-items: center; overflow: auto; }
.task-button {
  height: 24px; padding: 0 8px; min-width: 120px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--panel-bg);
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.task-button .tb-ic { display: inline-block; width: 1.2em; text-align: center; }
.task-button .tb-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clock { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; }

/* Utilities */
.hidden { display: none !important; }
.noselect { user-select: none; }

/* Context Menu */
.context-menu {
  position: absolute;
  min-width: 180px;
  background: var(--panel-bg);
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  box-shadow: none;
  padding: 4px 0;
  z-index: 2000;
}
.context-item {
  height: 24px;
  display: flex; align-items: center;
  padding: 0 8px;
  font-size: 12px;
  cursor: default;
}
.context-item:hover { background: #ffffffaa; }

/* Start Menu */
.start-menu { position: fixed; left: 0; top: 0; z-index: var(--z-startmenu); pointer-events: none; }
.start-col {
  position: absolute;
  pointer-events: auto;
  min-width: 200px;
  max-height: 260px;
  overflow: auto;
  background: var(--panel-bg);
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  padding: 4px 0;
}
.start-item { height: 24px; display: flex; align-items: center; padding: 0 8px; font-size: 12px; cursor: default; }
.start-item:hover { background: #ffffffaa; }
.start-item.has-sub::after { content: '›'; margin-left: auto; }

/* Flat UI variant */
.flat-ui .window {
  box-shadow: none;
  border: 1px solid var(--border-darker);
}
.flat-ui .titlebar { background: var(--accent); }
.flat-ui .control,
.flat-ui .task-button,
.flat-ui .start-button,
.flat-ui .explorer .crumbs,
.flat-ui .context-menu,
.flat-ui .explorer-row,
.flat-ui .viewer .bar {
  border: 1px solid var(--border-darker);
}
.flat-ui .icon .glyph {
  border: 1px solid var(--border-darker);
  box-shadow: none;
}

/* Clippy assistant */
.clippy-assistant {
  position: fixed;
  right: 24px;
  bottom: 64px;
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: none;
  z-index: 1300;
}
.clippy-assistant.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.clippy-icon {
  width: 88px;
  height: 120px;
  padding: var(--space-3);
  border-radius: 40px;
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  background: linear-gradient(180deg, #fdfcf6, #f3ecdd);
  box-shadow: 2px 2px 0 var(--border-darker) inset,
              -2px -2px 0 var(--border-light) inset;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.clippy-icon:focus { outline: 2px dotted var(--accent); }
.clippy-svg {
  width: 100%;
  height: 100%;
}
.clippy-outline {
  stroke: var(--accent-2);
}
.clippy-inner {
  stroke: #ffffffcc;
}
.clippy-eye-white {
  fill: #fff;
  stroke: var(--border-mid);
  stroke-width: 1.5;
}
.clippy-eye {
  fill: #000;
}
.clippy-mouth {
  stroke: #000;
}
.clippy-bubble {
  min-width: 260px;
  max-width: 320px;
  background: #fff8e2;
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: var(--space-4);
  font-size: 13px;
  line-height: 1.5;
}
.clippy-question {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  font-size: 14px;
}
.clippy-form {
  display: flex;
  gap: var(--space-3);
  margin: 0;
}
.clippy-input {
  flex: 1;
  min-width: 0;
  height: 24px;
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  background: var(--panel-bg);
  font-size: 13px;
  padding: 0 8px;
}
.clippy-input:disabled {
  opacity: 0.65;
}
.clippy-send {
  height: 24px;
  padding: 0 14px;
  border: 2px solid var(--border-mid);
  border-right-color: var(--border-dark);
  border-bottom-color: var(--border-dark);
  border-left-color: var(--border-light);
  border-top-color: var(--border-light);
  background: var(--panel-bg);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.clippy-send:disabled {
  cursor: default;
  opacity: 0.6;
}
.clippy-reply {
  margin: var(--space-3) 0 0;
  font-size: 13px;
  font-style: italic;
}
.clippy-reply.thinking {
  opacity: 0.7;
}