.scal {
--scal-low: #2e7d4f; --scal-low-bg: #eaf5ee; --scal-low-line: #bfe0cb;
--scal-mod: #b8791a; --scal-mod-bg: #fbf1df; --scal-mod-line: #ead4a6;
--scal-high: #b3352c; --scal-high-bg: #f8ebe9; --scal-high-line: #eec4bf;
margin-top: 14px;
padding: 16px 18px;
border: 1px solid #e6e6e6;
border-radius: 14px;
background: #faf9f6;
color: #111111;
}
.scal-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
gap: 18px;
align-items: start;
}
@media (max-width: 680px) {
.scal-grid { grid-template-columns: 1fr; }
}
.scal-criteria { display: flex; flex-direction: column; gap: 8px; }
.scal-crit {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
border: 1.5px solid #d6d6d6;
background: #fff;
border-radius: 12px;
padding: 10px 14px;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease;
color: #111111;
}
@media (hover: hover) and (pointer: fine) {
.scal-crit:hover { border-color: #9a9a9a; }
}
.scal-crit.is-on { border-color: #0a6cff; background: #eef5ff; }
.scal-crit:focus-visible { outline: 2px solid #0a6cff; outline-offset: 2px; }
.scal-box {
flex: 0 0 auto;
width: 20px; height: 20px;
border: 2px solid #c4c4c4;
border-radius: 6px;
position: relative;
background: #fff;
}
.scal-crit.is-on .scal-box { border-color: #0a6cff; background: #0a6cff; }
.scal-crit.is-on .scal-box::after {
content: "";
position: absolute; left: 5px; top: 1px;
width: 6px; height: 11px;
border: solid #fff; border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.scal-crit-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.scal-crit-text b { font-size: 14px; font-weight: 700; }
.scal-crit-detail { font-size: 12px; color: #667085; }
.scal-plus { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #98a2b3; letter-spacing: 0.02em; }
.scal-crit.is-on .scal-plus { color: #0a6cff; }
.scal-side { display: flex; flex-direction: column; gap: 12px; }
.scal-ring {
align-self: center;
width: 96px; height: 96px;
border-radius: 50%;
border: 8px solid #d5d5d5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
transition: border-color 0.2s ease;
}
.scal-ring.scal-low { border-color: var(--scal-low); }
.scal-ring.scal-mod { border-color: var(--scal-mod); }
.scal-ring.scal-high { border-color: var(--scal-high); }
.scal-ring-n { font-size: 30px; font-weight: 800; line-height: 1; color: #111111; }
.scal-ring-d { font-size: 12px; color: #667085; margin-top: 2px; }
.scal-panel { border: 1px solid; border-radius: 12px; padding: 14px 16px; }
.scal-panel.scal-low { background: var(--scal-low-bg); border-color: var(--scal-low-line); }
.scal-panel.scal-mod { background: var(--scal-mod-bg); border-color: var(--scal-mod-line); }
.scal-panel.scal-high { background: var(--scal-high-bg); border-color: var(--scal-high-line); }
.scal-panel-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.scal-tag {
font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
color: #fff; border-radius: 6px; padding: 3px 9px;
}
.scal-low .scal-tag { background: var(--scal-low); }
.scal-mod .scal-tag { background: var(--scal-mod); }
.scal-high .scal-tag { background: var(--scal-high); }
.scal-heading { font-size: 15px; font-weight: 800; color: #111111; }
.scal-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #111111; }
.scal-chip-label { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #667085; margin-bottom: 6px; }
.scal-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.scal-chip.cav-term {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
color: #111111;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.18);
border-bottom: 1px solid rgba(15, 23, 42, 0.18);
border-radius: 999px;
padding: 6px 13px;
cursor: help;
}
.scal-chip.cav-term[data-scal-topic] { cursor: pointer; }
.scal-chip.cav-term:focus-visible { border-color: #0a6cff; background: #f5f9ff; }
@media (hover: hover) and (pointer: fine) {
.scal-chip.cav-term:hover { border-color: #0a6cff; background: #f5f9ff; }
}
.scal-chip-go { color: #0a6cff; font-weight: 800; }
.scal-regimen-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #333; }
.scal-footer { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed #ddd; font-size: 12.5px; color: #333; }