/* Maps & Directions page (maps.asp). Copied to Web/algoron/atlas/ by make_maps.py. */
.atlas {
  --parch: #edbd70;
  --parch-2: #f3ca87;
  --parch-3: #f8dcab;
  --gold: #de961d;
  --edge: #b87312;
  --ink: #1d1206;
  --ink-2: #5a3a10;
  --red: #8a0000;
  --green: #1f5c1f;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 20px 24px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: var(--parch);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  color: var(--ink);
  font: 14px/1.5 Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
}

.atlas h1.atlas-title {
  margin: 0 0 6px;
  font-size: 26px;
  letter-spacing: .02em;
  text-align: center;
}

.atlas-intro {
  max-width: 72ch;
  margin: 0 auto 16px;
  text-align: center;
}

/* continent picker */
.atlas-conts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 14px;
}

.atlas-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 108px;
  padding: 7px 12px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--parch-2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.atlas-cont b { font-size: 13px; }
.atlas-cont span { color: var(--ink-2); font-size: 11px; }
.atlas-cont:hover { background: var(--parch-3); }
.atlas-cont.is-on { background: var(--ink); color: var(--parch-3); border-color: var(--ink); }
.atlas-cont.is-on span { color: var(--parch-2); }

/* filters */
.atlas-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  justify-content: center;
  margin: 0 0 6px;
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--parch-2);
}

.atlas-controls label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.atlas-controls input,
.atlas-controls select {
  padding: 5px 7px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: #fff8ea;
  color: var(--ink);
  font: 14px Verdana, Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

#atlas-q { width: 200px; }
#atlas-lvl { width: 72px; }

.atlas-controls label.atlas-check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.atlas-count {
  margin: 4px 0 10px;
  color: var(--ink-2);
  font-size: 12px;
  text-align: center;
}

/* "Where do walks start?" key */
.atlas-hubs {
  max-width: 760px;
  margin: 8px auto 4px;
  padding: 8px 14px;
  border: 1px solid rgba(138, 87, 0, .45);
  border-radius: 6px;
  background: var(--parch-3);
  font-size: 13px;
}

.atlas-hubs summary { font-weight: 700; cursor: pointer; }
.atlas-hubs p { margin: 8px 0; color: var(--ink-2); }

.atlas-hubs dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 14px;
  margin: 0 0 4px;
}

.atlas-hubs dt { font-weight: 700; }
.atlas-hubs dd { margin: 0; }

@media (max-width: 760px) {
  .atlas-hubs dl { grid-template-columns: 1fr; }
  .atlas-hubs dd { margin-bottom: 6px; }
}

/* sections */
.atlas-group h2,
.atlas-fresh h2,
.atlas-legacy h2 {
  margin: 22px 0 10px;
  padding: 7px 12px;
  border-bottom: 2px solid var(--gold);
  background: rgba(222, 150, 29, .18);
  font-size: 16px;
  letter-spacing: .04em;
}

.atlas-fresh p { margin: 0 4px; line-height: 1.8; }

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

/* cards */
.atlas-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px 12px;
  border: 1px solid rgba(138, 87, 0, .45);
  border-radius: 6px;
  background: var(--parch-3);
  scroll-margin-top: 12px;
}

.atlas-card:target { outline: 3px solid var(--gold); }

.atlas-card header {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: baseline;
}

.atlas-card h3 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.atlas-badge {
  padding: 0 6px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.atlas-new { border-color: var(--green); background: var(--green); color: #fff; }
.atlas-upd { border-color: var(--red); color: var(--red); }

.atlas-card p { margin: 0; }
.atlas-meta { color: var(--ink-2); font-size: 12px; }
.atlas-builders { color: var(--ink-2); font-size: 11px; font-style: italic; }

.atlas-walk {
  margin-top: 6px;
  padding: 8px 9px;
  border-radius: 4px;
  background: rgba(237, 189, 112, .55);
}

.atlas-from { font-size: 12px; }
.atlas-moves { color: var(--ink-2); }

.atlas-path {
  display: block;
  margin: 5px 0;
  padding: 6px 8px;
  border: 1px solid rgba(138, 87, 0, .35);
  border-radius: 3px;
  background: #fff8ea;
  color: var(--ink);
  font: 13px/1.45 "Courier New", Consolas, monospace;
  overflow-wrap: anywhere;
}

.atlas-where { color: var(--ink-2); }

.atlas-arrive { font-size: 11px; color: var(--ink-2); }
.atlas-arrive span { color: var(--ink); font-weight: 700; }

.atlas-notes {
  margin: 4px 0 0;
  padding: 0 0 0 16px;
  color: var(--red);
  font-size: 11px;
}

.atlas-notes:empty { display: none; }

.atlas-copy {
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--parch-2);
  color: var(--ink);
  font: 12px Verdana, Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.atlas-copy:hover { background: var(--gold); }
.atlas-copy.is-done { background: var(--green); border-color: var(--green); color: #fff; }

.atlas-nowalk,
.atlas-note {
  margin-top: 6px !important;
  font-size: 12px;
  color: var(--ink-2);
}

.atlas-note { color: var(--ink); }
.atlas-links { font-size: 12px; }
.atlas-links span { color: var(--ink-2); font-size: 11px; }

.atlas-hidden { display: none !important; }

.atlas-empty {
  padding: 20px;
  text-align: center;
  color: var(--ink-2);
}

.atlas-legacy ul { margin: 0 0 8px; padding-left: 20px; }
.atlas-small { color: var(--ink-2); font-size: 11px; }

.atlas a { color: var(--ink); font-weight: 700; }
.atlas a:hover, .atlas a:focus { color: #6f0000; }

/* phones: put the page above the side menus */
@media (max-width: 760px) {
  body > table,
  body > table > tbody,
  body > table > tbody > tr,
  body > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  body > table > tbody > tr { display: flex; flex-direction: column; }
  body > table > tbody > tr > td.dsl-main-content { order: -1; }
  body > table > tbody > tr > td > table[width="180"] { width: 100% !important; }
  body > table:first-of-type table { width: 100% !important; table-layout: fixed; }
  body > table:first-of-type img { max-width: 100%; height: auto; }

  .atlas { padding: 14px 12px 18px; border-radius: 0; }
  .atlas h1.atlas-title { font-size: 21px; }
  .atlas-controls { justify-content: stretch; }
  .atlas-controls label { flex: 1 1 130px; }
  #atlas-q { width: auto; }
  .atlas-cont { min-width: 0; flex: 1 1 96px; }
  .atlas-grid { grid-template-columns: 1fr; }
}