/* ============================================================
   ServicePack4 - Windows XP era stylesheet
   Plain, lightweight, no frameworks.
   ============================================================ */

body {
  background: #5a7edc; /* XP "Bliss" sky blue */
  background-image:
    linear-gradient(180deg, #6a90e8 0%, #4f74d4 40%, #3d63c4 100%);
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #000;
  margin: 0;
  padding: 12px;
}

/* ===== PAGE WRAPPER ===== */
#page {
  max-width: 900px;
  margin: 0 auto;
  background: #ece9d8;          /* XP control gray */
  border: 1px solid #0831d9;
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
  overflow: hidden;
}

/* ===== TITLE BAR (Luna) ===== */
#titlebar {
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #06f 88%, #0997ff 100%);
  background: linear-gradient(180deg, #3c91f2 0%, #1f6fe0 9%, #1c64d4 50%, #1c5fcf 90%, #2f7fe8 100%);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 8px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  border-bottom: 1px solid #003ce0;
}
.tb-icon { margin-right: 5px; }

/* ===== BANNER ===== */
#banner {
  width: 100%;
  background: #fff;
  border-bottom: 2px groove #d4d0c8;
}
#banner-left { padding: 10px 14px; }
#banner h1 {
  margin: 0;
  font-size: 28px;
  color: #003399;
  letter-spacing: -1px;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
}
#banner .tagline {
  margin: 2px 0 0 0;
  color: #666;
  font-style: italic;
  font-size: 12px;
}
#banner-right {
  text-align: right;
  padding: 10px 14px;
  vertical-align: bottom;
  color: #b35900;
  font-weight: bold;
  white-space: nowrap;
}

/* ===== LAYOUT ===== */
#layout { width: 100%; }
#sidebar {
  width: 165px;
  vertical-align: top;
  padding: 10px;
  background: #ece9d8;
  border-right: 2px groove #d4d0c8;
}
#content {
  vertical-align: top;
  padding: 12px 16px;
  background: #fff;
}

/* ===== SIDEBAR NAV BOXES ===== */
.nav-box {
  border: 1px solid #aca899;
  background: #f6f5ee;
  margin-bottom: 10px;
}
.nav-head {
  background: linear-gradient(180deg, #4a8de8 0%, #2466cc 100%);
  color: #fff;
  font-weight: bold;
  padding: 3px 6px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.nav-list { list-style: none; margin: 0; padding: 5px; }
.nav-list li { margin: 0; padding: 2px 0; }
.nav-list a {
  color: #003399;
  text-decoration: none;
  display: block;
  padding: 2px 4px;
}
.nav-list a:hover {
  background: #316ac5;
  color: #fff;
}
.nav-controls { padding: 6px; }
.nav-controls button {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  padding: 3px;
  cursor: pointer;
}
.nav-controls input {
  width: 100%;
  box-sizing: border-box;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  padding: 3px;
  border: 1px solid #7f9db9;
}
.counter-box {
  text-align: center;
}
.counter-box img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Ko-fi support box */
.kofi-box { padding: 8px; }
.kofi-msg {
  margin: 0 0 7px 0;
  line-height: 1.45;
  color: #333;
}
.kofi-btn {
  display: block;
  text-align: center;
  padding: 5px 8px;
  background: linear-gradient(180deg, #ff8784 0%, #ff5e5b 50%, #e84d4a 100%);
  border: 1px solid #c0413e;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.kofi-btn:hover { background: linear-gradient(180deg, #ff9b98 0%, #ff6f6c 50%, #f25956 100%); }
.kofi-btn:active { background: #e84d4a; }

/* XP-style beveled buttons */
button {
  background: linear-gradient(180deg, #fff 0%, #ece9d8 50%, #d8d4c8 100%);
  border: 1px solid #003c74;
  border-radius: 3px;
  color: #000;
}
button:active {
  background: #c8c4b8;
}

/* ===== CONTENT TYPE ===== */
.welcome {
  background: #f6f9ff;
  border: 1px solid #b6cbef;
  padding: 8px 10px;
  margin-bottom: 14px;
}
.welcome p { margin: 0 0 6px 0; line-height: 1.5; }
.welcome p:last-child { margin-bottom: 0; }

.section-title {
  font-size: 16px;
  color: #003399;
  border-bottom: 2px solid #316ac5;
  padding-bottom: 3px;
  margin: 18px 0 10px 0;
}

.code {
  font-family: "Courier New", monospace;
  background: #efefef;
  border: 1px solid #ccc;
  padding: 0 3px;
}

/* ===== SOFTWARE ENTRIES (collapsible) ===== */
.sw-item {
  border: 1px solid #aca899;
  margin-bottom: 8px;
  background: #fff;
}
.sw-header {
  background: linear-gradient(180deg, #f0f0ea 0%, #dcd8c8 100%);
  padding: 5px 8px;
  min-height: 32px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: bold;
  color: #003399;
  display: flex;
  align-items: center;
  user-select: none;
}
.sw-header:hover { background: linear-gradient(180deg, #e8eefc 0%, #c9d6f0 100%); }
.sw-toggle {
  display: inline-block;
  width: 14px;
  text-align: center;
  margin-right: 6px;
  font-family: "Courier New", monospace;
  color: #555;
}
.sw-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  vertical-align: middle;
  flex: 0 0 auto;
  image-rendering: auto; /* smooth scaling suits real Windows app icons */
}
.sw-name { flex: 1; }
.sw-cat {
  font-weight: normal;
  font-size: 11px;
  color: #666;
  background: #ece9d8;
  border: 1px solid #b8b4a8;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
}

/* Body of an entry */
.sw-body {
  display: none;
  padding: 10px;
  border-top: 1px solid #d4d0c8;
  background: #fcfcfa;
}
.sw-item.open .sw-body { display: block; }

/* meta table: version / size */
.sw-meta {
  border-collapse: collapse;
  margin-bottom: 8px;
  font-size: 12px;
}
.sw-meta td {
  border: 1px solid #d4d0c8;
  padding: 3px 8px;
}
.sw-meta td.k {
  background: #ece9d8;
  font-weight: bold;
  white-space: nowrap;
}

.sw-desc { line-height: 1.5; margin: 0 0 10px 0; }

.sw-download a {
  display: inline-block;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 50%, #d8d4c8 100%);
  border: 1px solid #003c74;
  border-radius: 3px;
  padding: 3px 12px;
  color: #003399;
  text-decoration: none;
  font-weight: bold;
}
.sw-download a:hover { background: #e8eefc; }

/* screenshots */
.sw-shots { margin-top: 10px; }
.sw-shots-label { font-weight: bold; color: #555; margin-bottom: 4px; }
.sw-shots img {
  border: 1px solid #808080;
  padding: 2px;
  background: #fff;
  margin: 0 6px 6px 0;
  max-width: 220px;
  vertical-align: top;
  cursor: pointer;
}

/* ===== GUIDE ENTRIES (collapsible) ===== */
.guide-item {
  border: 1px solid #aca899;
  margin-bottom: 8px;
  background: #fff;
}
.guide-header {
  background: linear-gradient(180deg, #eef3ec 0%, #d6e0cd 100%);
  padding: 5px 8px;
  min-height: 28px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: bold;
  color: #1f5c1f;
  display: flex;
  align-items: center;
  user-select: none;
}
.guide-header:hover { background: linear-gradient(180deg, #e6f1e2 0%, #c6dabd 100%); }
.guide-header .sw-name { color: #1f5c1f; }

.guide-body {
  display: none;
  padding: 10px 12px;
  border-top: 1px solid #d4d0c8;
  background: #fcfdfb;
}
.guide-item.open .guide-body { display: block; }

.guide-summary {
  margin: 0 0 8px 0;
  font-style: italic;
  color: #555;
}

/* authored body content */
.guide-content { line-height: 1.6; font-size: 12px; }
.guide-content h4 {
  margin: 12px 0 5px 0;
  font-size: 13px;
  color: #003399;
  border-bottom: 1px dotted #b6cbef;
  padding-bottom: 2px;
}
.guide-content h4:first-child { margin-top: 0; }
.guide-content p { margin: 0 0 8px 0; }
.guide-content ul { margin: 4px 0 10px 0; padding-left: 20px; }
.guide-content li { margin: 0 0 4px 0; }
.guide-content code {
  font-family: "Courier New", monospace;
  background: #efefef;
  border: 1px solid #ccc;
  padding: 0 3px;
  font-size: 12px;
}
.guide-content .guide-note {
  background: #fff8e6;
  border: 1px solid #e6c98f;
  border-left: 4px solid #e0a500;
  padding: 6px 8px;
  margin-top: 10px;
}

/* ===== CHANGELOG (scrollable) ===== */
.changelog-title {
  font-size: 13px;
  color: #003399;
  margin: 6px 0 4px 0;
}
.changelog {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #aca899;
  background: #fff;
  padding: 8px 10px;
}
.cl-entry { margin-bottom: 10px; }
.cl-entry:last-child { margin-bottom: 0; }
.cl-ver { font-weight: bold; color: #003399; }
.cl-date { color: #999; font-size: 11px; margin-left: 4px; }
.changelog ul { margin: 3px 0 0 0; padding-left: 18px; }
.changelog li { margin-bottom: 2px; line-height: 1.4; }

/* ===== SCREENSHOT LIGHTBOX ===== */
.lb-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-stage {
  position: relative;
  text-align: center;
  max-width: 90%;
  max-height: 88%;
}
.lb-img {
  max-width: 90vw;
  max-height: 82vh;
  border: 3px solid #fff;
  background: #fff;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}
.lb-counter {
  margin-top: 8px;
  color: #fff;
  font-size: 12px;
  text-shadow: 1px 1px 2px #000;
}
.lb-close, .lb-prev, .lb-next {
  position: fixed;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-family: Tahoma, sans-serif;
  line-height: 1;
  padding: 0;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255, 94, 91, 0.85); }
.lb-close {
  top: 14px; right: 18px;
  width: 34px; height: 34px;
  font-size: 22px;
  border-radius: 3px;
}
.lb-prev, .lb-next {
  top: 50%;
  margin-top: -28px;
  width: 40px; height: 56px;
  font-size: 32px;
  border-radius: 4px;
}
.lb-prev { left: 18px; }
.lb-next { right: 18px; }

/* ===== FOOTER ===== */
#footer {
  background: #ece9d8;
  border-top: 2px groove #d4d0c8;
  padding: 8px 12px;
  text-align: center;
  color: #555;
  font-size: 11px;
}

/* ===== blink (used sparingly, authentic era touch) ===== */
.blink { color: #ffd700; }
@media (prefers-reduced-motion: no-preference) {
  .blink { animation: blink 1.2s steps(2, start) infinite; }
}
@keyframes blink { to { visibility: hidden; } }

/* ===== responsive fallback ===== */
@media (max-width: 640px) {
  #sidebar, #content { display: block; width: auto; border-right: none; }
  #sidebar { border-bottom: 2px groove #d4d0c8; }
  #banner-right { display: none; }
}