/* UFOlens — 站台樣式（刻意不走政府風格；自有識別）。用 CSS 邏輯屬性以支援 RTL。 */
:root {
  --bg: #0e1116; --panel: #161b22; --ink: #e6edf3; --muted: #9aa7b4; --line: #2b3440;
  --accent: #6ad0ff; --accent-2: #c792ff; --warn: #ffb454; --low: #ff7b72;
  --maxw: 1100px; --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.65 system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans CJK TC", sans-serif; }
body[data-rtl] { direction: rtl; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 8px; top: 8px; background: var(--panel); padding: 8px; z-index: 50; }

.site-header { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 14px 20px; max-width: var(--maxw); margin: 0 auto; border-bottom: 1px solid var(--line); }
.brand a { color: var(--ink); display: flex; flex-direction: column; }
.brand strong { font-size: 1.3rem; letter-spacing: .5px; }
.brand .tagline { font-size: .72rem; color: var(--muted); }
.site-nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-inline-start: auto; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--ink); }
.site-search { flex: 1 1 200px; min-width: 160px; }
.site-search input, .search-page input[type=search], .lang-switcher input { width: 100%; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }

.lang-switcher { position: relative; }
.lang-switcher summary { cursor: pointer; color: var(--muted); list-style: none; }
.lang-switcher[open] > ul, .lang-switcher[open] > input { display: block; }
.lang-switcher > ul { display: none; position: absolute; inset-inline-end: 0; top: 1.8em; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; max-height: 320px; overflow: auto; min-width: 220px; z-index: 30; margin: 0; list-style: none; }
.lang-switcher > input { display: none; position: absolute; inset-inline-end: 0; top: 1.8em; z-index: 31; }
.lang-switcher li a { display: block; padding: 4px 8px; color: var(--ink); border-radius: 6px; }
.lang-switcher li a:hover, .lang-switcher li a[aria-current] { background: #21303d; text-decoration: none; }
.lang-switcher small { color: var(--muted); }

.mt-banner { background: #2a2410; color: var(--warn); padding: 8px 20px; text-align: center; font-size: .9rem; border-bottom: 1px solid #4a3e1a; }
.redaction-notice { background: #2a1414; color: var(--low); border: 1px solid #4a1f1f; border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; }

.site-main { max-width: var(--maxw); margin: 24px auto; padding: 0 20px; }
h1 { font-size: 1.8rem; line-height: 1.25; }
h2 { font-size: 1.25rem; margin-top: 2em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
h2 small { color: var(--muted); font-weight: normal; font-size: .8rem; }
.crumb { color: var(--muted); font-size: .9rem; margin-bottom: 8px; }

.hero p { color: var(--muted); max-width: 70ch; }
.entrances { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.entrance { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: var(--ink); }
.entrance:hover { border-color: var(--accent); text-decoration: none; }
.entrance span { color: var(--muted); font-size: .85rem; }
.featured ul, .related ul, .search-results, .agency-page ul { list-style: none; padding: 0; }
.featured li, .search-results li, .related li, .agency-page li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.featured small, .search-results small { color: var(--muted); }
.agency-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.agency-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; color: var(--ink); display: flex; flex-direction: column; }
.agency-card:hover { border-color: var(--accent-2); text-decoration: none; }
.agency-card span { color: var(--muted); font-size: .85rem; }
.about-brief p { color: var(--muted); }

.doc-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.doc-meta dt { color: var(--muted); }
.ai-summary p { color: var(--ink); }
.citation summary { cursor: pointer; color: var(--accent-2); }
.citation pre { background: #0a0d12; border: 1px solid var(--line); border-radius: 6px; padding: 10px; overflow: auto; font-size: .82rem; }

/* 疊圖閱讀器 */
.reader { border: 1px solid var(--line); border-radius: var(--radius); background: #0a0d12; }
.reader-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; border-bottom: 1px solid var(--line); }
.reader-toolbar button { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.reader-toolbar button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); }
.reader-page-nav { margin-inline-start: auto; color: var(--muted); }
.reader-stage { position: relative; min-height: 480px; }
.reader-stage .osd-host { width: 100%; height: 70vh; }
.reader-stage img.page-img { max-width: 100%; display: block; margin: 0 auto; }
.ocr-line { position: absolute; border: 1px solid rgba(106,208,255,.35); background: rgba(106,208,255,.06); cursor: pointer; font-size: 0; }
.ocr-line.low { border-color: rgba(255,123,114,.5); border-style: dotted; }
.ocr-line:hover, .ocr-line.active { background: rgba(106,208,255,.18); }
.ocr-tip { position: absolute; z-index: 20; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .85rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.ocr-tip .en { color: var(--muted); }
.ocr-tip .low-note { color: var(--low); font-size: .75rem; }
.reader-text { padding: 16px; }
.reader-text .ln { display: block; padding: 2px 0; }
.reader-text .ln.low { color: var(--low); }
.reader.video-only iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
.video-attr, .reader.no-pages p { padding: 10px; color: var(--muted); font-size: .85rem; }

.transcript p { margin: .6em 0; }
.transcript .low-conf, .reader-text-fallback .low-conf { border-inline-start: 2px dotted var(--low); padding-inline-start: 8px; }
.report-block { font-size: .8rem; margin-inline-start: 6px; opacity: .4; }
.report-block:hover { opacity: 1; text-decoration: none; }

.entities .entity-group { margin: 6px 0; }
.entity-kind { color: var(--muted); font-size: .85rem; margin-inline-end: 6px; }
.chip { display: inline-block; background: #1c2733; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: .82rem; margin: 2px; }

.map-canvas { height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); }
.map-filters { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; color: var(--muted); }
.map-filters select, .map-filters input { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 4px 8px; }
.timeline-canvas { min-height: 360px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; overflow-x: auto; }
.tl-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.tl-year { color: var(--muted); width: 64px; flex: none; text-align: end; }
.tl-bar { background: #21303d; border-radius: 4px; padding: 1px 8px; font-size: .85rem; }

.report-form input, .report-form textarea, .search-page input { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 6px 8px; }
.report-form label { display: block; margin: 8px 0; }
.report-form textarea { width: 100%; min-height: 80px; }
.report-form button, .search-page button { background: var(--accent); color: #04121a; border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-weight: 600; }
.snippet { color: var(--muted); font-size: .9rem; }
.api-page code, .about-page code { background: #0a0d12; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-size: .85em; }
.endpoints { list-style: none; padding: 0; } .endpoints li { padding: 4px 0; }

.site-footer { max-width: var(--maxw); margin: 40px auto 24px; padding: 16px 20px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
.site-footer .disclaimer { line-height: 1.6; }

/* 影片中心 / 事件 / 實體 / 更新頁 */
.video-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.video-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.video-card img, .video-card .thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: var(--panel-2, #0d1117); }
.video-card .thumb { /* 縮圖載入失敗時：靠背景色撐住版位（已無 inline onerror）；alt 文字仍會顯示 */ }
.video-card small { color: var(--muted); }
.incident-page ul, .entity-page ul, .updates-page ul { list-style: none; padding: 0; }
.incident-page li, .entity-page li, .updates-page li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.updates-page small { color: var(--muted); }

@media (max-width: 640px) {
  .site-nav { margin-inline-start: 0; }
  .doc-meta { grid-template-columns: 1fr; }
}