/* src/styles/views/places.css — owned by T4 (Places view). Scope every rule under .view-places. */

/* ── Controls: List | Map, search, filter rails ───────────────────────────── */
.view-places .places-controls { display: grid; gap: var(--s-3); margin-top: var(--s-4); }

.view-places .places-mode { display: flex; align-items: center; gap: var(--s-3); }
.view-places .places-mode .segmented { flex: 0 0 auto; min-width: 168px; }
.view-places .places-mode-note {
  flex: 1 1 0; min-width: 0; margin: 0; font: 400 italic var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--text-3);
}

.view-places .places-filters { display: grid; gap: var(--s-2); }
.view-places .places-rail { display: grid; min-width: 0; }
.view-places .places-rail-label { display: none; }
.view-places .places-rail-scroll { padding-block: 6px; } /* room for the 44px chip hit area */

/* Region chips: glyph tinted with the region ink (paired with glyph + label, never colour alone). */
.view-places .chip[class*="tone-"]:not(.is-selected) .icon { color: var(--tone-ink); }
.view-places .chip.is-empty { color: var(--text-3); border-style: dashed; }
.view-places .chip.is-empty .icon { opacity: .6; }

/* ── Status line ───────────────────────────────────────────────────────────── */
.view-places .places-status {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: var(--tap-min); margin-top: var(--s-3); border-bottom: 1px solid var(--line);
}
.view-places .places-count {
  margin: 0; font: 600 var(--fs-label)/var(--lh-label) var(--font-sans);
  letter-spacing: var(--track-section); text-transform: uppercase; color: var(--text-3);
}
.view-places .places-count .tnum { color: var(--text); }
.view-places .places-status-action .btn { margin-right: calc(-1 * var(--s-2)); }

/* ── Region → area groups ─────────────────────────────────────────────────── */
.view-places .places-results { padding-bottom: var(--s-8); }

.view-places .places-region { margin-top: var(--section-gap); }
.view-places .places-region:first-child { margin-top: var(--s-6); }
.view-places .places-region-head {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-strong);
}
/* A short stroke of region ink under the name-plate, like a brush underline. */
.view-places .places-region-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--tone-ink);
}
.view-places .places-region-title { margin: 0; display: flex; line-height: 0; }
.view-places .places-region-kanji {
  font-size: var(--fs-small); line-height: 1; color: var(--text-3); letter-spacing: .08em;
}
.view-places .places-region-count {
  margin-left: auto; font: 500 var(--fs-caption)/var(--lh-caption) var(--font-sans);
  font-variant-numeric: tabular-nums; color: var(--text-3);
}

.view-places .places-area { margin-top: var(--s-4); }
.view-places .places-area-title {
  display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-1);
  font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2);
}
.view-places .places-area-count { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }

.view-places .places-rows { display: grid; }

/* ── Hint + empty ─────────────────────────────────────────────────────────── */
.view-places .places-hint {
  display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-6); padding: var(--s-1) var(--s-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-2);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2);
}
.view-places .places-hint > span { flex: 1 1 auto; }
.view-places .places-empty { margin-top: var(--s-6); }
.view-places .places-empty .places-hint { margin-top: var(--s-3); text-align: left; }

/* ── Wider screens ────────────────────────────────────────────────────────── */
/* Rows stay one column: the content column is ~720px and many names are long (up to ~70 chars), so two
   348px columns wrapped names to 4 lines and made 200px rows. One calm column reads better. */
@media (min-width: 1024px) {
  .view-places .places-filters { gap: var(--s-1); }
  .view-places .places-rail { grid-template-columns: 88px 1fr; align-items: start; }
  .view-places .places-rail-label {
    display: block; padding-top: 14px;
    font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--track-section);
    text-transform: uppercase; color: var(--text-3);
  }
  .view-places .places-rail-scroll { row-gap: var(--s-2); }
}

/* ── Unconfirmed entries (ideas / suggestions): dashed marker, same language as the sheet's dashed tag ── */
.view-places .places-unconfirmed {
  display: inline-block; padding: 0 5px; border: 1px dashed var(--line-strong); border-radius: var(--r-1);
  font: 500 var(--fs-micro)/1.5 var(--font-sans); letter-spacing: .04em; color: var(--text-3); vertical-align: 1px;
}
.view-places .places-status-action { flex: 0 0 auto; }
.view-places .places-count:focus-visible { outline-offset: 4px; }