/* 溶解度曲线特有样式（通用样式见 ../shared/base.css） */

#sol { position: absolute; inset: 0; touch-action: none; }
[hidden] { display: none !important; }

#panel h2 .h2s { font-size: 11px; color: var(--muted); font-weight: normal; margin-left: 6px; letter-spacing: 0; }

/* 读数 */
.readout .big { font-size: 18px; }
.readout .big small { font-size: 13px; color: var(--muted); font-weight: normal; }
.kind { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
.readout dd { font-variant-numeric: tabular-nums; }
.readout dt { white-space: nowrap; }
#rMsg { color: var(--accent); white-space: pre-line; }
#rMsg:empty { display: none; }
#rFact { margin-top: 8px; }

/* 物质 */
.subs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.subs button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-top: 2px solid var(--c); border-radius: 8px; padding: 5px 0 4px; cursor: pointer; line-height: 1.25; }
.subs button b { display: block; font-size: 14px; }
.subs button small { font-size: 11px; color: var(--muted); }
.subs button:hover { border-color: var(--c); }
.subs button.on { background: rgba(255,201,74,.14); border-color: var(--accent); border-top-color: var(--c); }

/* 滑块与按钮 */
.slider { grid-template-columns: 76px 1fr 64px; }
.slider span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions, .exps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.actions button, .exps button, #qNew { font: inherit; font-size: 12px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 2px; cursor: pointer; }
.actions button:hover, .exps button:hover, #qNew:hover { border-color: var(--accent); }
.exps button { font-size: 12.5px; text-align: left; padding: 6px 8px; line-height: 1.35; }
.exps button small { display: block; color: var(--muted); font-size: 11px; }
.yrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.seg button:disabled { opacity: .4; cursor: default; }
.checks label:has(input:disabled) { opacity: .45; cursor: default; }

/* 各物质溶解度 */
.stbl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.stbl th, .stbl td { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.stbl th { color: var(--muted); font-weight: 600; }
.stbl td:nth-child(2) { text-align: right; }
.stbl tr.on td { color: var(--accent); }
.stbl .sw { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* 练习 */
.qbar { display: flex; gap: 6px; }
.qbar select { flex: 1; }
.qbar #qNew { flex: none; padding: 6px 12px; }
#qText { margin: 10px 0 6px; font-size: 13px; line-height: 1.6; }
#qChoices { display: grid; gap: 5px; }
#qChoices button { font: inherit; font-size: 13px; text-align: left; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
#qChoices button:hover:not(:disabled) { border-color: var(--accent); }
#qChoices button:disabled { cursor: default; }
#qChoices button.right { border-color: #7ee081; color: #7ee081; }
#qChoices button.wrong { border-color: #ff7a59; color: #ff7a59; }
#qExplain { color: var(--text); opacity: .9; line-height: 1.6; }
#qScore { float: right; }