/* GAD-7：左侧七步阶梯 + 右侧竖向温度计，和 PHQ-9 的横向进度条区分 */

.ga-copy { min-width: 0; }
.ga-hl { color: var(--dk-accent); }

.ga-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ga-jump a {
    padding: 6px 12px; font-size: 12.5px; color: var(--dk-ink-2); text-decoration: none;
    border: 1px solid var(--dk-line); border-radius: 99px; background: var(--dk-surface);
    transition: color .14s, border-color .14s, background .14s;
}
.ga-jump a:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); background: var(--dk-accent-soft); }

#gaLevel, #gaRelax, #gaDiff, #gaFaq { scroll-margin-top: 84px; }

.ga-tool { position: sticky; top: 82px; }

.ga-body { display: grid; grid-template-columns: minmax(0, 1fr) 104px; }

/* 七步阶梯 */
.ga-steps { min-width: 0; }
.ga-step {
    padding: 11px 14px 12px 16px;
    border-top: 1px solid var(--dk-line);
    position: relative;
    transition: background .16s;
}
.ga-step:first-child { border-top: 0; }
.ga-step:has(.ga-opt[aria-checked="true"]) { background: color-mix(in srgb, var(--dk-accent-soft) 42%, transparent); }

.ga-step-head { display: flex; align-items: flex-start; gap: 8px; }
.ga-no {
    flex: none; width: 20px; height: 20px; margin-top: 1px;
    display: grid; place-items: center; border-radius: 50%;
    font-family: var(--dk-mono); font-size: 11px; font-weight: 700;
    color: var(--dk-muted); background: var(--dk-surface-3);
    transition: background .16s, color .16s;
}
.ga-step:has(.ga-opt[aria-checked="true"]) .ga-no { background: var(--dk-accent); color: #fff; }
.ga-step-head p { margin: 0; font-size: 13.2px; line-height: 1.55; color: var(--dk-ink); }

.ga-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 8px; padding-left: 28px; }
.ga-opt {
    padding: 5px 2px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--dk-line); background: var(--dk-surface);
    color: var(--dk-ink-2); font-size: 11.5px; line-height: 1.3;
    transition: border-color .14s, background .14s, color .14s;
}
.ga-opt:hover { border-color: var(--dk-accent-line); color: var(--dk-accent); }
.ga-opt[aria-checked="true"] {
    border-color: var(--dk-accent); background: var(--dk-accent-soft);
    color: var(--dk-accent); font-weight: 700;
}
.ga-opt:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 2px; }

/* 竖向温度计 */
.ga-meter {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 14px 8px 12px;
    border-left: 1px solid var(--dk-line);
    background: var(--dk-surface-2);
}
.ga-track {
    position: relative; width: 12px; flex: 1; min-height: 170px;
    border-radius: 99px; background: var(--dk-surface-3);
    overflow: hidden;
}
.ga-fill {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0;
    background: linear-gradient(0deg, #22c55e 0%, #84cc16 28%, #f59e0b 55%, #f97316 75%, #dc2626 100%);
    border-radius: 99px;
    transition: height .26s ease;
}
.ga-pin {
    position: absolute; left: 50%; bottom: 0; width: 24px; height: 3px;
    border-radius: 2px; background: var(--dk-ink);
    transform: translate(-50%, 50%);
    box-shadow: 0 0 0 2px var(--dk-surface-2);
    opacity: 0; transition: bottom .26s ease, opacity .18s;
}
.ga-pin.on { opacity: 1; }

.ga-meter-num { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.ga-meter-num b {
    font-family: var(--cl-serif); font-size: 22px; line-height: 1;
    color: var(--dk-accent); font-variant-numeric: tabular-nums;
}
.ga-meter-num span { font-size: 10.5px; color: var(--dk-muted); }
.ga-meter-lv { margin: 0; font-size: 10.5px; color: var(--dk-muted); text-align: center; }

/* 结果条 */
.ga-result {
    padding: 13px 16px 14px;
    border-top: 1px solid var(--dk-line);
    background: linear-gradient(180deg, var(--dk-surface-2), var(--dk-surface));
}
.ga-vt { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: var(--dk-ink); }
.ga-vd { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--dk-ink-2); }

.ga-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 14px; }
.ga-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ga-preset {
    border: 1px dashed var(--dk-line-strong); background: transparent;
    color: var(--dk-muted); font-size: 11.5px; padding: 4px 9px; border-radius: 99px; cursor: pointer;
    transition: color .14s, border-color .14s;
}
.ga-preset:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); }

.ga-rel { display: block; }
.ga-rel h3 { font-size: 15.5px; margin-bottom: 6px; }
.ga-rel p { margin: 0; font-size: 13px; color: var(--dk-muted); line-height: 1.65; }

:root[data-theme="dark"] .ga-meter-num b,
:root[data-theme="dark"] .ga-opt[aria-checked="true"],
:root[data-theme="dark"] .ga-jump a:hover,
:root[data-theme="dark"] .ga-preset:hover { color: #fcd34d; }

@media (max-width: 960px) { .ga-tool { position: static; } }

@media (max-width: 620px) {
    .ga-body { grid-template-columns: 1fr; }
    .ga-meter { display: none; }
    .ga-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; }
    .ga-presets { margin-left: 0; }
}

/* 窄屏下标题与进度计数不互相挤压 */
.ga-tool .dk-tool-head h2 { min-width: 0; }
.ga-tool .dk-tool-head > span { flex: none; white-space: nowrap; }