/* 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 classic Windows 95 / 98 default desktop colour: solid teal
   #008080. No image, no gradient — the iconic flat fill that shipped with
   every clean install of 95 and 98. */
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: #008080;
}

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

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

/* XP.css already paints the chunky blue Luna frame on .window via inset
   box-shadows. We just add an outer drop shadow so the window lifts off
   the wallpaper a bit. (Earlier we tried overriding with a custom border
   but that clobbered the inset blue and broke the resize handle.) */
.window {
  box-shadow:
    /* keep XP.css's inset-shadow stack so the blue frame survives */
    inset -1px -1px #00138c, inset  1px  1px #0831d9,
    inset -2px -2px #001ea0, inset  2px  2px #166aee,
    inset -3px -3px #003bda, inset  3px  3px #0855dd,
    /* plus an outer lift shadow we add */
    0 4px 14px rgba(0, 0, 0, 0.25);
}
/* Title bar — bumped slightly taller with proper padding so the min/max/close
   buttons don't fill the full height. Matches the XP.css demo at
   https://botoxparty.github.io/XP.css/#title-bar.
   Selectors below use [aria-label] specificity so they always beat XP.css's
   own per-button rules. */
.window > .title-bar {
  height: 28px !important;
  min-height: 28px !important;
  flex-shrink: 0 !important;   /* don't let body overflow squeeze the title bar */
  font-size: 14px !important;
  padding: 0 6px 0 6px !important;
  align-items: center;
  display: flex;
}
.window > .title-bar .title-bar-text {
  font-size: 14px !important;
  letter-spacing: 0.01em;
}
.window > .title-bar .title-bar-controls {
  display: flex;
  gap: 3px;
  padding-left: 12px;     /* breathing room between title text and controls */
}
.window > .title-bar .title-bar-controls button[aria-label] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 22px !important;
  min-height: 22px !important;
  width: 22px !important;
  height: 22px !important;
}

/* The .window-body inside the Explorer windows doesn't get the usual
   8px inset margin — our toolbar/sidebar/content fill it. BUT we leave
   a 4px gap on left / right / bottom so XP.css's inset blue Luna shadow
   actually shows through (the famous thick blue frame around the body).
   Top stays flush because the title-bar covers it. */
.window-body.window-body-no-pad {
  padding: 0;
  margin: 0 4px 4px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Notepad-style document body — used by Readme.txt and any other text
   note. Plain white background, Lucida Console / Courier monospace at
   the size real Notepad shipped with, word-wrap on overflow. */
.notepad-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 14px 18px;
  background: #FFFFFF;
  border: 1px solid #ACA899;
  border-top: 0;
  font-family: 'Lucida Console', 'Courier New', monospace;
  font-size: 14px;            /* up from 12px — easier to read */
  font-weight: 600;           /* heavier glyphs */
  line-height: 1.6;
  color: #111;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}

/* 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. */
.reader-pane .window-body.wordpad {
  background: #FFFFFF;
  padding: 22px 28px 28px;
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 16px;
  color: #111;
  line-height: 1.55;
}
.wordpad .wp-title {
  font-family: 'Times New Roman', 'Times', serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #888;
}
.wordpad .wp-content > * { margin-bottom: 12px; }
.wordpad .wp-content p  { margin: 0 0 12px; }
.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: 18px 0 8px;
  font-weight: 700;
  line-height: 1.25;
}
.wordpad .wp-content h1 { font-size: 24px; }
.wordpad .wp-content h2 { font-size: 22px; }
.wordpad .wp-content h3 { font-size: 19px; }
.wordpad .wp-content h4 { font-size: 17px; }
.wordpad .wp-content h5 { font-size: 16px; font-style: italic; }
.wordpad .wp-content h6 { font-size: 15px; 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; }
/* Mark links that lead away from the site (citations + non-article
   Wikipedia namespaces) with a small arrow. Anything that starts with
   http(s) and isn't an internal article jump qualifies; the click handler
   in wikipedia.js intercepts the internal-article variant. */
.wordpad .wp-content a[href^="http"]::after {
  content: " ↗";
  font-size: 0.85em;
  color: #666;
}
.wordpad .wp-content a[href^="https://en.wikipedia.org/wiki/"]::after,
.wordpad .wp-content a[href^="http://en.wikipedia.org/wiki/"]::after {
  content: none;  /* internal Wikipedia article links — handled by interceptor */
}
.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;
}

/* Reader panes — title bar / body / status bar in a 3-row grid so the
   body always fills the middle row. Multi-instance: every article gets
   its own .reader-pane spawned by js/wikipedia.js. */
.reader-pane.app-window {
  width: min(700px, 92vw);
  height: min(640px, calc(100vh - 80px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.reader-pane .window-body {
  margin: 0 !important;
  background: #FFFFFF !important;
  min-height: 0 !important;
  height: 100% !important;     /* fill the grid row — auto sizes to content */
  overflow: auto !important;
}
.reader-pane .status-bar { margin: 0 !important; }

/* ── 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);
}