/* plan.terra-outfitters.com: a sitemap and lo-fi wireframes. Grey boxes on
   purpose: a wireframe decides what goes where and why, before anyone
   argues about colors. */
* { box-sizing: border-box; }
:root { color-scheme: light dark; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: light-dark(#1f2430, #e6e8ee);
  background: light-dark(#f4f5f7, #15171c);
}
a { color: light-dark(#1f5f9b, #9cc4f0); }
:focus-visible { outline: 3px solid #c2571b; outline-offset: 2px; }
body > header, main, body > footer { max-inline-size: 60rem; margin-inline: auto; padding-inline: 1rem; }
body > header { padding-block: 1.5rem 0.5rem; }
body > header p { margin: 0; font-size: 0.9rem; color: light-dark(#5d667a, #a9b0bf); }
h1 { margin-block: 0.25rem 0.5rem; font-size: 1.8rem; }
h2 { font-size: 1.25rem; margin-block: 1.5rem 0.5rem; }
.status {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding-inline: 0.6rem;
  border-radius: 999px;
  vertical-align: middle;
}
.status.built { background: light-dark(#dff2e6, #1d3a29); color: light-dark(#1f6f45, #9fe0b8); }
.status.planned { background: light-dark(#ececf0, #2a2d35); color: light-dark(#5d667a, #b5bcc9); }

/* The sitemap: a nested list, drawn as a tree. */
ol.sitemap, ol.sitemap ol { list-style: none; margin: 0; padding-inline-start: 1.5rem; border-inline-start: 2px solid light-dark(#cdd2db, #3a3f4a); }
ol.sitemap { padding-inline-start: 0; border: 0; }
ol.sitemap li { margin-block: 0.75rem; }
ol.sitemap a { font-weight: 700; }
ol.sitemap p { margin: 0; font-size: 0.95rem; }

/* A wireframe: labelled grey regions in a frame. */
figure { margin: 0; }
figcaption { margin-block-end: 0.5rem; }
.frame {
  border: 2px solid light-dark(#8f98a8, #5d667a);
  border-radius: 8px;
  padding: 0.75rem;
  background: light-dark(#fff, #1d2028);
  display: grid;
  gap: 0.5rem;
}
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.row > * { flex: 1 1 10rem; }
.box {
  border: 2px dashed light-dark(#aab2c1, #4a5060);
  border-radius: 6px;
  background: light-dark(#eef0f4, #252932);
  padding: 0.5rem 0.75rem;
  min-block-size: 3rem;
  font-size: 0.9rem;
}
.box b { display: block; }
.box.tall { min-block-size: 8rem; }
.box.key { border-color: #c2571b; border-style: solid; }
dl.notes { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
dl.notes dt { font-weight: 700; }
dl.notes dd { margin: 0; }
@media (width < 40rem) { dl.notes { grid-template-columns: 1fr; } dl.notes dd { margin-block-end: 0.5rem; } }
body > footer { padding-block: 2rem; font-size: 0.9rem; }