/* Shared Win98 Notepad shell for the standalone static pages (/privacy, /changelog).
   Copied verbatim from the app (globals.css, Window.tsx); assets inlined as data
   URIs because these pages live outside the Vite build. */

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("/fonts/ms_sans_serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("/fonts/ms_sans_serif_bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Px437 IBM VGA";
  src: url("/fonts/px437_ibm_vga_9x16.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  --win98-white: #ffffff;
  --win98-black: #000000;
  --win98-light-gray: #dfdfdf;
  --win98-silver: #c0c0c0;
  --win98-dark-gray: #808080;
  --win98-teal: #008080;
  --win98-near-black: #0a0a0a;
  --win98-ink: #222222;
  --win98-navy: #000080;
  --win98-azure: #1084d0;
  --win98-blue: #0000ff;

  --cursor-arrow: url("/arrow.cur"), auto;
  --cursor-hand: url("/pointer.cur"), pointer;
  /* Inverting pixels baked to black; browsers render .cur inversion inconsistently */
  --cursor-text: url("/beam.cur"), text;

  --font-pixelated-sans: "Pixelated MS Sans Serif", Arial, sans-serif;
  --font-vga: "Px437 IBM VGA", "Courier New", monospace;

  --shadow-raised:
    inset -1px -1px var(--win98-near-black), inset 1px 1px var(--win98-white),
    inset -2px -2px var(--win98-dark-gray), inset 2px 2px var(--win98-light-gray);
  --shadow-sunken:
    inset -1px -1px var(--win98-white), inset 1px 1px var(--win98-near-black),
    inset -2px -2px var(--win98-light-gray), inset 2px 2px var(--win98-dark-gray);
  --shadow-window:
    inset -1px -1px var(--win98-near-black), inset 1px 1px var(--win98-light-gray),
    inset -2px -2px var(--win98-dark-gray), inset 2px 2px var(--win98-white);
  --shadow-field:
    inset -1px -1px var(--win98-white), inset 1px 1px var(--win98-dark-gray),
    inset -2px -2px var(--win98-light-gray), inset 2px 2px var(--win98-near-black);

  --image-window-minimize: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='6' height='2' fill='black'/%3E%3C/svg%3E");
  --image-window-maximize: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z' fill='black'/%3E%3C/svg%3E");
  --image-window-close: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z' fill='black'/%3E%3C/svg%3E");
  --image-scrollbar-background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' viewBox='0 0 2 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0V1H1V2H2V1H1V0Z' fill='%23C0C0C0'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1V1H0V2H1V1H2V0Z' fill='white'/%3E%3C/svg%3E");
  --image-button-up: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E%3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z' fill='black'/%3E%3C/svg%3E");
  --image-button-down: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E%3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E%3C/svg%3E");
  --image-notepad-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAFVBMVEUAAAAAgIAA//+AgIDAwMAAAAD///8J9+zXAAAAAXRSTlMAQObYZgAAAF9JREFUCNctjcENgDAMxIJYAJA6AFXZgAWIGt48Gkbo/iPgtvhl3V0UEZlWENhOWJqoago0CS5HDnc1o2lJsDHJxcZkf5FIYmr/5LY+0ULSH5TKlUOOiMwVumRo0svnA1uIFhUySwzeAAAAAElFTkSuQmCC");
}

*,
*::before,
*::after {
  box-sizing: border-box;
  cursor: var(--cursor-arrow);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 1rem;
  display: flex;
  justify-content: center;
  font-family: var(--font-pixelated-sans);
  font-size: 12px;
  color: var(--win98-ink);
  background-color: var(--win98-teal);
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  overscroll-behavior: none;
}

::selection {
  background-color: var(--win98-navy);
  color: var(--win98-white);
}

a {
  color: var(--win98-blue);
}
a,
a * {
  cursor: var(--cursor-hand);
}

.window {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 80 VGA columns (720px) + document padding + scrollbar + window padding */
  max-width: 47.375rem;
  padding: 3px;
  background: var(--win98-silver);
  box-shadow: var(--shadow-window);
  font-size: 11px;
}

.title-bar,
.menu-bar {
  -webkit-user-select: none;
  user-select: none;
}

.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 2px 3px 3px;
  background: linear-gradient(90deg, var(--win98-navy), var(--win98-azure));
}

.title-bar-caption {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.title-bar-caption::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background-image: var(--image-notepad-icon);
  background-size: 12px;
}

.title-bar-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
  color: var(--win98-white);
}

.title-bar-controls {
  display: flex;
  flex: none;
}

.title-bar-controls > * {
  display: block;
  min-width: 16px;
  min-height: 14px;
  background-color: var(--win98-silver);
  background-repeat: no-repeat;
  box-shadow: var(--shadow-raised);
  /* Arrow even on the close link, as Win98 did */
  cursor: var(--cursor-arrow);
}

.title-bar-controls > :active {
  box-shadow: var(--shadow-sunken);
}

.control-minimize {
  background-image: var(--image-window-minimize);
  background-position: bottom 3px left 4px;
}
.control-maximize {
  background-image: var(--image-window-maximize);
  background-position: top 2px left 3px;
}
.control-close {
  margin-left: 2px;
  background-image: var(--image-window-close);
  background-position: top 3px left 4px;
}

.menu-bar {
  display: flex;
  padding: 1px 0;
}

.menu-bar span {
  padding: 2px 6px;
}

.document {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  background: var(--win98-white);
  color: var(--win98-black);
  box-shadow: var(--shadow-field);
  font-family: var(--font-vga);
  font-size: 16px;
  line-height: 1;
}

/* Beam on the article, not .document: Chromium paints the scroll container's
   cursor over its custom scrollbar */
.document article {
  min-height: 100%;
  padding: 8px;
}
.document article,
.document article *,
.document article *::before,
.document article *::after {
  cursor: var(--cursor-text);
}
.document a,
.document a * {
  cursor: var(--cursor-hand);
}

/* Win98 scrollbar, verbatim from src/globals.css */
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background-image: var(--image-scrollbar-background);
}
::-webkit-scrollbar-thumb {
  background-color: var(--win98-light-gray);
  box-shadow: var(--shadow-raised);
}
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}
::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: var(--image-button-up);
}
::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: var(--image-button-down);
}

.document h1,
.document h2 {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  text-transform: uppercase;
}

.document h1 {
  text-align: center;
  letter-spacing: 0.5ch;
}

.document h2 {
  margin-top: 32px;
}

.document p,
.document hr {
  margin: 16px 0;
}

.document ul {
  margin: 0;
  padding-left: 1ch;
  list-style: "* " inside;
}

.document li {
  margin: 8px 0;
}

.document hr {
  border: 0;
  /* Firefox's UA sheet paints <hr> gray */
  color: inherit;
  overflow: hidden;
  white-space: nowrap;
}
.document hr::before {
  content: "--------------------------------------------------------------------------------";
}
.document code {
  font: inherit;
}

.document address {
  font-style: normal;
}