/* Due dates on the assigned-work table: a quiet toggle in the row, and one
   shared dialog for editing. The dialog borrows .modal from the confirmations
   and is left-aligned because it is a form, not a warning. Corners, spacing and
   type come from the scales in tokens.css. */
.cls-date-toggle { min-height: 36px; padding: var(--sp-4) 0; background: transparent; border: 0; color: var(--fg-muted); font: 500 var(--fs-13)/1.5 var(--font-body); text-align: left; white-space: nowrap; cursor: pointer; }
.cls-date-toggle:hover { color: var(--c-accent-ink); }
.cls-date-toggle.is-past { color: var(--c-alert); }
.cls-date-toggle:focus-visible { outline: 2px solid var(--c-accent-ink); outline-offset: 2px; border-radius: var(--r-xs); }
/* A late-work choice other than closing at the due date, as a quiet second
   line inside the same button: two 13px lines at 1.3 still fit the 44px row,
   and the whole cell stays one target. The button's name says it for a screen
   reader (classes.js). The date keeps its past-due colour; this line does not. */
.cls-date-toggle[data-policy] { line-height: 1.3; }
.cls-date-toggle[data-policy]::after { content: attr(data-policy); display: block; color: var(--fg-muted); font-weight: 400; }
.cls-date-toggle[data-policy]:hover::after { color: inherit; }

.cls-date-dialog .modal-body { text-align: left; }
.cls-date-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.cls-date-head .modal-title { margin: 0; }
/* The info note opens below its icon, inside the dialog, same as on the class page. */
.cls-date-head .cls-info-content { text-align: left; }
/* The line naming the activity belongs to the title above it. */
.cls-date-for { margin: var(--sp-4) 0 var(--sp-8); }
.cls-date-label { display: block; margin: var(--sp-16) 0 var(--sp-8); color: var(--fg); font: 600 var(--fs-13)/1.5 var(--font-body); }
.cls-date-field { display: block; box-sizing: border-box; min-width: 0; width: 100%; min-height: 40px; padding: var(--sp-8) .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--field); color: var(--fg); font: 400 var(--fs-14)/1.5 var(--font-body); color-scheme: light; }
:root[data-theme="dark"] .cls-date-field { color-scheme: dark; }
.cls-date-field:focus, .cls-date-field:focus-visible { outline: none; border-color: var(--c-accent-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent-ink) 20%, transparent); }
/* After the due date: three choices, each a whole-row target like the consent
   basis, the chosen one in the accent. Disabled until there is a date. */
.cls-date-policy { margin: var(--sp-16) 0 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--sp-8); }
.cls-date-policy legend { margin: 0 0 var(--sp-8); padding: 0; }
.cls-date-option { display: flex; align-items: flex-start; gap: var(--sp-8); min-height: 44px; box-sizing: border-box; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--field); cursor: pointer; }
.cls-date-option:hover { border-color: var(--border-strong); }
.cls-date-option:has(input:checked) { border-color: var(--c-accent-ink); background: var(--accent-soft); }
.cls-date-option input { flex: none; width: 1.05rem; height: 1.05rem; margin: .125rem 0 0; accent-color: var(--action); }
.cls-date-option input:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-w) var(--ring); border-radius: 50%; }
.cls-date-option-words { display: grid; gap: 2px; min-width: 0; }
.cls-date-option-label { color: var(--fg); font: 500 var(--fs-14)/1.4 var(--font-body); }
.cls-date-option-detail { color: var(--fg-muted); font: 400 var(--fs-13)/1.4 var(--font-body); }
.cls-date-policy:disabled .cls-date-option { cursor: default; opacity: .6; }
.cls-date-policy:disabled .cls-date-option:hover { border-color: var(--border); }
.cls-date-policy-note { margin: 0; color: var(--fg-muted); font: 400 var(--fs-13)/1.5 var(--font-body); }
.cls-date-policy-note[hidden] { display: none; }
.cls-date-status { margin: var(--sp-8) 0 0; color: var(--fg-muted); font: 400 var(--fs-13)/1.5 var(--font-body); overflow-wrap: anywhere; }
.cls-date-status:empty { display: none; }
.cls-date-status.is-error { color: var(--c-alert); }
.cls-date-actions { margin-top: var(--sp-24); }
/* Three buttons share the row. With equal widths and the generic button's side
   padding, "Clear date" broke onto two lines; sized by their words, all three
   fit on one line down to a phone. */
.cls-date-actions .btn { flex: 1 1 auto; padding-inline: var(--sp-16); }
.cls-date-actions [hidden] { display: none; }
@media (max-width: 640px) {
  .cls-date-toggle, .cls-date-field { min-height: 44px; }
  .cls-date-field { font-size: var(--fs-16); }
  .cls-date-actions { flex-wrap: wrap; }
}