/* Medical needs (medical.js): the Safety page, and the card a medical call shows on the
   Alerts dashboard, in the medical blue (--med, plans.css) so it reads with the call. */
.med-panel{max-width:960px}
.med-panel textarea,.med-panel input:not([type=checkbox]):not([type=file]),.med-panel select{width:100%;max-width:520px}
.med-allergy input{flex:1 1 200px;max-width:280px}.med-allergy select{width:auto!important}
.med-table td{vertical-align:top}
.med-table .chip{margin:0 2px 2px 0}
.med-dates{display:flex;gap:16px;flex-wrap:wrap}.med-dates>div{flex:1 1 220px}
.med-photo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.med-photo{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-2);border:1px solid var(--line-2)}
.med-dpia p{max-width:72ch}
.med-held{border:1px dashed var(--med);color:var(--med);padding:6px 10px;border-radius:var(--radius-2);font-size:14px}
.med-card{border:2px solid var(--med);background:var(--med-dim);border-radius:var(--radius-2);padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.med-person{display:flex;gap:12px;align-items:flex-start}
.med-person .med-photo{width:72px;height:72px;flex:none}
.med-name{font-weight:700;font-size:17px}
.med-action{font-weight:700;color:var(--fg-0);margin-top:2px}
.med-kits{font-size:14px;border-top:1px solid var(--med);padding-top:6px}
.db-call .med-card{background:var(--bg-1)}         /* solid, so it reads while a waiting call flashes */
.db-row:has(.med-card){flex-wrap:wrap}.db-row .med-slot:has(.med-card){flex:1 1 100%;order:9}
.med-panel textarea{font-family:var(--font-body);font-size:var(--text-base)}