/* the richer tooth chart (charts.js) and the perio chart's graph, trend, diagnosis line and danger marks (periodx.js) */
.legend i.cl-sw-prog{background:repeating-linear-gradient(180deg,#ff9500 0 2.4px,#ffe7c2 2.4px 5px);border:1.5px dotted #b45f00}
.legend i.cl-sw-car{background:radial-gradient(circle,#7a4a12 1px,#f1e2cf 1.2px) 0 0/4px 4px;border:1.5px solid #7a4a12}

/* the Add panel: what's seen on the tooth, prognosis */
.fd-box{display:flex;flex-direction:column;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid var(--sep2)}
.fd-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fd-lbl{font-size:var(--fs-11);font-weight:600;color:var(--ink3);letter-spacing:.02em;min-width:66px;text-transform:uppercase}
.fd-chip{height:26px;padding:0 10px;border-radius:13px;font-size:var(--fs-12);font-weight:500;background:#f2f2f4;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fd-chip:hover{background:#e9e9ec;color:var(--ink)}
.fd-chip[aria-pressed="true"]{background:#3a3a3c;color:#fff}
.fd-chip.fd-go{background:#0b5cc5;color:#fff}
.fd-pchip i{width:8px;height:8px;border-radius:50%;background:var(--pc);flex:none}
.fd-pchip[aria-pressed="true"]{background:var(--pc);color:#fff}.fd-pchip[aria-pressed="true"] i{background:#fff}
.fd-more{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-radius:10px;background:#f8f8fa;border:1px solid var(--sep2)}
.fd-more .sub3 b{color:var(--ink)}
.fd-list{display:flex;flex-direction:column;gap:2px}
.fd-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:var(--fs-12_5);border-bottom:1px solid var(--sep2)}
.fd-item:last-child{border-bottom:0}.fd-item>span:nth-child(2){flex:1;min-width:0}
.fd-item b{font-weight:600}
.fd-ends{display:flex;gap:4px;align-items:center;flex:none}.fd-ends .mini-btn{height:24px;padding:0 8px;font-size:var(--fs-11_5)}
.fd-dot{width:9px;height:9px;border-radius:3px;flex:none;background:#8a7a66}
.fd-k-caries,.fd-k-secondary{background:radial-gradient(circle,#7a4a12 1px,#f1e2cf 1.2px) 0 0/4px 4px;border:1.2px solid #7a4a12}
.fd-k-fracture,.fd-k-crack{background:#5b3a29}.fd-k-abscess{background:#d64541}.fd-k-watch{background:#e8a33d;border-radius:50%}.fd-k-mobile{background:#5b3a29;border-radius:50%}
.fd-mats button{font-size:var(--fs-12)}

/* under the chart */
.fd-sum{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--sep2)}
.fd-schip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:8px;background:#faf6f0;border:1px solid #eadfcd;color:#4a3524;font-size:var(--fs-12)}
.fd-schip:hover{background:#f4ece0}.fd-schip b{font-variant-numeric:tabular-nums}
.fd-sp{font-size:var(--fs-11);font-weight:600;color:var(--pc);padding-inline-start:4px;border-inline-start:1px solid #eadfcd}

/* in progress */
.ip-tag{display:inline-block;font-size:var(--fs-11);font-weight:600;background:#fff1dc;color:#8a4a00;border:1px dotted #c96f00;border-radius:999px;padding:0 7px;margin-inline-start:4px;white-space:nowrap}
.ip-line{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px}.ip-line .ip-tag{margin-inline-start:0}
.ip-steps{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.ip-steps .fd-chip{height:24px;font-size:var(--fs-11_5)}
.mini-btn.ip-go{background:#fff1dc;color:#8a4a00}.mini-btn.ip-go.ip-quiet{background:#f2f2f4;color:var(--ink2)}
.sdot.ip-dot{background:repeating-linear-gradient(180deg,#ff9500 0 2px,#ffe7c2 2px 4px)!important}

/* perio: danger marks on the chart */
.pc.danger{outline:2px solid #b3261e;outline-offset:-2px}
.pfu.danger,.pmo.danger{background:#fde8e7;color:#b3261e;font-weight:700}
.pc.gm.danger{color:#b3261e;font-weight:700}

/* perio: diagnosis line */
.pdx{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:#f6f8fb;border:1px solid #e3e9f2}
.pdx-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pdx-h .pdx-k{font-size:var(--fs-11);font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.02em}
.pdx-h b{font-size:var(--fs-14_5);font-weight:600}
.pdx-sug{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-11);font-weight:600;color:#1d4fa8;background:#e6eefc;border-radius:999px;padding:2px 8px}
.pdx-ok{font-size:var(--fs-11);font-weight:600;color:#1f7a45;background:#e7f6ec;border-radius:999px;padding:2px 8px}
.pdx-why{margin:0;padding-inline-start:18px;color:var(--ink2);font-size:var(--fs-12_5);line-height:1.5}
.pdx-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pdx-pick{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px dashed #d5deeb}
.pdx-pick .fd-row .fd-lbl{min-width:76px}

/* perio: the graph (gum line and pockets) and the trend */
.pgraph{display:flex;flex-direction:column;gap:2px;overflow-x:auto}
.pgraph svg{display:block;min-width:760px}
.pgraph-leg{display:flex;flex-wrap:wrap;gap:14px;font-size:var(--fs-11_5);color:var(--ink3);align-items:center}
.pgraph-leg i{display:inline-block;width:14px;height:8px;border-radius:2px;margin-inline-end:5px;vertical-align:0}
.ptrend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 14px;border-bottom:1px solid var(--sep)}
.ptrend>div{min-width:0}.ptrend .ptr-k{font-size:var(--fs-11);color:var(--ink3);font-weight:600}.ptrend .ptr-v{font-size:var(--fs-17);font-weight:600;font-variant-numeric:tabular-nums}
.ptrend svg{display:block;width:100%;height:38px}
.pview{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pexrow .pdxw{grid-column:1/-1;font-size:var(--fs-12);color:var(--ink2);margin-top:-4px}
@media (max-width:760px){.ptrend{grid-template-columns:1fr 1fr}.fd-lbl{min-width:0;width:100%}}
.pdx-dg{display:flex;flex-direction:column;gap:10px;padding:12px 14px;margin-bottom:10px}
.pdx-dgrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.pdx-dgrow input{width:100%}
@media (max-width:760px){.pdx-dgrow{grid-template-columns:1fr 1fr}}
.pgraph svg{max-width:1000px;margin:0 auto}
.pview .seg.sm{min-width:200px;flex:none}.pview .seg.sm button{padding:4px 14px}
/* chairside on a tablet: fingers, not a mouse */
@media (pointer: coarse){.fd-chip{height:34px;padding:0 12px;font-size:var(--fs-13)}.fd-ends .mini-btn{height:32px}.ip-steps .fd-chip{height:32px}.rcw-g .nf-chip.sm{min-height:32px}}