/* Fink Geospatial - shared styles.
   Circa-1999 desktop look. Plain CSS: no build step, no web fonts, no external requests. */

:root {
  --desk: #008080;
  --face: #c0c0c0;
  --hi: #ffffff;
  --lo: #808080;
  --dk: #404040;
  --navy: #000080;
  --blue: #1c6bd0;
  --link: #0000cc;
  --visited: #551a8b;
  --cream: #f6f0dc;
  --yellow: #ffff66;
  color-scheme: light;
}

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

html { scroll-padding-top: 12px; }

body {
  margin: 0;
  padding: 12px;
  background-color: var(--desk);
  /* tiled contour "hills" */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%231b9a9a' stroke-width='1'%3E%3Cellipse cx='90' cy='90' rx='84' ry='58' transform='rotate(-20 90 90)'/%3E%3Cellipse cx='90' cy='90' rx='62' ry='42' transform='rotate(-20 90 90)'/%3E%3Cellipse cx='90' cy='90' rx='40' ry='26' transform='rotate(-20 90 90)'/%3E%3Cellipse cx='90' cy='90' rx='18' ry='11' transform='rotate(-20 90 90)'/%3E%3C/g%3E%3C/svg%3E");
  color: #000;
  font: 15px/1.5 Tahoma, Verdana, Geneva, sans-serif;
}

img, svg { max-width: 100%; }
p { margin: 0 0 10px; }

a { color: var(--link); }
a:visited { color: var(--visited); }
a:focus-visible, button:focus-visible {
  outline: 2px dotted #000;
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--lo);
  border-bottom: 1px solid var(--hi);
  margin: 16px 0;
}

.page { max-width: 900px; margin: 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 10;
  background: #fff; color: #000; padding: 6px 10px; border: 2px solid #000;
}
.skip:focus { left: 8px; }

/* ---------- Banner ---------- */
.banner {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  color: #fff;
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%232a2ab0' stroke-width='1'%3E%3Cellipse cx='90' cy='90' rx='84' ry='58' transform='rotate(-20 90 90)'/%3E%3Cellipse cx='90' cy='90' rx='62' ry='42' transform='rotate(-20 90 90)'/%3E%3Cellipse cx='90' cy='90' rx='40' ry='26' transform='rotate(-20 90 90)'/%3E%3Cellipse cx='90' cy='90' rx='18' ry='11' transform='rotate(-20 90 90)'/%3E%3C/g%3E%3C/svg%3E");
  border: 2px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
}
.banner img { width: 64px; height: 64px; flex: none; }
.logo {
  margin: 0;
  font: 900 clamp(24px, 6.5vw, 36px)/1 "Arial Black", "Arial Bold", Gadget, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 #000;
}
.logo a, .logo a:visited { color: #fff; text-decoration: none; }
.tagline {
  margin: 8px 0 0;
  color: var(--yellow);
  font: bold 12px/1.3 Verdana, Tahoma, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------- Ticker ---------- */
.ticker {
  margin-top: 12px;
  overflow: hidden;
  white-space: nowrap;
  background: #000;
  color: #33ff33;
  font: 14px/1 "Courier New", Courier, monospace;
  padding: 7px 0;
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.ticker p {
  display: inline-block;
  margin: 0;
  padding-left: 100%;
  animation: scroll 34s linear -6s infinite;
}
.ticker:hover p { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-100%); } }

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}
@media (min-width: 701px) {
  .sidebar { position: sticky; top: 12px; }
}
@media (max-width: 700px) {
  body { padding: 8px; }
  .layout { grid-template-columns: 1fr; }
  .banner { padding: 10px 12px; gap: 12px; }
  .banner img { width: 48px; height: 48px; }
  .layers { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- Windows ---------- */
.win {
  background: var(--face);
  padding: 3px;
  margin-bottom: 12px;
  border: 2px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo), inset 1px 1px #dfdfdf;
}
.layout > main > .win:last-child { margin-bottom: 0; }

.titlebar {
  display: flex; align-items: center; gap: 6px;
  margin: 0;
  padding: 3px 4px;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  color: #fff;
  font: bold 14px/1.2 Tahoma, Verdana, sans-serif;
}
.titlebar img { width: 16px; height: 16px; flex: none; }
.titlebar .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl { display: flex; gap: 2px; margin-left: auto; flex: none; }
.ctl i {
  display: grid; place-items: center;
  width: 16px; height: 14px;
  background: var(--face); color: #000;
  font: bold 10px/1 Tahoma, sans-serif; font-style: normal;
  border: 1px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo);
}

.win-body {
  margin-top: 3px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px var(--dk);
}
.win-body.tight { padding: 6px; }
.win-body > :last-child { margin-bottom: 0; }

h1, h2.sec, h3 { color: var(--navy); }
h1 {
  margin: 0 0 10px;
  font: bold 26px/1.2 Georgia, "Times New Roman", serif;
}
h2.sec {
  margin: 0 0 8px;
  font: bold 18px/1.3 Georgia, "Times New Roman", serif;
}
.lead {
  font: bold italic 20px/1.35 Georgia, "Times New Roman", serif;
  color: var(--navy);
}

/* ---------- Contents (layer list) ---------- */
.layers { list-style: none; margin: 0; padding: 0; }
.layers a {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px;
  color: var(--link);
}
.layers a:visited { color: var(--link); }
.layers a::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border: 1px solid #000;
  background: var(--sw, #999);
}
.layers li:nth-child(1) a::before { --sw: #e0a030; }
.layers li:nth-child(2) a::before { --sw: #2a7f3a; }
.layers li:nth-child(3) a::before { --sw: #1c6bd0; }
.layers li:nth-child(4) a::before { --sw: #b03060; }
.layers a[aria-current] { background: var(--navy); color: #fff; text-decoration: none; }
.layers a:focus-visible { outline-offset: 1px; }

/* ---------- Buttons ---------- */
.btn, .btn:visited {
  display: inline-block;
  min-width: 96px;
  padding: 5px 16px;
  background: var(--face);
  color: #000;
  text-align: center;
  text-decoration: none;
  font: 14px/1.4 Tahoma, Verdana, sans-serif;
  border: 2px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo);
}
.btn.default { outline: 1px solid #000; }
.btn:active {
  border-color: var(--dk) var(--hi) var(--hi) var(--dk);
  box-shadow: inset 1px 1px var(--lo);
  padding: 6px 15px 4px 17px;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- Map frame (home page) ---------- */
.map-frame {
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  background: var(--face);
}
.map-frame svg { display: block; width: 100%; height: auto; }
.statusbar { display: flex; gap: 2px; padding: 2px; background: var(--face); font-size: 12px; line-height: 1.4; }
.statusbar span {
  flex: 1;
  padding: 1px 6px;
  border: 1px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}

/* ---------- Projects list ---------- */
.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; gap: 10px; align-items: flex-start; }
.files img { width: 32px; height: 32px; flex: none; margin-top: 2px; }
.files .meta { color: var(--dk); font-size: 13px; }

/* ---------- Tables ---------- */
table.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td {
  padding: 6px 8px;
  border: 1px solid var(--lo);
  text-align: left;
  vertical-align: top;
}
.grid th { background: var(--face); }
.grid td:first-child { white-space: nowrap; font-weight: bold; }
@media (max-width: 480px) { .grid td:first-child { white-space: normal; } }

/* ---------- Notes ---------- */
.note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: #ffffe1;
  border: 1px solid #000;
}
.note::before {
  content: "i";
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy); color: #fff;
  font: bold italic 15px/1 Georgia, serif;
}
.note p { margin: 0; }

/* ---------- Project page ---------- */
.crumbs { font-size: 13px; color: var(--dk); }
.stripe {
  height: 12px;
  margin: 4px 0 10px;
  background: repeating-linear-gradient(45deg, #000 0 12px, #ffcc00 12px 24px);
  border: 1px solid #000;
}
.construction { font-weight: bold; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { margin: 4px 0; }
.checklist li::before { content: "[ ]"; font-family: "Courier New", Courier, monospace; margin-right: 8px; }

.viewer {
  margin: 14px 0;
  padding: 3px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
}
.viewer .titlebar { font-size: 13px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 2px; }
.toolbar button {
  padding: 3px 12px;
  background: var(--face);
  color: var(--lo);
  text-shadow: 1px 1px var(--hi);
  font: 13px/1.3 Tahoma, Verdana, sans-serif;
  border: 2px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: inset -1px -1px var(--lo);
  cursor: not-allowed;
}
.canvas {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  padding: 12px;
  background-color: var(--cream);
  background-image:
    linear-gradient(#d9cfae 1px, transparent 1px),
    linear-gradient(90deg, #d9cfae 1px, transparent 1px);
  background-size: 40px 40px;
  border: 2px solid;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
}
.dialog {
  max-width: 22rem;
  background: var(--face);
  padding: 3px;
  border: 2px solid;
  border-color: var(--hi) var(--dk) var(--dk) var(--hi);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.dialog .body { display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px; }
.dialog .body::before {
  content: "i";
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy); color: #fff;
  font: bold italic 20px/1 Georgia, serif;
}
.dialog p { margin: 0; }

/* ---------- Footer ---------- */
.footer { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 12px; margin: 12px 0 0; font-size: 13px; }
.footer p { margin: 0; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-grid; place-items: center;
  width: 88px; height: 31px;
  border: 1px solid #000;
  font: bold 11px/1.05 Verdana, Tahoma, sans-serif;
  letter-spacing: 0.5px;
  text-align: center;
}
.b1 { background: var(--navy); color: #fff; }
.b2 { background: #ffcc00; color: #000; }
.b3 { background: #000; color: #33ff33; font-family: "Courier New", Courier, monospace; }

@media (prefers-reduced-motion: reduce) {
  .ticker { white-space: normal; }
  .ticker p { animation: none; padding-left: 10px; }
}