/* ==========================================================================
   Windows 98 + Linux — Mixed layout with light and dark themes
   ========================================================================== */

/* ---- CSS Variables (Light Theme) ---- */
:root {
  color-scheme: light;

  /* Backgrounds & Surfaces */
  --page-bg: #d9d5c8;
  --window-bg: #e8e5d9;
  --surface-bg: #f4f1e7;

  /* Text */
  --text: #24251f;
  --text-inv: #f0eaf7;
  --muted: #5b5d50;

  /* Accents & Links */
  --accent: #8caf24;
  --accent-hover: #6f8d18;
  --accent-contrast: #171b0c;
  --link: #526e18;
  --focus: #647d20;

  /* Title Bar */
  --title-start: #647d20;
  --title-end: #91aa32;
  --title-text: #fff;

  /* Terminal */
  --terminal-bg: #171913;
  --terminal-text: #b8ed62;

  /* Bevels & Borders */
  --bevel-light: #fffdf3;
  --bevel-mid: #a6a397;
  --bevel-dark: #77766c;
  --bevel-deep: #4b4a43;

  /* Shadows & Complex Borders */
  --section-shadow:
    inset -1px -1px var(--bevel-dark),
    inset 1px 1px var(--bevel-light),
    inset -2px -2px var(--bevel-mid),
    inset 2px 2px var(--surface-bg);

  --raised-shadow:
    inset -1px -1px var(--bevel-deep),
    inset 1px 1px var(--bevel-light),
    inset -2px -2px var(--bevel-dark),
    inset 2px 2px var(--button-face);

  --sunken-shadow:
    inset 1px 1px var(--bevel-dark),
    inset -1px -1px var(--bevel-light),
    inset 2px 2px var(--bevel-deep),
    inset -2px -2px var(--button-face);

  /* Buttons & Forms */
  --button-face: #e8e5d9;
  --button-text: #24251f;
  --button-border-light: #fffdf3;
  --button-border-dark: #77766c;
  --button-hover: #d8d5c9;

  --fieldset-border-light: #fffdf3;
  --fieldset-border-dark: #77766c;
  --legend-bg: #e8e5d9;

  /* Scrollbar */
  --scrollbar-track-dot: #a6a397;

  /* Gradients */
  --icon-gradient: linear-gradient(135deg, #b8ed62, #647d20);

  /* Scrollbar Arrow SVGs (Encoded #24251f as %2324251f for URL) */
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2324251f'><rect x='7' y='2' width='2' height='1'/><rect x='6' y='3' width='4' height='1'/><rect x='5' y='4' width='6' height='1'/><rect x='4' y='5' width='8' height='1'/><rect x='3' y='6' width='10' height='1'/><rect x='2' y='7' width='12' height='1'/><rect x='3' y='8' width='3' height='6'/><rect x='10' y='8' width='3' height='6'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2324251f'><rect x='3' y='2' width='3' height='6'/><rect x='10' y='2' width='3' height='6'/><rect x='2' y='8' width='12' height='1'/><rect x='3' y='9' width='10' height='1'/><rect x='4' y='10' width='8' height='1'/><rect x='5' y='11' width='6' height='1'/><rect x='6' y='12' width='4' height='1'/><rect x='7' y='13' width='2' height='1'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2324251f'><rect x='2' y='7' width='1' height='2'/><rect x='3' y='6' width='1' height='4'/><rect x='4' y='5' width='1' height='6'/><rect x='5' y='4' width='1' height='8'/><rect x='6' y='3' width='1' height='10'/><rect x='7' y='2' width='1' height='12'/><rect x='8' y='2' width='6' height='4'/><rect x='8' y='10' width='6' height='4'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2324251f'><rect x='8' y='2' width='6' height='4'/><rect x='8' y='10' width='6' height='4'/><rect x='7' y='2' width='1' height='12'/><rect x='6' y='3' width='1' height='10'/><rect x='5' y='4' width='1' height='8'/><rect x='4' y='5' width='1' height='6'/><rect x='3' y='6' width='1' height='4'/><rect x='2' y='7' width='1' height='2'/></svg>");
}

/* ---- CSS Variables (Dark Theme) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds & Surfaces */
  --page-bg: #211a2b;
  --window-bg: #30263b;
  --surface-bg: #3a3046;

  /* Text */
  --text: #f0eaf7;
  --text-inv: #24251f;
  --muted: #c2b4d2;

  /* Accents & Links */
  --accent: #c49af2;
  --accent-hover: #d5b9fa;
  --accent-contrast: #21172c;
  --link: #d4b3ff;
  --focus: #d4b3ff;

  /* Title Bar */
  --title-start: #51376e;
  --title-end: #7952a0;
  --title-text: #fff;

  /* Terminal */
  --terminal-bg: #17121e;
  --terminal-text: #c4f17a;

  /* Bevels & Borders */
  --bevel-light: #665779;
  --bevel-mid: #51435f;
  --bevel-dark: #17121e;
  --bevel-deep: #0d0912;

  /* Shadows & Complex Borders */
  --section-shadow:
    inset -1px -1px #17121e,
    inset 1px 1px #665779,
    inset -2px -2px #241b30,
    inset 2px 2px #51435f;

  --raised-shadow:
    inset -1px -1px var(--bevel-deep),
    inset 1px 1px var(--bevel-light),
    inset -2px -2px var(--bevel-dark),
    inset 2px 2px var(--button-face);

  --sunken-shadow:
    inset 1px 1px var(--bevel-dark),
    inset -1px -1px var(--bevel-light),
    inset 2px 2px var(--bevel-deep),
    inset -2px -2px var(--button-face);

  /* Buttons & Forms */
  --button-face: #3a3046;
  --button-text: #f0eaf7;
  --button-border-light: #665779;
  --button-border-dark: #17121e;
  --button-hover: #51435f;

  --fieldset-border-light: #665779;
  --fieldset-border-dark: #17121e;
  --legend-bg: #30263b;

  /* Scrollbar */
  --scrollbar-track-dot: #241b30;

  /* Gradients */
  --icon-gradient: linear-gradient(135deg, #9b5de5, #542878);

  /* Scrollbar Arrow SVGs (Encoded #f0eaf7 as %23f0eaf7 for URL) */
  --scrollbar-arrow-up: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f0eaf7'><rect x='7' y='2' width='2' height='1'/><rect x='6' y='3' width='4' height='1'/><rect x='5' y='4' width='6' height='1'/><rect x='4' y='5' width='8' height='1'/><rect x='3' y='6' width='10' height='1'/><rect x='2' y='7' width='12' height='1'/><rect x='3' y='8' width='3' height='6'/><rect x='10' y='8' width='3' height='6'/></svg>");
  --scrollbar-arrow-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f0eaf7'><rect x='3' y='2' width='3' height='6'/><rect x='10' y='2' width='3' height='6'/><rect x='2' y='8' width='12' height='1'/><rect x='3' y='9' width='10' height='1'/><rect x='4' y='10' width='8' height='1'/><rect x='5' y='11' width='6' height='1'/><rect x='6' y='12' width='4' height='1'/><rect x='7' y='13' width='2' height='1'/></svg>");
  --scrollbar-arrow-left: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f0eaf7'><rect x='2' y='7' width='1' height='2'/><rect x='3' y='6' width='1' height='4'/><rect x='4' y='5' width='1' height='6'/><rect x='5' y='4' width='1' height='8'/><rect x='6' y='3' width='1' height='10'/><rect x='7' y='2' width='1' height='12'/><rect x='8' y='2' width='6' height='4'/><rect x='8' y='10' width='6' height='4'/></svg>");
  --scrollbar-arrow-right: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f0eaf7'><rect x='8' y='2' width='6' height='4'/><rect x='8' y='10' width='6' height='4'/><rect x='7' y='2' width='1' height='12'/><rect x='6' y='3' width='1' height='10'/><rect x='5' y='4' width='1' height='8'/><rect x='4' y='5' width='1' height='6'/><rect x='3' y='6' width='1' height='4'/><rect x='2' y='7' width='1' height='2'/></svg>");
}

:root[data-theme="dark"] .title-card {
  color: var(--text-inv);
}

/* ==========================================================================
   Base Styles & Resets
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
}

.page {
  width: min(800px, calc(100% - 24px));
  max-width: 800px;
  margin: 24px auto 40px;
  padding: 0;
}

img,
canvas,
video {
  max-width: 100%;
}

/* ==========================================================================
   Header & Title Cards
   ========================================================================== */

.site-header {
  display: flex;
  gap: 4px;
  align-items: stretch;
  margin-bottom: 8px;
  min-width: 0;
}

.icon-card {
  background: var(--icon-gradient);
  color: var(--text);
  box-shadow: var(--section-shadow);
  box-sizing: border-box;
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  display: grid;
  place-items: center;
  border-top: 1px solid var(--title-end);
  border-left: 1px solid var(--title-end);
}

.icon-card img {
  display: block;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  object-fit: contain;
  margin-bottom: 2px;
  margin-right: 2px;
}

.title-card {
  background: var(--window-bg);
  color: var(--text);
  box-shadow: var(--section-shadow);
  flex: 1;
  min-width: 0;
  margin: 0;
  border-top: 1px solid var(--title-end);
  border-left: 1px solid var(--title-end);
}

.linux-title-bar {
  background: linear-gradient(90deg, var(--title-start), var(--title-end));
  color: var(--title-text);
}

.title-bar-icon {
  font-family: monospace;
  margin-right: 6px;
  white-space: pre;
}

.version-string {
  margin-left: auto;
  padding-left: 8px;
  font-family: monospace;
  font-size: 11px;
  opacity: 0.9;
}

.subtitle {
  margin: 4px 0;
  color: var(--text);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

nav {
  margin: 0 0 20px;
}

.nav-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.nav-buttons li:last-child {
  margin-left: auto;
}

.theme-toggle,
.nav-button {
  display: inline-block;
  padding: 4px 12px;
  color: var(--button-text);
  background: var(--button-face);
  border: 2px solid;
  border-color:
    var(--button-border-light)
    var(--button-border-dark)
    var(--button-border-dark)
    var(--button-border-light);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
}

.theme-toggle:hover,
.nav-button:hover {
  color: var(--button-text);
  background: var(--button-hover);
}

.theme-toggle:active,
.nav-button:active,
.nav-button.pressed {
  border-color:
    var(--button-border-dark)
    var(--button-border-light)
    var(--button-border-light)
    var(--button-border-dark);
}

/* ==========================================================================
   Buttons, Links & Focus States
   ========================================================================== */

.green-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color:
    var(--button-border-light)
    var(--button-border-dark)
    var(--button-border-dark)
    var(--button-border-light);
}

.green-primary:active,
.green-primary.pressed {
  border-color:
    var(--button-border-dark)
    var(--button-border-light)
    var(--button-border-light)
    var(--button-border-dark);
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

a:focus-visible,
.win-button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  color: var(--link);
  outline: 2px dotted var(--focus);
  outline-offset: 1px;
}

/* ==========================================================================
   Content Blocks & Windows
   ========================================================================== */

main p,
main h2,
main h3 {
  margin: 0 0 12px;
}

.section-window {
  margin-bottom: 20px;
  border-top: 1px solid var(--title-end);
  border-left: 1px solid var(--title-end);
  background: var(--window-bg);
  color: var(--text);
  box-shadow: var(--section-shadow);
}

.section-block {
  background: var(--window-bg);
  color: var(--text);
  margin: 0 0 16px;
  padding: 12px;
  padding-block-start: 8px;
  
  /* Replace 98.css's fixed gray/white border image */
  border-image: none;
  border-style: solid;
  border-width: 2px;
  border-color:
    var(--fieldset-border-dark)
    var(--fieldset-border-light)
    var(--fieldset-border-light)
    var(--fieldset-border-dark);
}

.section-block legend {
  background: var(--legend-bg);
  color: var(--text);
  padding: 0 4px;
  border-style: solid;
  border-width: 2px;
  border-color: var(--fieldset-border-dark);
}

.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
}

.badge {
  font-family: monospace;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--surface-bg);
  color: var(--text);
  border: 2px inset var(--window-bg);
}

/* ==========================================================================
   Terminal Block
   ========================================================================== */

.terminal {
  max-width: 100%;
  font-family: monospace;
  background: var(--terminal-bg);
  color: var(--terminal-text);
  border: 2px inset var(--window-bg);
  padding: 10px 12px;
  margin: 16px 0;
  white-space: pre;
  overflow-x: auto;
}

/* ==========================================================================
   Forms
   ========================================================================== */

form label {
  display: block;
  margin: 10px 0 2px;
}

form input,
form textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-bg);
  color: var(--text);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  margin-top: 28px;
  font-size: 12px;
}

footer p {
  margin: 2px 0;
}

/* ==========================================================================
   Scrollbar (98.css Adaptation)
   ========================================================================== */

/* Firefox Fallback */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--button-face) var(--window-bg);
}

/* Webkit (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar:horizontal {
  height: 17px;
}

::-webkit-scrollbar-corner {
  background: var(--button-face);
}

::-webkit-scrollbar-track {
  background-color: var(--window-bg);
  background-image: radial-gradient(var(--scrollbar-track-dot) 1px, transparent 1px);
  background-size: 2px 2px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--button-face);
  box-shadow: var(--raised-shadow);
}

::-webkit-scrollbar-button {
  display: block;
  background-color: var(--button-face);
  box-shadow: var(--raised-shadow);
  background-repeat: no-repeat;
  background-position: center;
}

::-webkit-scrollbar-button:active {
  box-shadow: var(--sunken-shadow);
  background-position: calc(50% + 1px) calc(50% + 1px);
}

::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: var(--scrollbar-arrow-up);
}

::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: var(--scrollbar-arrow-down);
}

::-webkit-scrollbar-button:horizontal:start {
  width: 16px;
  background-image: var(--scrollbar-arrow-left);
}

::-webkit-scrollbar-button:horizontal:end {
  width: 16px;
  background-image: var(--scrollbar-arrow-right);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 363px) {
  .page {
    width: calc(100% - 24px);
    margin: 24px auto 40px;
  }

  .nav-buttons {
    gap: 6px;
  }

  .theme-toggle,
  .nav-button {
    padding: 6px 9px;
  }

  main h1 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.05;
  }
}