/* Dai Dia Ma — public pages (/privacy, /delete-account)
   CSP on these paths is: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'
   => no inline <script>, no onclick=; inline style= attributes are still allowed.
   Brand tokens copied from MailerService.otpEmail() so email + web look like one product. */

:root {
  --navy:      #0D3678;  /* header band / brand blue */
  --navy-soft: #c9d6ee;  /* tagline on the band */
  --ink:       #1d2939;
  --muted:     #667085;
  --faint:     #98a2b3;
  --line:      #eaecf0;
  --bg:        #f2f4f7;
  --card:      #ffffff;
  --danger:    #d23f3f;
  --danger-bg: #fdeceb;
  --danger-ln: #f5c9c6;
  --ok:        #1d9e5f;
  --ok-bg:     #e7f6ee;
  --ok-ln:     #bfe6d1;
  --tint-bg:   #eef3fb;
  --tint-ln:   #d6e0f5;
  --warn-bg:   #fdf6e3;
  --warn-ln:   #ecd9a3;
  --warn-ink:  #8a6100;
}

* { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font: 14px/1.6 "Segoe UI", "Noto Sans", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  word-wrap: break-word;
}

/* ── language switching ────────────────────────────────────────────────
   public.js sets <html data-lang="vi|zh-TW|zh-CN|en|ja|ko">. One rule per
   language hides every OTHER language's node with :not(), so the visible node
   keeps its natural display (inline for <span>, block for <div>/<section>) —
   which matters because the markup mixes both. Never write these as
   `display: block`, it would break the inline slots inside a sentence.
   ⚠️ data-* attribute values are case-sensitive: it is zh-TW / zh-CN exactly,
   in the CSS, in the markup and in public.js. */
html[data-lang="vi"]    [data-lang]:not([data-lang="vi"])    { display: none !important; }
html[data-lang="zh-TW"] [data-lang]:not([data-lang="zh-TW"]) { display: none !important; }
html[data-lang="zh-CN"] [data-lang]:not([data-lang="zh-CN"]) { display: none !important; }
html[data-lang="en"]    [data-lang]:not([data-lang="en"])    { display: none !important; }
html[data-lang="ja"]    [data-lang]:not([data-lang="ja"])    { display: none !important; }
html[data-lang="ko"]    [data-lang]:not([data-lang="ko"])    { display: none !important; }

/* The hidden attribute drives the deletion step machine and must always win.
   The second selector matches the specificity of the language rules above (both
   are !important, so specificity decides) and comes later in source order, so a
   node that is BOTH `hidden` and language-tagged stays hidden. */
[hidden],
html[data-lang] [hidden][data-lang] { display: none !important; }

/* ── header band ──────────────────────────────────────────────────────── */
.band { background: var(--navy); color: #fff; padding: 22px 16px 20px; }
.band-in {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.brand { flex: 1 1 auto; min-width: 0; }
.wordmark { font-size: 21px; font-weight: 700; letter-spacing: .5px; }
.tagline { font-size: 12.5px; color: var(--navy-soft); margin-top: 5px; line-height: 1.55; }

/* 語言切換：單一「文A」鈕 + 下拉選單。
   六顆並排在 360px 手機上會擠成兩行、把品牌列撐高，改成選單後不論幾種語言都是同一個佔位。 */
.langs { position: relative; flex: 0 0 auto; align-self: flex-start; }
.lang-toggle {
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1;
  color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: 0 14px; cursor: pointer; min-height: 40px; min-width: 52px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lang-toggle:hover { background: rgba(255,255,255,.24); }
.lang-toggle[aria-expanded="true"] { background: #fff; color: var(--navy); border-color: #fff; }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16,24,40,.18);
  min-width: 168px;
}
.lang-menu[hidden] { display: none; }
.lang-item {
  font: inherit; font-size: 14px; line-height: 1.3; text-align: left;
  display: block; width: 100%; white-space: nowrap;
  color: var(--ink); background: none; border: 0; border-radius: 8px;
  padding: 10px 12px; cursor: pointer; min-height: 40px;
}
.lang-item:hover, .lang-item:focus-visible { background: var(--tint-bg); }
/* 目前語言：用底色與粗體標示，不用勾勾字元——各語系字型的勾勾寬高不一，會讓選項左右跳動 */
.lang-item[aria-checked="true"] { font-weight: 700; color: var(--navy); background: var(--tint-bg); }

@media (max-width: 400px) {
  .lang-menu { min-width: 150px; }
}

/* ── page shell ───────────────────────────────────────────────────────── */
.wrap { max-width: 720px; margin: 0 auto; padding: 16px 16px 56px; }

h1 { font-size: 22px; line-height: 1.35; font-weight: 800; margin-bottom: 6px; }
h2 { font-size: 16px; line-height: 1.4; font-weight: 700; margin: 0 0 8px; }
h3 { font-size: 14px; font-weight: 700; margin: 14px 0 4px; }
p  { margin: 0 0 10px; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 10px; padding-left: 20px; }
li { margin-bottom: 5px; }

a { color: var(--navy); }
a:hover { text-decoration: none; }

.sub    { color: var(--muted); font-size: 13px; }
.muted  { color: var(--muted); }
.small  { font-size: 12.5px; }
.strong { font-weight: 700; }
.mono   { font-family: "Courier New", Courier, monospace; }
.nowrap { white-space: nowrap; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 18px; margin-bottom: 14px;
}
.card > h2 { margin-bottom: 10px; }

.box { border-radius: 12px; padding: 13px 14px; margin: 0 0 12px; font-size: 13.5px; }
.box:last-child { margin-bottom: 0; }
.box.tint   { background: var(--tint-bg);   border: 1px solid var(--tint-ln); }
.box.danger { background: var(--danger-bg); border: 1px solid var(--danger-ln); color: #7b1f1c; }
.box.ok     { background: var(--ok-bg);     border: 1px solid var(--ok-ln);   color: #0f5c38; }
.box.warn   { background: var(--warn-bg);   border: 1px solid var(--warn-ln); color: var(--warn-ink); }
.box h2, .box h3 { margin-top: 0; }

/* (The old .todo style for {{LEGAL_ENTITY_NAME}} placeholders is gone: the
   registered entity is hardcoded now and no placeholder may come back.) */

.hr { height: 1px; background: var(--line); border: 0; margin: 14px 0; }

/* ── forms ────────────────────────────────────────────────────────────── */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 4px; }
label:first-child { margin-top: 0; }

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; font: inherit; font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  color: var(--ink); background: #fff;
  border: 1px solid #d0d5dd; border-radius: 10px; padding: 11px 12px; min-height: 46px;
}
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}
input[disabled] { background: #f7f8fa; color: var(--muted); }

.code-input { letter-spacing: 8px; font-family: "Courier New", Courier, monospace; font-weight: 700; }

.check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; }
.check input { width: 20px; height: 20px; min-width: 20px; margin: 1px 0 0; }
.check span { font-size: 13.5px; line-height: 1.5; }

.btn {
  display: block; width: 100%; font: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: var(--navy); border: 1px solid var(--navy);
  border-radius: 10px; padding: 12px 16px; min-height: 48px; cursor: pointer; margin-top: 14px;
}
.btn.red   { background: var(--danger); border-color: var(--danger); }
.btn.ghost { background: #fff; color: var(--navy); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.linkbtn {
  font: inherit; font-size: 13.5px; color: var(--navy); background: none;
  border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; min-height: 32px;
}
.linkbtn:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.rowlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 12px; }

/* status / error line under a form */
.msg { font-size: 13.5px; line-height: 1.55; margin-top: 12px; }
.msg:empty { display: none; }
.msg.err  { color: var(--danger); }
.msg.info { color: var(--muted); }
.msg.good { color: var(--ok); }

details.fold {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 4px 18px; margin-bottom: 14px;
}
details.fold > summary {
  cursor: pointer; font-weight: 700; font-size: 14px; padding: 14px 0; list-style: revert;
}
details.fold[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
details.fold > .fold-body { padding-bottom: 16px; }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot {
  max-width: 720px; margin: 0 auto; padding: 0 16px 40px;
  font-size: 12.5px; color: var(--faint); line-height: 1.7;
}
.foot a { color: var(--muted); }
.foot .foot-line { margin-bottom: 6px; }
.foot .foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }

@media (max-width: 480px) {
  .card { padding: 15px 14px; border-radius: 14px; }
  details.fold { padding: 2px 14px; }
  h1 { font-size: 20px; }
}
