/* Shared status primitives: symmetric badges and single-layer state icons. */
.badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
}

/* Some course badges intentionally wrap; keep their text centred vertically. */
.badge[style*="white-space: normal"],
.stu-courses .badge {
  min-height: 24px;
  padding-block: 4px;
  line-height: 1.3;
}

.opt-body {
  align-items: center;
}

.opt-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  height: 22px;
  margin-block: 0;
  padding: 0 8px;
  line-height: 22px;
  text-align: center;
  vertical-align: middle;
}

body.site-flat main.container .review-option {
  align-items: center;
}

body.site-flat main.container .review-option .opt-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  line-height: 0;
}

body.site-flat main.container .review-option .opt-mark .ui-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
  transform: translateY(.5px);
}

/* Toast icons already draw their own circle; remove the second circular plate. */
.app-toast .app-toast-icon {
  background: transparent;
  border: 0;
}

/* Icon-only buttons get exactly one hit-area surface. */
.path-row-tools .btn > .ui-icon,
.app-toast-close > .ui-icon,
.app-notification-toggle > .ui-icon,
.sidebar-collapse > .ui-icon,
.nav-toggle > .ui-icon {
  background: transparent;
  border: 0;
  box-shadow: none;
}

@media(max-width:760px) {
  .badge { min-height: 24px; padding: 3px 8px; }
  .opt-body { gap: 6px 8px; }
  .opt-tag { min-height: 24px; height:24px; padding-inline: 8px; line-height:24px; }
}