.sync-status {
  --sync-color: #256c4f;
  --sync-bg: #eef8f1;
  --sync-border: #cce8d4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  max-width: 100%;
  border: 1px solid var(--sync-border);
  border-radius: 999px;
  background: var(--sync-bg);
  color: var(--sync-color);
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.sync-status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sync-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sync-color) 18%, transparent);
}

.sync-status-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.sync-status-label,
.sync-status-detail {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-status-detail {
  color: color-mix(in srgb, var(--sync-color) 72%, #21302b);
  font-size: 0.72rem;
  font-weight: 800;
  opacity: 0.82;
}

.sync-status[data-sync-compact="true"] .sync-status-detail {
  display: none;
}

.sync-status[data-sync-tone="saved"] {
  --sync-color: #246f4b;
  --sync-bg: #edf8f1;
  --sync-border: #cbead5;
}

.sync-status[data-sync-tone="syncing"] {
  --sync-color: #1b63a6;
  --sync-bg: #edf5ff;
  --sync-border: #c8def8;
}

.sync-status[data-sync-tone="stale"] {
  --sync-color: #996a12;
  --sync-bg: #fff7e6;
  --sync-border: #f1dcad;
}

.sync-status[data-sync-tone="offline"] {
  --sync-color: #6b6370;
  --sync-bg: #f5f3f7;
  --sync-border: #ddd7e3;
}

.sync-status[data-sync-tone="failed"] {
  --sync-color: #9d2727;
  --sync-bg: #fff0ef;
  --sync-border: #edc5c1;
}

.sync-status[data-sync-tone="local"],
.sync-status[data-sync-tone="signed-out"] {
  --sync-color: #586760;
  --sync-bg: #f4f7f5;
  --sync-border: #d9e2dd;
}

.top-utilities .sync-status,
.student-tools .sync-status,
.launchpad-actions .sync-status,
.site-account .sync-status {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 10px;
  border-color: rgba(255, 255, 255, 0.72);
  background: #ffffff;
  box-shadow: none;
}

.student-tools .progress-stack {
  min-width: min(320px, 100%);
}

@media (min-width: 1100px) {
  .topbar-inner {
    grid-template-columns: minmax(300px, 1fr) minmax(690px, auto);
  }

  .student-tools {
    grid-template-columns: minmax(300px, 1fr) auto auto auto auto;
  }
}

@media (max-width: 1099px) {
  .topbar-inner {
    grid-template-columns: 1fr;
  }

  .student-tools {
    grid-template-columns: minmax(280px, 1fr) auto auto auto auto;
  }
}

@media (max-width: 760px) {
  .sync-status {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 0.74rem;
  }

  .sync-status-detail {
    display: none;
  }

  .student-tools {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .student-tools .sync-status {
    grid-column: 1 / -1;
    justify-self: start;
  }
}