/* 説明の図（scripts/figures.mjs の SVG）の追加の決まり。charts.css の .dg のあとに読む。
   色は style.css・bubble.css・charts.css の変数だけを使う（暗い表示でも自動で切り替わる）。数字の色は書かない */

/* 文字の大きさ（viewBox 640幅。スマホでは約0.52倍に縮むので 22px 以上） */
.dg .d1 { font-size: 26px; font-weight: 700; }
.dg .d2 { font-size: 24px; }
.dg .d3 { font-size: 22px; }
.dg .dk { font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dg .db { font-weight: 700; }
.dg .dw { fill: var(--surface); }                       /* 色の上の白抜き */
.dg .lk { fill: var(--primary-ink); text-decoration: underline; }
.dg a:focus-visible .lk { outline: none; text-decoration-thickness: 3px; }

/* 線 */
.dg .tk { stroke-width: 3; }
.dg .tl { stroke-width: 4; }
.dg .tw { stroke-width: 7; }
.dg .sw { stroke-width: 2; }
.dg .nf { fill: none; }
.dg .lns { stroke: var(--line-strong); stroke-width: 1.5; }
.dg .lnw { stroke: var(--surface); stroke-width: 2; }      /* 色の帯の区切り */
.dg .lw { stroke: var(--surface); fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.dg .ah { fill: var(--ink); } .dg .ahm { fill: var(--muted); }
.dg .ah1 { fill: var(--c1); } .dg .ah2 { fill: var(--c2); } .dg .ah3 { fill: var(--c3); }

/* 塗り（淡い色は透明度で。下地が暗くても沈まない） */
.dg .fw { fill: var(--surface); }
.dg .fy { fill: var(--note); }                          /* 生成り・黄み */
/* 白い布・生成りの布（暗い表示でも明るいまま。白い服が黒く見えないように） */
.dg .fwh { fill: var(--surface); } .dg .fyh { fill: var(--note); }
@media (prefers-color-scheme: dark) { .dg .fwh { fill: var(--ink); } .dg .fyh { fill: var(--note-ink); } }
.dg .f1l { fill: var(--c1); fill-opacity: .2; }
.dg .f2l { fill: var(--c2); fill-opacity: .22; }
.dg .f3l { fill: var(--c3); fill-opacity: .22; }
/* 液性（リトマス紙の向き：bubble.css の --acid〜--alk） */
.dg .ph0 { fill: var(--acid); } .dg .ph1 { fill: var(--acid2); } .dg .ph2 { fill: var(--neu); } .dg .ph3 { fill: var(--alk2); } .dg .ph4 { fill: var(--alk); }
/* 界面活性剤の種類（成分の解説の札と同じ色） */
.dg .fia { fill: var(--ion-anion); } .dg .fin { fill: var(--ion-nonion); } .dg .fic { fill: var(--ion-cation); } .dg .fim { fill: var(--ion-amphoteric); }

/* 図の置き方。PCでは文字が大きくなりすぎないよう幅をおさえる */
.fig .dg { margin-top: 2px; }
@media (min-width: 720px) { .fig > .dg { max-width: 500px; } }

/* 表示の一部に色と下線（字の幅が端末でちがっても、文字の流れにそってつく） */
.dg .u1, .dg .u2, .dg .u3 { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.dg .u1 { fill: var(--primary-ink); } .dg .u2 { fill: var(--bad); } .dg .u3 { fill: var(--ok); }