/* ==========================================================================
   问答专区页 /Question.aspx 专属样式
   --------------------------------------------------------------------------
   依赖：/css/tokens.css（色阶/字号/间距/圆角/阴影/动效）
        /css/master.css（--shell-max、--shell-pad 等外壳 token）
   规则：
   1. 全部选择器挂在 .tq-shell 之下，与 master.css / searchlist.css 同层特异度。
   2. Base.master 的 .container 是无内边距的全宽块（见 master.css 文件头铁律），
      版心由本页自己居中。
   3. 只服务本页。原内联 <style> 里的 `a, a:visited{...}`、`.iw`、`#context` 等
      全局裸标签选择器已随本次改版删除，不再影响主框架链接配色。
   4. .Js_PageBox 会被 jQuery .hide() 操作，故不设 display:flex。
   ========================================================================== */

/* 问答页当前位置对齐导航 LOGO。 */
.tq-shell .crumb {
    margin-right: auto;
    margin-left: auto;
    padding-left: calc(var(--shell-pad) + 14px);
}

.tq-shell .tq-question {
    width: calc(100% - 2 * var(--shell-pad));
    max-width: var(--shell-max);
    margin: var(--sp-6) auto var(--sp-12);
    padding: 0;
}

/* ---------- 1. 页头 ---------- */
.tq-shell .q-head {
    padding: var(--sp-8) var(--sp-8) var(--sp-6);
    border: 1px solid hsl(var(--line));
    border-radius: var(--r-lg);
    background:
        radial-gradient(520px 200px at 12% 0%, hsl(var(--brand-400) / .14), transparent 70%),
        linear-gradient(135deg, hsl(var(--surface)) 0%, hsl(var(--surface-muted)) 100%);
}

.tq-shell .q-head-tit {
    margin: 0;
    font-size: var(--fs-26);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1px;
    color: hsl(var(--ink-900));
}

.tq-shell .q-head-sub {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-13);
    line-height: 1.7;
    color: hsl(var(--ink-500));
}

.tq-shell .q-head-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.tq-shell .q-head-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 5px var(--sp-4);
    border: 1px solid hsl(var(--brand-200));
    border-radius: var(--r-full);
    background: hsl(var(--surface));
    font-size: var(--fs-13);
    color: hsl(var(--brand-700));
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

    .tq-shell .q-head-link:hover {
        border-color: hsl(var(--brand-400));
        background: hsl(var(--brand-50));
        color: hsl(var(--brand-800));
    }

/* ---------- 2. 问答列表 ---------- */
.tq-shell .q-list-box {
    position: relative;
    margin-top: var(--sp-5);
    min-height: 420px;
    padding: var(--sp-2) var(--sp-6);
    border: 1px solid hsl(var(--line));
    border-radius: var(--r-lg);
    background: hsl(var(--surface));
}

.tq-shell .q-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tq-shell .q-item {
    padding: var(--sp-5) 0;
    border-bottom: 1px solid hsl(var(--line-soft));
}

    .tq-shell .q-item:last-child {
        border-bottom: 0;
    }

.tq-shell .q-item-title {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin: 0;
    font-size: var(--fs-16);
    font-weight: 600;
    line-height: 1.6;
    color: hsl(var(--ink-900));
}

    .tq-shell .q-item-title::before {
        content: "问";
        flex: none;
        width: 22px;
        height: 22px;
        border-radius: var(--r-sm);
        background: hsl(var(--brand-600));
        font-size: var(--fs-12);
        font-weight: 600;
        line-height: 22px;
        text-align: center;
        color: hsl(var(--surface));
        transform: translateY(3px);
    }

.tq-shell .q-item-body {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.tq-shell .q-item-tag {
    flex: none;
    width: 22px;
    height: 22px;
    border: 1px solid hsl(var(--brand-200));
    border-radius: var(--r-sm);
    background: hsl(var(--brand-50));
    font-size: var(--fs-12);
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    color: hsl(var(--brand-700));
    transform: translateY(3px);
}

.tq-shell .dat-answer {
    margin: 0;
    font-size: var(--fs-14);
    line-height: 1.9;
    color: hsl(var(--ink-600));
}

/* ---------- 3. 空态 ---------- */
.tq-shell .q-empty {
    padding: var(--sp-16) 0;
    font-size: var(--fs-14);
    text-align: center;
    color: hsl(var(--ink-400));
}

/* ---------- 4. 分页 ---------- */
.tq-shell .q-page {
    margin-top: var(--sp-5);
    padding: var(--sp-4) 0;
    border: 1px solid hsl(var(--line));
    border-radius: var(--r-lg);
    background: hsl(var(--surface));
    text-align: center;
}

    .tq-shell .q-page .Js_page a,
    .tq-shell .q-page .Js_page span {
        display: inline-block;
        min-width: 30px;
        height: 30px;
        margin: 0 var(--sp-1);
        padding: 0 var(--sp-2);
        border: 1px solid hsl(var(--line));
        border-radius: var(--r-sm);
        background: hsl(var(--surface));
        font-size: var(--fs-13);
        line-height: 28px;
        text-align: center;
        color: hsl(var(--ink-600));
        cursor: pointer;
        transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }

        .tq-shell .q-page .Js_page a:hover {
            border-color: hsl(var(--brand-400));
            color: hsl(var(--brand-600));
        }

        .tq-shell .q-page .Js_page a.active {
            border-color: hsl(var(--brand-600));
            background: hsl(var(--brand-600));
            color: hsl(var(--surface));
        }

/* ---------- 5. 底部说明 ---------- */
.tq-shell .q-note {
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: hsl(var(--surface-muted));
    font-size: var(--fs-12);
    line-height: 1.8;
    color: hsl(var(--ink-500));
}

/* ---------- 6. 断点 ---------- */
@media screen and (max-width: 760px) {
    .tq-shell .tq-question {
        margin-top: var(--sp-4);
    }

    .tq-shell .q-head {
        padding: var(--sp-5) var(--sp-4);
    }

    .tq-shell .q-head-tit {
        font-size: var(--fs-20);
    }

    .tq-shell .q-list-box {
        padding: var(--sp-1) var(--sp-4);
    }

    .tq-shell .q-item-title {
        font-size: var(--fs-15);
    }
}