/* Show the selected area first and reveal the complete catalog on demand. */
.home-area-picker.tb-area-bar {
  display:block;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.home-area-picker-disclosure { min-width:0; }
.home-area-picker summary { list-style:none; cursor:pointer; }
.home-area-picker summary::-webkit-details-marker { display:none; }
.home-area-picker-toggle {
  display:flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  max-width:100%;
  min-height:var(--tap);
  padding:8px 12px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--ink);
  font-size:var(--text-base);
  line-height:1.5;
}
.home-area-picker-label { color:var(--ink-2); font-size:var(--text-sm); flex-shrink:0; }
.home-area-picker-value { min-width:0; overflow-wrap:anywhere; font-weight:700; }
.home-area-picker-toggle > svg { flex-shrink:0; color:var(--ink-2); }
.home-area-picker-toggle:hover { border-color:var(--brand); }
.home-area-picker-disclosure[open] > .home-area-picker-toggle {
  border-color:var(--brand);
  background:var(--brand-tint);
}
.home-area-picker details[open] > summary > svg:last-child { transform:rotate(180deg); }
.home-area-picker-panel {
  margin-top:10px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
}
.home-area-picker-chips { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.home-area-picker .tb-chip {
  max-width:100%;
  min-height:var(--tap);
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--ink-2);
  font-size:var(--text-sm);
  line-height:1.5;
  white-space:normal;
  overflow-wrap:anywhere;
}
.home-area-picker .tb-chip:hover { border-color:var(--brand); color:var(--brand-strong); }
.home-area-picker .tb-chip.is-active {
  border-color:var(--brand);
  background:var(--brand-tint);
  color:var(--brand-strong);
}
.home-area-picker-group { margin-top:12px; border-top:1px solid var(--line); }
.home-area-picker-group > summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:var(--tap);
  padding:10px 0;
  color:var(--ink-2);
  font-size:var(--text-sm);
  font-weight:600;
}
.home-area-picker-group > summary > svg { flex-shrink:0; }
.home-area-picker-region + .home-area-picker-region { margin-top:16px; }
.home-area-picker-region-name { margin:0 0 8px; color:var(--ink-2); font-size:var(--text-sm); }
.home-area-picker-regions, .home-area-picker-prefectures { padding:4px 0 8px; }
.home-area-picker summary:focus-visible, .home-area-picker a:focus-visible {
  outline:2px solid var(--brand);
  outline-offset:3px;
}
@media (max-width:479px) {
  .home-area-picker-panel { padding:12px; }
  .home-area-picker-chips { gap:6px; }
  .home-area-picker .tb-chip { padding-right:10px; padding-left:10px; }
}