/* The academy's look: white, greys and black; Helvetica; Space Mono Bold for titles and buttons.
   The only hues on the page are the map's own, as its authors published them. */

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/space-mono-bold-latin-ext.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/space-mono-bold-latin.woff2) format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --white: #ffffff;
  --gray-light: #f2f2f2;
  --gray-medium: #b6b6b6;
  --gray-dark: #6a6a6a;
  --black: #000000;
  --border: #e4e4e4;
  --danger: #ec1c25;
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-title: "Space Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
}

.page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}
section, .credit { margin-top: 2.5rem; }

.page-title {
  display: inline-block;
  margin: 0;
  background: var(--black);
  color: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
}
.lead { margin: 1rem 0 0; font-size: 1.125rem; max-width: 40rem; }

.section-title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.sub-title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; }

label { display: block; font-weight: 700; margin-bottom: 0.375rem; }
.help { margin: 0.5rem 0 0; color: var(--gray-dark); font-size: 0.875rem; max-width: 40rem; }
.error { margin: 0.5rem 0 0; color: var(--danger); font-size: 0.875rem; font-weight: 700; }

.ask-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ask-field { position: relative; flex: 1 1 16rem; min-width: 0; }
.ask-row input {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--gray-medium);
  border-radius: 0.375rem;
  background: var(--white);
  color: var(--black);
  font: inherit;
}
.ask-row input:focus-visible,
.btn:focus-visible,
a:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.suggestions {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-medium);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
  max-height: 22rem;
  overflow-y: auto;
}
.suggestions li {
  padding: 0.5rem 0.625rem;
  border-radius: 0.25rem;
  cursor: pointer;
  line-height: 1.3;
}
.suggestions li.is-active, .suggestions li:hover { background: var(--gray-light); }
.suggestions .s-note { color: var(--gray-dark); font-size: 0.875rem; cursor: default; }
.suggestions .s-note:hover { background: transparent; }
.suggestions .s-name { font-weight: 700; }
.suggestions .s-where { display: block; color: var(--gray-dark); font-size: 0.875rem; }
.ask-more { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.ask-more .help { margin: 0; }

.btn {
  height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--black);
  border-radius: 0.375rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--gray-dark); border-color: var(--gray-dark); }
.btn-light { background: var(--white); color: var(--black); }
.btn-light:hover { background: var(--gray-light); border-color: var(--black); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-link { display: inline-flex; align-items: center; text-decoration: none; }
.result-more { margin: 1.25rem 0 0; }

.result-card {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}
.result-main { display: flex; align-items: center; gap: 1rem; }
.swatch {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border);
  background: var(--gray-light);
}
.code { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.name { margin: 0.25rem 0 0; font-size: 1.125rem; }
.note {
  margin: 1rem 0 0;
  padding: 0.75rem;
  background: var(--gray-light);
  border-radius: 0.375rem;
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 1.25rem 0 0;
}
.facts dt { color: var(--gray-dark); font-size: 0.875rem; }
.facts dd { margin: 0; font-weight: 700; }

.rules { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.rules-list { margin: 0; padding: 0; list-style: none; max-width: 46rem; }
.rules-list li { margin: 0 0 0.5rem; }
.rules-letter {
  display: inline-block;
  min-width: 1.5rem;
  margin-right: 0.5rem;
  font-family: var(--font-title);
  font-weight: 700;
}
.rules-word { font-weight: 700; }
.fact-wide { grid-column: 1 / -1; }
.where-line { display: block; }
.where-line + .where-line { font-weight: 400; }

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 22rem;
  max-height: 80vh;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--gray-light);
}
.map-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.map-frame canvas.is-dragging { cursor: grabbing; }
.map-frame canvas:focus-visible { outline: 2px solid var(--black); outline-offset: -2px; }

.map-buttons {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  max-width: calc(100% - 1.5rem);
}
.map-btn {
  width: 2.75rem;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--white);
}
.map-btn-wide { box-shadow: 0 0 0 2px var(--white); }

.map-tag {
  position: absolute;
  left: 0;
  top: 0;
  max-width: calc(100% - 0.5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.25rem 0.5rem;
  background: var(--black);
  color: var(--white);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.3;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--white);
}
.map-tag .chip-code { display: inline-block; min-width: 0; margin-right: 0.5rem; }

.view-title { margin-top: 1rem; }

.near-legend, .legend-list { list-style: none; margin: 0; padding: 0; }
.near-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; min-height: 1.5rem; }
.near-legend li, .legend-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.chip {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.1875rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.chip-code { font-family: var(--font-title); font-weight: 700; min-width: 2.25rem; }

.tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
.tab {
  height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--black);
  border-radius: 0.375rem;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.tab:hover { background: var(--gray-light); }
.tab[aria-selected="true"] { background: var(--black); color: var(--white); }
.tab:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.tab-panel { border: 1px solid var(--border); border-radius: 0.5rem; padding: 1.25rem; }
.tab-panel:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.tab-rule { margin: 0 0 1rem; max-width: 46rem; }
.legend-list li { align-items: flex-start; }
.legend-list .chip { margin-top: 0.2rem; }
.legend-text { display: block; }
.legend-rule { display: block; color: var(--gray-dark); font-weight: 400; max-width: 44rem; }
.legend-list li { padding: 0.1875rem 0.375rem; border-radius: 0.25rem; }
.legend-list li.is-current { background: var(--gray-light); font-weight: 700; }

.credit p { margin: 0 0 0.5rem; color: var(--gray-dark); font-size: 0.875rem; max-width: 46rem; }
.credit a { color: var(--black); text-decoration: underline; }

[hidden] { display: none !important; }

@media (max-width: 30rem) {
  .map-buttons { top: 0.5rem; right: 0.5rem; gap: 0.25rem; }
  .map-buttons .btn { height: 2.25rem; padding: 0 0.5rem; font-size: 0.75rem; }
  .map-buttons .map-btn { width: 2.25rem; padding: 0; font-size: 1rem; }
  .page { padding-top: 1.25rem; }
  .ask-row .btn { flex: 1 1 100%; }
  .code { font-size: 1.75rem; }
}

/* ---- The weather of a typical year (weather.js) ---- */
.weather { margin-top: 1.5rem; border-top: 1px solid var(--gray-light); padding-top: 1rem; }
.w-status { margin-left: 0.5rem; }
.w-table-wrap { overflow-x: auto; margin: 1rem 0; }
.w-table { border-collapse: collapse; font-size: 0.85rem; min-width: 100%; }
.w-table caption { text-align: left; font-size: 0.85rem; color: var(--gray-dark); padding: 0 0 0.5rem; caption-side: top; }
.w-table th, .w-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--gray-light); text-align: right; white-space: nowrap; }
.w-table th[scope="row"], .w-table th:first-child { text-align: left; }
.w-table thead th { font-weight: 700; vertical-align: bottom; }
.w-charts { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin: 1rem 0; }
.w-figure { margin: 0; max-width: 240px; }
.w-figure-wide { max-width: 420px; }
.w-figure svg { display: block; max-width: 100%; height: auto; }
.w-ring { fill: none; stroke: var(--gray-light); stroke-width: 1; }
.w-ring-label { font-size: 8px; fill: var(--gray-dark); }
.w-compass { font-size: 11px; font-weight: 700; fill: var(--black); }
.w-wedge { fill: var(--black); fill-opacity: 0.75; stroke: var(--white); stroke-width: 0.5; }
.w-hills { fill: var(--black); fill-opacity: 0.25; stroke: var(--black); stroke-width: 1; }

.strategies { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.strategy-list { max-width: 46rem; }
.strategy { border: 1px solid var(--border); margin: 0 0 0.5rem; }
.strategy summary { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.75rem; cursor: pointer; font-weight: 700; }
.strategy-body { display: flex; gap: 1rem; align-items: flex-start; padding: 0.5rem 0.75rem 0.75rem; }
.strategy-body p { margin: 0; }
@media (max-width: 34rem) { .strategy-body { flex-direction: column; } }

.w-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.w-line-high { stroke: #c8500a; }
.w-line-mean { stroke: #1a1a1a; }
.w-line-low { stroke: #0072b2; }
.w-figure .btn { margin-top: 0.5rem; }