/* Geofile — base.css
   Resets, the Bliss-ish wallpaper, plus utility styles. XP.css handles every
   .window / .title-bar / .status-bar / button / input style. */

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

html, body { width: 100%; height: 100%; }

/* Body = the Bliss wallpaper. Sky gradient + SVG-painted rolling hill. */
body {
  font-family: 'Trebuchet MS', 'Tahoma', sans-serif;
  font-size: 11px;
  color: #000;
  position: fixed;
  inset: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 500' preserveAspectRatio='none'><defs><linearGradient id='h' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23a3d063'/><stop offset='40%25' stop-color='%237bb143'/><stop offset='100%25' stop-color='%23456a23'/></linearGradient></defs><path d='M 0 320 C 200 240 480 380 800 280 C 1080 200 1350 340 1600 240 L 1600 500 L 0 500 Z' fill='url(%23h)'/><path d='M 0 380 C 300 320 600 420 900 360 C 1200 300 1400 400 1600 360 L 1600 500 L 0 500 Z' fill='%23527c2a' opacity='0.65'/></svg>") no-repeat bottom center / 100% 38%,
    linear-gradient(180deg,
      #3F92F4 0%,
      #6DBFFF 30%,
      #A4D8FC 55%,
      #DCEEFB 70%,
      #B4D67B 70%,
      #87B95E 100%);
}

/* XP-blue selection. */
::selection { background: #316AC5; color: #fff; }

/* Reset the focus outline — XP.css buttons provide their own focus ring. */
:focus { outline: none; }

/* The .window-body inside the Explorer windows shouldn't have its own padding —
   our toolbar/sidebar/content fill it edge-to-edge. */
.window-body.window-body-no-pad { padding: 0; margin: 0; }

/* App windows are always positioned absolutely on the desktop. */
.app-window { position: absolute; }

/* ── Reader body — styled like a WordPad document ────────────────────── */
/* The Reader window's body gets .wordpad added when it shows an article.
   Inside, we render the sanitised Wikipedia HTML (text + image markup only)
   so it reads like an .rtf opened in WordPad: serif body, simple heading
   hierarchy, inline images, comfortable line height. */
#readerWindow .window-body.wordpad {
  background: #FFFFFF;
  padding: 18px 22px 24px;
  max-height: 70vh;
  overflow: auto;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 13px;
  color: #111;
  line-height: 1.5;
}
.wordpad .wp-title {
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #888;
}
.wordpad .wp-content > * { margin-bottom: 10px; }
.wordpad .wp-content p  { margin: 0 0 10px; }
.wordpad .wp-content h1,
.wordpad .wp-content h2,
.wordpad .wp-content h3,
.wordpad .wp-content h4,
.wordpad .wp-content h5,
.wordpad .wp-content h6 {
  font-family: 'Times New Roman', 'Times', serif;
  margin: 16px 0 6px;
  font-weight: 700;
  line-height: 1.25;
}
.wordpad .wp-content h1 { font-size: 20px; }
.wordpad .wp-content h2 { font-size: 18px; }
.wordpad .wp-content h3 { font-size: 16px; }
.wordpad .wp-content h4 { font-size: 14px; }
.wordpad .wp-content h5 { font-size: 13px; font-style: italic; }
.wordpad .wp-content h6 { font-size: 12px; font-style: italic; }
.wordpad .wp-content ul,
.wordpad .wp-content ol {
  margin: 8px 0 10px;
  padding-left: 28px;
}
.wordpad .wp-content li { margin: 2px 0; }
.wordpad .wp-content blockquote {
  margin: 8px 16px;
  padding-left: 12px;
  border-left: 3px solid #C0C0C0;
  font-style: italic;
}
.wordpad .wp-content a {
  color: #0033CC;
  text-decoration: underline;
}
.wordpad .wp-content a:visited { color: #551A8B; }
.wordpad .wp-content img {
  max-width: 220px;
  max-height: 240px;
  height: auto;
  border: 1px solid #888;
  padding: 2px;
  background: #FFFFFF;
  margin: 4px 12px 4px 0;
  display: inline-block;
  vertical-align: top;
}
.wordpad .wp-content figure {
  display: inline-block;
  margin: 4px 12px 8px 0;
  max-width: 230px;
}
.wordpad .wp-content figure img {
  margin: 0;
  max-width: 100%;
}
.wordpad .wp-content figcaption {
  font-size: 11px;
  color: #444;
  font-style: italic;
  margin-top: 2px;
  line-height: 1.3;
}
.wordpad .wp-content dl { margin: 8px 0; }
.wordpad .wp-content dt { font-weight: 700; }
.wordpad .wp-content dd { margin: 0 0 6px 24px; }
.wordpad .wp-content code,
.wordpad .wp-content pre {
  font-family: 'Lucida Console', 'Courier New', monospace;
  font-size: 12px;
  background: #F4F4F0;
  border: 1px solid #CCC;
}
.wordpad .wp-content code { padding: 0 3px; }
.wordpad .wp-content pre { padding: 8px; overflow-x: auto; white-space: pre-wrap; }
.wordpad .wp-content hr { border: 0; border-top: 1px solid #BBB; margin: 14px 0; }
.wordpad .wp-content br + br { display: none; }   /* collapse extra spacing */
.wordpad .wp-loading {
  text-align: center;
  font-family: 'Tahoma', sans-serif;
  font-size: 11px;
  color: #666;
  padding: 24px;
}

/* Make the Reader window itself behave like a document — wider than the
   summary card was, taller too. */
#readerWindow.app-window {
  width: min(700px, 92vw);
  height: min(640px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
}
#readerWindow .window-body {
  flex: 1;
  min-height: 0;
}

/* ── File-info modal (a centred XP "Properties" dialog) ──────────────── */
.geofile-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.geofile-modal.visible { display: flex; }
.gm-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.10);
}
.geofile-modal .gm-card {
  position: relative;
  width: min(360px, 92vw);
}