/* Moores.town styles. Colors, sizes and layout rules are in STYLE_GUIDE.md. */
:root {
  --paper: #F5F5F5; --ink: #1C1C1C; --road-major: #6B6B6B; --road-minor: #B4B4B4;
  --muted: #8A8A8A; --icon-bg: #FFFFFF; --icon-shade: #D6D6D6;
  --surface: #FFFFFF; --hairline: #D6D6D6;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161616; --ink: #E6E6E6; --road-major: #8C8C8C; --road-minor: #474747;
    --muted: #7A7A7A; --icon-bg: #2A2A2A; --icon-shade: #5A5A5A;
    --surface: #242424; --hairline: #3A3A3A;
  }
}
:root[data-theme="dark"] {
  --paper: #161616; --ink: #E6E6E6; --road-major: #8C8C8C; --road-minor: #474747;
  --muted: #7A7A7A; --icon-bg: #2A2A2A; --icon-shade: #5A5A5A;
  --surface: #242424; --hairline: #3A3A3A;
}
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: "Overpass", "Helvetica Neue", Arial, sans-serif;
  display: grid; grid-template-rows: auto 1fr auto;
  -webkit-font-smoothing: antialiased;
}

.weather {
  justify-self: end;
  padding: 1rem 1.5rem 0;
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 4.5rem;
  opacity: 0; transition: opacity 400ms ease;
}
.weather.ready { opacity: 1; }
.w-icon svg { width: 3.25rem; height: 3.25rem; display: block; color: var(--ink); }
.w-icon .c { fill: var(--icon-bg); }
.w-icon .s { fill: var(--icon-shade); }
.w-text { display: grid; line-height: 1.15; }
.w-temp { font-weight: 600; font-size: 1.5rem; }
.w-precip { display: flex; align-items: center; gap: 0.25rem; font-size: 0.95rem; color: var(--muted); white-space: nowrap; }
.w-precip .drop { width: 0.9rem; height: 0.9rem; }

/* "N/A" sits exactly where the temperature does, in the same type; the line below keeps its
   height but is hidden, so nothing moves. The explanation pops up below the widget. */
.weather { position: relative; }
.weather.na .w-precip { visibility: hidden; }
/* The box covers just the capitals, so the focus ring clears the line below. */
.w-na { display: inline-block; line-height: 1; height: 0.8em; cursor: default; border-radius: 0.125rem; }
.w-na:focus { outline: none; }
.w-na:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.w-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.w-tip { right: 1.5rem; top: calc(100% + 0.25rem); font-weight: 400; white-space: normal; }

main { display: grid; place-items: center; padding: 1.5rem; }
.map { width: min(100%, 34rem); height: auto; display: block; }
.map path { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.map .minor { stroke: var(--road-minor); stroke-width: 1; }
.map .major { stroke: var(--road-major); stroke-width: 2.25; }
.map .border {
  stroke: var(--ink); stroke-width: 2; vector-effect: none;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 2.2s cubic-bezier(.45,.1,.25,1) 150ms forwards;
}
.map .roads { opacity: 0; animation: fade 900ms ease 1.9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .map .border { animation: none; stroke-dashoffset: 0; }
  .map .roads { animation: none; opacity: 1; }
  .weather { transition: none; }
}

footer {
  padding: 0 1.5rem 1rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted);
  display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: end;
}
footer a { color: inherit; }
.credits { grid-column: 2; grid-row: 1; margin: 0; text-align: center; }

/* Info button: 16px icon inside a 44px touch target, nudged so the icon sits on the page gutter. */
.about { grid-column: 1; grid-row: 1; justify-self: start; position: relative; margin: 0 0 -0.75rem -0.875rem; }
.about-btn {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.about-btn svg { width: 1rem; height: 1rem; display: block; }
.about-btn:hover, .about-btn[aria-expanded="true"] { color: var(--ink); }
.about-pop { left: 0.375rem; bottom: calc(100% + 0.25rem); }
.w-tip[hidden] { display: none; }
/* The info popover and the weather "N/A" explanation share one look. */
.about-pop, .w-tip {
  position: absolute; z-index: 1;
  width: max-content; max-width: min(17rem, calc(100vw - 2rem));
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--hairline); border-radius: 0.5rem;
  background: var(--surface); color: var(--ink);
  font-size: 0.8125rem; line-height: 1.5; text-align: left;
}

a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.about-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }