/* GeoMillCities portal — 1999 look, AA contrast underneath. */
:root {
  --bg: #c0c0c0;
  --panel: #ffffff;
  --text: #000000;
  --link: #0000cc;
  --visited: #551a8b;
  --title-bg: #000080;
  --title-text: #ffffff;
  --bevel-light: #ffffff;
  --bevel-dark: #404040;
  --focus: #ffcc00;
  --error: #a00000;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  overflow-wrap: break-word; /* long titles and URLs wrap instead of overflowing */
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 Verdana, Tahoma, Geneva, sans-serif;
}
a { color: var(--link); }
a:visited { color: var(--visited); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px #000; }

.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; }

.masthead {
  background: var(--title-bg); color: var(--title-text);
  padding: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center;
}
.masthead a { color: var(--title-text); }
.logo { margin: 0; font: bold 1.75rem "Times New Roman", serif; font-style: italic; }
.logo a { text-decoration: none; }
.tagline { margin: 0; flex: 1; }
.masthead ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; align-items: center; }
.masthead form { margin: 0; }

main { max-width: 60rem; margin: 1.5rem auto; padding: 0 1rem; }
main:focus { outline: none; }

.btn {
  display: inline-block; font: inherit; color: #000; text-decoration: none; cursor: pointer;
  background: var(--bg); padding: .25rem .9rem;
  border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.btn:active { border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark); }
.masthead .btn { color: #000; }

.window {
  background: var(--bg); max-width: 32rem; margin: 0 auto;
  border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.window-title { margin: 0; font-size: 1rem; background: var(--title-bg); color: var(--title-text); padding: .25rem .5rem; }
.window-body { padding: 1rem; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: bold; }
.field input, .field select { font: inherit; width: 100%; padding: .25rem; border: 2px inset var(--bevel-dark); background: #fff; }
.help { margin: .25rem 0 0; font-size: .875rem; }
.help ul { margin: .25rem 0; padding-left: 1.25rem; }
.error, .errors { color: var(--error); font-weight: bold; }

.site-footer { text-align: center; padding: 1rem; font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Guestbook form when re-shown on the portal after an error */
.gm-field { margin-bottom: 1rem; }
.gm-field label { display: block; font-weight: bold; }
.gm-field input, .gm-field textarea { font: inherit; width: 100%; padding: .25rem; border: 2px inset var(--bevel-dark); background: #fff; }
.gm-error { color: var(--error); font-weight: bold; margin: .25rem 0 0; }
.gm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gm-btn { font: inherit; cursor: pointer; background: var(--bg); padding: .25rem .9rem; border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }

/* --- messages, utilities ------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: #333; font-size: .875rem; }
.badge { background: #ffcc00; color: #000; font-weight: bold; padding: 0 .4rem; border: 1px solid #000; }
.messages { margin-bottom: 1rem; }
.msg { margin: 0 0 .5rem; padding: .5rem .75rem; background: #ffffe1; border: 1px solid #000; }
.msg--error { background: #ffe1e1; color: var(--error); font-weight: bold; }
.btn--primary { font-weight: bold; }
code { font-family: "Courier New", monospace; }

/* --- File Manager -------------------------------------------------------- */
main.wide { max-width: 90rem; }
.fm-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }
.fm-grid .window { max-width: none; margin: 0; min-width: 0; }
.fm-table { width: 100%; border-collapse: collapse; background: #fff; }
.fm-table th, .fm-table td { border: 1px solid #808080; padding: .25rem .5rem; text-align: left; vertical-align: top; }
/* File names and titles may break long unbroken strings; headers and buttons never do. */
.fm-table .wrap { overflow-wrap: anywhere; }
@media (min-width: 40rem) { .fm-table th.wrap { min-width: 7rem; } } /* keep short names like index.html whole */
.fm-table thead th, .btn { white-space: nowrap; }
.fm-actions { display: flex; gap: .25rem; flex-wrap: wrap; } /* a div inside the cell, so the cell stays a table cell */
.fm-actions form, .fm-files form { margin: 0; display: inline; }
.fm-files { list-style: none; padding: 0; }
.fm-files li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .25rem 0; border-bottom: 1px dotted #808080; }
.fm-files img { image-rendering: pixelated; object-fit: contain; background: #fff; }
meter { width: 100%; height: 1.25rem; }
.gb-list { list-style: none; padding: 0; }
.gb-list li { border-bottom: 1px dotted #808080; padding-bottom: .5rem; margin-bottom: .5rem; }
.gb-list blockquote { margin: .25rem 0 .5rem 1rem; background: #fff; padding: .5rem; }
.gb-actions { display: flex; gap: .5rem; }

/* --- editor -------------------------------------------------------------- */
.editor { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 60rem) { .editor { grid-template-columns: 1fr; } }
.editor .window, .editor-preview { max-width: none; margin: 0; }
.editor-preview { margin-top: 1rem; }
.editor textarea { width: 100%; font: 14px/1.4 "Courier New", monospace; }
.editor .cm-editor { background: #fff; border: 2px inset var(--bevel-dark); min-height: 24rem; max-height: 70vh; font-size: 14px; }
.editor .cm-editor.cm-focused { outline: 3px solid var(--focus); outline-offset: 2px; }
.editor-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.palette { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.palette--art .art-btn {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 6.5rem; padding: .25rem;
  font: 11px Verdana, sans-serif; background: #fff; cursor: pointer;
  border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.palette--art img { image-rendering: pixelated; max-width: 88px; height: auto; }
.palette--art span { word-break: break-all; }
.editor-palette .window-body { max-height: 80vh; overflow: auto; }
#gm-preview { width: 100%; height: 32rem; border: 2px inset var(--bevel-dark); background: #fff; }
.a11y-report { background: #fff; padding: .75rem; margin-top: .5rem; border: 1px solid #808080; }
.a11y-report h3 { margin-top: 0; }
.a11y-report code { display: inline-block; margin-top: .25rem; font-size: .8rem; word-break: break-all; }

/* --- portal (Yahoo '98) -------------------------------------------------- */
.searchbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.searchbar input { font: inherit; padding: .25rem; border: 2px inset var(--bevel-dark); flex: 1; min-width: 12rem; max-width: 30rem; }
.portal-news { background: #fff; border: 1px solid #808080; padding: .25rem .5rem; margin-bottom: 1rem; }
.portal { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 52rem) { .portal { grid-template-columns: 1fr; } }
.section-title { font-size: 1.25rem; background: var(--title-bg); color: var(--title-text); padding: .2rem .5rem; margin: 0 0 .75rem; }
.hood .section-title { background: var(--hood); }
.directory { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.directory li { border-left: 6px solid var(--hood, var(--title-bg)); padding-left: .5rem; }
.dir-name { font-weight: bold; font-size: 1.1rem; }
.dir-blurb { display: block; font-size: .875rem; }
.count { font-size: .875rem; }
.box { background: #fff; border: 1px solid #000; margin-bottom: 1rem; }
.box-title { margin: 0; font-size: 1rem; background: var(--title-bg); color: var(--title-text); padding: .2rem .5rem; }
.hood .box-title { background: var(--hood); }
.box-body { padding: .5rem .75rem; margin: 0; }
.box--cool .box-title { background: #ffcc00; color: #000; }
.cool-name { font-size: 1.2rem; font-weight: bold; margin: 0; }
.side-link { margin: -.5rem 0 1rem; font-size: .875rem; }
.stats div { display: flex; justify-content: space-between; border-bottom: 1px dotted #808080; }
.stats dt { font-weight: normal; }
.stats dd { margin: 0; font-weight: bold; }
.site-list { list-style: square; padding-left: 1.25rem; }
.site-list li { margin-bottom: .25rem; }
.badge--sm { font-size: .75rem; }
.box textarea { width: 100%; font: 12px "Courier New", monospace; }
.crumbs { font-size: .875rem; margin-bottom: .5rem; }
.lede { font-size: 1.1rem; max-width: 50rem; }
.note { background: #ffffe1; border: 1px solid #000; padding: .5rem; }

/* neighborhood identity */
.hood { background: var(--hood-tint); padding: 1rem; border: 3px solid var(--hood); }
.hood-head { border-bottom: 4px double var(--hood); margin-bottom: 1rem; }
.hood-head h1 { color: var(--hood); margin: .25rem 0; }
.hood-banner { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.hood-blurb { font-size: 1.1rem; }
.block { margin-bottom: 1rem; border-left: 6px solid var(--hood, var(--title-bg)); padding-left: .75rem; }
.block h3 { margin: .25rem 0; }
.landmarks { columns: 2 14rem; }

/* bulletin board (vBulletin-ish) */
.bbs { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 1rem; }
.bbs th, .bbs td { border: 1px solid #808080; padding: .4rem .5rem; text-align: left; }
.bbs tbody th { overflow-wrap: anywhere; }
.bbs thead th { background: var(--hood, var(--title-bg)); color: #fff; }
.bbs .alt1, .post.alt1 { background: #f5f5ff; }
.bbs .alt2, .post.alt2 { background: #e8e8f4; }
.posts { list-style: none; padding: 0; }
.post { display: grid; grid-template-columns: 12rem 1fr; border: 1px solid #808080; margin-bottom: .5rem; }
@media (max-width: 40rem) { .post { grid-template-columns: 1fr; } }
.post-author { padding: .5rem; border-right: 1px solid #808080; display: flex; flex-direction: column; gap: .25rem; }
.post-body { padding: .5rem .75rem; }
.post-meta { margin: 0; font-size: .8rem; }
.post-tools { margin: 0; font-size: .8rem; text-align: right; }
.pager { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.window--wide { max-width: 48rem; margin: 1rem 0; }
.quote { background: #fff; padding: .5rem; border-left: 4px solid #808080; margin: 0 0 1rem; }
fieldset.field { border: 1px solid #808080; padding: .5rem .75rem; }
fieldset.field legend { font-weight: bold; }
/* Radios sit inline before their labels; undo the full-width .field input rule. */
.radio { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
.field .radio input { width: auto; margin: 0; flex: none; }
.field .radio label { display: inline; font-weight: normal; cursor: pointer; }
.field textarea { font: inherit; width: 100%; padding: .25rem; border: 2px inset var(--bevel-dark); background: #fff; }
.crumbs { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; font-size: .875rem; }
.crumbs li + li::before { content: "\203A"; padding: 0 .4rem; }

/* Grid/flex children default to min-width: auto, so one long unbroken title
   could widen a whole column past the screen. Let them shrink and wrap. */
.portal > *, .directory > li, .fm-grid > *, .editor > * { min-width: 0; }
.site-list li, .cool-name, .dir-name, .post-body { overflow-wrap: anywhere; }