/* Desktop, taskbar, start menu and the three apps. */

.desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  overflow: hidden;
  /* A Bliss-ish hill under a blue sky, drawn with gradients. */
  background:
    radial-gradient(ellipse 18% 6% at 22% 22%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(ellipse 26% 7% at 30% 25%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 22% 5% at 72% 16%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 30% 6% at 80% 19%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(ellipse 95% 48% at 30% 108%, #78c045 0%, #5aa731 55%, #3f8b22 79.5%, transparent 80%),
    radial-gradient(ellipse 85% 42% at 95% 112%, #6db63c 0%, #4f9a2a 60%, #37801c 79.5%, transparent 80%),
    linear-gradient(180deg, #1d5fd0 0%, #3e86e8 35%, #7ab6f2 62%, #bcdcf8 78%, #d7ecfb 100%);
}

.desktop-icons {
  position: absolute;
  top: 10px;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 14px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-icon {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border: 0;
  background: none;
  font: 11px/1.25 var(--font-ui);
  color: #fff;
  cursor: pointer;
  outline: none;
}
.desktop-icon img { width: 48px; height: 48px; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)); }
.desktop-icon span {
  padding: 1px 3px;
  text-align: center;
  text-shadow: 1px 1px 1px #000, 0 0 3px #000;
  word-break: break-word;
}
.desktop-icon.selected img { filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)) sepia(1) hue-rotate(180deg) saturate(4) brightness(.8); }
.desktop-icon.selected span { background: #0b61ff; text-shadow: none; }
.desktop-icon:focus-visible span { outline: 1px dotted #fff; }

#windows { position: absolute; inset: 0; pointer-events: none; }
#windows > .window { pointer-events: auto; }

/* ---------- Taskbar ---------- */

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10000;
  height: var(--taskbar-h);
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #1f2f86 0%, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
}

.start-button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 22px 0 9px;
  margin-right: 10px;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: radial-gradient(ellipse 120% 90% at 50% 0%, #7ed37e 0%, #47a947 40%, #308d30 70%, #246f24 100%);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,.25), inset 2px 2px 3px rgba(255,255,255,.35), 2px 0 3px rgba(0,0,0,.3);
  color: #fff;
  font: italic bold 18px/1 var(--font-title);
  text-shadow: 1px 1px 2px #1a4a1a;
  cursor: pointer;
}
.start-button img { width: 22px; height: 22px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4)); }
.start-button:hover { filter: brightness(1.1); }
.start-button[aria-expanded="true"] { filter: brightness(.85); box-shadow: inset 2px 2px 4px rgba(0,0,0,.4); }

.task-buttons {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.task-btn {
  flex: 0 1 160px;
  min-width: 40px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #3c81f3 0%, #3f87f9 10%, #3a7ff5 60%, #3371e7 100%);
  box-shadow: inset -1px -1px rgba(0,0,0,.3), inset 1px 1px rgba(255,255,255,.3);
  color: #fff;
  font: 11px var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.task-btn img { width: 16px; height: 16px; flex: none; }
.task-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-btn:hover { filter: brightness(1.12); }
.task-btn.active {
  background: linear-gradient(180deg, #1e52b7 0%, #1c4fb4 100%);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.5);
}

.tray {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-left: 1px solid #1042af;
  background: linear-gradient(180deg, #0c59b9 0%, #139ee9 5%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
  box-shadow: inset 1px 0 1px #18bbff;
  color: #fff;
  font-size: 11px;
}
.tray img { width: 16px; height: 16px; }

/* ---------- Start menu ---------- */

.start-menu {
  position: fixed;
  left: 0;
  bottom: var(--taskbar-h);
  z-index: 10001;
  width: 390px;
  max-width: 100vw;
  border: 1px solid #0b3cb6;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 3px 0 10px rgba(0,0,0,.45);
}

.start-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #1868ce 0%, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e70d9 54%, #2476dc 60%, #297ae0 65%, #3482e3 77%, #3786e5 79%, #428ee9 90%, #4791eb 100%);
  color: #fff;
  font: bold 14px var(--font-title);
  text-shadow: 1px 1px #0f1089;
}
.start-head img {
  width: 44px; height: 44px; border: 2px solid #fff; border-radius: 4px;
  background: #fff; object-fit: cover;
}

.start-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid #ef8a2c;
}
.start-left { padding: 6px 4px; background: #fff; }
.start-right { padding: 6px 4px; background: #d3e5fa; border-left: 1px solid #95bdee; }

.start-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 0;
  border-radius: 2px;
  background: none;
  font: 11px var(--font-ui);
  color: #000;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.start-item img { width: 32px; height: 32px; flex: none; }
.start-item b { display: block; }
.start-item small { color: #6d6d6d; }
.start-right .start-item img { width: 24px; height: 24px; }
.start-right .start-item { font-weight: bold; color: #0a246a; }
.start-item:hover, .start-item:focus-visible { background: #2f71cd; color: #fff; outline: none; }
.start-item:hover small, .start-item:focus-visible small { color: #e6eeff; }

.start-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #4282d6 0%, #3b85e0 3%, #418ae3 5%, #418ae3 17%, #3c87e2 21%, #3786e4 26%, #3482e3 29%, #2e7ee1 39%, #2374df 49%, #2072db 57%, #196edb 62%, #176bd8 72%, #1468d8 75%, #1165d5 83%, #0f61cb 88%);
}
.start-foot button {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 6px; border: 0; border-radius: 3px; background: none;
  color: #fff; font: 11px var(--font-ui); cursor: pointer;
}
.start-foot button:hover { background: rgba(255,255,255,.15); }
.start-foot img { width: 22px; height: 22px; }

/* ---------- Boot + shutdown screens ---------- */

.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  transition: opacity .4s;
}
.fullscreen.fade { opacity: 0; pointer-events: none; }

.boot-logo { text-align: center; font: bold 30px var(--font-title); letter-spacing: -.5px; }
.boot-logo img { width: 72px; height: 72px; display: block; margin: 0 auto 8px; }
.boot-logo small { display: block; margin-top: 2px; color: #ff8a1c; font: italic 14px var(--font-title); }
.boot-bar {
  position: relative; width: 150px; height: 18px; margin: 34px auto 0;
  border: 2px solid #b2b2b2; border-radius: 5px; overflow: hidden;
}
.boot-bar span {
  position: absolute; top: 2px; left: -40px; width: 36px; height: 10px;
  background: linear-gradient(90deg, transparent 0 2px, #2838c7 2px 10px, transparent 10px 14px, #3a4ee6 14px 22px, transparent 22px 26px, #2838c7 26px 34px, transparent 34px);
  animation: boot 1.6s linear infinite;
}
@keyframes boot { to { left: 150px; } }

.shutdown-msg { font: 22px var(--font-title); color: #ff8a1c; text-align: center; cursor: pointer; }
.shutdown-msg small { display: block; margin-top: 10px; font-size: 12px; color: #888; }

/* ---------- Shared app bits ---------- */

.loading { padding: 20px; color: var(--xp-muted); }
.error-box { padding: 20px; color: #a00; }

.prose p { margin: 0 0 .8em; }

/* me */
.me-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #e3e1d5; }
.me-head img {
  width: 96px; height: 96px; flex: none; object-fit: cover;
  border: 3px solid #fff; border-radius: 6px; box-shadow: 0 0 0 1px #7f9db9, 2px 2px 6px rgba(0,0,0,.3);
  background: #e9f1fc;
}
.me-head h1 { font-size: 22px; color: #0a246a; }
.me-head p { margin: 0; color: var(--xp-muted); }
.fav-list { margin: 0; padding-left: 18px; }
.fav-list li { margin: 2px 0; }

/* explore */
.band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.tile {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.tile:hover { border-color: #b8d0f0; background: #eef4fd; }
.tile:focus-visible { outline: 1px dotted #000; background: #dbe8fb; }
.tile img { width: 48px; height: 48px; flex: none; object-fit: cover; border-radius: 2px; }
.tile b { display: block; }
.tile small { display: block; color: #6d6d6d; }
.tile .match { color: #1a7a1a; }
.empty { color: var(--xp-muted); padding: 10px 0; }

.band-head { display: flex; gap: 16px; margin-bottom: 14px; }
.band-head img {
  width: 140px; height: 140px; flex: none; object-fit: cover;
  border: 1px solid #b5b3a6; background: #f4f4ef;
}
.band-head h1 { font-size: 24px; color: #0a246a; }
.facts { border-collapse: collapse; }
.facts th { text-align: left; padding: 1px 12px 1px 0; color: #6d6d6d; font-weight: normal; }

h2.section {
  margin: 18px 0 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid #c3c9e9;
  color: #2c4ea3;
  font-size: 14px;
}

.members { width: 100%; border-collapse: collapse; }
.members th {
  text-align: left; padding: 3px 8px; font-weight: normal;
  background: linear-gradient(#fff, #ebeadb); border: 1px solid #d6d2c2;
}
.members td { padding: 3px 8px; border-bottom: 1px solid #f0efe7; }

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.album {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; border: 1px solid transparent; border-radius: 2px;
  background: none; font: inherit; color: inherit; text-align: center; cursor: pointer;
}
.album img { width: 96px; height: 96px; object-fit: cover; }
.album:hover { border-color: #b8d0f0; background: #eef4fd; }
.album[aria-pressed="true"] { border-color: #316ac5; background: #dbe8fb; }
.album small { color: #6d6d6d; }

.album-detail {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #c3c9e9;
  border-radius: 4px;
  background: #f5f8fe;
}
.album-detail h3 { color: #0a246a; }
.album-detail ol { margin: 6px 0 0; padding-left: 24px; columns: 2 220px; }

mark { background: #fff17a; color: inherit; padding: 0 1px; }

/* quiz: wizard */
.wizard { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--xp-face); }
.wizard-main { flex: 1; min-height: 0; display: flex; overflow: auto; background: #fff; }
.wizard-banner {
  flex: none;
  width: 160px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 22px;
  background: linear-gradient(180deg, #0a246a 0%, #1747a6 40%, #a6caf0 100%);
}
.wizard-banner img { width: 96px; height: 96px; filter: drop-shadow(2px 3px 3px rgba(0,0,0,.4)); }
.wizard-page { flex: 1; min-width: 0; padding: 18px 22px; }
.wizard-page h1 { font-size: 20px; color: #000; margin-bottom: .7em; }

.wizard-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid #d6d2c2; background: #fff;
}
.wizard-header div { flex: 1; }
.wizard-header b { display: block; }
.wizard-header small { color: var(--xp-muted); padding-left: 14px; }
.wizard-header img { width: 40px; height: 40px; }
.wizard-q { flex-direction: column; }
.wizard-q .wizard-page { padding: 16px 30px; }

.answers { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.answers label {
  display: flex; align-items: flex-start; gap: 2px;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
}
.answers label:hover { background: #eef4fd; border-color: #c4d7f3; }
.answers input { margin-top: 2px; }

.wizard-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid #fff;
  box-shadow: 0 -1px #aca899;
}
.wizard-foot .progress { flex: 1; max-width: 200px; margin-right: auto; }
.wizard-foot .spacer { margin-right: auto; }

.result-genre { font-size: 28px; color: #c41a0f; font-family: var(--font-title); margin: 4px 0 8px; }
.result-img { max-width: 220px; max-height: 160px; border: 1px solid #b5b3a6; margin-bottom: 10px; }
.score-bars { margin-top: 8px; }
.score-row { display: grid; grid-template-columns: 150px 1fr 30px; gap: 8px; align-items: center; margin: 3px 0; font-size: 11px; }
.score-row .progress { height: 12px; padding: 1px; }

/* recycle bin */
.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li { display: flex; align-items: center; gap: 8px; padding: 3px 4px; }
.file-list li:hover { background: #eef4fd; }
.file-list img { width: 20px; height: 20px; }

/* ---------- Small screens: one maximized window at a time ---------- */

@media (max-width: 700px) {
  .window {
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0; resize: none;
  }
  .title-bar { border-radius: 0; }
  .tb-max { display: none; }
  .taskpane { display: none; }
  .taskpane.mobile-keep { display: block; width: auto; }
  .explorer.stack { flex-direction: column; }
  .explorer.stack .taskpane { display: block; width: auto; padding: 8px; }
  .explorer.stack .pane-box { margin-bottom: 6px; }
  .wizard-banner { display: none; }
  .band-head { flex-direction: column; }
  .task-btn { flex-basis: 110px; }
  .start-button { padding-right: 14px; }
  .tray .vol { display: none; }
  .score-row { grid-template-columns: 100px 1fr 26px; }
}