/* Settings: a grouped menu beside each settings page; on a phone, the Settings home page is the menu. */
.settings { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.settings__menu { position: sticky; top: calc(56px + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-1); }
.settings__menu ul { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: 1px; }
.settings__group { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); padding: 0 var(--space-3); margin: 0 0 var(--space-1); }
.settings__link { display: block; padding: 6px var(--space-3); border-radius: var(--radius); color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.settings__link:hover { background: var(--surface-muted); color: var(--text); }
.settings__link[aria-current="page"] { background: var(--surface-muted); color: var(--text); font-weight: 600; }

.settings__home { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: var(--space-6); }
.settings__home h2 { font-size: var(--text-sm); color: var(--text-secondary); }

.labour__holidays-title { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }
.holidays { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-1) var(--space-6); margin: 0; }
.holidays div { display: flex; gap: var(--space-3); font-size: var(--text-sm); }
.holidays dt { flex: 0 0 6.5rem; color: var(--text-secondary); }
.holidays dd { margin: 0; }

@media (max-width: 768px) {
  .settings { grid-template-columns: 1fr; }
  .settings__menu { display: none; }
}