/* 切換區域（js/regions.js）。class 用 rg- 開頭。顏色、字體都用 design-system 的 token。 */

/* 搜尋列右邊的區域按鈕 */
.search-row { display: flex; gap: var(--space-2); }
.search-row .search { flex: 1; min-width: 0; }
.rg-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 var(--space-4);
  background: var(--surface-raised); color: var(--text); border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-pill);
  font-family: inherit; font-size: 14px; font-weight: 900; white-space: nowrap; cursor: pointer;
}
.rg-btn svg { flex: none; color: var(--brand-text); }
.rg-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.rg-btn:active { background: var(--surface-sunken); }

/* 底部選單：蓋在地圖和底部卡片上面，樹木頁（#page）打開時不會同時出現 */
.rg-sheet { position: absolute; inset: 0; z-index: 900; display: flex; align-items: flex-end; background: rgba(38, 35, 31, 0.45); }
.rg-sheet[hidden] { display: none; }
.rg-sheet__panel {
  width: 100%; max-height: 90%; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-raised); border-top: var(--stroke-bold) solid var(--outline); border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.rg-grab { align-self: center; width: 48px; height: 5px; border-radius: 3px; background: var(--ink-400); }
.rg-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 28px; }
.rg-sub, .rg-note { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-muted); }
.rg-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.rg-area {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4); min-height: var(--target-min); box-sizing: border-box; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text); border: var(--stroke-ui) solid var(--outline); border-radius: var(--radius-md); font-family: inherit;
}
.rg-area[aria-current="true"] { background: var(--green-50); box-shadow: inset 0 0 0 3px var(--green-50), inset 0 0 0 5px var(--brand); }
.rg-area:active { background: var(--surface-sunken); }
.rg-area:disabled { cursor: progress; }
.rg-area:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.rg-area__name { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 24px; }
.rg-area__meta { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--text-muted); }
.rg-area__count { grid-row: 1 / span 2; grid-column: 2; font-size: 13px; font-weight: 900; color: var(--brand-text); text-align: right; }

@media (min-width: 768px) {
  .rg-sheet__panel { max-width: 720px; margin-inline: auto; }
}

/* ── 電腦版：按鈕放在左欄搜尋列下面整排，選單改成置中的對話框 ── */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .search-row { flex-direction: column; }
  .rg-btn { height: var(--target-min); justify-content: center; font-size: 15px; }
  .rg-btn:hover { background: var(--green-50); }
  .rg-sheet { position: fixed; align-items: center; justify-content: center; }
  .rg-sheet__panel {
    width: 560px; max-width: calc(100% - var(--space-12)); margin: 0; gap: var(--space-4);
    padding: var(--space-6) var(--space-8) var(--space-8);
    border: var(--stroke-bold) solid var(--outline); border-radius: var(--radius-md);
  }
  .rg-grab { display: none; }
  .rg-title { font-size: 28px; line-height: 36px; }
  .rg-area:hover { background: var(--green-50); }
}