/* D-progress-dial-test (TEST ONLY). One neutral brand colour, 5 equal segments, no needle / numbers / red-amber-green. */
.pd{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
.pd-dial{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:8px 0}
.pd-seg{display:block;height:14px;border-radius:7px;background:#64748B;border:1px solid #64748B} /* D-dials-color (Zach 10:01 PM "Both dials this color"): home gauge slate */
.pd-seg[data-on]{background:#60A5FA;border-color:#60A5FA} /* home gauge blue; no red: Compliance, no red/green for progress */
.pd-sec{border:1px solid #D5D9E0;border-radius:10px;margin:12px 0;padding:8px 12px;min-width:0}
.pd-sec legend{font-weight:700;padding:0 4px}
.pd-qt{margin:8px 0 4px}
.pd-opts{display:flex;flex-wrap:wrap;gap:8px}
.pd-opt{display:flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;border:1px solid #8A93A3;border-radius:10px;cursor:pointer;box-sizing:border-box}
.pd-opt input{width:20px;height:20px;margin:0}
@media print{#actionPlan{break-before:page;page-break-before:always;box-shadow:none}#actionPlan .pd-dl{display:none}}
/* Phone Check / UX (Nov 2 4:17 PM): .report-page .btn sets 44px; these two win by specificity (no other .btn touched): 48px at all widths,
   one line; at 300px and below the buttons go full width (same wording). */
.report-page #actionPlan .btn.pd-dl,.report-page #actionPlan .btn.pd-del{min-height:48px;white-space:nowrap;max-width:100%;box-sizing:border-box}
@media (max-width:300px){.report-page #actionPlan .btn.pd-dl,.report-page #actionPlan .btn.pd-del{display:flex;width:100%;padding:10px 8px}}
@media print{.report-page #actionPlan .pd-opt,.report-page #actionPlan label.pd-opt{display:flex!important;align-items:center;gap:8px}.report-page #actionPlan .pd-opt input{margin:0}} /* UX: 8px radio-to-label in print */
/* Phone Check (Nov 2 5:07 PM): .card label{display:block} (styles.css) beat .pd-opt on screen, so gap:6px never applied; same fix as print. */
.report-page #actionPlan label.pd-opt{display:flex;align-items:center;gap:8px;min-height:48px;box-sizing:border-box;cursor:pointer}.report-page #actionPlan label.pd-opt input{margin:0}
/* WebKit 280px: comfortable side padding on the full-width buttons; still one line, 48px. */
@media (max-width:300px){.report-page #actionPlan .btn.pd-dl,.report-page #actionPlan .btn.pd-del{padding:10px 12px;font-size:13px}}
@media print{.report-page #actionPlan label.pd-opt{gap:8px}} /* keeps the 8px print gap after the screen fix above */
.pd-home{max-width:1100px;margin:16px auto;padding:0 16px;box-sizing:border-box}.pd-home .pd{background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(23,41,70,.08)}.pd-home .btn.pd-dl{min-height:48px}
.pd-home .pd-opt{flex-direction:row;align-items:center}.pd-home .pd-opt input{flex:0 0 20px;width:20px;height:20px;margin:0;appearance:auto;-webkit-appearance:radio}

/* D-plan-collapse-test-20261103: collapsed by default; heading row + chevron opens it. Hidden in print unless opened. */
#actionPlan .pd-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;list-style:none}
#actionPlan .pd-sum::-webkit-details-marker{display:none}
#actionPlan .pd-sum h2{margin:0}
#actionPlan .pd-chev{flex:none;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:6px;transition:transform .15s}
#actionPlan details[open]>.pd-sum .pd-chev{transform:rotate(-135deg)}
#actionPlan .pd-sum:focus-visible{outline:2px solid #2563EB;outline-offset:2px;border-radius:6px}
@media print{#actionPlan:not(:has(details[open])),.pd-wrap:not(:has(details[open])){display:none!important}}
#actionPlan.pd:not(:has(details[open])){padding-top:6px;padding-bottom:6px;min-height:0}
/* D-plan-collapse-test-20261103: radio circles sit inline with their text inside each answer box (home + report, 390px) */
#actionPlan label.pd-opt{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:48px;padding:0 12px;box-sizing:border-box;position:relative}
#actionPlan label.pd-opt input[type=radio]{position:static;flex:none;width:20px;height:20px;margin:0;transform:none;appearance:auto;-webkit-appearance:radio}
#actionPlan label.pd-opt span{flex:1 1 auto;min-width:0}