/* Braden：六维刻度选择 + 横向风险刻度尺，与 Caprini 清单、CURB 账本区分 */

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

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

#brScale, #brLevel, #brTrap, #brFaq { scroll-margin-top: 84px; }

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

/* 维度行 */
.br-dims { display: flex; flex-direction: column; }
.br-dim { padding: 12px 18px 13px; border-top: 1px solid var(--dk-line); }
.br-dim:first-child { border-top: 0; }
.br-dim:has(.br-opt[aria-checked="true"]) { background: color-mix(in srgb, var(--dk-accent-soft) 40%, transparent); }

.br-dim-head { display: flex; align-items: flex-start; gap: 9px; }
.br-no {
    font-family: var(--cl-serif); font-size: 12px; color: var(--dk-muted);
    padding-top: 2px; letter-spacing: .04em;
}
.br-t { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--dk-ink); line-height: 1.45; }
.br-h { margin: 2px 0 0; font-size: 11.5px; color: var(--dk-muted); line-height: 1.5; }
.br-val {
    margin-left: auto; flex: none;
    min-width: 26px; height: 22px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--dk-mono); font-size: 12px; font-weight: 700;
    color: var(--dk-muted); background: var(--dk-surface-3);
    border-radius: 6px;
}
.br-val.is-on { color: #fff; background: var(--dk-accent); }

.br-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.br-opt {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--dk-line); background: var(--dk-surface);
    color: var(--dk-ink-2); font-size: 12px; text-align: left;
    transition: border-color .14s, background .14s, color .14s;
}
.br-opt b {
    flex: none; width: 17px; height: 17px; display: grid; place-items: center;
    font-family: var(--dk-mono); font-size: 11px; font-weight: 700;
    color: var(--dk-muted); background: var(--dk-surface-3); border-radius: 5px;
}
.br-opt span { min-width: 0; line-height: 1.35; }
.br-opt:hover { border-color: var(--dk-accent-line); color: var(--dk-accent); }
.br-opt[aria-checked="true"] {
    border-color: var(--dk-accent); background: var(--dk-accent-soft);
    color: var(--dk-accent); font-weight: 700;
}
.br-opt[aria-checked="true"] b { background: var(--dk-accent); color: #fff; }
.br-opt:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 2px; }

/* 刻度尺 */
.br-gauge { position: relative; padding: 16px 18px 6px; border-top: 1px solid var(--dk-line); }
.br-zones { display: flex; gap: 2px; height: 10px; }
.br-zones i { border-radius: 3px; transition: opacity .18s; }
.z-critical { background: #dc2626; }
.z-high { background: #f97316; }
.z-mid { background: #eab308; }
.z-low { background: #38bdf8; }
.z-none { background: #10b981; }

.br-mark {
    position: absolute; top: 9px; width: 3px; height: 24px;
    left: 18px; border-radius: 2px;
    background: var(--dk-ink); box-shadow: 0 0 0 2px var(--dk-surface);
    transform: translateX(-1px);
    opacity: 0; transition: left .22s ease, opacity .18s;
}
.br-mark.is-on { opacity: 1; }

.br-ticks {
    display: flex; justify-content: space-between; margin: 5px 0 0;
    font-family: var(--dk-mono); font-size: 10.5px; color: var(--dk-muted);
}
.br-ticks span { transform: translateX(-2px); }
.br-ticks span:last-child { transform: translateX(2px); }

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

.br-turn {
    flex: none; display: grid; gap: 2px; justify-items: center;
    padding: 7px 11px; border-radius: 10px;
    background: var(--dk-accent-soft); border: 1px solid var(--dk-accent-line);
}
.br-turn-k { font-size: 10.5px; color: var(--dk-muted); letter-spacing: .02em; }
.br-turn b { font-family: var(--dk-mono); font-size: 13px; color: var(--dk-accent); }

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

/* 分级卡 */
.br-level-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.br-level {
    padding: 16px 16px 18px;
    background: var(--dk-surface);
    border: 1px solid var(--dk-line);
    border-top: 3px solid var(--dk-line-strong);
    border-radius: var(--dk-r);
    box-shadow: var(--dk-shadow-1);
}
.br-level-k { margin: 0 0 6px; font-family: var(--dk-mono); font-size: 11.5px; color: var(--dk-muted); }
.br-level h3 { font-family: var(--cl-serif); font-size: 16px; margin: 0 0 8px; }
.br-level p:last-child { margin: 0; font-size: 12.8px; line-height: 1.78; color: var(--dk-ink-2); }
.is-critical { border-top-color: #dc2626; }
.is-high { border-top-color: #f97316; }
.is-mid { border-top-color: #eab308; }
.is-low { border-top-color: #38bdf8; }
.is-none { border-top-color: #10b981; }

/* 深色模式下强调色提亮，避免深青色压在深底上 */
:root[data-theme="dark"] .br-score b,
:root[data-theme="dark"] .br-turn b,
:root[data-theme="dark"] .br-opt[aria-checked="true"],
:root[data-theme="dark"] .br-jump a:hover,
:root[data-theme="dark"] .br-preset:hover { color: #67e8f9; }
:root[data-theme="dark"] .br-val.is-on { background: #0e7490; color: #fff; }

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

@media (max-width: 1180px) {
    .br-level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .br-tool { position: static; }
    .br-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .br-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-result { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
    .br-turn { grid-column: 1 / -1; justify-items: start; }
    .br-score b { font-size: 34px; }
    .br-presets { margin-left: 0; }
    .br-level-grid { grid-template-columns: 1fr; }
}