.preferences-modal { width: min(560px, calc(100% - 28px)); }
.preferences-body { display: grid; gap: 18px; }
.preferences-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.preferences-identity-note { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.preferences-preview { padding: 14px 16px; display: grid; gap: 4px; border: 1px solid #cde2d5; border-radius: 10px; background: var(--primary-soft); color: var(--primary-strong); }
.preferences-preview > span { font-size: 12px; }
.preferences-preview > strong { font-size: 22px; overflow-wrap: anywhere; }
.preferences-feedback { margin: 0; color: var(--danger); font-size: 13px; }
.preferences-feedback:empty { display: none; }
.preferences-modal footer [data-preferences-reset] { margin-right: auto; }
.profile-popover #preferences-button { margin-top: 10px; }
/* Screen-only sizing keeps all official print templates unchanged. */
@media screen {
  html[data-hris-text-size="large"] #app-shell,
  html[data-hris-text-size="large"] .modal { font-size: 16px; }
  html[data-hris-text-size="large"] :is(#app-shell, .modal) :is(p, li, label, button, input, select, textarea, td, th, .nav-label, .user-copy strong, .profile-popover strong, .field-helper, .field > span) { font-size: 16px !important; line-height: 1.5; }
  html[data-hris-text-size="large"] :is(#app-shell, .modal) small { font-size: 13px !important; line-height: 1.5; }
  html[data-hris-text-size="large"] .global-search input { min-width: 0; }
  html[data-hris-text-size="large"] .user-copy { min-width: 0; }
  html[data-hris-text-size="large"] .user-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
  html[data-hris-text-size="large"] .preferences-modal .dialog-body { max-height: 64vh; }
}
@media (max-width: 500px) {
  .preferences-options { grid-template-columns: 1fr; }
  .preferences-modal .dialog-shell > header { padding: 16px; }
  .preferences-modal .dialog-body { padding: 16px; }
  .preferences-modal .dialog-shell > footer { flex-wrap: wrap; }
  .preferences-modal footer [data-preferences-reset] { flex-basis: 100%; margin-right: 0; }
}