/* Windows XP "Luna"-inspired chrome (hand-built gradients) */

/* ---------------------------------------------------------------- windows */
.win {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  padding: 0 3px 3px; border: 1px solid #0a2a9e; border-top: 0; border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #0a49d6, #0b52e6 6%, #0b52e6 94%, #0a49d6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.win.inactive { background: linear-gradient(90deg, #6f8fd8, #7c9ae0 6%, #7c9ae0 94%, #6f8fd8); border-color: #5f7bc4; }
.win-title {
  flex: none; display: flex; align-items: center; gap: 0.45rem; height: 1.95rem; min-height: 24px; margin: 0 -3px;
  padding: 0 3px 0 0.5rem; border-radius: 7px 7px 0 0; color: #fff; user-select: none;
  font: bold 1.06rem/1 var(--title); text-shadow: 1px 1px 0 #0a1e7a;
  background: linear-gradient(180deg, #4d9bff 0%, #2a7bff 4%, #0d63f3 9%, #075ae9 18%, #0553e2 40%, #0656e8 70%, #0a62f6 86%, #0959ea 93%, #0547c4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 1px 0 0 rgba(255, 255, 255, 0.18), inset -1px 0 0 rgba(0, 0, 40, 0.3);
}
.win.inactive .win-title {
  text-shadow: none; color: #dbe5fb;
  background: linear-gradient(180deg, #a9c0f0 0%, #8fadea 8%, #819fe2 40%, #84a3e6 80%, #7090d6 100%);
}
.win-title .ico { width: 16px; height: 16px; flex: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); }
.win-title .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.01em; }
.win-title .ttl small { font: normal 0.82rem var(--ui); opacity: 0.85; margin-left: 0.5rem; text-shadow: none; }
.win-title .tools { display: flex; align-items: center; gap: 0.3rem; font: 0.85rem var(--ui); text-shadow: none; }

.caps { display: flex; gap: 2px; flex: none; }
.cap {
  display: grid; place-items: center; width: 21px; height: 21px; padding: 0; border: 1px solid #fff; border-radius: 3px;
  background: linear-gradient(180deg, #5794ff 0%, #2f6ef2 38%, #1a54dc 100%);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.55), inset -1px -1px 1px rgba(0, 10, 80, 0.45);
}
.cap:hover { background: linear-gradient(180deg, #78abff 0%, #4683fa 38%, #2361e8 100%); }
.cap:active { background: linear-gradient(180deg, #1a54dc, #2f6ef2); }
.cap.close { background: linear-gradient(180deg, #f2a78a 0%, #e46a3f 34%, #cd4419 100%); }
.cap.close:hover { background: linear-gradient(180deg, #ffbea3 0%, #f07d52 34%, #db5226 100%); }
.cap svg { width: 11px; height: 11px; fill: #fff; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3)); }
.win.inactive .cap { opacity: 0.8; }

.win-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--term); border: 1px solid #001a6e; }
.win-scroll { flex: 1; min-height: 0; overflow: auto; }

.win-status {
  flex: none; display: flex; gap: 2px; height: 1.62rem; min-height: 19px; padding: 2px 2px 0; margin-top: 0;
  background: #ece9d8; color: #000; font: 0.84rem/1 var(--ui); border-top: 1px solid #fff;
}
.win-status > span {
  display: flex; align-items: center; gap: 0.35rem; padding: 0 0.45rem; overflow: hidden; white-space: nowrap;
  border: 1px solid; border-color: #aca899 #fff #fff #aca899;
}
.win-status > span.grow { flex: 1; }
.win-status .led { width: 0.55rem; height: 0.55rem; }

/* floating windows */
.float { position: fixed; z-index: 100; min-width: 280px; min-height: 160px; }
.float.min { display: none; }
.float.max { left: 0 !important; top: var(--cmd-h) !important; width: 100vw !important; height: calc(100vh - var(--cmd-h) - var(--ticker-h) - var(--task-h)) !important; border-radius: 0; }
.float .win-title { cursor: default; }
.resize-grip {
  position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; cursor: nwse-resize; z-index: 3;
  background: linear-gradient(135deg, transparent 0 50%, #aca899 50% 56%, transparent 56% 66%, #aca899 66% 72%, transparent 72% 82%, #aca899 82% 88%, transparent 88%);
}
/* maximised grid panel covers the desk (no grid-area, see Panel) */
.desk > .win.maxed { position: absolute; inset: 6px; z-index: 50; }
@media (max-width: 1280px) { .desk > .win.maxed { position: fixed; inset: 0; z-index: 3500; } }

/* ---------------------------------------------------------------- taskbar */
.taskbar {
  position: relative; z-index: 4000; flex: none; display: flex; align-items: stretch; height: var(--task-h);
  background: linear-gradient(180deg, #1f2f86 0%, #3169d6 4%, #4a95ee 8%, #3a82ea 12%, #2a6be0 20%, #245edb 40%, #2257d4 70%, #2459d8 88%, #1f4dc2 96%, #1941a5 100%);
  border-top: 1px solid #0d2b8f; font: 0.95rem var(--ui); color: #fff; user-select: none;
}
.start {
  display: flex; align-items: center; gap: 0.35rem; padding: 0 1.25rem 0 0.55rem; margin-right: 0.5rem; border: 0; border-radius: 0 13px 13px 0;
  background: linear-gradient(180deg, #4cad48 0%, #66cc5c 6%, #4fb848 22%, #3fa13a 55%, #34903a 85%, #2b7a2e 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), inset -2px 0 3px rgba(0, 0, 0, 0.28), 2px 0 5px rgba(0, 0, 0, 0.4);
  color: #fff; font: italic bold 1.38rem/1 var(--title); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.start:hover { filter: brightness(1.1); }
.start.on { filter: brightness(0.86); box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.45); }
.start svg { width: 20px; height: 20px; }
.quick { display: flex; align-items: center; gap: 2px; padding: 0 0.5rem 0 0.2rem; border-right: 1px solid rgba(0, 0, 40, 0.45); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.18); margin-right: 0.3rem; }
.quick button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; color: #fff; font: bold 0.68rem var(--mono); }
.quick button:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); }
.tasks { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.task {
  display: flex; align-items: center; gap: 0.4rem; flex: 0 1 11rem; min-width: 3rem; height: 24px; padding: 0 0.55rem; border: 0; border-radius: 3px;
  background: linear-gradient(180deg, #4a8df5 0%, #3c80f0 12%, #3274e6 88%, #2a67d8 100%); color: #fff; font: 0.92rem var(--ui);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.35), inset -1px -1px 1px rgba(0, 0, 0, 0.3); white-space: nowrap; overflow: hidden;
}
.task:hover { filter: brightness(1.1); }
.task.active { background: linear-gradient(180deg, #1c4fb4, #1b4aa8); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5); }
.task span { overflow: hidden; text-overflow: ellipsis; }
.tray {
  display: flex; align-items: center; gap: 0.55rem; padding: 0 0.8rem 0 0.9rem; margin-left: 0.3rem;
  background: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
  border-left: 1px solid #092e8b; box-shadow: inset 1px 0 1px #18bbff;
}
.tray .src { display: flex; align-items: center; gap: 0.2rem; font: bold 0.7rem var(--mono); letter-spacing: 0.02em; cursor: pointer; }
.tray .ic { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: #fff; }
.tray .clock { font: 0.95rem var(--ui); min-width: 4.4rem; text-align: right; }
.tray .ic.kb { width: auto; padding: 0 0.15rem; font-size: 1.05rem; line-height: 1; opacity: 0.9; }
.tray .ic.kb:hover { opacity: 1; text-shadow: 0 0 4px rgba(255, 255, 255, 0.8); }
.xpd table.keys td { vertical-align: middle; }

/* ------------------------------------------------------------ start menu */
.startmenu {
  position: fixed; left: 0; bottom: var(--task-h); z-index: 5000; width: 25rem; max-width: 96vw; overflow: hidden;
  border: 1px solid #0b3cad; border-bottom: 0; border-radius: 8px 8px 0 0; background: #fff; color: #000;
  font: 0.98rem var(--ui); box-shadow: 4px 0 14px rgba(0, 0, 0, 0.6);
}
.sm-head {
  position: relative; display: flex; align-items: center; gap: 0.7rem; height: 3.8rem; padding: 0 0.7rem; color: #fff;
  font: bold 1.2rem var(--title); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #1868ce 0%, #0e60cb 14%, #1164cf 32%, #1b6cd3 47%, #2476dc 60%, #3482e3 77%, #428ee9 90%, #4791eb 100%);
}
.sm-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #f2a23a 18%, #ffc875 50%, #f2a23a 82%, transparent); }
.sm-head .who small { display: block; font: normal 0.82rem var(--ui); opacity: 0.85; text-shadow: none; }
.sm-avatar { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 2px solid #dfe8f7; border-radius: 4px; background: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.sm-body { display: flex; }
.sm-left { flex: 1.1; padding: 0.35rem 0; background: #fff; }
.sm-right { flex: 1; padding: 0.35rem 0; background: #d3e5fa; border-left: 1px solid #95bdee; }
.sm-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.32rem 0.6rem; border: 0; background: none; text-align: left; color: #000; }
.sm-item:hover { background: #316ac5; color: #fff; }
.sm-item .si { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: 3px; background: #000; color: var(--amber); font: bold 0.72rem var(--mono); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.sm-item b { display: block; font-weight: bold; }
.sm-item small { display: block; color: #555; font-size: 0.82rem; }
.sm-item:hover small { color: #dfe8ff; }
.sm-right .sm-item { color: #0a246a; font-weight: bold; padding: 0.42rem 0.6rem; }
.sm-right .sm-item:hover { color: #fff; }
.sm-right .sm-item .si { width: 1.45rem; height: 1.45rem; font-size: 0.64rem; }
.sm-sep { height: 1px; margin: 0.3rem 0.6rem; background: linear-gradient(90deg, transparent, #c5c5c5, transparent); }
.sm-foot {
  display: flex; justify-content: flex-end; gap: 0.8rem; padding: 0.4rem 0.7rem; color: #fff;
  background: linear-gradient(180deg, #4282d6 0%, #3a7cd5 40%, #2a6bd0 80%, #2160c4 100%);
}
.sm-foot button { display: flex; align-items: center; gap: 0.35rem; border: 0; background: none; color: #fff; font: 0.92rem var(--ui); padding: 0.15rem 0.3rem; border-radius: 3px; }
.sm-foot button:hover { background: rgba(255, 255, 255, 0.15); }
.sm-foot .pw { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 3px; border: 1px solid #fff; font: bold 0.75rem var(--mono); }
.sm-foot .pw.off { background: linear-gradient(180deg, #f3a37f, #d8471b); }
.sm-foot .pw.log { background: linear-gradient(180deg, #ffd27a, #e79a12); }

/* --------------------------------------------------------------- balloons */
/* above the CRT scanline overlay: these are "OS" notifications */
.balloons { position: fixed; right: 0.8rem; bottom: calc(var(--task-h) + 0.7rem); z-index: 100001; display: flex; flex-direction: column-reverse; gap: 0.6rem; pointer-events: none; }
.balloon {
  position: relative; width: 22rem; max-width: 92vw; padding: 0.5rem 0.65rem 0.65rem; pointer-events: auto; cursor: pointer;
  background: #ffffe1; color: #000; border: 1px solid #000; border-radius: 8px; font: 0.92rem/1.35 var(--ui);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.45); animation: balloonIn 0.2s ease-out;
}
/* column-reverse: the first child sits nearest the tray and carries the tail */
.balloon:first-child::after, .balloon:first-child::before { content: ''; position: absolute; right: 2.2rem; border-style: solid; }
.balloon:first-child::before { bottom: -14px; border-width: 14px 0 0 16px; border-color: #000 transparent transparent transparent; }
.balloon:first-child::after { bottom: -12px; right: calc(2.2rem + 1px); border-width: 12px 0 0 14px; border-color: #ffffe1 transparent transparent transparent; }
.balloon .bt { display: flex; align-items: center; gap: 0.4rem; font-weight: bold; margin-bottom: 0.2rem; }
.balloon .bt .x { margin-left: auto; width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #999; border-radius: 2px; font: bold 10px var(--ui); color: #555; background: #fff; }
.balloon .bi { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #fff; font: bold 11px var(--title); flex: none; }
@keyframes balloonIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- XP dialog bodies */
.xpd { background: #ece9d8; color: #000; font: 0.95rem/1.4 var(--ui); }
.xpd .grp { position: relative; margin: 0.9rem 0.7rem 0.5rem; padding: 0.8rem 0.7rem 0.6rem; border: 1px solid #d0d0bf; border-radius: 3px; }
.xpd .grp > legend { padding: 0 0.3rem; color: #0046d5; }
.xpd fieldset.grp { margin: 0.6rem 0.7rem; }
.xp-btn {
  min-width: 5.2rem; padding: 0.25rem 0.8rem; border: 1px solid #003c74; border-radius: 3px; color: #000; font: 0.92rem var(--ui);
  background: linear-gradient(180deg, #fff 0%, #f3f2ee 45%, #e6e3d9 85%, #d6d0c5 100%); box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.08);
}
.xp-btn:hover { box-shadow: inset 0 0 0 2px #f9c55b, inset 0 0 0 3px #f4a52a; }
.xp-btn:active { background: linear-gradient(180deg, #e3e0d6, #f5f4f0); }
.xp-btn.primary { box-shadow: inset 0 0 0 1px #6c97de; }
.xpd table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #7f9db9; font: 0.88rem var(--ui); }
.xpd table.list th { background: linear-gradient(180deg, #fff, #ebeadb); border-bottom: 1px solid #d6d2c2; border-right: 1px solid #d6d2c2; padding: 0.2rem 0.4rem; text-align: left; font-weight: normal; }
.xpd table.list td { padding: 0.2rem 0.4rem; border-bottom: 1px solid #f0efe7; }
.xpd code { font: 0.85rem var(--mono); background: #fff; border: 1px solid #d6d2c2; padding: 0 0.25rem; }
.xp-tabs { display: flex; gap: 0; padding: 0.5rem 0.6rem 0; border-bottom: 1px solid #919b9c; }
.xp-tabs button { margin-bottom: -1px; padding: 0.25rem 0.75rem; border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #fff, #ecebe5); font: 0.9rem var(--ui); color: #000; }
.xp-tabs button.on { background: #fcfcfe; border-top: 2px solid #ffc83c; position: relative; z-index: 1; padding-bottom: 0.35rem; }