.nav-link__count {
  display: inline-grid;
  place-items: center;
  min-width: var(--nav-count);
  height: var(--nav-count);
  margin-left: auto;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-warning-soft);
  color: var(--color-warning-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.nav-link {
  position: relative;
}

.shell[data-collapsed] .shell__sidebar .nav-link__count {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  min-width: var(--dot-size);
  height: var(--dot-size);
  padding: 0;
  background: var(--color-warning);
  font-size: 0;
}

.kid-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-4)) 0 var(--space-6);
}

.kid-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: 0 var(--space-4) 0 var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  text-decoration: none;
}

.kid-tab:hover {
  background: var(--color-field-fill);
}

.kid-tab[aria-current="page"] {
  border-color: var(--color-sage-200);
  background: var(--color-sage-light);
  color: var(--color-sage-700);
}

.avatar--sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: var(--text-xs);
}

.switch-form {
  display: inline-flex;
}

.switch {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  width: var(--switch-width);
  height: var(--touch-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
}

.switch::before {
  content: "";
  position: absolute;
  inset: calc((var(--touch-target) - var(--switch-height)) / 2) 0;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background-color var(--duration-fast);
}

.switch[aria-checked="true"]::before {
  background: var(--color-sage-600);
}

.switch__thumb {
  position: relative;
  width: var(--switch-thumb);
  height: var(--switch-thumb);
  margin-left: var(--switch-inset);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-thumb);
  transition: transform var(--duration-fast);
}

.switch[aria-checked="true"] .switch__thumb {
  transform: translateX(calc(var(--switch-width) - var(--switch-thumb) - 2 * var(--switch-inset)));
}

.choices,
.days {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choices__grid {
  display: grid;
  gap: var(--space-2);
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}

.choice:hover {
  background: var(--color-field-fill);
}

.choice:has(:checked) {
  border-color: var(--color-sage);
  background: var(--color-sage-50);
}

.choice:has(:focus-visible),
.day:has(:focus-visible) {
  outline: var(--focus-width) solid var(--color-sage);
  outline-offset: var(--focus-offset);
}

.choice__input,
.day__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--choice-icon);
  height: var(--choice-icon);
  border-radius: var(--radius-sm);
  background: var(--color-field-fill);
  color: var(--color-ink-secondary);
}

.choice:has(:checked) .choice__icon {
  background: var(--color-surface);
  color: var(--color-sage-600);
}

.choice__text {
  display: grid;
  min-width: 0;
}

.choice__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.choice__hint {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.days__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

.day {
  position: relative;
  display: grid;
  border-radius: var(--radius-md);
}

.day__label {
  display: grid;
  place-items: center;
  min-height: var(--touch-target);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast);
}

.day__input:checked + .day__label {
  border-color: var(--color-sage-600);
  background: var(--color-sage-600);
  color: var(--color-surface);
}

.days .hint {
  margin-top: calc(-1 * var(--space-1));
}

.limit-builder:has([value="block"]:checked, [value="allow"]:checked) .limit-builder__time {
  display: none;
}

select.field__input {
  padding-right: var(--space-8);
}

.choices legend,
.days legend {
  padding: 0;
}

.kid-tab--text {
  padding-left: var(--space-4);
}

.chip--primary {
  border-color: var(--color-sage-600);
  background: var(--color-sage-600);
  color: var(--color-surface);
}

.chip--primary:hover {
  background: var(--color-sage-700);
}

.chip--sm {
  font-size: var(--text-xs);
}

.chip--sm strong {
  color: var(--color-ink);
}

.button--sm {
  min-height: var(--touch-target);
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.toggles {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.toggles legend {
  margin-bottom: var(--space-1);
  padding: 0;
}

.toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-target);
  border-top: var(--border-width) solid var(--color-border);
  cursor: pointer;
}

.toggle:first-of-type {
  border-top: 0;
}

.toggle__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.toggle__input {
  position: absolute;
  right: 0;
  width: var(--switch-width);
  height: var(--switch-height);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.toggle__track {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background-color var(--duration-fast);
}

.toggle__input:checked + .toggle__track {
  background: var(--color-sage-600);
}

.toggle__input:checked + .toggle__track .switch__thumb {
  transform: translateX(calc(var(--switch-width) - var(--switch-thumb) - 2 * var(--switch-inset)));
}

.toggle__input:focus-visible + .toggle__track {
  outline: var(--focus-width) solid var(--color-sage);
  outline-offset: var(--focus-offset);
}

.inline-add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.inline-add .field__input {
  flex: 1 1 var(--input-width-sm);
  min-width: 0;
}

.inline-add .button {
  flex: 1 0 auto;
  width: auto;
}

.search {
  position: relative;
  max-width: var(--form-width);
}

.search__icon {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  display: inline-grid;
  color: var(--color-ink-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.search__input {
  padding-left: calc(var(--space-4) * 2 + var(--space-3));
}

.filters {
  flex-wrap: nowrap;
  margin: 0 calc(-1 * var(--gutter-right)) 0 calc(-1 * var(--gutter-left));
  padding: var(--space-1) var(--gutter-right) var(--space-1) var(--gutter-left);
  overflow-x: auto;
  scrollbar-width: none;
}

@media (min-width: 60rem) {
  .filters {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

.chip--link {
  text-decoration: none;
  white-space: nowrap;
}

.chip--link[aria-current="page"] {
  border-color: var(--color-sage-200);
  background: var(--color-sage-light);
  color: var(--color-sage-700);
}