/* The spots database: /spots/**, and the pieces the home page shares with it
   (the panel's full-screen sheet, the door). Loaded after home.css on every
   page, so the tokens are its tokens. Nothing here is needed for the home
   page's own layout except the full-screen rules and the door. */

/* ------------------------------------------------------------- crumbs */
.crumbs { border-bottom: 1px solid var(--line); font-size: 14px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 12px 0; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }

/* ------------------------------------------------------- the hero rows */
.spots-hero { padding: 52px 0 24px; }
.spots-hero h1, .spot-hero h1, .suggest-main h1 {
  font-family: var(--serif); font-weight: 600; font-variation-settings: "wght" 600;
  font-size: var(--t-page); line-height: 1.05; letter-spacing: -0.5px; margin-top: var(--gap-eyebrow); text-wrap: balance;
}
.spots-hero .lede { margin-top: 16px; max-width: 64ch; }
.light-today { margin-top: 16px; font-family: var(--serif); font-size: 20px; line-height: 1.4; color: var(--gold-soft); max-width: 60ch; }

/* ------------------------------------------------------- the browse */
.spots-browse { padding: 16px 0 56px; }
.spots-browse .spots-bar { margin-top: 0; }
.spots-page .no-js-note, .spots-site .no-js-note { color: var(--text-2); margin-top: 12px; }
/* Without JavaScript the /spots/ pages still show their complete static list; only the map box, the toolbar and the chips stand down. */
.no-js main.spots-home .spots-grid, .no-js main.spots-state .spots-grid, .no-js main.spots-city .spots-grid { display: block; }
.no-js .spots-site .spots-bar, .no-js .spots-site .spots-tools, .no-js .spots-site .map, .no-js .spots-site .near-status { display: none; }
.no-js .spots-site .spot-list { height: auto; }

/* The grouped list on a state page. */
.spot-list .group {
  padding: 12px 16px 6px; font-size: var(--t-micro); font-weight: 800; letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--text-3); background: var(--night-3);
}
.spot-list .group span { font-weight: 600; letter-spacing: 0; }
/* The last row of the full-screen list: the door, quietly. */
.spot-list .spot-list-door { padding: 16px; color: var(--text-2); font-size: 14.5px; }
.spot-list .spot-list-door a { color: var(--gold); font-weight: 600; text-decoration: none; }

/* --------------------------------------------------------- browse by */
/* A panel band: its ground and its seams come from home.css, with the home
   page's bands, so a page turn is the same wherever a reader is. */
.spots-by h2 { font-size: var(--t-sub); margin-top: 40px; }
.spots-by h2:first-child { margin-top: 0; }
.state-cards { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.state-cards a {
  display: block; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--night);
  text-decoration: none; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease;
}
.state-cards a:hover { border-color: var(--line-2); transform: translateY(-1px); }
.state-cards b { display: block; font-family: var(--serif); font-weight: 620; font-size: var(--t-sub); line-height: 1.2; }
.state-cards span { display: block; margin-top: 4px; color: var(--text-3); font-size: 14px; }
.city-links, .kind-links, .season-links { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.city-links a, .kind-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); text-decoration: none; color: var(--text-2); font-weight: 600; font-size: 14px;
}
.city-links a:hover, .kind-links a:hover { color: var(--text); border-color: rgba(255, 252, 247, 0.4); }
.city-links a span, .kind-links a span { color: var(--text-3); font-weight: 500; }
.season-links { display: grid; gap: 6px; color: var(--text-2); }
.season-links a { color: var(--text); }
.spots-up { margin-top: 20px; color: var(--text-2); }
.spots-up a { color: var(--gold); font-weight: 600; text-decoration: none; }
.spots-up a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- newest */
.spots-newest { padding: var(--band) 0; }
.spot-list--static { height: auto; margin-top: 18px; max-height: none; }
.spot-list--static li:last-child { border-bottom: 0; }

/* --------------------------------------------------------- the door */
.spots-suggest { padding: var(--band) 0; }
.door { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: var(--night-2); display: grid; gap: 10px; justify-items: start; }
.door h2 { margin-top: 2px; }
.door p { color: var(--text-2); max-width: 60ch; }
.door .btn { margin-top: 8px; }
.spots-door { margin-top: 18px; color: var(--text-2); font-size: 15px; }
.spots-door a { color: var(--gold); font-weight: 600; text-decoration: none; }
.spots-door a:hover { text-decoration: underline; }

/* The app band on these pages is the home page's dock, spacing and all. */
.spots-app, .spot-app { padding: var(--band) 0; }

/* ------------------------------------------------------- the spot page */
.spot-hero { padding: 44px 0 28px; }
.spot-where { margin-top: 10px; color: var(--text-2); font-size: 17px; }
.you-dist { color: var(--text-3); }
.season { margin-top: 14px; display: inline-block; padding: 8px 14px; border-radius: var(--r-input); background: rgba(235, 168, 53, 0.14); color: var(--gold-soft); font-weight: 600; font-size: 14.5px; }
.season-static { margin-top: 12px; color: var(--text-2); font-size: 15px; max-width: 60ch; }
.spot-reason { margin-top: 22px; font-family: var(--serif); font-size: 19px; line-height: 1.5; max-width: 62ch; }
.spot-reason-by { margin-top: 8px; color: var(--text-3); font-size: 14px; }
.spot-reason-by a { color: var(--gold); font-weight: 600; text-decoration: none; }
.spot-reason-by a:hover { text-decoration: underline; }
.spot-acts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--text);
  font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.btn:hover { border-color: rgba(255, 252, 247, 0.4); transform: translateY(-1px); }
.btn.primary { background: var(--coral); border-color: var(--coral); color: var(--ink-on-sky); }
.btn.primary:hover { background: #FF7B74; }
.btn:disabled { cursor: progress; opacity: 0.75; transform: none; }
.nav-note { margin-top: 12px; font-size: 14px; color: var(--text-3); max-width: 60ch; }

.spot-body { padding: 20px 0 56px; }
.spot-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; }
.map--spot { height: 380px; }
.spot-side h2 { font-size: var(--t-sub); }
.light-day { margin-top: 6px; color: var(--text-3); font-size: 14px; }
.light-times { margin: 14px 0 0; }
.light-times div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.light-times dt { color: var(--text-2); }
.light-times dd { margin: 0; font-family: var(--serif); font-size: 20px; font-variant-numeric: tabular-nums; }
.light-times div.next dd { color: var(--gold-soft); }
.light-times div.next dt { color: var(--text); }
.light-eyebrow { margin-top: 18px; font-size: var(--t-micro); font-weight: 800; letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--text-3); }
.light-block:first-child .light-eyebrow { margin-top: 6px; }
.light-honest { margin-top: 16px; font-size: 14px; color: var(--text-3); max-width: 44ch; }

.spot-score .hero-primary { margin-top: 26px; }
.spot-score .reading { margin-top: var(--gap-thing); }
.spot-near { padding: var(--band) 0; }
.spot-near .spot-list--static { border: 1px solid var(--line); border-radius: var(--radius); background: var(--night-2); }

/* ------------------------------------------------- the panel's two controls */
/* Two native selects instead of thirteen chips: they collapse on a phone, ask
   for no scrolling row, and come with the keyboard and the screen reader for
   free. Dark, rounded, the site's own type, and the arrow is drawn here (a
   data URL, which the policy allows for an image) so no file is fetched.
   color-scheme keeps the native menu dark on every platform. */
.pick {
  appearance: none; -webkit-appearance: none; color-scheme: dark;
  min-height: 44px; padding: 8px 38px 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background-color: transparent; color: var(--text-2);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; max-width: 100%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A9B0C0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 11px 8px;
}
.pick:hover { border-color: rgba(255, 252, 247, 0.4); color: var(--text); }
.pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pick option { background: var(--night); color: var(--text); }
.pick option:disabled { color: var(--text-3); }
/* A kind arrived from a link and has no select of its own, so it shows itself
   here with one press to be rid of it. Nothing filters out of sight. */
.kind-tag {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.kind-tag span { font-size: 16px; line-height: 1; }
.kind-tag:hover { background: #FFFFFF; }
/* The home page keeps the count sentence and nothing else, so it starts at the left. */
.spots-tools--bare .spots-sum { margin-left: 0; }
/* On a phone the count drops under the two selects, so it starts at the left there too. */
@media (max-width: 640px) { .spots-tools .spots-sum { margin-left: 0; } }
/* The map carries its own full screen control now, so the words beside the
   search box are the quiet second way in. */
.spots-bar .fullscreen { border-color: transparent; color: var(--text-3); font-weight: 600; }
.spots-bar .fullscreen:hover { color: var(--text); border-color: var(--line-2); }

/* ---------------------------------------------------------- the map's extras */
/* The full screen control, on the map, under the zoom buttons. One button, two
   engines: MapLibre dresses its own control group, Leaflet dresses .leaflet-bar,
   and these rules make the two look like one thing. */
.map-expand {
  display: block; width: 29px; height: 29px; padding: 0; border: 0; background: transparent;
  color: var(--text); cursor: pointer;
}
.map-expand svg { width: 17px; height: 17px; display: block; margin: 0 auto; }
.map-expand:hover { background: rgba(255, 252, 247, 0.08); }
.map-expand:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Leaflet dresses its bar for anchors, so the button's own box is set here. */
.leaflet-bar.map-expand-bar { background: var(--night-2); border-radius: 4px; overflow: hidden; }
.leaflet-bar.map-expand-bar .map-expand { width: 30px; height: 30px; }

.map--pick .maplibregl-canvas, .map--pick .leaflet-container { cursor: crosshair; }
.pin.nav { width: 16px; height: 16px; }
.pin.nav span { display: block; width: 16px; height: 16px; border-radius: 4px; background: var(--paper); border: 2px solid var(--coral); }

/* ---------------------------------------------------------- full screen */
/* The panel covers the page: map and list together, never the map alone.
   Desktop: map left, list right. Phones: the map fills the panel and the list
   is a bottom sheet with a handle. Everything outside the panel is inert. */
html.spots-full { overflow: hidden; }
.spots-full .spots-panel {
  position: fixed; inset: 0; z-index: 1000; background: var(--night);
  display: grid; grid-template-rows: auto auto auto 1fr; gap: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.spots-full .spots-bar { margin-top: 0; }
.spots-full .spots-tools { margin-top: 12px; }
.spots-full .near-status { margin-top: 8px; }
.spots-full .spots-grid { grid-template-columns: 1.4fr minmax(320px, 0.8fr); height: 100%; min-height: 0; margin-top: 12px; }
.spots-full .map { height: 100%; }
.spots-full .spot-side { height: 100%; min-height: 0; display: grid; grid-template-rows: 1fr; }
.spots-full .spot-list { height: 100%; min-height: 0; }
.spots-full .spot-more { display: none; }
.sheet-handle { display: none; }
@media (max-width: 999px) {
  .spots-full .spots-tools { flex-wrap: nowrap; gap: 8px; }
  .spots-full .spots-tools .pick { flex: 1 1 0; min-width: 0; padding-left: 12px; }
  .spots-full .spots-sum { display: none; }
  /* The home page's row holds only the count, which is hidden here. It stays in
     the grid (a display:none child would give the map's row away) at no height. */
  .spots-full .spots-tools--bare { margin-top: 0; }
  .spots-full .spots-grid { display: block; position: relative; height: 100%; margin-top: 8px; }
  .spots-full .map { position: absolute; inset: 0; height: auto; border-radius: 0; }
  .spots-full .spot-side {
    position: absolute; left: 0; right: 0; bottom: 0; height: 42dvh;
    background: var(--night-2); border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: var(--shadow);
    display: grid; grid-template-rows: auto 1fr; transition: height 0.25s ease; z-index: 2;
  }
  .spots-full .spot-side.is-tall { height: 85%; }   /* of the grid, not the viewport: the chips above stay clear */
  .spots-full .sheet-handle {
    display: block; width: 100%; height: 44px; background: transparent; border: 0; cursor: pointer; position: relative;
  }
  .spots-full .sheet-handle::before { content: ""; position: absolute; left: 50%; top: 14px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line-2); }
  .spots-full .spot-list { border: 0; border-radius: 0; background: transparent; height: auto; }
}
/* A phone in full screen: search, Near me and Close stay on one row. The
   buttons give up some padding and the field takes what is left, rather than
   Close dropping to a second line. */
@media (max-width: 640px) {
  .spots-full .spots-bar { flex-wrap: nowrap; }
  .spots-full .spots-bar input { flex: 1 1 0; min-width: 0; padding: 0 14px; }
  .spots-full .spots-bar .locate, .spots-full .spots-bar .fullscreen, .spots-full .spots-bar .spots-close {
    flex: none; padding: 9px 12px; font-size: 13.5px; white-space: nowrap;
  }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .spot-grid { grid-template-columns: 1fr; }
  .map--spot { height: 320px; }
  .state-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .spots-hero { padding: 36px 0 16px; }
  .spot-hero { padding: 32px 0 20px; }
  .door { padding: 24px; }
  .spot-acts .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .spots-full .spot-side { transition: none; }
  .btn, .state-cards a { transition: none; }
}