/* ===== COMMUNITY Q&A ===== */
body[class^="page-"] [hidden] { display: none !important; }
.q-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.q-main, .q-side { min-width: 0; }
.q-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.q-tabs { display: flex; gap: 24px; flex-wrap: wrap; font: .78rem var(--font-sans); color: var(--soft); }
.q-tabs a { padding: 8px 0; border-bottom: 2px solid transparent; }
.q-tabs a:hover, .q-tabs a[aria-current="true"] { color: var(--accent); border-color: var(--accent); }
.ct { color: var(--text); background: var(--panel-2); border-radius: 10px; padding: 2px 6px; font-size: .65rem; }
.q-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.q-tags { display: flex; gap: 8px; flex-wrap: wrap; }
button.q-tag { cursor: pointer; }
.q-search, .q-select { min-height: 36px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--text); padding: 8px 10px; font: .72rem var(--font-sans); }
.q-search { margin-left: auto; width: min(220px, 100%); }.q-select { min-width: 150px; }
.q-list { overflow: hidden; }
.page-community .q-row{  grid-template-columns: 100px minmax(0, 1fr);    }
.q-stats { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 2px 8px; color: var(--soft); font: .65rem var(--font-sans); text-align: right; }.q-stats b { color: var(--text); font-size: .85rem; font-weight: 600; }.q-stats .ans { border: 1px solid transparent; }.q-stats .ans.ok { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }.q-stats small { text-align: left; padding-top: 3px; }
.q-title { font: 600 1rem/1.45 var(--font-sans); color: var(--text-strong); overflow-wrap: anywhere; }.q-title a:hover { color: var(--accent); }.q-excerpt { margin-top: 4px; color: var(--muted); font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.q-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; color: var(--soft); font: .68rem var(--font-sans); }.rep { color: var(--blue); }
.side-box { padding: 24px; margin-bottom: 18px; }.side-box h2 { color: var(--text-strong); font: 700 1rem/1.4 var(--font-sans); }.side-box > p:not(.eyebrow) { color: var(--muted); font-size: .86rem; margin: 9px 0 18px; }.side-box .btn { width: 100%; }.side-list, .helper-list { margin-top: 14px; }.side-list li { padding: 10px 0; border-top: 1px solid var(--border-soft); }.side-list a { display: block; color: var(--muted); font: .75rem/1.45 var(--font-sans); }.side-list a:hover { color: var(--accent); }.side-list small { color: var(--soft); font: .65rem var(--font-sans); }.helper-list li { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border-soft); color: var(--muted); font: .72rem var(--font-sans); }.helper-list b { color: var(--blue); font-weight: 600; }.coc { padding: 5px 10px; border-top: 1px dashed var(--border); }.coc ol { padding-left: 20px; color: var(--soft); font: .7rem/1.7 var(--font-sans); }.coc li::marker { color: var(--blue); }.notice { padding: 24px; color: var(--muted); }.notice .btn { margin-left: 8px; }
@media (max-width: 1000px) { .q-layout { grid-template-columns: 1fr; }.q-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.side-box { margin: 0; }.coc { grid-column: 1 / -1; } }
@media (max-width: 640px) { .q-toolbar { align-items: flex-start; flex-direction: column; }.q-filters { align-items: stretch; }.q-search { margin-left: 0; width: 100%; }
.page-community .q-row{ grid-template-columns: 68px minmax(0, 1fr);   }.q-stats { display: block; text-align: left; }.q-stats b, .q-stats small { display: inline; margin-right: 4px; }.q-stats small { margin-right: 8px; }.q-excerpt { display: none; }.q-side { display: block; }.side-box { margin-bottom: 18px; } }

/* Legacy draft rules retained below while the remaining community routes are built. */
.forum-head { padding-bottom: 52px; }
.forum-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.forum-main, .forum-sidebar { min-width: 0; }
.forum-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.forum-tabs { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--font-sans); font-size: .78rem; color: var(--soft); }
.forum-tabs a { padding: 8px 0; border-bottom: 2px solid transparent; }
.forum-tabs a:hover, .forum-tabs .tab-active { color: var(--accent); border-color: var(--accent); }
.forum-tabs span { color: var(--text); background: var(--panel-2); border-radius: 10px; padding: 2px 6px; margin-left: 3px; font-size: .65rem; }
.topic-list { overflow: hidden; }
.topic-list-head { display: grid; grid-template-columns: 1fr 76px; padding: 13px 22px; border-bottom: 1px solid var(--border); color: var(--soft); font: 700 .64rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.topic-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 76px; gap: 16px; padding: 23px 22px; border-bottom: 1px solid var(--border-soft); }
.topic-row:last-child { border-bottom: 0; }
.topic-row:hover { background: var(--panel-alpha); }
.topic-pinned { background: linear-gradient(90deg, var(--accent-soft), transparent 52%); }
.topic-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent); font: 700 .85rem var(--font-sans); }
.topic-icon-blue { color: var(--blue); border-color: var(--blue-line); }
.topic-icon-orange { color: var(--accent); border-color: var(--accent-line); font-size: .62rem; }
.topic-icon-orange { color: var(--orange); border-color: var(--orange-line); }
.topic-copy { min-width: 0; }
.topic-labels { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.label { padding: 3px 7px; border: 1px solid var(--border); color: var(--soft); font: 700 .6rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.label-yellow { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.label-blue { color: var(--blue); border-color: var(--blue-line); background: var(--blue-soft); }
.label-orange { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.label-orange { color: var(--orange); border-color: var(--orange-line); background: var(--orange-soft); }
.topic-copy h2 { font: 700 1rem/1.45 var(--font-sans); color: var(--text-strong); }
.topic-copy h2 a:hover { color: var(--accent); }
.topic-copy p { margin-top: 4px; color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-meta { display: flex; gap: 16px; margin-top: 10px; color: var(--soft); font: .68rem var(--font-sans); }
.topic-meta b { color: var(--muted); font-weight: 600; }
.topic-activity { padding-top: 9px; text-align: right; color: var(--soft); font: .65rem var(--font-sans); }
.topic-activity b, .topic-activity span, .topic-activity small { display: block; }
.topic-activity b { color: var(--text-strong); font-size: .9rem; }
.topic-activity small { margin-top: 8px; color: var(--soft); }
.sidebar-box { padding: 24px; margin-bottom: 18px; }
.sidebar-box .eyebrow { margin-bottom: 9px; }
.sidebar-box h2, .sidebar-title h2 { color: var(--text-strong); font: 700 1rem/1.4 var(--font-sans); }
.sidebar-box > p:not(.eyebrow) { color: var(--muted); font-size: .86rem; margin: 9px 0 18px; }
.sidebar-box .btn { width: 100%; }
.sidebar-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sidebar-title a { color: var(--accent); font: .66rem var(--font-sans); }
.topic-filter li { border-top: 1px solid var(--border-soft); }
.topic-filter a { display: flex; align-items: center; gap: 9px; padding: 11px 0; color: var(--muted); font: .78rem var(--font-sans); }
.topic-filter a:hover { color: var(--text-strong); }
.topic-filter b { margin-left: auto; color: var(--soft); font-weight: 400; }
.filter-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); }
.dot-blue { background: var(--blue); }.dot-orange { background: var(--accent-fill); }.dot-yellow { background: var(--accent-fill); }.dot-orange { background: var(--orange); }.dot-soft { background: var(--soft); }
.community-note { padding: 5px 10px; color: var(--muted); }
.community-note span, .community-note strong { display: block; font-family: var(--font-sans); }
.community-note span { color: var(--blue); font-size: .65rem; margin-bottom: 15px; }
.community-note strong { color: var(--text-strong); font-size: .86rem; }
.community-note p { margin-top: 7px; font-size: .8rem; line-height: 1.6; }
@media (max-width: 1000px) { .forum-layout { grid-template-columns: 1fr; }.forum-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.sidebar-box { margin: 0; }.community-note { grid-column: 1 / -1; } }
@media (max-width: 640px) { .forum-toolbar { align-items: flex-start; flex-direction: column; }.forum-tabs { gap: 14px; }.topic-list-head { grid-template-columns: 1fr 58px; padding: 12px 15px; }.topic-row { grid-template-columns: 30px minmax(0, 1fr) 58px; gap: 10px; padding: 18px 15px; }.topic-icon { width: 28px; height: 28px; font-size: .7rem; }.topic-copy h2 { font-size: .84rem; }.topic-copy p { display: none; }.topic-meta { gap: 8px; flex-wrap: wrap; font-size: .6rem; }.topic-activity { font-size: .58rem; }.topic-activity small { margin-top: 5px; }.forum-sidebar { display: block; }.sidebar-box { margin-bottom: 18px; } }
.q-stats, .q-stats b, .ct, .rep, .helper-list b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.page-community .q-row > div { min-width: 0; }
.q-meta .chip { min-height: 26px; }
.q-title a:hover, .side-list a:hover { color: var(--blue); }
.q-search, .q-select { font-size: .85rem; border-radius: var(--radius); }
.q-copy { overflow: hidden; }

/* ===== ASK PAGE (ask.html) ===== */
.page-ask .q-layout { align-items: start; }
.ask-form { padding: var(--s6); display: grid; gap: var(--s5); }
.ask-form .field { display: grid; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.ask-form label, .ask-form legend, .ask-form .field-label { font: 600 .75rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.ask-form input[type="text"], .ask-form textarea, .ask-form select { width: 100%; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-strong); padding: 10px 14px; font: .92rem/1.5 var(--font-sans); transition: border-color .15s, box-shadow .15s; }
.ask-form textarea { min-height: 120px; resize: vertical; }
.ask-form select:disabled { opacity: .5; }
.ask-form input:focus, .ask-form textarea:focus, .ask-form select:focus { outline: none; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-soft); }
.ask-form .field.bad input, .ask-form .field.bad textarea, .ask-form .field.bad select, .ask-form .field.bad .ask-editor { border-color: var(--orange-line); }
.field-hint { font-size: .8rem; color: var(--soft); }
.field-hint code, .field-hint kbd { font: .78rem var(--font-mono); color: var(--muted); }
.field-hint kbd { border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px; }
.field-error { font: 500 .8rem var(--font-sans); color: var(--orange); }
.where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dup-list { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 12px 14px; font-size: .82rem; }
.dup-list p { color: var(--soft); margin-bottom: 4px; }
.dup-list li { padding: 6px 0; border-top: 1px solid var(--border-soft); }
.dup-list a { color: var(--text); font-weight: 500; }
.dup-list a:hover { color: var(--blue); }
.dup-list small { color: var(--soft); margin-left: 8px; }
.ask-editor { background: var(--code-bg); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-height: 280px; min-width: 0; }
.ask-editor .ed-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border-soft); padding: 0 8px 0 0; }
.ask-editor .ed-tab { padding: 10px 16px; font: 500 .78rem var(--font-mono); color: var(--text); border-bottom: 2px solid var(--accent); white-space: nowrap; }
.ask-editor .ed-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ask-editor .st { font-size: .72rem; color: var(--soft); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ask-editor .st i { width: 7px; height: 7px; border-radius: 50%; background: var(--soft); flex-shrink: 0; }
.ask-editor .st[data-state="ready"] i, .ask-editor .st[data-state="running"] i { background: var(--blue); }
.ask-editor .st[data-state="error"] i { background: var(--orange); }
.ask-editor .ed-mount { flex: 1; display: flex; min-height: 220px; }
.ask-editor .ed-mount .cm-editor { flex: 1; min-width: 0; }
.ask-editor .ed-pre { flex: 1; margin: 0; padding: 12px 16px 12px 56px; font: .88rem/1.8 var(--font-mono); color: var(--code-text); white-space: pre; overflow: auto; }
.ask-editor .ed-mount textarea { flex: 1; background: var(--code-bg); color: var(--code-text); border: 0; outline: 0; resize: none; padding: 14px 16px; font: .88rem/1.8 var(--font-mono); tab-size: 4; min-width: 0; }
.ed-out { border-top: 1px solid var(--border-soft); background: var(--panel); }
.ed-out pre { margin: 0; padding: 12px 16px; font: .8rem/1.7 var(--font-mono); color: var(--text); white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; }
.ed-out pre .err { color: var(--orange); }
.ed-out-meta { padding: 6px 16px 8px; border-top: 1px solid var(--border-soft); font-size: .72rem; color: var(--soft); }
.radios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ask-form .radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; text-transform: none; letter-spacing: 0; font: .9rem/1.5 var(--font-sans); color: var(--text); }
.ask-form .radio:has(input:checked) { border-color: var(--blue-line); background: var(--blue-soft); }
.radio input { margin-top: 5px; accent-color: var(--accent); flex-shrink: 0; }
.radio b { display: block; font-weight: 600; color: var(--text-strong); }
.radio small { color: var(--muted); font-size: .8rem; }
.ask-preview { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--s5); min-width: 0; }
.ask-preview h2 { font-size: 1.15rem; margin-bottom: 10px; overflow-wrap: anywhere; }
.md { font-size: .95rem; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.md p { margin: 0 0 12px; }
.md p:last-child { margin-bottom: 0; }
.md code { font: .85em var(--font-mono); background: var(--panel-2); padding: 2px 6px; border-radius: 4px; color: var(--text-strong); }
.md pre.md-code { background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 12px; overflow-x: auto; max-height: 420px; }
.md pre.md-code code { background: none; padding: 0; font-size: .82rem; line-height: 1.7; color: var(--code-text); }
.md a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.ask-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: var(--s5); border-top: 1px solid var(--border-soft); }
.ask-note { margin-left: auto; font-size: .8rem; color: var(--soft); }
.ask-note b { color: var(--muted); font-weight: 500; }
.ask-side { position: sticky; top: 88px; }
.howto { padding-left: 20px; color: var(--muted); font-size: .88rem; line-height: 1.7; margin-top: 12px; }
.howto li::marker { color: var(--blue); font-weight: 600; }
.tmpl { margin-top: 12px; padding: 12px 14px; background: var(--code-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); font: .75rem/1.8 var(--font-mono); color: var(--code-text); white-space: pre; overflow-x: auto; }
.ask-gate { text-align: center; padding: var(--s7) var(--s5); }
.ask-gate h2 { font-size: 1.35rem; margin-bottom: 8px; }
.ask-gate p:not(.eyebrow) { color: var(--muted); margin-bottom: var(--s5); }
.ask-gate .btn-row { justify-content: center; }
.page-ask .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--panel); border: 1px solid var(--border-strong); color: var(--text); font-size: .85rem; padding: 10px 16px; border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 200; max-width: calc(100vw - 48px); }
.page-ask .toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.page-ask .toast a { color: var(--blue); text-decoration: underline; }
@media (max-width: 1000px) {
  .ask-side { position: static; }
  .page-ask .q-side .side-box:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ask-form { padding: var(--s4); gap: var(--s4); }
  .where, .radios { grid-template-columns: 1fr; }
  .ask-note { margin-left: 0; width: 100%; }
  .ask-editor .st span { display: none; }
  .ask-editor .ed-mount { min-height: 180px; }
}
.q-meta .t-python, button.q-tag.t-python[aria-pressed="true"] { background: var(--blue-deep); color: var(--on-blue); border-color: var(--blue-deep); }