/* 家长问答真页面 · 内容区与页内交互件样式（SSR 骨架见 backend/app/routers/seo.py _qa_page）。

   壳层（.app/.topbar/.side/.tabbar/.content/.chip 等）直接复用 web/static/css/main.css——
   问答页与主站 SPA 同壳同源，视觉零漂移；本文件只定义问答自己的内容排版
   （列表卡/详情/回答/分页）与 qa_page.js 交互件（按钮/表单/弹层/提示），
   颜色一律走 main.css :root 变量。 */

/* ---- 列表页（toolbar 结构复用主站 .crumb-row/.crumb-count，h1 套同款观感） ---- */
.qa-h1 { font-size: 18px; font-weight: 900; margin: 0; color: var(--ink); }
.qa-card { background: #fff; border: 1px solid var(--line2); border-radius: 12px; padding: 6px 16px; }
.qa-list { list-style: none; margin: 0; padding: 0; }
/* 卡片行：头像圈 | 标题+悬赏徽标 / 摘要 / 图标统计 | 配图缩略（结构见 seo.py _qa_row） */
.qa-row { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line);
          align-items: flex-start; }
.qa-list li:first-child .qa-row { border-top: 0; }
.qa-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft);
          color: var(--accent); font-size: 15px; font-weight: 800;
          display: inline-flex; align-items: center; justify-content: center; }
.qa-ava.sm { width: 28px; height: 28px; font-size: 12.5px; }
.qa-row-main { flex: 1; min-width: 0; }
.qa-row-top { display: flex; align-items: flex-start; gap: 8px; }
.qa-row-top h3 { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.5; margin: 0; }
.qa-row:hover h3 { color: var(--accent); }
.qa-row p { color: var(--ink3); font-size: 13px; margin: 4px 0 0; line-height: 1.6; }
.qa-bounty { flex: none; background: var(--gold-bg); color: #8a5a17; border-radius: 6px;
             padding: 1px 8px; font-size: 11.5px; font-style: normal; font-weight: 700;
             margin-top: 2px; white-space: nowrap; }
.qa-stats { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
            color: var(--muted); font-size: 12px; margin-top: 6px; }
.qa-stats .ico { margin-right: 3px; opacity: .75; }
.qa-stats em { font-style: normal; color: var(--faint); margin-left: auto; white-space: nowrap; }
.qa-thumb { flex: none; width: 88px; height: 66px; object-fit: cover; border-radius: 8px;
            border: 1px solid var(--line); background: var(--bg-soft); }
.tagc { display: inline-block; background: var(--accent-soft); color: var(--accent);
        border-radius: 4px; padding: 0 6px; font-size: 11px; margin-left: 6px;
        vertical-align: 1px; font-style: normal; }
.st-resolved { background: var(--green-bg); color: var(--green); }
.st-expired { background: var(--bg-soft); color: var(--muted); }
.qa-intro { color: var(--ink3); font-size: 13px; line-height: 1.7; margin: 12px 2px 0; }
.qa-empty { padding: 22px 0; }

/* 侧栏城市 chip 的题数角标 */
.side .chip em { font-style: normal; color: var(--faint); margin-left: 3px; font-size: 10.5px; }

/* ---- 面包屑 / 详情页 ---- */
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.crumbs i { font-style: normal; margin: 0 6px; color: var(--line4); }
.qa-title { font-size: 20px; font-weight: 900; line-height: 1.45; margin: 0 0 10px; }
.qa-asker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            font-size: 13px; color: var(--ink3); margin-bottom: 10px; }
.qa-asker b { color: var(--ink); font-size: 13.5px; }
.qa-when { color: var(--faint); font-size: 12px; }
/* 正文列 + 右侧信息栏双列（桌面 ~800px 阅读宽度；rail 随滚动跟随） */
.qa-two { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.qa-rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; }
.qa-rail .qa-card { padding: 6px 14px 10px; }
.qa-info-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink3);
               padding: 8px 2px; border-top: 1px dashed var(--line2); }
.qa-info-row:first-of-type { border-top: 0; }
.qa-info-row .ico { color: var(--muted); }
.qa-info-row b { margin-left: auto; color: var(--ink); font-weight: 700; }
.qa-info-row.gold, .qa-info-row.gold b { color: #8a5a17; }
.qa-info-row.gold .ico { color: var(--gold); }
.qa-rels .qa-h2 { margin-top: 10px; }
.qa-rel-q { display: flex; gap: 8px; padding: 8px 2px; border-top: 1px solid var(--line);
            font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.qa-rel-q:first-of-type { border-top: 0; }
.qa-rel-q span { flex: 1; min-width: 0; }
.qa-rel-q em { flex: none; font-style: normal; color: var(--faint); font-size: 12px; margin-top: 2px; }
.qa-rel-q:hover span { color: var(--accent); }
.qa-art { font-size: 14px; line-height: 1.9; white-space: pre-wrap; word-break: break-word; color: var(--ink2); }
/* 配图统一 4:3 裁切等高（原图宽高比各异，裸排会阶梯错落）；flex+gap 消 inline 基线错位 */
.qa-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.qa-imgs img { width: 160px; aspect-ratio: 4/3; object-fit: cover;
               border-radius: 10px; border: 1px solid var(--line); }
.note { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 10px 0 0; }
.note a { font-weight: 600; }
.qa-rel { display: block; }
.qa-rel h2, h2.qa-h2 { font-size: 15px; font-weight: 800; margin: 18px 0 10px; }
.qa-rel p { font-size: 14px; margin: 0; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 16px 0 4px; }
.pager a { background: #fff; border: 1px solid var(--line2); border-radius: 999px;
           padding: 5px 18px; font-size: 14px; color: var(--ink2); }
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .pg { color: var(--muted); font-size: 13px; }

/* ---- 回答卡 ---- */
.ans { background: #fff; border: 1px solid var(--line2); border-radius: 12px;
       padding: 12px 14px; margin-bottom: 12px; }
.ans.adopted { border-color: var(--green); background: #f7fcf9; box-shadow: inset 0 3px 0 var(--green); }
.ans-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
         color: var(--muted); margin-bottom: 6px; flex-wrap: wrap; }
.ans-h .qa-ava { margin-right: -2px; }
.ans-h b { color: var(--ink); font-size: 13.5px; }
.ans-time { color: var(--faint); }
/* 「我来回答」空区：虚线浅底与已有回答卡区分（ID 锚点不变，qa_page.js 依赖） */
.qa-answer-zone { border: 1.5px dashed var(--line3); background: var(--bg-soft2); }
.ans-ok { background: var(--green); color: #fff; border-radius: 4px; font-size: 11px; padding: 1px 6px; }
.ans p { font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* ---- 按钮 / 表单 / 弹层 / 提示（qa_page.js 交互件，SSR 无 JS 时不可见或不响应） ---- */
.qbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff;
        font-size: 14px; font-weight: 600; border: none; border-radius: 10px;
        padding: 9px 20px; cursor: pointer; text-decoration: none; font-family: inherit; }
.qbtn:hover { background: var(--accent-deep); color: #fff; }
.qbtn.ghost { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.qbtn.ghost:hover { background: var(--accent-soft); }
.qbtn:disabled { opacity: .55; cursor: default; }
.qab { width: 100%; box-sizing: border-box; border: 1px solid var(--line2); border-radius: 10px;
       padding: 10px 12px; font: 14px/1.7 inherit; color: var(--ink); background: var(--bg-soft2);
       resize: vertical; min-height: 96px; }
.qab:focus { outline: none; border-color: var(--accent); background: #fff; }
.qform label { display: block; font-size: 13px; color: var(--ink3); margin: 10px 0 4px; }
.qform input[type=text], .qform input[type=number], .qform select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line2); border-radius: 10px;
  padding: 9px 11px; font: 13.5px inherit; color: var(--ink); background: var(--bg-soft2); }
.qform input:focus, .qform select:focus { outline: none; border-color: var(--accent); background: #fff; }
.qhint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.qerr { color: #d0342c; font-size: 13px; margin-top: 8px; min-height: 18px; }
.qmask { position: fixed; inset: 0; background: rgba(34, 30, 26, .45); display: flex;
         align-items: flex-end; justify-content: center; z-index: 60; }   /* 盖过 Tabbar(45)/遮罩(50) */
.qmodal { background: #fff; border-radius: 16px 16px 0 0; width: 100%; max-width: 560px;
          max-height: 88vh; overflow-y: auto; padding: 16px 18px 22px; }
.qmodal h3 { font-size: 16px; margin: 0 0 4px; }
@media (min-width: 769px) {           /* 桌面居中卡，移动保持底部抽屉（对齐主站弹层习惯） */
  .qmask { align-items: center; padding: 20px; }
  .qmodal { border-radius: 16px; }
}
.qtoast { position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom));
          transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 13.5px;
          border-radius: 999px; padding: 8px 20px; z-index: 70; max-width: 86vw;
          transition: opacity .25s ease; }
.qtoast.err { background: #d0342c; }
.qhide { display: none; }

/* ---- 顶栏/Tabbar 链接化按钮补齐（主站这些是 button/SPA 交互，SSR 用 a 降级） ---- */
a.avatar, a.nav-link, a.nav-apk, a.btn-upload { text-decoration: none; }
a.nav-apk { display: inline-flex; align-items: center; gap: 5px; }

/* 页脚（主站 .icp-foot 只定义了 a 的样式，正文色在此补齐） */
.qa-foot { color: var(--muted); font-size: 12px; }

/* 右栏沉底：主站 1180px 起侧栏隐藏、内容占满，双列并排太挤 → 单列，rail 解除 sticky
   改横向卡片排布（窄屏自动换行堆叠） */
@media (max-width: 1180px) {
  .qa-two { grid-template-columns: 1fr; }
  .qa-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .qa-rail > .qa-card { flex: 1 1 280px; }
}

/* 移动端：行内缩小、昵称日期随统计行自然换行；详情配图 1 张全宽 / 2 张半宽 / 3 张三列 */
@media (max-width: 768px) {
  .qa-card { padding: 4px 12px; }
  .qa-title { font-size: 18px; }
  .qa-ava { width: 30px; height: 30px; font-size: 13px; }
  .qa-thumb { width: 72px; height: 56px; }
  .qa-stats { gap: 3px 10px; }
  .qa-stats em { margin-left: 0; }
  .qa-imgs img { width: calc((100% - 16px) / 3); }
  .qa-imgs img:only-child { width: 100%; max-width: 380px; aspect-ratio: auto; }
  .qa-imgs img:first-child:nth-last-child(2),
  .qa-imgs img:first-child:nth-last-child(2) + img { width: calc((100% - 8px) / 2); }
}