/* /venues 場域資料庫 —— 其餘一律沿用 base.css / home.css */

/* ---------- 統計條 ---------- */
.vn-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: var(--border); background: var(--ink);
  margin-bottom: 26px; box-shadow: 6px 6px 0 rgba(0,0,0,.1);
}
.vn-facts div { background: var(--surface); padding: 18px 16px; }
.vn-facts .k {
  font-family: var(--mono); font-size: .78rem; color: var(--sub-ink);
  text-transform: uppercase; letter-spacing: .06em;
}
.vn-facts .v { font-size: 1.5rem; font-weight: 900; margin-top: 6px; line-height: 1.15; }
.vn-facts .v em { font-style: normal; color: var(--neon); }
.vn-facts .v small { font-size: .8rem; font-weight: 700; color: var(--sub-ink); margin-left: 3px; }

/* ---------- 篩選 ---------- */
.vn-tools {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); padding: 12px 0 10px; margin-bottom: 4px;
  border-bottom: var(--border);
}
.vn-search {
  width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px;
  border: var(--border); background: var(--surface); color: var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,.1);
}
.vn-search:focus { outline: none; box-shadow: 4px 4px 0 var(--neon); }
.vn-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.vn-group { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.vn-group > b {
  font-family: var(--mono); font-size: .76rem; color: var(--sub-ink);
  text-transform: uppercase; letter-spacing: .05em; margin-right: 2px;
}
.vn-chip {
  font: inherit; font-size: .8rem; font-weight: 700; line-height: 1;
  padding: 7px 10px; border: 2px solid var(--ink); background: var(--surface);
  color: var(--ink); cursor: pointer;
}
.vn-chip:hover { background: #ebebeb; }
.vn-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.vn-chip.is-neon[aria-pressed="true"] { background: var(--neon); color: var(--ink); }
.vn-count {
  font-family: var(--mono); font-size: .8rem; color: var(--sub-ink);
  margin: 14px 0 10px;
}
.vn-count b { color: var(--ink); font-size: 1rem; }

/* ---------- 卡片 ---------- */
.vn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.vn-card {
  border: var(--border); background: var(--surface);
  box-shadow: 4px 4px 0 rgba(0,0,0,.1); display: flex; flex-direction: column;
}
.vn-card.is-visited { box-shadow: 4px 4px 0 var(--neon); }
.vn-head {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: none; padding: 14px 15px; display: block;
}
.vn-head:hover { background: #f7f7f7; }
.vn-name { font-size: 1.15rem; font-weight: 900; line-height: 1.35; }
.vn-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px;
  font-family: var(--mono); font-size: .82rem; color: var(--sub-ink);
}
.vn-badge {
  font-family: var(--sans); font-size: .76rem; font-weight: 900; line-height: 1;
  padding: 4px 6px; border: 1.5px solid var(--ink); background: var(--surface);
}
.vn-badge.go { background: var(--neon); border-color: var(--neon); }
.vn-badge.new { background: #fff; color: var(--sub-ink); border-color: #bbb; }
.vn-near {
  margin-top: 10px; font-family: var(--mono); font-size: .8rem; color: var(--sub-ink);
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.vn-near b { color: var(--ink); font-weight: 700; }

/* ---------- 展開後 ---------- */
.vn-sec { margin-top: 14px; }
.vn-sec > h4 {
  font-family: var(--mono); font-size: .7rem; color: var(--sub-ink);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 7px;
  border-bottom: 1px solid #e2e2e2; padding-bottom: 4px;
}
.vn-kv { font-size: .95rem; line-height: 1.8; }
.vn-kv b { font-weight: 700; }
.vn-kv a { color: var(--ink); }
.vn-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.vn-tag {
  font-size: .8rem; font-weight: 700; padding: 4px 8px;
  border: 1.5px solid var(--ink); background: #fff;
}
.vn-tag.edu { background: rgba(0,204,68,.16); }
.vn-quote {
  border-left: 4px solid var(--ink); padding: 8px 0 8px 11px; margin: 9px 0;
  font-size: .84rem; line-height: 1.75; white-space: pre-wrap;
}
.vn-quote cite {
  display: block; font-family: var(--mono); font-style: normal;
  font-size: .68rem; color: var(--sub-ink); margin-bottom: 5px;
}
.vn-empty { font-size: .95rem; color: var(--sub-ink); line-height: 1.75; }

/* ---------- 非學校場域 ---------- */
.vn-other {
  border: var(--border); background: var(--surface); padding: 13px 15px;
  box-shadow: 3px 3px 0 rgba(0,0,0,.08);
}
.vn-other .vn-name { font-size: 1.05rem; }

/* ---------- 說明區 ---------- */
.vn-note {
  border: var(--border); background: var(--surface); padding: 18px 20px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.1); margin-top: 34px; font-size: 1rem; line-height: 1.9;
}
.vn-note h3 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 900; }
.vn-note ul { margin: 8px 0 0; padding-left: 20px; }
.vn-note li { margin-bottom: 5px; }
.vn-note code {
  font-family: var(--mono); font-size: .82rem; background: #eee; padding: 1px 5px;
}

@media (max-width: 720px) {
  .vn-facts { grid-template-columns: repeat(2, 1fr); }
  .vn-list { grid-template-columns: 1fr; }
  .vn-tools { padding-top: 8px; }
}

/* ---------- 學校彈窗 ---------- */
/* 目標是「視窗夠大就一次看完」：面板高度封頂在視窗內，內容區用多欄把長條列攤平，
   欄數由 venues.js 的 fitModal() 依實際高度往上加。真的塞不下才捲。 */
body.vn-locked { overflow: hidden; }

.vn-modal {
  /* 站上既有層級：system-portal 公告 10000、pwa-sheet 9999、pixel-helper 9999、pwa-pill 9998。
     彈窗要蓋過常駐的浮動元件，但讓進站公告優先（那是一次性的，使用者會先關掉）。 */
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.55);
  animation: vm-fade .12s ease-out;
}
.vn-modal[hidden] { display: none; }
@keyframes vm-fade { from { opacity: 0 } to { opacity: 1 } }

.vm-panel {
  width: min(1180px, 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface); border: var(--border);
  box-shadow: 8px 8px 0 rgba(0,0,0,.35);
  overflow: hidden;
}
.vm-panel.is-scrolling { overflow-y: auto; }

.vm-top {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px 14px; border-bottom: 2px solid var(--ink);
}
.vm-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.vm-title h3 { margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.25; }
.vm-x {
  flex: none; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  width: 38px; height: 38px; background: var(--surface);
  border: var(--border); box-shadow: 3px 3px 0 rgba(0,0,0,.2);
}
.vm-x:hover { background: var(--neon); }

.vm-facts {
  display: flex; flex-wrap: wrap; gap: 4px 30px;
  padding: 13px 22px; background: #f4f4f4; border-bottom: 1px solid #e0e0e0;
}
.vm-facts .k {
  font-family: var(--mono); font-size: .72rem; color: var(--sub-ink);
  text-transform: uppercase; letter-spacing: .05em;
}
.vm-facts .t { font-size: 1rem; font-weight: 700; margin-top: 2px; }

.vm-contact {
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  padding: 11px 22px; font-size: .95rem; line-height: 1.6;
  border-bottom: 1px solid #e0e0e0;
}
.vm-contact a { color: var(--ink); }

.vm-body { padding: 6px 22px 18px; column-gap: 34px; }
.vm-body .vm-sec { break-inside: avoid; margin-top: 16px; }
.vm-sec > h4 {
  font-size: 1.02rem; font-weight: 900; margin: 0 0 8px;
  border-bottom: 2px solid var(--ink); padding-bottom: 5px;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.vm-sec > h4 small {
  font-family: var(--mono); font-size: .72rem; font-weight: 400;
  color: var(--sub-ink); text-transform: none; letter-spacing: 0;
}
.vm-near-sec .vn-near { margin-top: 0; font-size: .86rem; }

.vn-ul { margin: 0; padding-left: 19px; font-size: .97rem; line-height: 1.72; }
.vn-ul li { margin-bottom: 7px; }
.vn-ul li::marker { color: var(--sub-ink); }

.vm-foot {
  margin-top: auto; padding: 11px 22px; background: #f4f4f4;
  border-top: 1px solid #e0e0e0;
  font-family: var(--mono); font-size: .78rem; color: var(--sub-ink);
}

@media (max-width: 760px) {
  .vn-modal { padding: 0; align-items: stretch; }
  .vm-panel { max-height: 100vh; height: 100vh; border-width: 0; box-shadow: none; }
  .vm-top { padding: 14px 16px 11px; }
  .vm-title h3 { font-size: 1.24rem; }
  .vm-facts, .vm-contact { padding-left: 16px; padding-right: 16px; gap: 3px 18px; }
  .vm-body { padding: 4px 16px 14px; }
  .vm-foot { padding: 10px 16px; }
  .vn-ul { font-size: .95rem; line-height: 1.68; }
}

/* fitModal() 第二段：欄數加到上限仍溢出時收緊間距，換取「一次看完」 */
.vm-panel.is-dense .vm-facts { padding-top: 9px; padding-bottom: 9px; }
.vm-panel.is-dense .vm-contact { padding-top: 8px; padding-bottom: 8px; }
.vm-panel.is-dense .vm-top { padding-top: 13px; padding-bottom: 10px; }
.vm-panel.is-dense .vm-body { padding-bottom: 12px; }
.vm-panel.is-dense .vm-body .vm-sec { margin-top: 11px; }
.vm-panel.is-dense .vm-sec > h4 { margin-bottom: 6px; padding-bottom: 4px; }
.vm-panel.is-dense .vn-ul { line-height: 1.6; }
.vm-panel.is-dense .vn-ul li { margin-bottom: 4px; }
.vm-panel.is-dense .vm-foot { padding-top: 9px; padding-bottom: 9px; }

/* 開彈窗時收起常駐浮動元件，避免它們壓在內容上 */
body.vn-locked #pixel-helper,
body.vn-locked .pwa-pill,
body.vn-locked .pwa-sheet { display: none !important; }

/* 手機的 dense 再收一級：頁首資訊與頁尾是固定成本，先壓它們，正文字級維持可讀 */
@media (max-width: 760px) {
  .vm-panel.is-dense .vm-title h3 { font-size: 1.12rem; }
  .vm-panel.is-dense .vm-x { width: 34px; height: 34px; }
  .vm-panel.is-dense .vm-facts { padding-top: 7px; padding-bottom: 7px; gap: 2px 14px; }
  .vm-panel.is-dense .vm-facts .k { font-size: .66rem; }
  .vm-panel.is-dense .vm-facts .t { font-size: .92rem; }
  .vm-panel.is-dense .vm-contact { padding-top: 6px; padding-bottom: 6px; font-size: .88rem; line-height: 1.5; }
  .vm-panel.is-dense .vm-foot { padding-top: 7px; padding-bottom: 7px; font-size: .72rem; line-height: 1.4; }
  .vm-panel.is-dense .vm-sec > h4 { font-size: .96rem; }
  .vm-panel.is-dense .vm-sec > h4 small { font-size: .66rem; }
  .vm-panel.is-dense .vn-ul { line-height: 1.55; }
  .vm-panel.is-dense .vn-ul li { margin-bottom: 3px; }
  .vm-panel.is-dense .vm-near-sec .vn-near { font-size: .8rem; }
}

/* 需要捲動時（手機、條列特別多的學校），把校名列釘在頂端，捲到一半仍知道在看哪一所 */
.vm-panel.is-scrolling .vm-top {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
}

/* ---------- 更新時間 ---------- */
/* 放在統計卡與篩選之間。團隊要判斷這份資料值不值得參考，第一個問的就是「多新」。 */
.vn-freshness {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 10px 14px;
  border: 2px solid var(--ink); background: var(--surface);
  font-family: var(--mono); font-size: .84rem; color: var(--sub-ink);
}
.vn-freshness b { color: var(--ink); font-weight: 700; }
.vn-freshness .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--neon); flex: none;
}
.vn-freshness .sep { color: #ccc; }
.vn-freshness.is-stale .dot { background: var(--alert, #FF2A2A); }
.vn-freshness .age { color: var(--sub-ink); }
.vn-freshness.is-stale .age { color: var(--alert, #FF2A2A); font-weight: 700; }
@media (max-width: 620px) {
  .vn-freshness { font-size: .78rem; gap: 6px; }
  .vn-freshness .sep { display: none; }
}

/* 車程時間：緊跟在距離後面，字小一級不搶戲 */
.vn-near i {
  font-style: normal; margin-left: 4px;
  color: var(--sub-ink); font-size: .92em;
}

.vn-near i.straight {
  display: inline-block; margin-left: 8px;
  color: #999; font-size: .88em;
}
/* 繞路 2 倍以上：照直線距離做規劃會出事，標出來 */
.vn-near .is-detour b { color: #C25E00; }
.vn-near .is-detour i.straight { color: #C25E00; }

/* ---------- 卡片列表的六類圖示 ---------- */
/* 六類擺文字標籤會把卡片撐爆，列表階段只要回答「附近大概有沒有東西」。
   類別名稱走 title，滑鼠停留與螢幕閱讀器都拿得到。 */
.vn-ni { display: inline-flex; align-items: center; gap: 3px; }
.vn-ni > i:first-child { font-size: 1.05em; color: var(--sub-ink); margin-left: 0; }
.vn-ni.is-detour > i:first-child { color: #C25E00; }

/* ---------- 彈窗：分類 + 可展開的其他選擇 ---------- */
.vn-detail { font-family: var(--mono); font-size: .84rem; }
.vd-grp { padding: 8px 0; border-bottom: 1px dotted #e6e6e6; }
.vd-grp:last-child { border-bottom: none; }
.vd-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vd-head > i { font-size: 1.1em; color: var(--sub-ink); }
.vd-cat { font-weight: 700; color: var(--ink); min-width: 4.6em; }
.vd-name { flex: 1; min-width: 9em; color: var(--ink); }
.vd-name em { font-style: normal; color: var(--sub-ink); margin-left: 5px; font-size: .9em; }
a.vd-name.is-map { text-decoration: none; border-bottom: 1px dotted #bbb; }
a.vd-name.is-map:hover { border-bottom-color: var(--ink); background: rgba(0,0,0,.03); }
a.vd-name.is-map > i { margin-left: 5px; font-size: .82em; color: var(--sub-ink); }
a.vd-name.is-map:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vd-dist { white-space: nowrap; color: var(--sub-ink); }
.vd-dist b { color: var(--ink); font-weight: 700; }
.vd-dist i { font-style: normal; margin-left: 4px; font-size: .92em; }
.vd-dist i.straight { color: #999; font-size: .88em; }
.vd-dist.is-detour b, .vd-dist.is-detour i.straight { color: #C25E00; }

.vd-meta {
  flex-basis: 100%; margin-top: 2px;
  font-size: .92em; color: #999; line-height: 1.6;
}
.vd-meta a { color: var(--sub-ink); font-weight: 700; }
.vd-meta a:hover { color: var(--ink); }

.vd-more { margin: 4px 0 0 calc(1.1em + 6px); }
.vd-more > summary {
  cursor: pointer; color: var(--sub-ink); font-size: .92em;
  padding: 2px 0; list-style: none;
}
.vd-more > summary::-webkit-details-marker { display: none; }
.vd-more > summary::before { content: '▸ '; }
.vd-more[open] > summary::before { content: '▾ '; }
.vd-more > summary:hover { color: var(--ink); }
.vd-item {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 3px 0 3px 10px; border-left: 2px solid #eee;
}
.vn-island { margin: 10px 0 0; font-size: .82rem; color: #999; }
.vn-caveat {
  margin: 12px 0 0; padding: 10px 12px;
  background: #FFF8E1; border-left: 4px solid #E0B400;
  font-size: .84rem; line-height: 1.75; color: #5D4037;
}
.vd-note { margin: 6px 0; font-size: .85rem; color: var(--sub-ink); }