/*
 * Valeriepieris 圓頁面（tw/en 共用）
 *
 * 主題跟著站上的 :root[data-theme="dark"]（js/theme-toggle.js 設定，頁面 <head>
 * 也會在第一次繪製前先套上，避免閃白）。
 */

:root {
    --vp-bg: #f5f7fa;
    --vp-surface: #fff;
    --vp-text: #1e293b;
    --vp-muted: #475569;
    --vp-border: #d5dce5;

    /* 控制項（按鈕、選單）的外框要達 WCAG 1.4.11 的 3:1；--vp-border 只用在裝飾線。 */
    --vp-control-border: #64748b;
    --vp-ocean: #dce9f5;
    --vp-land: #c9d6c3;
    --vp-land-edge: #9fb39a;
    --vp-grid: rgb(71 85 105 / 18%);
    --vp-arthur: #c2410c;
    --vp-quah: #1d4ed8;
    --vp-myers: #6b21a8;
    --vp-yuxi: #047857;
    --vp-picked: #be123c;
    --vp-in-bg: #dcfce7;
    --vp-in-text: #14532d;
    --vp-out-bg: #fee2e2;
    --vp-out-text: #7f1d1d;
    --vp-near-bg: #fef3c7;
    --vp-near-text: #78350f;
    --vp-link: #0369a1;
}

:root[data-theme="dark"] {
    --vp-bg: #0f172a;
    --vp-surface: #162033;
    --vp-text: #e2e8f0;
    --vp-muted: #a5b4c8;
    --vp-border: #334155;
    --vp-control-border: #7b8ba1;
    --vp-ocean: #10243d;
    --vp-land: #3d5348;
    --vp-land-edge: #5c7a68;
    --vp-grid: rgb(148 163 184 / 20%);
    --vp-arthur: #fb923c;
    --vp-quah: #7cb4ff;
    --vp-myers: #d8b4fe;
    --vp-yuxi: #34d399;
    --vp-picked: #fb7185;
    --vp-in-bg: #14532d;
    --vp-in-text: #dcfce7;
    --vp-out-bg: #7f1d1d;
    --vp-out-text: #fee2e2;
    --vp-near-bg: #78350f;
    --vp-near-text: #fef3c7;
    --vp-link: #7dd3fc;
}

body {
    margin: 0;
    background: var(--vp-bg);
    color: var(--vp-text);
    font-family: 'Noto Sans TC', system-ui, sans-serif;
    line-height: 1.7;
}

.vp-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 16px 3rem;
}

.vp-page h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.3rem);
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

.vp-page h2 {
    font-size: 1.35rem;
    margin: 2.5rem 0 0.75rem;
}

.vp-lede {
    font-size: 1.1rem;
    color: var(--vp-muted);
    margin: 0 0 1.5rem;
}

.vp-page a {
    color: var(--vp-link);
}

/* .vp-controls 等元素有自己的 display，會蓋過 [hidden] 的預設樣式；
   程式庫載入失敗時靠 hidden 把它們藏起來，所以這裡明確補上。 */
.vp-card [hidden] {
    display: none;
}

.vp-card {
    background: var(--vp-surface);
    border: 1px solid var(--vp-border);
    border-radius: 12px;
    padding: 1rem;
}

.vp-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.vp-toggle-group {
    display: inline-flex;
    border: 1px solid var(--vp-control-border);
    border-radius: 8px;
}

.vp-btn {
    font: inherit;
    font-size: 0.95rem;
    background: var(--vp-surface);
    color: var(--vp-text);
    border: 0;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
}

.vp-btn + .vp-btn {
    border-left: 1px solid var(--vp-control-border);
}

.vp-btn[aria-pressed="true"] {
    background: var(--vp-text);
    color: var(--vp-surface);
}

.vp-btn-outline {
    border: 1px solid var(--vp-control-border);
    border-radius: 8px;
}

.vp-city {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--vp-control-border);
    border-radius: 8px;
    background: var(--vp-surface);
    color: var(--vp-text);
}

.vp-btn:focus-visible,
.vp-city:focus-visible,
.vp-legend input:focus-visible {
    outline: 2px solid var(--vp-link);
    outline-offset: 2px;
}

/* 圓角做在按鈕上，不用群組的 overflow: hidden：那會把按鈕的鍵盤聚焦框裁掉。 */
.vp-toggle-group .vp-btn:first-child {
    border-radius: 7px 0 0 7px;
}

.vp-toggle-group .vp-btn:last-child {
    border-radius: 0 7px 7px 0;
}

.vp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
}

.vp-legend label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.vp-swatch {
    display: inline-block;
    width: 1.4rem;
    height: 0;
    border-top: 3px solid currentcolor;
}

.vp-swatch-arthur { color: var(--vp-arthur); }
.vp-swatch-quah { color: var(--vp-quah); }

.vp-swatch-myers {
    color: var(--vp-myers);
    border-top-style: dashed;
}
.vp-swatch-yuxi { color: var(--vp-yuxi); }

.vp-map {
    display: block;
    width: 100%;

    /* 只接管水平拖曳：上下滑仍交給瀏覽器捲頁，免得手機上手指一落在地圖上就捲不動。
       代價是觸控時地球儀不能上下轉（滑鼠拖曳與方向鍵仍可以）。
       pinch-zoom 要明寫：只寫 pan-y 會連雙指縮放都關掉，弱視讀者在地圖上就放大不了頁面。
       雙指開始縮放時瀏覽器會送 pointercancel，JS 會結束拖曳。 */
    touch-action: pan-y pinch-zoom;
    cursor: grab;

    /* Safari 只認 -webkit- 前綴；JS 另外擋 selectstart。 */
    -webkit-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
    user-select: none;
}

.vp-map:focus-visible {
    outline: 2px solid var(--vp-link);
    outline-offset: 2px;
}

.vp-map:active {
    cursor: grabbing;
}

.vp-sphere { fill: var(--vp-ocean); }

.vp-outline {
    fill: none;
    stroke: var(--vp-border);
    stroke-width: 1;
}

.vp-graticule {
    fill: none;
    stroke: var(--vp-grid);
    stroke-width: 0.6;
}

.vp-land {
    fill: var(--vp-land);
    stroke: var(--vp-land-edge);
    stroke-width: 0.5;
}

.vp-circle {
    fill-opacity: 0.14;
    stroke-width: 2.5;
}

.vp-circle-arthur {
    fill: var(--vp-arthur);
    stroke: var(--vp-arthur);
}

.vp-circle-quah {
    fill: var(--vp-quah);
    stroke: var(--vp-quah);
    fill-opacity: 0.08;
}

.vp-circle-myers {
    fill: none;
    stroke: var(--vp-myers);
}

.vp-circle-yuxi {
    fill: none;
    stroke: var(--vp-yuxi);
}
.vp-circle-sketch { stroke-dasharray: 7 5; }

.vp-center-arthur { fill: var(--vp-arthur); }
.vp-center-quah { fill: var(--vp-quah); }
.vp-center-yuxi { fill: var(--vp-yuxi); }

.vp-city-dot { fill: var(--vp-text); }

.vp-city-label {
    fill: var(--vp-text);
    font-size: 13px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--vp-surface);
    stroke-width: 3px;
}

.vp-picked {
    fill: var(--vp-picked);
    stroke: var(--vp-surface);
    stroke-width: 2;
}

.vp-status {
    margin: 0.5rem 0 0;
    color: var(--vp-muted);
    font-size: 0.95rem;
}

/* 沒有訊息時不佔空間，但仍留在無障礙樹裡（不能用 display: none）。 */
.vp-status:empty {
    margin: 0;
}

.vp-readout {
    margin-top: 0.75rem;
    min-height: 3.5rem;
    font-size: 0.95rem;
}

/* 讀數是 aria-live 區域，HTML 裡不能用 hidden 藏：載入時不在無障礙樹裡的即時區域，
   有些螢幕閱讀器之後不會唸它的更新。沒有 JS 時它是空的，這裡把空白收掉。 */
.vp-readout:empty {
    min-height: 0;
    margin: 0;
}

.vp-readout p {
    margin: 0 0 0.35rem;
}

.vp-readout ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vp-readout li {
    margin: 0.2rem 0;
}

.vp-hint {
    color: var(--vp-muted);
}

.vp-badge {
    display: inline-block;
    min-width: 3em;
    text-align: center;
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.vp-inside {
    background: var(--vp-in-bg);
    color: var(--vp-in-text);
}

.vp-outside {
    background: var(--vp-out-bg);
    color: var(--vp-out-text);
}

.vp-near {
    background: var(--vp-near-bg);
    color: var(--vp-near-text);
}

.vp-table-wrap {
    overflow-x: auto;
}

/* 窄螢幕時這塊可以橫向捲動，所以要能用鍵盤聚焦（tabindex="0"），聚焦時也要看得到。 */
.vp-table-wrap:focus-visible {
    outline: 2px solid var(--vp-link);
    outline-offset: 2px;
}

.vp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 640px;
}

.vp-table th,
.vp-table td {
    border-bottom: 1px solid var(--vp-border);
    padding: 0.5rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.vp-table thead th {
    color: var(--vp-muted);
    font-weight: 500;
}

.vp-note {
    color: var(--vp-muted);
    font-size: 0.9rem;
}

.vp-sources li {
    margin: 0.3rem 0;
    overflow-wrap: anywhere;
}

/* Windows 高對比（forced-colors）會把作者指定的底色與文字色換成系統色，
   按下的檢視按鈕就和沒按的一樣，圖例色塊與地圖上的圓也會變成同一色；
   這裡讓按下的按鈕改用系統強調色，圖例與地圖保留作者配色。 */
@media (forced-colors: active) {
    .vp-btn[aria-pressed="true"] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }

    .vp-swatch {
        forced-color-adjust: none;
    }

    /* 地圖的四個圓靠顏色區分，若被換成同一個系統色就跟圖例對不起來，所以整張地圖保留作者配色。 */
    .vp-map {
        forced-color-adjust: none;
    }
}