/* 東港綠鬣蜥通報：兩頁共用。深淺兩色，一個黃色重點，跟 trash.donggang.ai 同一種做法。 */
:root {
  --bg: #f2f6f3; --surface: #fff; --ink: #14241c; --ink-2: #33483d; --muted: #5d7066;
  --line: #dde7e1; --leaf: #1f7a52; --leaf-ink: #fff; --accent: #f2b705; --accent-ink: #5c4300;
  --radius: 1.1rem; --shadow: 0 1px 2px rgba(20, 36, 28, .04), 0 8px 24px -12px rgba(20, 36, 28, .16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1511; --surface: #141f19; --ink: #e9f1ec; --ink-2: #c6d4cc; --muted: #93a79c;
    --line: #22342b; --leaf: #5fd3a0; --leaf-ink: #06281a; --accent: #f5c84c; --accent-ink: #412f00;   /* 深色模式下底色仍是實心黃／實心綠，字必須是深的 */
    --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px -16px rgba(0, 0, 0, .6);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: clamp(1.5rem, 5vw, 4rem) 1rem; background: var(--bg); color: var(--ink);
  font: 400 1.05rem/1.75 system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  display: flex; justify-content: center;
}
main { width: 100%; max-width: 34rem; }
h1 { margin: 0 0 .35rem; font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: .02em; }
.tag {
  display: inline-block; margin-bottom: 1.25rem; padding: .2rem .7rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: .85rem; font-weight: 700;
}
.lede { margin: 0 0 1.75rem; color: var(--ink-2); }
section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.35rem; }
h2 { margin: 0 0 .75rem; font-size: 1rem; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
li b { display: block; font-weight: 700; }
li span { color: var(--ink-2); font-size: .95rem; }
.dot { width: .55rem; height: .55rem; margin-top: .55rem; border-radius: 50%; background: var(--leaf); }
footer { margin-top: 1.75rem; color: var(--muted); font-size: .9rem; }
footer a { color: inherit; }

/* 官方管道。頁面做完之後這段仍然要在：有人以為在這裡報了就會有人來處理，比沒做還糟。 */
.official { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1.25rem; font-size: .95rem; }
.official p { margin: 0; color: var(--ink-2); }
.official p + p { margin-top: .4rem; }
.official a { color: inherit; }

/* hidden 屬性要真的隱藏。瀏覽器內建的是 [hidden] { display: none }，而任何 id 或 class 選擇器的
   display 都壓得過它 —— 2026-10-10 在 map.html 就是這樣：JS 說 hidden 了，畫面上的方框還在，
   真正的地圖被擠到下面。這一行把整類問題一次解決，不必每個元素各補一條。 */
[hidden] { display: none !important; }

/* ── 通報表單 ───────────────────────────────────────────────── */
form section { margin-bottom: 1.25rem; }
h2 .opt { margin-left: .5rem; font-weight: 400; letter-spacing: 0; }
/* fieldset／legend 而不是 h2：不然螢幕閱讀器讀到的是「大・超過一公尺」，聽不出這組是體型還是顏色 */
fieldset { margin: 0 0 1.5rem; padding: 0; border: 0; }
fieldset:last-of-type { margin-bottom: 0; }
legend { padding: 0; margin-bottom: .75rem; font-size: 1rem; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.hint { margin: 0 0 .75rem; color: var(--muted); font-size: .9rem; }
.hint.ok { color: var(--leaf); font-weight: 700; }
.bad { margin: .75rem 0 0; color: #b42318; font-weight: 700; }
@media (prefers-color-scheme: dark) { .bad { color: #ff9c91; } }

input[type="file"] {
  width: 100%; padding: .7rem; border: 1px dashed var(--line); border-radius: .7rem;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .9rem;
}
textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .7rem;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; resize: vertical;
}
input[type="file"]:focus-visible, textarea:focus-visible, button:focus-visible, label:focus-within {
  outline: 2px solid var(--leaf); outline-offset: 2px;
}

ul.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.thumbs li { display: block; }
.thumbs img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .5rem; border: 1px solid var(--line); display: block; }
.thumbs span { display: block; margin-top: .2rem; color: var(--muted); font-size: .75rem; text-align: center; }

/* 選項做成整塊可按的卡片：手機上一個 radio 的點按範圍太小 */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .25rem; }
.choices label {
  display: flex; gap: .4rem; align-items: start; padding: .6rem .5rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: .7rem; background: var(--bg); font-size: .95rem;
}
.choices label:has(:checked) { border-color: var(--leaf); box-shadow: inset 0 0 0 1px var(--leaf); }
.choices input { margin: .35rem 0 0; accent-color: var(--leaf); }
.choices span { display: block; font-weight: 700; line-height: 1.4; }
.choices small { display: block; color: var(--muted); font-weight: 400; font-size: .75rem; line-height: 1.4; }

button { font: inherit; cursor: pointer; }
button.go {
  width: 100%; padding: .85rem 1rem; border: 0; border-radius: .8rem;
  background: var(--leaf); color: var(--leaf-ink); font-weight: 700; font-size: 1.05rem;
}
button.go:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
button.minor {
  padding: .5rem .9rem; border: 1px solid var(--line); border-radius: .7rem;
  background: var(--bg); color: var(--ink); font-size: .95rem; margin-bottom: .75rem;
}
button.minor:disabled { color: var(--muted); cursor: progress; }

@media (max-width: 24rem) { .choices { grid-template-columns: 1fr; } }