/*
 * 印樣的基底樣式。設計語彙見 SPEC.md §7.1：暗房印樣。
 *
 * 字型刻意不打外部請求。規格點名 Noto Serif TC / Noto Sans TC / JetBrains Mono，
 * 這裡先「有就用、沒有退系統字」——自架字型子集是之後的事，現在拉 Google Fonts
 * 會給每個訪客加一個第三方連線。
 */
:root {
  --ink:       #131010;   /* 暗房底（暖黑，非中性黑） */
  --paper:     #1B1614;   /* 卡面 */
  --rebate:    #0A0808;   /* 片邊條 */
  --halide:    #EDE7DA;   /* 主文字（銀鹽暖白） */
  --fog:       #877E73;   /* 次要文字 */
  --fog-dim:   #5C554E;
  --line:      #2C2521;   /* 分隔線 */
  --grease:    #E8C84A;   /* 蠟筆黃 — 只用於「你的動作」 */
  --safelight: #C2452C;   /* 安全燈紅 — 只用於「未答」狀態 */

  --serif: "Noto Serif TC", "Songti TC", "SimSun", Georgia, serif;
  --sans:  "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  background: var(--ink);
  /* 安全燈斜落 */
  background-image: radial-gradient(120% 70% at 82% -12%, rgba(194, 69, 44, .10), transparent 62%);
  background-attachment: fixed;
  color: var(--halide);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--grease); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 560px; margin: 0 auto; padding: 0 20px 80px; }

/* ── 招牌 ───────────────────────────────────────────── */
.mark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .24em;
  padding: 40px 0 0;
}
.mark small {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--fog-dim);
  text-transform: uppercase;
}

h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.3;
  letter-spacing: .02em;
  margin: 34px 0 0;
  text-wrap: balance;
}

.lede { color: var(--fog); font-size: 15px; margin: 14px 0 0; }

/* ── 表單 ───────────────────────────────────────────── */
form { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }

label { display: flex; flex-direction: column; gap: 7px; }

.label-text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--fog-dim);
  text-transform: uppercase;
}

.hint { font-size: 12.5px; color: var(--fog-dim); }

input[type="text"] {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--halide);
  font-family: var(--mono);
  font-size: 16px;              /* 16px 以下 iOS Safari 會自動放大 */
  padding: 12px 13px;
  width: 100%;
}
input[type="text"]:focus { outline: none; border-color: var(--grease); }
input::placeholder { color: var(--fog-dim); }

button {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .12em;
  background: none;
  border: 1px solid var(--grease);
  border-radius: 2px;
  color: var(--grease);
  cursor: pointer;
  padding: 13px 24px;
}
button:hover:not(:disabled) { background: var(--grease); color: var(--ink); }
button:disabled { opacity: .4; cursor: progress; }

/* ── 訊息 ───────────────────────────────────────────── */
.msg {
  margin-top: 18px;
  padding: 13px 15px;
  border-left: 2px solid var(--line);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--fog);
}
.msg[data-kind="error"] { border-left-color: var(--safelight); color: var(--halide); }
.msg[data-kind="working"] { border-left-color: var(--grease); }
.msg:empty { display: none; }

/* ── 救援碼 ─────────────────────────────────────────── */
.codes {
  margin: 20px 0 0;
  padding: 20px;
  background: var(--rebate);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.codes ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.codes li {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--halide);
  user-select: all;              /* 一點就整組選起來，方便抄 */
}
.confirm {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--fog);
  cursor: pointer;
}
.confirm input { margin-top: 4px; accent-color: var(--grease); }

.done { display: none; }
.done[data-visible="1"] { display: block; }
.hidden { display: none; }

noscript .msg { border-left-color: var(--safelight); color: var(--halide); }

/* ── 導覽列 ─────────────────────────────────────────── */
.bar {
  display: flex;
  align-items: baseline;
  gap: 22px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 20px 0;
}
.bar .mark { padding: 0; text-decoration: none; color: var(--halide); }
.bar nav { display: flex; align-items: baseline; gap: 18px; margin-left: auto; }
.bar nav a, .link {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--fog);
  text-decoration: none;
}
.bar nav a:hover { color: var(--halide); }
.bar form { margin: 0; }

/* 看起來是連結、行為是按鈕（改變狀態的請求一律走 POST）。 */
button.link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
button.link:hover:not(:disabled) { background: none; color: var(--halide); }
button.link.danger { color: var(--safelight); }

.wrap.wide { max-width: 1180px; }

.empty { color: var(--fog-dim); font-size: 14px; margin: 26px 0; }
.empty a { color: var(--fog); }

select, textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--halide);
  font-family: inherit;
  font-size: 16px;
  padding: 11px 12px;
  width: 100%;
}
textarea { line-height: 1.7; resize: vertical; }
select:focus, textarea:focus { outline: none; border-color: var(--grease); }

details.add > summary, details.edit > summary, details.tsettings > summary,
details.reply > summary, details.closeq > summary {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--fog);
  cursor: pointer;
  list-style: none;
  padding: 10px 0;
}
details > summary::-webkit-details-marker { display: none; }
details.add > summary:hover, details.edit > summary:hover,
details.reply > summary:hover, details.closeq > summary:hover { color: var(--grease); }
details.reply > summary, details.closeq > summary { padding: 4px 0; font-size: 10.5px; }
details.add[open] > summary { color: var(--grease); }

/* ── 主題清單 ───────────────────────────────────────── */
.tlist { list-style: none; margin: 28px 0 0; padding: 0; }
.tcard { border-top: 1px solid var(--line); padding: 18px 0; }
.ttitle {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--halide);
  text-decoration: none;
}
.ttitle:hover { color: var(--grease); }
.tsub { color: var(--fog); font-size: 13.5px; margin-top: 3px; }
.tmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--fog-dim);
}
.tmeta .open { color: var(--safelight); }

/* ── 設定頁的兩張清單：邀請碼與 MCP token ─────────────
 * 形狀相同（一串識別、一排 meta、一顆撤銷），所以共用同一組 class。 */
.keys { list-style: none; margin: 28px 0 0; padding: 0; }
.key {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.key[data-live="0"] { color: var(--fog-dim); }
.keycode {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--halide);
  user-select: all;                /* 一點就整串選起來，方便貼給人 */
}
.key[data-live="0"] .keycode { color: var(--fog-dim); text-decoration: line-through; }
.keyname { font-size: 15px; color: var(--halide); }
.key[data-live="0"] .keyname { color: var(--fog-dim); }
.keymeta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--fog-dim);
}
.key form { margin: 0 0 0 auto; }
.key details { margin-left: auto; }
.key details form { margin: 8px 0 0; }
/* 手機上讓改名的欄位佔滿一行，被擠到右邊只剩兩百來 px 不好打。 */
@media (max-width: 560px) {
  .key details { margin-left: 0; width: 100%; }
}

.scopes { border: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.scopes .confirm { margin-top: 0; font-family: var(--mono); font-size: 12.5px; }

/* 預檢的即時回饋（§5.1 第 1、2 步）。不合格的用安全燈紅，那是狀態不是分類。 */
.hint[data-state="bad"] { color: var(--safelight); }

/* ── 主題頁（§7.3）──────────────────────────────────── */
.topic { max-width: 1180px; margin: 0 auto; padding: 0 20px 200px; }
.thead { padding-top: 30px; }
.tkind {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--fog-dim);
  text-transform: uppercase;
}
.thead h1 { margin-top: 10px; }
.byline { font-size: 12.5px; color: var(--fog-dim); margin-top: 10px; }
.byline a { color: var(--fog); }

.cols { display: grid; gap: 40px; margin-top: 34px; }
@media (min-width: 900px) {
  .cols { grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
  /* 沉澱在視覺上是由右往左搬，所以左欄釘住。 */
  .structure { position: sticky; top: 22px; }
}

.colhead {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--halide);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.colhead span { color: var(--fog-dim); margin-left: 10px; letter-spacing: .1em; }

/* 主架構：要讀的，明體。 */
.section { border-left: 2px solid var(--line); padding: 2px 0 2px 16px; margin-bottom: 26px; }
.kindmark {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--fog-dim);
}
.prose { font-family: var(--serif); font-size: 16.5px; line-height: 1.95; }
.prose p { margin: 10px 0 0; }
.cite { font-family: var(--mono); font-size: 11.5px; color: var(--fog); margin-top: 8px; }
.srcs { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--fog-dim); margin-top: 10px; }
.section form { margin-top: 12px; gap: 10px; }
.danger-form { display: flex; align-items: baseline; gap: 12px; }

/* 河道：要掃的，黑體。 */
.compose { margin: 0 0 26px; gap: 12px; }
.qs { display: flex; gap: 6px; }
.qpick input { position: absolute; opacity: 0; }
.qpick span {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--fog);
  cursor: pointer;
}
.qpick input:checked + span { border-color: var(--grease); color: var(--grease); }
.qpick input:focus-visible + span { outline: 2px solid var(--grease); outline-offset: 3px; }

.notes { list-style: none; margin: 0; padding: 0; }
.note {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 4px 12px;
  padding: 14px 6px;
  border-top: 1px solid var(--line);
}
.tick { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.pick { accent-color: var(--grease); }
.frame {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--fog-dim);
}
.q {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fog);
}
/* 顏色只編碼狀態：五個 qualifier 只有「問」有狀態，所以只有它上色（§7.1）。 */
.q[data-q="問"] { color: var(--safelight); }
.ntext { grid-column: 1 / -1; font-size: 14.5px; }
.ntext p { margin: 0 0 6px; }
.nfoot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--fog-dim);
}
.mark-open { color: var(--safelight); }
.intopic { color: var(--fog); text-decoration: none; }
.intopic:hover { color: var(--halide); }
.more { padding: 10px 6px 14px; }
.more a { font-family: var(--mono); font-size: 11px; color: var(--fog-dim); text-decoration: none; }
.more a:hover { color: var(--grease); }

/* 結案（§3.7）與結案理由。 */
.closeq { margin-left: auto; }
.closeq form { flex-direction: row; align-items: center; gap: 8px; margin-top: 6px; }
.closeq input { font-size: 13px; padding: 7px 9px; }
.closeq button { padding: 7px 14px; font-size: 11.5px; }
.reason {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--fog-dim);
  border-left: 2px solid var(--line);
  padding-left: 10px;
}

/* ── 連向（§3.6）──────────────────────────────────────
 * 方向性由結構推導，文案不入庫；顏色一律不編碼型別，因為連結沒有型別。 */
.links { margin-top: 34px; }
.linklist { list-style: none; margin: 0; padding: 0; }
.link { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.link a { color: var(--halide); text-decoration: none; }
.link a:hover { color: var(--grease); }
.link .why { font-size: 12.5px; color: var(--fog-dim); margin-top: 3px; }

/* ── 留言（§3.5）───────────────────────────────────── */
.comments { max-width: 720px; margin: 56px auto 0; }
.cmts { list-style: none; margin: 0 0 24px; padding: 0; }
.cmt { padding: 14px 0; border-top: 1px solid var(--line); }
.chead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--fog-dim);
}
.chead .who { color: var(--fog); }
.chead form { margin: 0 0 0 auto; }
.cbody { font-size: 14.5px; margin-top: 5px; }
.cbody p { margin: 0 0 6px; }
.hiddenmsg { color: var(--fog-dim); font-style: italic; }
.replies { list-style: none; margin: 8px 0 0; padding-left: 18px; border-left: 1px solid var(--line); }
.replies .cmt { border-top: none; padding: 8px 0 0; }
.note .cmts { grid-column: 1 / -1; margin: 8px 0 0; }
.note .cmt { font-size: 13px; }
.note .reply { grid-column: 1 / -1; }
.reply form { margin-top: 6px; gap: 8px; }

/* 蠟筆圈（§7.4）：預先產生的手繪 path，圈選時描邊 500ms。 */
/*
 * 尺寸寫死成卡片的實際大小，不用 inset + auto —— svg 是 replaced element，
 * width/height 為 auto 時會照 viewBox 的長寬比算（量到 555×555，卡片其實是
 * 547×109），圈就會變成一個蓋住半頁的正方形。
 * 縱向比例要按卡片高度換算（§7.4），所以這裡必須是精確的框。
 */
.wax {
  position: absolute;
  top: 2px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% - 4px);
  pointer-events: none;
}
.wax path {
  fill: none;
  stroke: var(--grease);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* 拉伸卡片高度時筆畫不跟著變胖 */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: wax-draw .5s ease-out forwards;
}
@keyframes wax-draw { to { stroke-dashoffset: 0; } }

/* ── 沉澱台（§7.4）──────────────────────────────────── */
.tray {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  margin: 0;
  gap: 14px;
  max-height: 74vh;
  overflow-y: auto;
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
  background: var(--rebate);
  border-top: 1px solid var(--line);
  transform: translateY(101%);
  transition: transform .22s ease-out;
}
.tray[data-open="1"] { transform: none; }
/* 升起來的時候把捲動空間讓出來，否則手機上你正在圈的那幾則會被它蓋住。 */
body:has(.tray[data-open="1"]) .topic { padding-bottom: 76vh; }
.trayhead {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--fog);
}
.trayhead .count b { color: var(--grease); }
.kinds { display: flex; gap: 14px; }
.kinds label { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.kinds input { accent-color: var(--grease); }
.trayhead .link { margin-left: auto; }
.materials { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.materials li {
  font-size: 12.5px;
  color: var(--fog-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.materials .frame { margin-right: 8px; }
.basisrow:empty { display: none; }
#single, #quotes { display: grid; gap: 10px; }
.quote { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.qhead { font-family: var(--mono); font-size: 11px; color: var(--fog-dim); }
.trayfoot { display: flex; justify-content: flex-end; }

/* 沉澱完的落點提示：1.5 秒。 */
.flash { animation: flash 1.5s ease-out; }
@keyframes flash {
  0%   { background: rgba(232, 200, 74, .16); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}