/* Family date picker + date/time fields (canonical: sassi/shared/datepicker.css; identical copy in each app's public_html/assets/).
   Uses the skeleton tokens: --sunk --r-input --txt --dim --hover --ac --ink --border --r-pill --acSoft --acText. */
.dtbox{border:1px solid var(--border);border-radius:var(--r-input);padding:.5rem .8rem .7rem;margin:0;min-width:0}
.dtbox legend{padding:0 .4rem;font-size:12px;color:var(--dim)}
.dtf{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.dtf-time{display:flex;align-items:center;gap:.15rem;direction:ltr}
.dtf select,.dtf-time.tmf select{width:auto;background-image:none;padding:.6rem .7rem;text-align:center;font-variant-numeric:tabular-nums} /* .dtf-time.tmf: time_fields() standing outside a .dtf block keeps no arrow either, at a specificity above the settings cards select rule (food 2026-09-16: the arrow sat across the digits) */
.dtf-time span,.dtf-time{font-family:inherit}
.dtp-btn{background:var(--sunk);border-radius:var(--r-input);padding:.6rem .8rem;display:inline-flex;align-items:center;gap:.5rem;color:var(--txt);font-size:14px}
.dtp-btn.empty{color:var(--dim)}
.dtp-btn i{color:var(--dim)}
.modal.dtp{width:min(92vw,320px);gap:.6rem}
.dtp-head{display:flex;align-items:center;gap:.4rem}
.dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dtp-dow span{font-size:11px;color:var(--dim);text-align:center;padding:.2rem 0}
.dtp-grid button{aspect-ratio:1;border-radius:50%;background:transparent;padding:0;font-size:13px}
.dtp-grid button:hover{background:var(--hover)}
.dtp-grid button.today{box-shadow:inset 0 0 0 1px var(--border)}
.dtp-grid button.sel{background:var(--ac);color:var(--ink);font-weight:600}
.dtp-grid button:disabled{opacity:.25;cursor:default;background:transparent}
.modal.dtp .chips{display:flex;flex-wrap:wrap;gap:.35rem}
.modal.dtp .chips button{font-size:12px;padding:.3rem .6rem;border-radius:var(--r-pill);background:var(--hover)}
.modal.dtp .chips button:hover{background:var(--acSoft);color:var(--acText)}