/* Epworth：八张场景卡片 + 底部结论条，与 PHQ/GAD 的清单式布局区分 */

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

.ep-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ep-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;
}
.ep-jump a:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); background: var(--dk-accent-soft); }

#epLevel, #epOsa, #epHow, #epFaq { scroll-margin-top: 84px; }

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

.ep-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; padding: 14px 16px 4px;
}

.ep-card {
    padding: 11px 12px 12px;
    border: 1px solid var(--dk-line);
    border-radius: 11px;
    background: var(--dk-surface);
    transition: border-color .16s, background .16s;
}
.ep-card:has(.ep-opt[aria-checked="true"]) {
    border-color: var(--dk-accent-line);
    background: color-mix(in srgb, var(--dk-accent-soft) 34%, var(--dk-surface));
}

.ep-card-top { display: flex; align-items: flex-start; gap: 7px; }
.ep-ico { font-size: 15px; line-height: 1.2; }
.ep-card-top p { margin: 0; font-size: 12.6px; line-height: 1.5; color: var(--dk-ink); flex: 1; min-width: 0; }
.ep-pick {
    flex: none; width: 20px; height: 20px;
    display: grid; place-items: center; border-radius: 6px;
    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;
}
.ep-pick.is-on { background: var(--dk-accent); color: #fff; }

.ep-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 9px; }
.ep-opt {
    display: grid; gap: 1px; justify-items: center;
    padding: 5px 2px 6px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--dk-line); background: var(--dk-surface-2);
    color: var(--dk-ink-2); font-size: 10.5px; line-height: 1.25;
    transition: border-color .14s, background .14s, color .14s;
}
.ep-opt b { font-family: var(--dk-mono); font-size: 11px; font-weight: 700; color: var(--dk-muted); }
.ep-opt:hover { border-color: var(--dk-accent-line); color: var(--dk-accent); }
.ep-opt[aria-checked="true"] {
    border-color: var(--dk-accent); background: var(--dk-accent-soft);
    color: var(--dk-accent); font-weight: 700;
}
.ep-opt[aria-checked="true"] b { color: var(--dk-accent); }
.ep-opt:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 2px; }

/* 结论条 */
.ep-summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center;
    margin-top: 12px; padding: 14px 16px;
    border-top: 1px solid var(--dk-line);
    background: linear-gradient(180deg, var(--dk-surface-2), var(--dk-surface));
}
.ep-score { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ep-score b {
    font-family: var(--cl-serif); font-size: 38px; line-height: 1;
    color: var(--dk-accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ep-score span { font-size: 11.5px; color: var(--dk-muted); }
.ep-vt { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: var(--dk-ink); }
.ep-vd { margin: 0; font-size: 12.5px; line-height: 1.62; color: var(--dk-ink-2); }

.ep-bands { grid-column: 1 / -1; display: flex; gap: 3px; }
.ep-bands i { flex: 1; height: 6px; border-radius: 99px; background: var(--dk-surface-3); transition: background .18s; }
.ep-bands i.on.b1 { background: #22c55e; }
.ep-bands i.on.b2 { background: #eab308; }
.ep-bands i.on.b3 { background: #f97316; }
.ep-bands i.on.b4 { background: #dc2626; }

.ep-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 14px; }
.ep-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ep-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;
}
.ep-preset:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); }

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

:root[data-theme="dark"] .ep-score b,
:root[data-theme="dark"] .ep-opt[aria-checked="true"],
:root[data-theme="dark"] .ep-jump a:hover,
:root[data-theme="dark"] .ep-preset:hover { color: #93c5fd; }

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

@media (max-width: 700px) {
    .ep-grid { grid-template-columns: 1fr; padding: 12px 14px 2px; }
    .ep-opt { font-size: 11px; }
}

@media (max-width: 560px) {
    .ep-score b { font-size: 32px; }
    .ep-presets { margin-left: 0; }
}

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