/* Shared shell for every page in this app: palette, reset, page frame, buttons, and the
   search sheet. Split out of app.css when the ride page arrived -- the palette was already
   duplicated into app.js (see the COLORS comment there), and a third copy in a second
   stylesheet is exactly how those drift apart.

   Load this before the page's own stylesheet. Anything specific to one page belongs there,
   not here. */
:root {
  /* Forest palette, matching brokeh-nav.css's defaults so the nav needs no override. */
  --bg: #1a2417;       /* deep forest floor */
  --bg-deep: #0f170d;  /* gradient partner  */
  --card: #24301f;     /* mossy panel       */
  --accent: #d9a441;   /* lantern amber     */
  --text: #efe6d2;     /* warm parchment    */
  --muted: #a89b80;    /* dry grass         */
  --line: #3a4a30;     /* moss border       */

  /* Semantic, and they have to stay telling-apart-able at a glance:
     warm/cool are the two ends of the temperature bar, rain/snow are separate
     precipitation chips, danger is error text. */
  --warm: #e08a3c;     /* sun-baked orange  */
  --cool: #6fa8b8;     /* cold slate blue   */
  --rain: #7fb3c9;     /* rain blue         */
  --snow: #cdd8dc;     /* pale snow         */
  --danger: #d8877d;   /* clay red; lightened from #c9584a to clear 4.5:1 as text */
  --safe: #8fc47a;     /* moss green; the "go" partner to --danger, same contrast target */

  /* Body copy stays a system stack. Display type is the stock monospace stack —
     nothing is downloaded and there is no font CDN on this site. To self-host a
     pixel/retro face later, add an @font-face block above this rule and prepend
     its family to --font-display; that one edit retypes the display text. */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
}

/* The universal rule above sets font-family *directly* on every element, and a
   direct declaration beats an inherited one — so it also lands on the nav's <a>
   elements and overrides the font-family .menu sets from --nav-font. Hand the
   nav its own stack back. (Harmless before this theme, when both stacks were
   the same system-ui list.) */
.site-header .logo,
.menu a {
  font-family: var(--nav-font);
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg), var(--bg-deep));
  background-attachment: fixed;
  color: var(--text);
  /* Nothing on this page is meant to scroll sideways; charts clip themselves instead. */
  overflow-x: hidden;
}

/* Header + menu now live in /static/brokeh-nav.css, shared by every page.
   This app's header is tighter than the default, so trim the padding only. */
:root {
  --nav-header-pad: 1rem;
}

/* Page layout */
main {
  padding: 0 0.75rem 5rem;
  max-width: 900px;
  margin: 0 auto;
}

.page-header {
  padding: 0 0.25rem;
  margin-bottom: 1rem;
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.btn {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: var(--line);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  min-height: 36px;
}

.btn-accent {
  color: var(--bg-deep);
  background: var(--accent);
  font-weight: 600;
}

.btn-danger {
  background: #4d241c;
  color: var(--danger);
  font-weight: 600;
}

.btn:disabled {
  opacity: 0.5;
}

.error {
  color: var(--danger);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
}

/* Search sheet. Shared: the forecast page adds an area with it, the ride page picks a
   destination with it. */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 13, 0.7);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-backdrop[hidden] {
  display: none;
}

.sheet {
  background: var(--card);
  width: 100%;
  max-width: 560px;
  border-radius: 1rem 1rem 0 0;
  padding: 1rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.sheet-head h2 {
  font-size: 1.05rem;
}

.sheet input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}

.sheet input:focus {
  outline: none;
  border-color: var(--accent);
}

.results {
  list-style: none;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.results li button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  padding: 0.75rem 0.25rem;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.results li button:hover {
  color: var(--accent);
}

.result-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.sheet-note {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.5rem 0.25rem;
}

.sheet-note.error {
  color: var(--danger);
}

/* Coordinate adds: a name step, since raw coordinates don't come with one. */
.sheet-actions {
  display: flex;
  margin-top: 0.5rem;
}

.coord-readout {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 0.5rem 0;
}

.coord-label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.coord-confirm[hidden] {
  display: none;
}

@media (min-width: 640px) {
  main {
    padding: 0 1rem 5rem;
  }

  .page-title {
    font-size: 2rem;
  }
}