/* legal.css — shared styles for /privacy.html and /terms.html.
   Deliberately NOT importing styles.css: these are static, standalone documents
   that must render correctly even if the SPA bundle ever changes shape. Reuses
   the same design tokens (colors, fonts, radii) so the pages still feel like
   part of 活動島嶼 ActIsland rather than a bolted-on generic legal template. */
:root {
  --bg: #0a0b0e; --surface: #14161c; --border: rgba(255,255,255,.09);
  --text: #eceef2; --text-2: #9aa1ad; --text-3: #7a818e;
  --accent: #ff5a36; --accent-ink: #ffb39f; --accent-soft: rgba(255,90,54,.14);
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f5f5f7; --surface: #ffffff; --border: rgba(16,20,28,.1);
    --text: #191b21; --text-2: #4d5462; --text-3: #6e7584; --accent-ink: #d43e1c; --accent-soft: rgba(255,90,54,.1); }
}
:root[data-theme="dark"] { --bg: #0a0b0e; --surface: #14161c; --border: rgba(255,255,255,.09);
  --text: #eceef2; --text-2: #9aa1ad; --text-3: #7a818e; --accent-ink: #ffb39f; --accent-soft: rgba(255,90,54,.14); }
:root[data-theme="light"] { --bg: #f5f5f7; --surface: #ffffff; --border: rgba(16,20,28,.1);
  --text: #191b21; --text-2: #4d5462; --text-3: #6e7584; --accent-ink: #d43e1c; --accent-soft: rgba(255,90,54,.1); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Manrope", "Noto Sans TC", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.6;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 14px 20px; background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border);
}
.bar-home { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .02em; color: var(--text); }
.bar-home img { width: 24px; height: 24px; border-radius: 6px; }
.bar-actions { display: flex; align-items: center; gap: 6px; }
.lang-btn {
  font: inherit; font-size: 13px; font-weight: 700; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer;
}
.lang-btn.active { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); }

main { max-width: 700px; margin: 0 auto; padding: 48px 20px 96px; }
.doc-title { font-size: 30px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; text-wrap: balance; }
.doc-meta { color: var(--text-3); font-size: 14px; margin: 0 0 40px; }
.lead { font-size: 16px; color: var(--text-2); margin: 0 0 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
section { margin: 0 0 36px; }
section h2 { font-size: 19px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
section h2 .n { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
section h3 { font-size: 15px; font-weight: 700; margin: 20px 0 8px; color: var(--text); }
section p { font-size: 15.5px; color: var(--text-2); margin: 0 0 12px; }
section ul { margin: 0 0 12px; padding-left: 22px; }
section li { font-size: 15.5px; color: var(--text-2); margin: 0 0 8px; }
section li b, section p b { color: var(--text); font-weight: 700; }
table.dtab { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 14px; }
table.dtab th, table.dtab td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
table.dtab th { color: var(--text-3); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
table.dtab td:first-child, table.dtab th:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }
.contact-card {
  margin-top: 48px; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
}
.contact-card h2 { margin: 0 0 8px; font-size: 16px; }
.contact-card p { margin: 0; font-size: 14.5px; }
footer.legal-foot { max-width: 700px; margin: 0 auto; padding: 0 20px 60px; color: var(--text-3); font-size: 13px; }
footer.legal-foot a { color: var(--text-3); }
[data-lang-block] { display: none; }
[data-lang-block].active { display: block; }