/* Help pages, contact form, notices, question threads, bookmarks and multi-quote. */

/* ---------- Notices (ACP → Notices) ---------- */
.notice--danger { border-left-color: var(--destructive); }
.notice--danger::before { content: "[!!] "; color: var(--destructive); }
.site-notice { display: flex; align-items: flex-start; gap: 10px; }
.site-notice::before { flex: none; }
.site-notice-body { flex: 1; min-width: 0; }
.site-notice-body > :first-child { margin-top: 0; }
.site-notice-body > :last-child { margin-bottom: 0; }
.site-notice-dismiss { flex: none; margin: -4px -6px -4px 0; color: var(--muted-foreground); }
.site-notice-dismiss:hover { color: var(--foreground); }
.notice-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: baseline; border: 1px solid var(--line); background: var(--accent); }
.notice-swatch--success { background: var(--success); }
.notice-swatch--warning { background: var(--warning); }
.notice-swatch--danger { background: var(--destructive); }
.notice-styles { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.checkbox-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 16px; }
.label--live { color: var(--success); border-color: var(--success); }

/* ---------- Help pages ---------- */
.help-layout { grid-template-columns: minmax(0, 1fr) 220px; }
.help-title { font-size: 1.1rem; }
.help-body { font-size: .92rem; line-height: 1.7; max-width: 76ch; }
.help-body .bbc-heading { margin: 1.4em 0 .4em; }
.help-body .bbc-heading:first-child { margin-top: 0; }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-list li { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.help-list li:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Contact ---------- */
.contact-message { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.contact-message:last-of-type { border-bottom: 0; }
.contact-message.is-handled { opacity: .7; }
.contact-message-head { margin-bottom: 8px; }
.contact-message-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 10px; font-size: .88rem; }

/* ---------- Question threads ---------- */
.label--solved { color: var(--success); border-color: var(--success); }
.label--question { color: var(--accent); border-color: var(--accent-dim); }
.solution-box { margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--success); border-left-width: 3px; background: var(--card); }
.solution-box-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; color: var(--success); }
.solution-box-head .muted { color: var(--muted-foreground); }
.solution-box-body { margin-bottom: 6px; font-size: .88rem; overflow-wrap: anywhere; }
.message.is-solution { border-color: var(--success); box-shadow: inset 3px 0 0 var(--success); }
.message-solution { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 2px 8px; border: 1px solid var(--success); color: var(--success); font-size: .74rem; }
.message-actions .solution-toggle.is-active { color: var(--success); border-color: var(--success); }

/* ---------- Bookmarks ---------- */
.message-actions .inline-form { display: inline-flex; margin: 0; }
.message-actions .bookmark-toggle.is-active { color: var(--accent); }
.message-actions .bookmark-toggle.is-active .icon { fill: currentColor; }
.bookmark-list { list-style: none; margin: 0; padding: 0; }
.bookmark { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.bookmark:last-child { border-bottom: 0; }
.bookmark-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.bookmark-excerpt { margin: 6px 0 8px; font-size: .84rem; overflow-wrap: anywhere; }
.bookmark-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bookmark-note { display: flex; gap: 6px; flex: 1 1 260px; max-width: 480px; }
.bookmark-note .input { flex: 1; min-width: 0; }

/* ---------- Multi-quote ---------- */
.message-actions .multiquote-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.multiquote-bar { position: fixed; left: 50%; bottom: calc(var(--status-h, 0px) + 14px); transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--accent); background: var(--card); box-shadow: 3px 3px 0 var(--accent-dim); font-size: .82rem; }
.multiquote-bar[hidden] { display: none; }
@media (max-width: 760px) {
  .multiquote-bar { left: 16px; right: 16px; transform: none; justify-content: space-between; }
}

/* ACP → Seasonal themes */
.season-swatch { display: inline-block; width: 22px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--sw-bg) 0 40%, var(--sw-accent) 40% 75%, var(--sw-shadow) 75%); }
.season-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; }
.season-color { display: flex; align-items: center; gap: 8px; font-size: .84rem; cursor: pointer; }
.season-color input { width: 38px; height: 30px; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }
.season-color span { display: grid; }
.season-color code { font-size: .74rem; color: var(--muted-foreground); }
.season-intensity { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; }
.season-decorations .checkbox { align-items: flex-start; }
.season-decorations .explain { display: block; margin: 0; }