/* ====================================================================
   出生地選擇器(2026-11-02):同一格是下拉也是搜尋(livewire/reading/_place-picker,Alpine placePicker 在 reading/_wheel-assets)。
   靜態檔(不必 npm build),改了要換 ?v=(Cloudflare 會快取靜態檔)。
   清單一律往下展開、佔版面(不用浮層):八字與會員中心的卡片是 overflow:hidden,浮層會被切掉;手機鍵盤彈出時也比較好捲。
   顏色全走 --pp-* 變數:預設宣紙(跟滾輪同色);星座宇宙 / 月下紅線 / 水墨夜空 在下面換變數。
   ==================================================================== */

:root {
  --pp-bg: #fdfbf4;
  --pp-line: rgba(200, 164, 82, .5);
  --pp-focus: #c8a452;
  --pp-ring: rgba(200, 164, 82, .28);
  --pp-text: #2b2b2b;
  --pp-mute: #6f6650;
  --pp-faint: #8a7f68;
  --pp-head-bg: #f5efdf;          /* 分組標題黏在清單頂端,要不透明 */
  --pp-head-text: #6b5a2e;
  --pp-hover: rgba(200, 164, 82, .14);
  --pp-current: #8e1f1f;
  --pp-warn-text: #8a4212;
  --pp-warn-bg: rgba(214, 138, 54, .1);
  --pp-warn-line: rgba(214, 138, 54, .4);
}

.pp { width: 100%; min-width: 0; color: var(--pp-text); }

/* ---------- 輸入框 ---------- */
.pp .pp-field { position: relative; scroll-margin-top: 90px; }
.pp .pp-field input.pp-input[type="text"] {
  display: block; width: 100%; height: 50px; margin: 0;
  padding: 0 46px 0 40px;
  font-size: 16px;                /* 16px 以下 iOS 聚焦會自動放大 */
  line-height: 1.3;
  color: var(--pp-text);
  background-color: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: .6rem;
  outline: none;
  box-shadow: none;
  text-overflow: ellipsis;
  transition: border-color .15s, box-shadow .15s;
}
.pp .pp-field input.pp-input[type="text"]::placeholder { color: var(--pp-faint); opacity: 1; }
.pp .pp-field input.pp-input[type="text"]:focus { border-color: var(--pp-focus); box-shadow: 0 0 0 3px var(--pp-ring); }
.pp.is-unknown .pp-field input.pp-input[type="text"] { border-color: var(--pp-warn-line); }
.pp .pp-search { position: absolute; left: 13px; top: 16px; color: var(--pp-faint); pointer-events: none; }
.pp .pp-chev {
  position: absolute; right: 3px; top: 3px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--pp-mute); cursor: pointer;
}
.pp .pp-chev svg { transition: transform .15s; }
.pp.is-open .pp-chev svg { transform: rotate(180deg); }
.pp .pp-chev:hover { background: var(--pp-hover); }

/* ---------- 展開的清單 ---------- */
.pp .pp-panel {
  margin-top: 6px; overflow: hidden;
  background: var(--pp-bg);
  border: 1px solid var(--pp-line);
  border-radius: .6rem;
}
.pp .pp-list {
  position: relative;          /* 列的 offsetTop 以清單為準(鍵盤上下移動時捲動用) */
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
}
.pp .pp-group {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--pp-head-text); background: var(--pp-head-bg);
}
.pp .pp-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 4px 12px;
  min-height: 46px; padding: 8px 12px;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.pp .pp-opt.is-active { background: var(--pp-hover); }
.pp .pp-opt-main { flex: 1 1 0; min-width: 0; display: block; }
.pp .pp-name { display: block; font-size: 16px; line-height: 1.35; color: var(--pp-text); overflow-wrap: anywhere; }
.pp .pp-where { display: block; margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--pp-mute); overflow-wrap: anywhere; }
.pp .pp-time { flex: 0 0 auto; font-size: 12px; line-height: 1.4; color: var(--pp-mute); white-space: nowrap; }
.pp .pp-opt.is-current .pp-name { color: var(--pp-current); font-weight: 600; }
.pp .pp-empty { margin: 0; padding: 12px; font-size: 14px; line-height: 1.6; color: var(--pp-mute); }
.pp .pp-credit {
  margin: 0; padding: 4px 12px; font-size: 11px; line-height: 1.5; text-align: right;
  color: var(--pp-faint); border-top: 1px solid var(--pp-hover);
}

/* ---------- 下方的時區與提醒 ---------- */
.pp .pp-meta { margin-top: 6px; }
.pp .pp-clock { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pp-mute); }
.pp .pp-note { margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: var(--pp-mute); }
.pp .pp-warn {
  margin: 6px 0 0; padding: 7px 10px; font-size: 13px; line-height: 1.6;
  color: var(--pp-warn-text); background: var(--pp-warn-bg);
  border: 1px solid var(--pp-warn-line); border-radius: .4rem;
}

/* 欄位窄的時候(手機,或會員中心的半欄):時區放到第二行,地名才有地方。看欄位本身的寬度,舊瀏覽器退回看螢幕寬 */
.pp { container-type: inline-size; }
@media (max-width: 520px) {
  .pp .pp-opt { flex-wrap: wrap; }
  .pp .pp-opt-main { flex-basis: 100%; }
  .pp .pp-time { flex-basis: 100%; white-space: normal; }
  .pp .pp-list { max-height: 280px; }
}
@container (max-width: 420px) {
  .pp .pp-opt { flex-wrap: wrap; }
  .pp .pp-opt-main { flex-basis: 100%; }
  .pp .pp-time { flex-basis: 100%; white-space: normal; }
}

/* ---------- 主題 ---------- */
/* 星座宇宙(public/css/astro-cosmos.css) */
html.theme-astro {
  --pp-bg: rgba(7, 10, 21, .5);
  --pp-line: rgba(212, 180, 106, .34);
  --pp-focus: var(--ac-gold, #d4b46a);
  --pp-ring: rgba(212, 180, 106, .18);
  --pp-text: var(--ac-moon, #dfe1ed);
  --pp-mute: #b4b7cc;
  --pp-faint: #9ca0b6;
  --pp-head-bg: #151a35;
  --pp-head-text: var(--ac-gold-l, #e8d2a0);
  --pp-hover: rgba(223, 225, 237, .09);
  --pp-current: var(--ac-gold-l, #e8d2a0);
  --pp-warn-text: #f2d49a;
  --pp-warn-bg: rgba(212, 180, 106, .1);
  --pp-warn-line: rgba(212, 180, 106, .45);
}

/* 月下紅線(public/css/love-moon.css) */
html.theme-love {
  --pp-bg: rgba(22, 8, 13, .5);
  --pp-line: rgba(212, 176, 106, .34);
  --pp-focus: var(--lm-gold, #d4b06a);
  --pp-ring: rgba(212, 176, 106, .18);
  --pp-text: var(--lm-moon, #f4e8d8);
  --pp-mute: #d0b8b6;
  --pp-faint: #b89a9c;
  --pp-head-bg: #2a1119;
  --pp-head-text: var(--lm-gold-l, #e8d3a0);
  --pp-hover: rgba(244, 232, 216, .09);
  --pp-current: var(--lm-gold-l, #e8d3a0);
  --pp-warn-text: #f2d49a;
  --pp-warn-bg: rgba(212, 176, 106, .1);
  --pp-warn-line: rgba(212, 176, 106, .45);
}

/* 水墨夜空(public/css/tarot-cosmic.css):塔羅表單目前沒有出生地欄位,先備好同一套換色 */
html.theme-tarot {
  --pp-bg: rgba(12, 13, 28, .5);
  --pp-line: rgba(201, 168, 101, .34);
  --pp-focus: var(--tc-gold, #c9a865);
  --pp-ring: rgba(201, 168, 101, .18);
  --pp-text: var(--tc-lilac, #e9e6f2);
  --pp-mute: #bdb9d6;
  --pp-faint: var(--tc-mute, #a9a5c4);
  --pp-head-bg: #1b1b38;
  --pp-head-text: var(--tc-gold-l, #e2cf9c);
  --pp-hover: rgba(233, 230, 242, .09);
  --pp-current: var(--tc-gold-l, #e2cf9c);
  --pp-warn-text: #f2d49a;
  --pp-warn-bg: rgba(201, 168, 101, .1);
  --pp-warn-line: rgba(201, 168, 101, .45);
}

@media (prefers-reduced-motion: reduce) {
  .pp .pp-chev svg, .pp .pp-field input.pp-input[type="text"] { transition: none; }
}