/* 茉莉花互动 — restyled 2026-08-07 to the band grammar the skin already
   speaks: serif heads over ink rules, green-tinted panels via color-mix,
   letterspaced kickers, the real --mh-* tokens (both themes follow them).
   No invented palette, no fallback hexes that fight the dark theme. */

.mh-discussion { display: block; grid-column: 1 / -1; order: 6; margin-top: 34px; padding-top: 14px; border-top: 2px solid var(--mh-ink); }
.mh-discussion-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.mh-discussion .mh-cmt-h { margin: 0; font-family: var(--mh-serif); font-size: 19px; font-weight: 500; letter-spacing: .04em; }
.mh-discussion-k { font-family: var(--mh-sans); font-size: 11px; letter-spacing: .18em; color: var(--mh-green); margin-right: 10px; }
.mh-discussion-motto { margin: 0; font-size: 12px; color: var(--mh-muted); letter-spacing: .06em; }

.mh-discussion-issue { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 26px; align-items: start; }
.mh-discussion-main { padding: 22px; background: color-mix(in srgb, var(--mh-green) 5%, var(--mh-panel)); border: 1px solid var(--mh-line); }
.mh-discussion-side { padding: 0; }

.mh-discussion-tab { display: inline-block; margin: 0 0 8px; font-family: var(--mh-sans); font-size: 11px; letter-spacing: .18em; color: var(--mh-green); }
.mh-discussion-t { margin: 0 0 8px; font-family: var(--mh-serif); font-size: 17px; font-weight: 500; line-height: 1.5; }
.mh-discussion-context { margin: 0 0 4px; font-size: 14px; line-height: 1.75; color: var(--mh-ink); }
.mh-discussion-src { margin: 0 0 14px; font-size: 12px; color: var(--mh-muted); }
.mh-discussion-src a { color: var(--mh-green); }

.mh-discussion-fs { margin: 0; padding: 0; border: 0; }
.mh-discussion-q { padding: 0 0 8px; font-family: var(--mh-serif); font-size: 15px; font-weight: 500; line-height: 1.6; }
.mh-discussion-opt { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; min-height: 44px; box-sizing: border-box; border: 1px solid var(--mh-line); background: var(--mh-paper); margin-bottom: 6px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.mh-discussion-opt:hover { border-color: var(--mh-green); }
.mh-discussion-opt:has(input:checked) { border-color: var(--mh-green); box-shadow: inset 2px 0 0 var(--mh-green); }
.mh-discussion-opt input { accent-color: var(--mh-green); }
.mh-discussion-key { font-family: var(--mh-mono); font-size: 12px; color: var(--mh-green); }

.mh-discussion-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 0; }
.mh-discussion-go { min-height: 44px; padding: 10px 26px; border: 1px solid var(--mh-green); background: var(--mh-green); color: var(--mh-paper); font-family: var(--mh-sans); font-size: 14px; letter-spacing: .08em; cursor: pointer; }
.mh-discussion-go:hover { filter: brightness(1.08); }
.mh-discussion-go:disabled { opacity: .55; cursor: default; }
.mh-discussion-note { font-size: 12px; color: var(--mh-muted); line-height: 1.6; max-width: 34em; }
.mh-discussion-flash { margin: 8px 0 0; font-size: 13px; color: var(--mh-rust); }

.mh-discussion-results { margin-top: 4px; }
.mh-discussion-bars { margin-top: 14px; border-top: 1px solid var(--mh-line); }
.mh-discussion-bar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dotted var(--mh-line); font-size: 14px; }
/* The form's status region: prose, not a chip, and invisible until it has
   something to say. */
:is(.mh, body) .mh-pq-form-live { margin: 10px 0 0; }
:is(.mh, body) .mh-pq-form-live:empty { display: none; }

/* Belt as well as braces: an empty chip is never meaningful. */
.mh-discussion-mine:empty { display: none; }
.mh-discussion-mine { display: inline-block; white-space: nowrap; font-style: normal; font-family: var(--mh-sans); font-size: 11px; letter-spacing: .06em; color: var(--mh-green); border: 1px solid var(--mh-green); padding: 0 6px; margin-left: 8px; }
.mh-discussion-bar-track { display: block; height: 8px; background: var(--mh-panel); border: 1px solid var(--mh-line); overflow: hidden; }
.mh-discussion-bar-fill { display: block; height: 100%; background: var(--mh-green); transition: width .5s ease; }
.mh-discussion-bar-fill.no-anim { transition: none; }
.mh-discussion-bar-n { font-family: var(--mh-mono); font-size: 12px; white-space: nowrap; color: var(--mh-ink); }
.mh-discussion-total, .mh-discussion-change-note { margin: 8px 0 0; font-size: 12px; color: var(--mh-muted); }
.mh-discussion-cta { margin: 12px 0 0; font-family: var(--mh-serif); font-size: 15px; font-weight: 500; }

.mh-discussion-prompt-box { padding: 14px 16px; border-left: 2px solid var(--mh-green); background: color-mix(in srgb, var(--mh-green) 6%, transparent); }
.mh-discussion-prompt-k { margin: 0 0 5px; font-family: var(--mh-sans); font-size: 11px; letter-spacing: .18em; color: var(--mh-green); }
.mh-discussion-prompt { margin: 0; font-family: var(--mh-serif); font-size: 14px; line-height: 1.7; }
.mh-discussion-prompt-x { margin: 8px 0 0; font-size: 12px; color: var(--mh-muted); line-height: 1.6; }

.mh-discussion-samples { margin-top: 14px; border-top: 1px dotted var(--mh-line); padding-top: 10px; }
.mh-discussion-samples > summary { cursor: pointer; font-size: 13px; color: var(--mh-muted); list-style: none; }
.mh-discussion-samples > summary::after { content: " ▾"; color: var(--mh-muted); }
.mh-discussion-samples[open] > summary::after { content: " ▴"; }
.mh-discussion-samples-note { font-size: 12px; color: var(--mh-muted); line-height: 1.6; }
.mh-discussion-sample { padding: 10px 12px; margin: 8px 0; background: var(--mh-panel); border: 1px solid var(--mh-line); font-size: 13px; line-height: 1.7; }
.mh-discussion-sample p { margin: 6px 0 0; }
.mh-discussion-sample-badge { display: inline-block; font-family: var(--mh-sans); font-size: 11px; letter-spacing: .06em; color: var(--mh-green); border: 1px solid var(--mh-green); padding: 0 8px; }
.mh-discussion-empty { padding: 20px 0; font-size: 14px; color: var(--mh-muted); }

@media (max-width: 900px) { .mh-discussion-issue { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
@media (max-width: 680px) { .mh-discussion-bar { grid-template-columns: 1fr; gap: 4px; } .mh-discussion-head { flex-direction: column; gap: 4px; } }

/* Phase 4: comment form, pending note, answers list. */
.mh-discussion-cform { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--mh-line); background: var(--mh-paper); }
.mh-discussion-legend { padding: 0 0 6px; font-family: var(--mh-sans); font-size: 11px; letter-spacing: .18em; color: var(--mh-muted); }
.mh-discussion-kind { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 6px 0; font-size: 13px; cursor: pointer; }
.mh-discussion-kind input { grid-row: span 2; align-self: start; margin-top: 3px; accent-color: var(--mh-green); }
.mh-discussion-kind-n { font-weight: 600; }
.mh-discussion-kind-h { grid-column: 2; font-size: 12px; color: var(--mh-muted); }
.mh-discussion-f { display: block; margin: 10px 0 0; font-family: var(--mh-sans); font-size: 12px; color: var(--mh-muted); }
.mh-discussion-f input, .mh-discussion-f textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--mh-line); background: var(--mh-paper); color: var(--mh-ink); font-size: 14px; line-height: 1.6; font-family: inherit; }
.mh-discussion-f textarea { resize: vertical; min-height: 96px; }
.mh-discussion-pending { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--mh-line); }
.mh-discussion-badge-p { display: inline-block; font-family: var(--mh-sans); font-size: 11px; letter-spacing: .06em; color: var(--mh-rust); border: 1px solid var(--mh-rust); padding: 0 8px; margin-bottom: 6px; }
.mh-discussion-pending p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--mh-muted); }
.mh-discussion-answers { margin-top: 18px; }
.mh-discussion-answers-h { margin: 0 0 8px; padding-top: 10px; border-top: 1px solid var(--mh-ink); font-family: var(--mh-sans); font-size: 12px; letter-spacing: .18em; color: var(--mh-green); }
.mh-discussion-answers-empty { font-size: 13px; color: var(--mh-muted); }
.mh-discussion-answer { padding: 12px 0; border-bottom: 1px dotted var(--mh-line); }
.mh-discussion-answer header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--mh-muted); }
.mh-discussion-answer-a { font-weight: 600; color: var(--mh-ink); }
.mh-discussion-badge-v, .mh-discussion-badge-k { font-family: var(--mh-sans); font-size: 11px; border: 1px solid var(--mh-line); padding: 0 6px; }
.mh-discussion-badge-v { color: var(--mh-green); border-color: var(--mh-green); }
.mh-discussion-answer-b { margin: 6px 0; font-size: 14px; line-height: 1.8; }
.mh-discussion-helpful { min-height: 32px; padding: 3px 12px; border: 1px solid var(--mh-line); background: var(--mh-paper); color: var(--mh-ink); font-size: 12px; cursor: pointer; }
.mh-discussion-helpful[aria-pressed="true"] { border-color: var(--mh-green); color: var(--mh-green); }
.mh-discussion-helpful b { font-family: var(--mh-mono); font-weight: 400; margin-left: 4px; }
.mh-discussion-reply { margin: 8px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--mh-line); font-size: 13px; line-height: 1.7; }
/* Phase 5/6 — appended to mh-interact.css. Same band grammar: 1px lines,
   serif heads, letterspaced 11px kickers, color-mix green tints, tokens
   only (both themes follow them). No new palette, no shadows (the inset
   box-shadow "underline"/"tick" idiom below is the skin's existing accent
   device, not a drop shadow), no gradients.

   Shared archive vocabulary (coordinate with the archive component):
   .mh-archive > .mh-archive-topics / .mh-archive-list — the list is made
   of .mh-archive-row rows, each holding .mh-archive-date, .mh-archive-state
   (+ .is-open 进行中 / .is-comments 评论开放中; bare = 已归档),
   .mh-archive-title, .mh-archive-topic — then .mh-archive-pg. Best view
   uses .mh-archive-best-item with .mh-discussion-badge-best /
   .mh-discussion-badge-pick and .mh-archive-note. Singles add
   .mh-archive-src and .mh-archive-nav. Current-page marking: aria-current
   (preferred) or .is-current. */

/* --- Homepage header tabs: real links, 44px touch rows. --- */
.mh-discussion-tabs { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 14px; border-top: 1px solid var(--mh-line); border-bottom: 1px solid var(--mh-line); font-family: var(--mh-sans); font-size: 11px; letter-spacing: .14em; }
.mh-discussion-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--mh-muted); text-decoration: none; border-left: 1px solid var(--mh-line); }
.mh-discussion-tabs a:first-child { border-left: 0; padding-left: 2px; }
.mh-discussion-tabs a:hover { color: var(--mh-green); }
.mh-discussion-tabs a[aria-current="page"] { color: var(--mh-ink); box-shadow: inset 0 -2px 0 var(--mh-green); }

/* --- Module footer: the four public documents (§10.7). --- */
.mh-discussion-rules-links { margin: 18px 0 0; padding-top: 10px; border-top: 1px dotted var(--mh-line); font-size: 12px; color: var(--mh-muted); }
.mh-discussion-rules-links a { color: var(--mh-muted); text-decoration: none; }
.mh-discussion-rules-links a:hover { color: var(--mh-green); text-decoration: underline; }

/* --- 举报: quiet per-card control + one shared dialog. --- */
.mh-discussion-report { min-height: 32px; margin-left: 8px; padding: 3px 8px; border: 0; background: none; color: var(--mh-muted); font-family: var(--mh-sans); font-size: 12px; cursor: pointer; }
.mh-discussion-report:hover { color: var(--mh-rust); text-decoration: underline; }
.mh-discussion-report-noscript { margin: 8px 0 0; font-size: 12px; color: var(--mh-muted); }

.mh-discussion-report-dlg { width: min(420px, calc(100% - 32px)); max-width: 420px; padding: 18px 20px; border: 1px solid var(--mh-line); background: var(--mh-paper); color: var(--mh-ink); }
.mh-discussion-report-dlg::backdrop { background: color-mix(in srgb, var(--mh-ink) 40%, transparent); }
.mh-discussion-report-h { margin: 0 0 4px; font-family: var(--mh-serif); font-size: 16px; font-weight: 500; }
.mh-discussion-report-x { margin: 0 0 10px; font-size: 12px; color: var(--mh-muted); line-height: 1.6; }
.mh-discussion-report-r { display: flex; gap: 10px; align-items: center; box-sizing: border-box; min-height: 44px; padding: 0 10px; margin-bottom: 6px; border: 1px solid var(--mh-line); background: var(--mh-paper); font-size: 13px; cursor: pointer; }
.mh-discussion-report-r:hover { border-color: var(--mh-green); }
.mh-discussion-report-r:has(input:checked) { border-color: var(--mh-green); box-shadow: inset 2px 0 0 var(--mh-green); }
.mh-discussion-report-r input { accent-color: var(--mh-green); }
.mh-discussion-report-f { display: block; margin: 10px 0 0; font-family: var(--mh-sans); font-size: 12px; color: var(--mh-muted); }
.mh-discussion-report-f textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--mh-line); background: var(--mh-paper); color: var(--mh-ink); font-size: 14px; line-height: 1.6; font-family: inherit; resize: vertical; }
.mh-discussion-report-msg { margin: 8px 0 0; font-size: 13px; color: var(--mh-rust); }
.mh-discussion-report-msg:empty { display: none; }
.mh-discussion-report-done { color: var(--mh-green); font-size: 14px; }
.mh-discussion-report-cancel { min-height: 44px; padding: 10px 18px; border: 1px solid var(--mh-line); background: var(--mh-paper); color: var(--mh-muted); font-family: var(--mh-sans); font-size: 13px; letter-spacing: .08em; cursor: pointer; }
.mh-discussion-report-cancel:hover { border-color: var(--mh-ink); color: var(--mh-ink); }

/* --- Archive (/discussion/): index, best, single, rules. Moved out of the
   renderer's inline <style> so the page gets one cached stylesheet and the
   band grammar stays in one file. --- */
.mh-archive{width:min(1100px,calc(100% - 32px));margin-inline:auto;}
.mh-archive-k{margin:0 0 6px;font-family:var(--mh-sans);font-size:11px;letter-spacing:.18em;color:var(--mh-green);}
.mh-archive-h1{margin:0 0 10px;font-family:var(--mh-serif);font-size:24px;font-weight:500;line-height:1.4;}
.mh-archive-meta{margin:0 0 14px;font-size:12px;color:var(--mh-muted);}
.mh-archive-meta a{color:var(--mh-green);}
.mh-archive-state{display:inline-block;font-family:var(--mh-sans);font-size:11px;letter-spacing:.06em;border:1px solid var(--mh-line);color:var(--mh-muted);padding:0 8px;margin-right:8px;}
.mh-archive-state--live{color:var(--mh-green);border-color:var(--mh-green);}
.mh-archive-now{padding:18px 20px;margin:0 0 18px;border:1px solid var(--mh-line);background:color-mix(in srgb,var(--mh-green) 5%,var(--mh-panel));}
.mh-archive-now h2{margin:0 0 6px;font-family:var(--mh-serif);font-size:17px;font-weight:500;line-height:1.5;}
.mh-archive-now h2 a{color:var(--mh-ink);text-decoration:none;}
.mh-archive-now h2 a:hover{color:var(--mh-green);}
.mh-archive-topics{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:10px 0;border-top:1px solid var(--mh-ink);border-bottom:1px solid var(--mh-line);}
.mh-archive-topics a{font-family:var(--mh-sans);font-size:12px;color:var(--mh-muted);text-decoration:none;padding:3px 10px;border:1px solid transparent;}
.mh-archive-topics a:hover{color:var(--mh-green);}
.mh-archive-topics a[aria-current="true"]{color:var(--mh-green);border-color:var(--mh-green);}
.mh-archive-list{list-style:none;margin:0 0 4px;padding:0;}
.mh-archive-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px dotted var(--mh-line);}
.mh-archive-title{font-family:var(--mh-serif);font-size:15px;line-height:1.5;margin:0;}
.mh-archive-title a{color:var(--mh-ink);text-decoration:none;}
.mh-archive-title a:hover{color:var(--mh-green);}
.mh-archive-date,.mh-archive-topic{font-size:12px;color:var(--mh-muted);white-space:nowrap;}
.mh-archive-pg{margin:14px 0;}
.mh-archive-pg a{display:inline-block;font-family:var(--mh-sans);font-size:13px;letter-spacing:.06em;color:var(--mh-green);text-decoration:none;border:1px solid var(--mh-green);padding:8px 22px;}
.mh-archive-empty{padding:14px 0;font-size:14px;color:var(--mh-muted);}
.mh-archive-foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;padding-top:12px;border-top:1px solid var(--mh-ink);font-size:12px;}
.mh-archive-foot a{color:var(--mh-muted);text-decoration:none;}
.mh-archive-foot a:hover{color:var(--mh-green);}
.mh-archive-sec{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--mh-ink);}
.mh-archive-sec-h{margin:0 0 10px;font-family:var(--mh-sans);font-size:12px;letter-spacing:.18em;color:var(--mh-green);font-weight:400;}
.mh-archive-ctx{margin:0 0 10px;font-size:14px;line-height:1.8;}
.mh-archive-src{list-style:none;margin:0;padding:0;font-size:13px;}
.mh-archive-src li{padding:6px 0;border-bottom:1px dotted var(--mh-line);}
.mh-archive-src a{color:var(--mh-green);}
.mh-archive-src-m{color:var(--mh-muted);font-size:12px;}
.mh-discussion-badge-best{display:inline-block;font-family:var(--mh-sans);font-size:11px;letter-spacing:.06em;color:var(--mh-green);border:1px solid var(--mh-green);padding:0 8px;}
.mh-discussion-badge-pick{display:inline-block;font-family:var(--mh-sans);font-size:11px;letter-spacing:.06em;color:var(--mh-rust);border:1px solid var(--mh-rust);padding:0 8px;}
.mh-archive-best-item{padding:12px 14px;margin:8px 0;border:1px solid var(--mh-line);background:color-mix(in srgb,var(--mh-green) 4%,var(--mh-panel));}
.mh-archive-pick{padding:12px 14px;margin:8px 0;border:1px solid var(--mh-line);background:var(--mh-panel);}
.mh-archive-best-item p,.mh-archive-pick p{margin:8px 0 6px;font-size:14px;line-height:1.8;}
.mh-archive-winner-m{font-size:12px;color:var(--mh-muted);}
.mh-archive-note{margin:10px 0;padding:8px 12px;border-left:2px solid var(--mh-green);background:color-mix(in srgb,var(--mh-green) 6%,transparent);font-size:12px;color:var(--mh-muted);}
.mh-archive-nav{display:flex;justify-content:space-between;gap:16px;margin-top:22px;padding-top:12px;border-top:1px solid var(--mh-ink);font-size:13px;}
.mh-archive-nav a{color:var(--mh-green);text-decoration:none;}
.mh-archive-rules h2{margin:18px 0 8px;font-family:var(--mh-serif);font-size:17px;font-weight:500;}
.mh-archive-rules p{margin:0 0 10px;font-size:14px;line-height:1.8;}
.mh-archive-rules ul{margin:0 0 10px;padding-left:20px;font-size:14px;line-height:1.8;}
.mh-archive-back{display:inline-block;margin-top:16px;font-size:13px;color:var(--mh-green);text-decoration:none;}
@media (max-width:680px){.mh-archive-row{grid-template-columns:auto minmax(0,1fr);grid-auto-flow:row;}.mh-archive-date,.mh-archive-topic{grid-column:2;}}

/* --- The archive page carries its own tokens. ---------------------------
   The --mh-* palette is defined on .mh.mh-skin-dianxun, the HOMEPAGE
   wrapper. /discussion/ is an ordinary WordPress page with no skin wrapper,
   so on 2026-08-08 every token-based declaration below resolved to nothing:
   `border: 1px solid var(--mh-line)` became border-style:none and the green
   panels became transparent, leaving an unstyled-looking archive while the
   font sizes and spacing (which use no tokens) made it look intentional.
   Same values as home-skins.css and the same three-way theme logic, so the
   chrome's ◐ toggle moves this page with the rest of the site. */
.mh-archive {
	--mh-paper: #f1eee4;
	--mh-panel: #faf8f0;
	--mh-panel-soft: #e8e7dd;
	--mh-ink: #19201b;
	--mh-muted: #606b63;
	--mh-line: #b9c1ba;
	--mh-green: #2f6b48;
	--mh-rust: #a8443d;
	--mh-sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	--mh-serif: "Songti SC", "Noto Serif CJK SC", STSong, serif;
	--mh-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-family: var(--mh-sans);
	color: var(--mh-ink);
}
html[data-mh-theme="dark"] .mh-archive {
	--mh-paper: #0d100e;
	--mh-panel: #131714;
	--mh-panel-soft: #181d19;
	--mh-ink: #f0eee6;
	--mh-muted: #a9afa9;
	--mh-line: #354039;
	--mh-green: #7db38f;
	--mh-rust: #c45c52;
}
@media (prefers-color-scheme: dark) {
	html:not([data-mh-theme="light"]) .mh-archive {
		--mh-paper: #0d100e;
		--mh-panel: #131714;
		--mh-panel-soft: #181d19;
		--mh-ink: #f0eee6;
		--mh-muted: #a9afa9;
		--mh-line: #354039;
		--mh-green: #7db38f;
		--mh-rust: #c45c52;
	}
}

/* SPECIFICITY, AND WHY EVERY SELECTOR BELOW CARRIES A PREFIX.
   home-skins.css resets `.mh, .mh * { margin:0; padding:0 }` at (0,1,0) and
   loads AFTER this file, so a bare `.mh-pq-plate { padding: 31px 34px 29px }`
   ties on specificity and LOSES on source order. Measured 2026-08-08: every
   padding and margin in this module computed to 0 on the homepage — the
   question plate was 106px instead of ~215px and the whole block read as
   cramped. That was the "messy" the owner reported, and it was one line of
   someone else's reset, not a layout mistake here.

   `:is(.mh, body)` takes the specificity of its highest argument (.mh, so
   (0,1,0)) and adds the rule's own class for (0,2,0) — enough to win. `body`
   is in the list so the same rules still apply on /discussion/ and on article
   pages, where there is no .mh wrapper at all. */

/* ==========================================================================
   茉莉花评论 — PUBLIC QUESTION module, redesigned 2026-08-08 to the owner's
   two reference screenshots. One question on a deep-green plate, the vote on
   paper beneath it, comments unlocked only after a vote, everything inside
   the site's 1100px canvas.

   The palette adds exactly two tokens to the skin: a deep plate green and an
   editorial gold. Both are drawn from the cover page, so the module borrows
   an existing voice rather than inventing a third one.
   ========================================================================== */
.mh-pq,
:is(.mh, body) .mh-pq-plate, :is(.mh, body) .mh-pq-band, :is(.mh, body) .mh-pq-read, :is(.mh, body) .mh-pq-tabs, :is(.mh, body) .mh-pq-foot, :is(.mh, body) .mh-pq-head {
	--pq-deep: #143f33;
	--pq-gold: #87662d;
	--pq-plate-ink: #f8f2e7;
	--pq-band: color-mix(in srgb, var(--mh-green) 4%, var(--mh-panel));
	--pq-rule: var(--mh-line);
}
html[data-mh-theme="dark"] .mh-pq,
html[data-mh-theme="dark"] .mh-pq-plate, html[data-mh-theme="dark"] .mh-pq-band,
html[data-mh-theme="dark"] .mh-pq-read, html[data-mh-theme="dark"] .mh-pq-tabs,
html[data-mh-theme="dark"] .mh-pq-foot, html[data-mh-theme="dark"] .mh-pq-head {
	--pq-deep: #10251c;
	--pq-gold: #c9a86a;
}
@media (prefers-color-scheme: dark) {
	html:not([data-mh-theme="light"]) .mh-pq,
	html:not([data-mh-theme="light"]) .mh-pq-plate,
	html:not([data-mh-theme="light"]) .mh-pq-band,
	html:not([data-mh-theme="light"]) .mh-pq-read,
	html:not([data-mh-theme="light"]) .mh-pq-tabs,
	html:not([data-mh-theme="light"]) .mh-pq-foot,
	html:not([data-mh-theme="light"]) .mh-pq-head {
		--pq-deep: #10251c;
		--pq-gold: #c9a86a;
	}
}

/* --- masthead ----------------------------------------------------------- */
/* THE MASTHEAD SPEAKS THE SITE'S SECTION-HEAD GRAMMAR, NOT ITS OWN.
   A1 §4.4 draws this block as a stacked kicker over a wordmark, which is how
   the reference prototype looked standing alone. On the actual homepage every
   other section — 今日焦点, 分类精选, 滚动新闻 — opens the same way: a 3px ink
   rule, a 74px band, a 9px mono kicker in green sitting INLINE before a serif
   title, and a serif tagline pushed to the right margin. The owner called the
   stacked version non-conforming and was right; a module that invents its own
   header is a module that looks bolted on. A1's WORDS are kept exactly, the
   TYPOGRAPHY is the site's. */
/* 28px horizontal inset — the same as .mh-pq-band and .mh-pq-foot, and the
   same as the owner's reference, where the kicker starts 28px in rather than
   hard against the module's edge. The rules still span the full width because
   borders sit outside the padding box. */
/* CENTERED in the 85px band (owner, 2026-08-09). Was flex-end with 18px/15px
   asymmetric padding — fine when the band hugged its content, but once the
   band grew to a fixed 85px it parked the title low. Vertical padding goes to
   zero so the flex centring is exact rather than offset by the 3px padding
   difference. */
:is(.mh, body) .mh-pq-head { display: flex; align-items: center; justify-content: flex-start; gap: 15px; flex-wrap: wrap; min-height: 85px; padding: 0 28px; border-top: 3px solid var(--mh-ink); border-bottom: 1px solid var(--pq-rule); }
:is(.mh, body) .mh-pq-brand { display: flex; align-items: baseline; gap: 15px; min-width: 0; }
:is(.mh, body) .mh-pq-k { align-self: center; margin: 0; font-family: var(--mh-mono); font-size: 9px; font-weight: 700; letter-spacing: .13em; color: var(--mh-green); white-space: nowrap; }
/* 31px to sit level with .mh-desks-title (分类精选) and .mh-leads .mh-h
   (头条, 29.4px), measured on the live page. At 24px it read as a subsection
   of the news above it rather than a section of its own. */
/* 700 to match 分类精选 / 滚动新闻 / 茉莉花深度, which are all 31px/700. At 500
   this band's title was the one light heading on the page — the owner read that
   as 「smaller in comparison with the other section titles」 and the weight, not
   the size, was the remaining half of it. */
:is(.mh, body) .mh-pq-wordmark { margin: 0; font-family: var(--mh-serif); font-size: 31px; font-weight: 700; letter-spacing: .02em; line-height: 1.1; }
:is(.mh, body) .mh-pq-mark { display: none; }
:is(.mh, body) .mh-pq-tag { margin-left: auto; margin-bottom: 2px; font-family: var(--mh-serif); font-size: 12px; font-weight: 400; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-jump { margin-bottom: 2px; font-family: var(--mh-sans); font-size: 12px; color: var(--mh-muted); text-decoration: none; white-space: nowrap; }
:is(.mh, body) .mh-pq-jump:hover { color: var(--mh-green); }
:is(.mh, body) .mh-pq-jump:hover { color: var(--mh-green); border-color: var(--mh-green); }

/* --- tabs: real links, gold underline on the current one ---------------- */
:is(.mh, body) .mh-pq-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-inline: 28px; border-bottom: 1px solid var(--pq-rule); }
:is(.mh, body) .mh-pq-tabs a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--mh-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
:is(.mh, body) .mh-pq-tabs a:hover { color: var(--mh-ink); }
:is(.mh, body) .mh-pq-tabs a[aria-current="page"] { color: var(--mh-ink); border-bottom-color: var(--pq-gold); }

/* --- the question plate -------------------------------------------------- */
:is(.mh, body) .mh-pq-plate { background: var(--pq-deep); color: var(--pq-plate-ink); padding: 31px 34px 29px; }
:is(.mh, body) .mh-pq-plate-k { margin: 0 0 14px; font-family: var(--mh-sans); font-size: 12px; letter-spacing: .16em; color: var(--pq-gold); }
:is(.mh, body) .mh-pq-plate-t { margin: 0 0 14px; font-family: var(--mh-serif); font-size: 32px; line-height: 1.35; font-weight: 500; line-height: 1.35; color: #fff; }
:is(.mh, body) .mh-pq-plate-c { margin: 0; font-size: 14px; line-height: 1.75; color: color-mix(in srgb, var(--pq-plate-ink) 80%, transparent); }
:is(.mh, body) .mh-pq-plate-src { margin: 14px 0 0; font-size: 13px; }
:is(.mh, body) .mh-pq-plate-src a { color: var(--pq-gold); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--pq-gold) 55%, transparent); }
:is(.mh, body) .mh-pq-plate-src a:hover { border-bottom-color: var(--pq-gold); }

/* --- shared band + section head ------------------------------------------ */
:is(.mh, body) .mh-pq-band { background: var(--pq-band); padding: 23px 28px 25px; border-bottom: 1px solid var(--pq-rule); }
:is(.mh, body) .mh-pq-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
:is(.mh, body) .mh-pq-sec-t { margin: 0; font-family: var(--mh-sans); font-size: 16px; font-weight: 600; }

/* The toggle sits DIRECTLY BELOW the title (owner, 2026-08-08), not beside it
   and certainly not at the band's right edge ~700px away. Below keeps it in the
   reading path: title, then the door, then the form. */
:is(.mh, body) .mh-pq-sec-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }

/* THE TOGGLE'S LINE, FILLED. The toggle alone occupied 115px of a 1042px line
   and left 927px of nothing to its right — the largest void left in the band.
   The 审核 notice is one line at this width, so the two together use the whole
   line, and the pairing means something: the notice answers the question the
   toggle raises. */
/* flex: 1 on the LEFT WRAPPER is what makes the notice able to grow. .mh-pq-sec
   is a flex row with space-between, so .mh-pq-sec-l was shrink-to-fit — about
   465px — and flex:1 on the notice inside it had no room to expand into. The
   growth has to be granted at the outer level first. */
/* flex: 1 on the wrapper is what pushes the toggle to the far right: .mh-pq-sec
   is a space-between row, so without it the wrapper is shrink-to-fit and the
   toggle sits immediately after the title instead of at the line's end. */
:is(.mh, body) .mh-pq-sec-l { flex: 1; min-width: 0; }

:is(.mh, body) .mh-pq-sec-act { display: flex; align-items: center; gap: 18px; }
:is(.mh, body) .mh-pq-sec-act .mh-pq-form-x { flex: 1; margin: 0; }

/* The numeral inside 显示评论（N）. Mono, because every other figure on this
   band is — 「100%（7 票）」, 「第 1 / 1 页」 — and no margin, because it sits
   inside the parentheses rather than beside the words. Not a badge: a pill
   with a number in it is the grammar of a notification, and this is a door. */
:is(.mh, body) .mh-pq-toggle .mh-pq-count { font-family: var(--mh-mono); font-weight: 400; font-size: 12px; color: inherit; }
:is(.mh, body) .mh-pq-sec-x { margin: 0; font-size: 12px; color: var(--mh-muted); }

/* --- vote options: one row of equal cards, collapsing gracefully --------- */
:is(.mh, body) .mh-pq-legend { padding: 0 0 8px; font-family: var(--mh-sans); font-size: 12px; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--pq-rule); }
:is(.mh, body) .mh-pq-opt { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px; min-height: 44px; box-sizing: border-box; background: var(--mh-panel); border: 0; outline: 1px solid var(--pq-rule); outline-offset: 0; cursor: pointer; }
:is(.mh, body) .mh-pq-opt:hover { background: color-mix(in srgb, var(--mh-green) 6%, var(--mh-panel)); }
:is(.mh, body) .mh-pq-opt input { margin-top: 3px; accent-color: var(--mh-green); }
:is(.mh, body) .mh-pq-opt-b { display: block; min-width: 0; }
:is(.mh, body) .mh-pq-opt-n { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
:is(.mh, body) .mh-pq-opt-g { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--mh-muted); }
/* chosen: the card inverts, so the answer is legible without relying on hue */
:is(.mh, body) .mh-pq-opt:has(input:checked) { background: var(--pq-deep); }
:is(.mh, body) .mh-pq-opt:has(input:checked) .mh-pq-opt-n { color: #fff; }
:is(.mh, body) .mh-pq-opt:has(input:checked) .mh-pq-opt-g { color: color-mix(in srgb, #fff 72%, transparent); }

:is(.mh, body) .mh-pq-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 0; }
:is(.mh, body) .mh-pq-said { font-size: 13px; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-go { min-height: 44px; padding: 11px 30px; border: 0; background: var(--pq-deep); color: #fff; font-family: var(--mh-sans); font-size: 14px; letter-spacing: .06em; cursor: pointer; }
:is(.mh, body) .mh-pq-go:hover { background: color-mix(in srgb, var(--pq-deep) 88%, #000); }
:is(.mh, body) .mh-pq-go[disabled] { background: var(--pq-gold); color: #1b1500; cursor: default; }

/* 修改选择 is PERMITTED, not encouraged. A reader who has already voted and
   still has their one change gets an outline button, not the filled green
   primary they pressed to vote: the same weight would read as an instruction
   to reconsider, and would compete with 说说你为什么这样选 immediately below
   it for the attention of someone who has finished voting and should be
   writing. Filled green stays reserved for the one action the band actually
   wants next. */
:is(.mh, body) .mh-discussion-form.is-changeable .mh-pq-go {
	background: transparent;
	border: 1px solid var(--pq-rule);
	color: var(--mh-ink);
}
:is(.mh, body) .mh-discussion-form.is-changeable .mh-pq-go:hover {
	border-color: var(--mh-green);
	background: transparent;
	color: var(--mh-green);
}

/* --- results: four columns of label/percent over a gold bar -------------- */
:is(.mh, body) .mh-pq-results:empty { display: none; }
:is(.mh, body) .mh-pq-results { margin-top: 18px; }
:is(.mh, body) .mh-pq-results .mh-discussion-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 24px; }
/* The phase-3 script emits label / track / number as three siblings; the
   grid puts the number on the label's baseline and spans the bar beneath,
   so the screenshot layout needs no change to the working vote script. */
:is(.mh, body) .mh-pq-results .mh-discussion-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 8px; }
:is(.mh, body) .mh-pq-results .mh-discussion-bar-label { font-size: 13px; min-width: 0; }
:is(.mh, body) .mh-pq-results .mh-discussion-bar-label em { font-style: normal; margin-left: 6px; font-size: 11px; color: var(--pq-gold); }
:is(.mh, body) .mh-pq-results .mh-discussion-bar-n { font-family: var(--mh-mono); font-size: 13px; color: var(--mh-ink); text-align: right; white-space: nowrap; }
:is(.mh, body) .mh-pq-results .mh-discussion-bar-track { grid-column: 1 / -1; display: block; height: 8px; background: color-mix(in srgb, var(--mh-ink) 12%, transparent); }
:is(.mh, body) .mh-pq-results .mh-discussion-bar-fill { display: block; height: 100%; background: var(--pq-gold); transition: width .5s ease; }
:is(.mh, body) .mh-pq-results .mh-discussion-total { margin: 14px 0 0; font-size: 12px; color: var(--mh-muted); }
@media (prefers-reduced-motion: reduce) { .mh-pq-results .mh-discussion-bar-fill { transition: none; } }

/* --- comments locked / open ---------------------------------------------- */
/* ONE ROW (owner, 2026-08-09). The two paragraphs are now DIRECT children of
   the flex row — the heading left, its explanation right — where the heading
   used to sit in a wrapper <div> above the explanation with 评论尚未开放 alone
   on the right. Dropping the wrapper is what puts them on one line; the
   bottom margin on -t went with it, since there is nothing beneath it now.

   flex-wrap stays: on a narrow phone the two still stack rather than crush,
   which is the right failure. text-align on -x keeps the explanation hard
   right when they share a line and reads normally when they do not. */
:is(.mh, body) .mh-pq-locked { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
:is(.mh, body) .mh-pq-locked-t { margin: 0; font-size: 15px; font-weight: 600; flex: none; }
:is(.mh, body) .mh-pq-locked-x { margin: 0; font-size: 13px; color: var(--mh-muted); flex: 1 1 auto; min-width: 0; text-align: right; }

/* .mh-pq-locked-s is retired with 评论尚未开放 (owner, 2026-08-09). The rule is
   kept only so a stray copy of the old markup cannot render unstyled. */
:is(.mh, body) .mh-pq-locked-s { display: none; }
:is(.mh, body) .mh-pq-toggle { min-height: 36px; padding: 6px 14px; border: 1px solid var(--pq-rule); background: var(--mh-panel); color: var(--mh-ink); font-size: 13px; cursor: pointer; }
:is(.mh, body) .mh-pq-toggle:hover { border-color: var(--mh-green); color: var(--mh-green); }
:is(.mh, body) .mh-pq-prompt { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: var(--mh-muted); }

/* NO SLAB. The form carries .mh-discussion-cform too — the standalone
   /discussion/ template's styling — which paints it var(--mh-paper) with a
   border and 14px/16px padding. Inside this module that produced a grey
   rectangle with the labels jammed against its left edge, which is what the
   owner saw as 「cheaply made」. The owner's own reference (MLH_voting_1.png)
   has NO box here: the fields sit straight on the band, and the only
   separation is the hairline above YOUR COMMENT. Reset all four, do not
   merely re-pad. */
/* ==================================================================
   THE COMMENT BOX (owner, 2026-08-08 — final arrangement).

     row 1   姓名或昵称 + its box        |  显示评论（N）
     row 2   你的评论 + its box          |  提交审核

   A 2x2 grid with the four controls as DIRECT children, so each button is
   positioned against the field it sits beside rather than against the other
   button. 显示评论 is align-self:end — its bottom lands level with the nickname
   input's bottom, which is what 「on the right side of 匿名读者 box」 means.
   提交审核 is align-self:start in the row below, so it sits directly under it.

   The 审核 notice is deleted. The sampling disclaimer and the rule links are in
   .mh-pq-foot pending the owner's ruling on the plan conflict.
   ================================================================== */
/* max-content on the button column, not a fixed 190px: the two buttons are then
   their natural width and the column is exactly as wide as they are, so nothing
   is stretched and no slack is left beside them (owner, 2026-08-08 — 「the button
   shouldn't be that long, just regular normal length」). */
:is(.mh, body) .mh-pq-form { display: grid; grid-template-columns: minmax(300px, 1fr) max-content; grid-template-rows: auto 1fr; gap: 12px 22px; margin: 0; padding: 0; border: 0; background: none; }

:is(.mh, body) .mh-pq-f-nick { grid-column: 1; grid-row: 1; }

/* Stretched and flex so the textarea grows to fill row 2 — the two columns then
   end level however tall the box is. */
:is(.mh, body) .mh-pq-f-body { grid-column: 1; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; }
:is(.mh, body) .mh-pq-f-body textarea { flex: 1; min-height: 84px; }

/* 42px matches the nickname input's own height (14px text at line-height 1.6,
   plus 9px padding each side, plus 1px border each side), so the toggle aligns
   with that box on BOTH edges rather than only sharing a baseline — 「显示评论 is
   not 对齐 the name box」. width:auto so it is a button, not a bar. */
:is(.mh, body) .mh-pq-form .mh-pq-toggle {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	width: auto;
	min-height: 42px;
	padding: 6px 16px;
}

/* Bottom of its row, so the two buttons bookend the two fields: 显示评论 level
   with the nickname box, 提交审核 level with the comment box's floor. The owner
   offered bottom or middle; bottom is where a submit belongs relative to the
   field it sends. */
:is(.mh, body) .mh-pq-form .mh-pq-submit {
	grid-column: 2;
	grid-row: 2;
	align-self: end;
	width: auto;
}

:is(.mh, body) .mh-pq-f { display: block; font-family: var(--mh-sans); font-size: 12px; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-f > span { display: block; margin-bottom: 5px; }
:is(.mh, body) .mh-pq-f input, :is(.mh, body) .mh-pq-f textarea { display: block; width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--pq-rule); background: var(--mh-panel); color: var(--mh-ink); font-size: 14px; line-height: 1.6; font-family: inherit; }
:is(.mh, body) .mh-pq-f textarea { resize: vertical; min-height: 100px; }
:is(.mh, body) .mh-pq-submit { min-height: 44px; padding: 11px 26px; border: 0; background: var(--pq-deep); color: #fff; font-family: var(--mh-sans); font-size: 14px; letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
:is(.mh, body) .mh-pq-submit:hover { background: color-mix(in srgb, var(--pq-deep) 88%, #000); }
:is(.mh, body) .mh-pq-form-x { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--mh-muted); }

/* --- reader comments: who | what, on hairlines --------------------------- */
:is(.mh, body) .mh-pq-read { background: #f7f3ea; padding: 20px 28px 25px; }
/* Tighter rows (owner, 2026-08-08). With no control strip under each comment
   the 16px band was padding around nothing; 10px keeps the arguments legible
   as a sequence rather than spacing them out like cards. */
:is(.mh, body) .mh-pq-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 20px; padding: 10px 0; margin: 0; border: 0; border-top: 1px solid var(--pq-rule); }
:is(.mh, body) .mh-pq-row:first-of-type { border-top: 1px solid var(--mh-ink); }
:is(.mh, body) .mh-pq-row-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; color: var(--pq-gold); }
:is(.mh, body) .mh-pq-row-who .mh-discussion-answer-a { font-weight: 600; color: var(--pq-gold); }
:is(.mh, body) .mh-pq-row-who time { color: var(--mh-muted); font-family: var(--mh-sans); font-size: 11px; }

:is(.mh, body) .mh-pq-row-kind { color: var(--mh-muted); }
/* Text, then the mark in a narrow second column pinned to the right edge.
   align-items:end drops the mark to the bottom of the text block, which IS the
   comment's last line; the margin-bottom lifts it to that line's optical
   middle. One column of marks down the page, none of them on a line of its
   own (owner, 2026-08-08). */
:is(.mh, body) .mh-pq-row-say { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; }
:is(.mh, body) .mh-pq-row-say .mh-discussion-answer-b { margin: 0; font-size: 14px; line-height: 1.75; }

:is(.mh, body) .mh-pq-pager { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
:is(.mh, body) .mh-pq-pg { min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--pq-rule); background: var(--mh-panel); color: var(--mh-ink); font-family: var(--mh-mono); font-size: 13px; cursor: pointer; }
:is(.mh, body) .mh-pq-pg:hover { border-color: var(--mh-green); color: var(--mh-green); }
:is(.mh, body) .mh-pq-pg[aria-current="true"] { background: var(--pq-deep); border-color: var(--pq-deep); color: #fff; }

/* --- footer --------------------------------------------------------------- */
/* 「自愿参与的读者投票」 and 「排序说明」 were flush against the module's left
   and right edges — 对齐 to nothing, with every other line on the band inset
   28px. Same inset here, and a bottom pad so the last line is not touching the
   module's floor either. */
:is(.mh, body) .mh-pq-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 28px 16px; }
:is(.mh, body) .mh-pq-foot-x { margin: 0; font-size: 12px; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-foot-links { margin: 0; font-size: 12px; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-foot-links a { color: var(--mh-muted); text-decoration: none; border-bottom: 1px solid var(--pq-rule); }
:is(.mh, body) .mh-pq-foot-links a:hover { color: var(--mh-green); border-color: var(--mh-green); }

/* --- responsive ------------------------------------------------------------ */
/* 1000px, not 900: three columns need roughly 800px of band to stay legible,
   and the band is the canvas minus 56px of padding. Below this they stack. */
@media (max-width: 1000px) {
	/* One column: the three stack in source order — toggle and notice, then the
	   fields, then the disclaimer, submit and links. space-between would strand
	   them apart with nothing to distribute, so it is released here. */
	/* One column: release the explicit placements or auto-placement keeps
	   trying to honour a second track. Source order then decides: nickname,
	   comment box, 显示评论, 提交审核. */
	:is(.mh, body) .mh-pq-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; }
	:is(.mh, body) .mh-pq-f-nick,
	:is(.mh, body) .mh-pq-f-body,
	:is(.mh, body) .mh-pq-form .mh-pq-toggle,
	:is(.mh, body) .mh-pq-form .mh-pq-submit { grid-column: 1; grid-row: auto; align-self: auto; }
	:is(.mh, body) .mh-pq-f-body textarea { min-height: 110px; }
}
@media (max-width: 680px) {
	:is(.mh, body) .mh-pq-head { grid-template-columns: minmax(0, 1fr); }
	:is(.mh, body) .mh-pq-jump { justify-self: start; }
	:is(.mh, body) .mh-pq-plate { padding: 22px 18px; }
	:is(.mh, body) .mh-pq-plate-t { font-size: 22px; }
	:is(.mh, body) .mh-pq-band { padding: 20px 18px 22px; }
	:is(.mh, body) .mh-pq-opts { grid-template-columns: minmax(0, 1fr); }
	:is(.mh, body) .mh-pq-results .mh-discussion-bars { grid-template-columns: minmax(0, 1fr); }
	:is(.mh, body) .mh-pq-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* [hidden] must beat the layout declarations above it: a class selector
   :is(.mh, body) outranks the UA's `[hidden] {display:none}`, so without this the unlocked
   comment panel and the paged-out comment rows stay on screen. */
.mh-pq-locked[hidden],
.mh-pq-cmt-open[hidden],
.mh-pq-row[hidden],
.mh-pq-form[hidden],
:is(.mh, body) .mh-pq-form-x[hidden] { display: none; }

/* A1 §4.4: the 投票选项 legend is VISIBLE in the reference. A global .sr-only
   must never swallow it, so it is styled explicitly here. */
:is(.mh, body) .mh-pq-legend { position: static !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; overflow: visible !important; }
:is(.mh, body) .mh-pq-total { display: none; }
:is(.mh, body) .mh-pq-read[hidden] { display: none; }

/* A1 §3.2: tabs are buttons now, and must not look like buttons. Same
   typography as the links they replace, gold underline on the selected one. */
:is(.mh, body) .mh-pq-tab { appearance: none; border: 0; background: none; display: inline-flex; align-items: center; min-height: 44px; padding: 12px 18px 10px; font-family: inherit; font-size: 14px; color: var(--mh-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
:is(.mh, body) .mh-pq-tab:hover { color: var(--mh-ink); }
:is(.mh, body) .mh-pq-tab[aria-selected="true"] { color: var(--mh-ink); border-bottom-color: var(--pq-gold); }
:is(.mh, body) .mh-pq-tab:focus-visible { outline: 2px solid var(--mh-green); outline-offset: -2px; }
:is(.mh, body) #mh-pq-panel:focus { outline: none; }
:is(.mh, body) #mh-pq-panel:focus-visible { outline: 2px solid var(--mh-green); outline-offset: 2px; }
:is(.mh, body) .mh-pq-tabs-ns { margin: 8px 0; font-size: 13px; }
:is(.mh, body) .mh-pq-tabs-ns a { margin-right: 14px; color: var(--mh-green); }
:is(.mh, body) .mh-pq-retry { margin-left: 8px; min-height: 32px; padding: 3px 12px; border: 1px solid var(--pq-rule); background: var(--mh-panel); color: var(--mh-ink); font-size: 13px; cursor: pointer; }

/* 往期最佳 panel */
:is(.mh, body) .mh-pq-best { padding: 4px 0; }
:is(.mh, body) .mh-pq-best-item { padding: 16px 0; border-top: 1px solid var(--pq-rule); }
:is(.mh, body) .mh-pq-best-item:first-child { border-top: 0; }
:is(.mh, body) .mh-pq-best-k { margin: 0 0 4px; font-family: var(--mh-mono); font-size: 12px; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-best-t { margin: 0 0 8px; font-family: var(--mh-serif); font-size: 17px; font-weight: 500; line-height: 1.5; }
:is(.mh, body) .mh-pq-best-badge { display: inline-block; margin: 0 0 6px; font-family: var(--mh-sans); font-size: 11px; letter-spacing: .06em; color: var(--pq-gold); border: 1px solid var(--pq-gold); padding: 0 8px; }
:is(.mh, body) .mh-pq-best-b { margin: 0 0 6px; font-size: 14px; line-height: 1.85; }
:is(.mh, body) .mh-pq-best-why { margin: 0; font-size: 12px; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-best-none { margin: 0; font-size: 13px; color: var(--mh-muted); }

/* The mark, in the meta gutter (owner, 2026-08-08). A fixed x-position down
   the page, so the hearts read as a column and the click target is always in
   the same place. 28px tall with the padding: comfortably hittable without
   drawing a box around itself. */
/* The mark is a WORD IN THE COMMENT'S LAST LINE, so inline-flex: an atomic
   inline box that sits in a line box and can never generate one. No width, no
   margin-block, nothing that would let it claim a row (owner, 2026-08-08). */
:is(.mh, body) .mh-pq-heart { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: auto; min-height: 0; height: 14px; margin: 0 0 5px; padding: 0; border: 0; background: none; color: var(--mh-line); font-size: 14px; line-height: 1; cursor: pointer; }
:is(.mh, body) .mh-pq-heart:hover { color: var(--pq-gold); }
:is(.mh, body) .mh-pq-heart[aria-pressed="true"] { color: var(--pq-gold); }
:is(.mh, body) .mh-pq-heart[aria-pressed="true"] .mh-pq-heart-g::before { content: "\2665"; }
:is(.mh, body) .mh-pq-heart[aria-pressed="true"] .mh-pq-heart-g { font-size: 0; }
:is(.mh, body) .mh-pq-heart[aria-pressed="true"] .mh-pq-heart-g::before { font-size: 14px; }
:is(.mh, body) .mh-pq-heart b { font-family: var(--mh-mono); font-weight: 400; font-size: 11px; margin-left: 3px; color: var(--mh-muted); }
:is(.mh, body) .mh-pq-heart:focus-visible { outline: 2px solid var(--mh-green); outline-offset: 2px; }