/* Keep the shared checklist layout readable at narrow widths and in print. */
#my-checklist .gen-bar > * { max-width: 100%; }
#my-checklist .gen-bar input[type="date"] { color-scheme: light; }
#my-checklist .gen-sheet-head { background: #123640; }
#my-checklist .gen-sheet-head,
#my-checklist .gen-sheet-head strong,
#my-checklist .gen-sheet-head p,
#my-checklist .gen-sheet-head span { color: #f8fafb; }
#my-checklist .gen-foot { background: #f2f5f5; color: #314c59; }
#my-checklist .gen-item { cursor: default; }
#my-checklist .gen-item-copy { min-width: 0; }
#my-checklist .gen-item-head label { cursor: pointer; }
#my-checklist .gen-sheet-head strong,
#my-checklist .gen-badge { letter-spacing: 0; }
#my-checklist .gen-badge { white-space: normal; text-transform: none; }
#my-checklist .gen-item-date { display: block; font-weight: 600; margin: 4px 0 8px; }
#my-checklist .gen-item input[type="checkbox"]:focus-visible { outline: 3px solid #176576; outline-offset: 3px; }
#my-checklist .gen-empty { color: #314c59; }
@media (max-width: 420px) {
  #my-checklist .gen-item { padding: 16px 12px; gap: 10px; }
  #my-checklist .gen-sheet-head,
  #my-checklist .gen-foot { padding: 16px 12px; }
}
@media print {
  #my-checklist .gen-sheet,
  #my-checklist .gen-sheet *,
  #my-checklist .gen-sheet-head strong,
  #my-checklist .gen-sheet-head p,
  #my-checklist .gen-sheet-head span { color: #172a35; background: #fff; }
  #my-checklist .gen-item-copy { overflow-wrap: anywhere; }
  #my-checklist .gen-item a::after { content: ' (' attr(href) ')'; font-size: 10px; font-weight: 400; }
}