/* Calm writing workspace; retains the established dark palette.
   Refinements informed by unslop, Damir Sokolovsky (@heydamir), CC BY 4.0. */
:root { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
#question-body, #answer { font-size:16px; }
#question-title { font-size:24px; line-height:1.4; overflow-wrap:anywhere; }
.intro h1 { font-size:24px; margin-top:0; }
#question-list .question-link { justify-content:flex-start; }
.intro { margin-bottom:24px; }
#question-card { border-color:#292c34; }
.question-link.active { background:#24232c; }
.question-link>span { min-width:0; overflow-wrap:anywhere; }
#progress-label, #position, #mobile-progress { font-variant-numeric:tabular-nums; }
.answer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:32px 0 12px; }
.answer-heading .answer-label { margin:0; }
#phrases-btn { background:transparent; font-size:14px; }
.quick-phrases { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.quick-phrases:empty { display:none; }
.quick-phrase { max-width:100%; text-align:left; overflow-wrap:anywhere; justify-content:flex-start; background:transparent; font-size:14px; padding:8px 12px; }
.phrase-actions { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.phrase-entry { padding:20px 0; border-bottom:1px solid var(--line); }
.phrase-entry h3 { margin:0 0 8px; font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.phrase-preview { white-space:pre-wrap; overflow-wrap:anywhere; max-height:144px; overflow:auto; line-height:1.6; color:var(--muted); }
.phrase-entry .phrase-actions { margin-bottom:0; }
.phrase-message { color:var(--error); white-space:pre-wrap; }
.phrase-message:empty { display:none; }
.phrase-empty { padding:24px 0; }
.phrase-draft { padding:12px; border-left:2px solid var(--accent); margin:16px 0; background:var(--bg); }
.phrase-draft button { margin:4px; }
#phrase-form label { display:block; margin:16px 0 8px; }
#phrase-form input, #phrase-form textarea { font-size:16px; }
#phrase-form textarea { min-height:176px; }
#phrase-form .phrase-actions { position:sticky; bottom:-16px; padding:12px 0; background:var(--panel); }
#answer-meta { margin-top:8px; display:flex; justify-content:space-between; gap:12px; }
#unanswered-btn, #drafts-btn { width:100%; background:transparent; }
#unanswered-btn:hover, #drafts-btn:hover, #phrases-btn:hover, .quick-phrase:hover { background:#24232c; }
#drafts-btn { color:var(--accent); }
#modal-body textarea[readonly] { min-height:120px; margin-bottom:8px; }
.brand-mark { background:transparent; border:1px solid var(--line); color:var(--accent); border-radius:8px; }
.tabs button.active { background:#24232c; color:var(--text); }
.question-mark { flex:0 0 16px; color:var(--muted); text-align:center; }
.question-link[aria-current="true"] .question-mark { color:var(--accent); }
#answer { background:#14151a; caret-color:var(--accent); }
#answer:focus { border-color:var(--accent); }
#question-tag:empty { display:none; }
.phrase-entry:last-child { border-bottom:0; }
.phrase-actions .primary { flex-grow:0; }
#phrase-form input:disabled, #phrase-form textarea:disabled { opacity:.75; }
#phrases-btn { white-space:nowrap; }
#modal:has(#phrase-form) .dialog-header { z-index:3; }
@media(min-width:701px) and (max-width:1100px) { .toolbar { flex-wrap:wrap; } }
@media(max-width:360px) { .answer-heading { align-items:flex-start; flex-direction:column; } }
.toast.error { border-color:var(--error); }
@media(min-width:701px) { .reading { padding-top:32px; } #question-list { scrollbar-width:thin; scrollbar-color:var(--line) transparent; } }
@media(max-width:700px), (max-height:500px) and (pointer:coarse) {
 .answer-heading { margin-top:24px; gap:8px; }
 .quick-phrases { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:4px; }
 .quick-phrase { flex:0 0 auto; max-width:240px; min-height:44px; }
 #phrases-btn { min-height:44px; padding:8px 12px; }
 .phrase-actions button { flex:1 1 auto; min-height:48px; }
 .phrase-entry { padding:16px 0; }
 #answer-meta { font-size:12px; }
 #unanswered-btn { font-size:14px; }
}