/* explore.css — /explore (web redesign Stage 5a) */
.ex-body { background: var(--surface, var(--bg)); }
.ex { max-width: 1320px; margin: 0 auto; padding: calc(var(--nav-h, 68px) + 16px) 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.ex__title { margin: 0; font: 800 28px/1.1 var(--font-sans, "Inter", sans-serif); color: var(--text); letter-spacing: -0.01em; }
.ex__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ex-search { flex: 1 1 260px; min-width: 200px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line-strong, var(--line)); background: var(--surface-raised, var(--bg)); color: var(--text);
  font: 500 14px var(--font-sans, "Inter", sans-serif); }
.ex-search:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 1px; }
.ex-filters, .ex-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-sort__lbl { font: 700 11px var(--font-sans, "Inter", sans-serif); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2, var(--text-secondary)); }
.ex-sort [aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.ex-hint { font-size: 12px; color: var(--text-muted); }
.ex__toggle { display: none; }
.ex__body { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 16px; align-items: start; }
.ex__list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ex__mapcol { position: sticky; top: calc(var(--nav-h, 68px) + 12px); }
.ex__map { position: relative; height: calc(100vh - var(--nav-h, 68px) - 40px); min-height: 420px; border-radius: 14px;
  overflow: hidden; border: 1px solid var(--line); }
.ex-count { margin: 0 2px 4px; font-size: 12px; font-weight: 600; color: var(--text-2, var(--text-secondary)); }
.ex-empty { margin: 8px 2px; font-size: 13px; color: var(--text-2, var(--text-secondary)); }
.ex-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-raised, var(--bg));
  color: var(--text); text-decoration: none; }
.ex-row:hover, .ex-row.is-hot { border-color: var(--accent); background: var(--accent-tint); }
.ex-row:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 1px; }
.ex-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-row__name { font: 700 14px var(--font-sans, "Inter", sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-row__sub { font-size: 12px; color: var(--text-2, var(--text-secondary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-row__note { font-size: 11px; color: var(--text-muted); }
.ex-row__note:empty { display: none; }
.ex-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 88px; }
.ex-row__read { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--font-sans, "Inter", sans-serif);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-row__read--pending { color: var(--text-muted); }
.ex-row__range { font-weight: 600; color: var(--text-2, var(--text-secondary)); }
.ex-row__dist { font-size: 11px; color: var(--text-2, var(--text-secondary)); font-variant-numeric: tabular-nums; }
.ex-row__fly { border: 1px solid var(--line); background: none; color: var(--text-2, var(--text-secondary)); border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; font-size: 15px; }
.ex-row__fly:hover { border-color: var(--accent); color: var(--accent-text); }
.ex-badge { display: inline-block; font: 700 10px var(--font-sans, "Inter", sans-serif); padding: 2px 6px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--text-2, var(--text-secondary)); vertical-align: 1px; }
.fcp-heart--sm { font-size: 18px; width: 30px; height: 30px; }
.ex-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.ex-pager__n { font-size: 13px; color: var(--text-2, var(--text-secondary)); font-variant-numeric: tabular-nums; }
.ex-area { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; box-shadow: var(--shadow-sm); }
.ex-area[hidden] { display: none; }
.ex-pop { font-family: var(--font-sans, "Inter", sans-serif); color: #0b1420; min-width: 140px; }
.ex-pop__n { margin: 0 0 2px; font-weight: 700; font-size: 13px; }
.ex-pop__r { margin: 0 0 6px; font-size: 12px; }
.ex-pop__a { font-size: 12px; font-weight: 700; color: #0E7A66; }
@media (max-width: 999px) {
  .ex__toggle { display: flex; }
  .ex__body { grid-template-columns: minmax(0, 1fr); }
  .ex__mapcol { position: static; display: none; }
  .ex[data-view='map'] .ex__mapcol { display: block; }
  .ex[data-view='map'] .ex__list { display: none; }
  .ex__map { height: 70vh; }
}

/* rev A §4 — ONE row height on every tab; the weather row's compact middle */
.ex-row { min-height: 66px; box-sizing: border-box; }
.ex-row--weather { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto auto auto; }
.ex-row__mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-row__wx1 { display: flex; align-items: center; gap: 6px; font: 600 13px var(--font-sans, "Inter", sans-serif);
  color: var(--text); min-height: 24px; white-space: nowrap; overflow: hidden; }
.ex-row__wx2 { font-size: 12px; color: var(--text-2, var(--text-secondary)); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.ex-wxic { display: inline-flex; flex: none; width: 24px; height: 24px; }
.ex-wxic svg, .ex-row .wx-ic svg { width: 100%; height: 100%; }
.ex-row .wx-ic { display: inline-flex; width: 18px; height: 18px; }
.ex-row__cond { overflow: hidden; text-overflow: ellipsis; }
.ex-row__temp { font: 800 22px/1 var(--font-sans, "Inter", sans-serif); letter-spacing: -0.01em; }
/* fixed-size placeholders while a row's data loads — no layout shift */
.ex-skel { display: block; width: 70%; border-radius: 6px; background: var(--surface-sunken); color: transparent; }
.ex-row__wx2.ex-skel { width: 90%; }
@media (max-width: 640px) {
  .ex-row--weather { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .ex-row--weather .ex-row__mid { grid-column: 1 / -1; grid-row: 2; }
}
/* rev A §5: the rating filter outside a region, and the rating progress */
.ex-filters .fcc-dd__trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.ex-progress { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }