/* Shared overflow affordance for public horizontal navigation rails. */
.prm-hscroll {
  --prm-hscroll-control-space: 48px;
  position: relative;
  display: grid;
  grid-template-columns: 0 minmax(0,1fr) 0;
  align-items: center;
  isolation: isolate;
  max-width: 100%;
  min-width: 0;
  transition: grid-template-columns .24s cubic-bezier(.2,.8,.2,1);
}

.prm-hscroll.can-scroll-left {
  grid-template-columns: var(--prm-hscroll-control-space) minmax(0,1fr) 0;
}

.prm-hscroll.can-scroll-right {
  grid-template-columns: 0 minmax(0,1fr) var(--prm-hscroll-control-space);
}

.prm-hscroll.can-scroll-left.can-scroll-right {
  grid-template-columns: var(--prm-hscroll-control-space) minmax(0,1fr) var(--prm-hscroll-control-space);
}

.prm-hscroll--wrapped {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.prm-hscroll.is-sticky {
  position: sticky;
  top: var(--prm-hscroll-top,70px);
  z-index: var(--prm-hscroll-z,90);
}

.prm-hscroll--wrapped > .prm-hscroll__viewport {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.prm-hscroll__viewport {
  grid-row: 1;
  grid-column: 2;
  min-width: 0;
  scroll-behavior: smooth;
  scroll-snap-type: none !important;
  scroll-padding-inline: 12px;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.prm-hscroll.prm-hscroll--profile {
  display: grid;
  overflow: hidden !important;
}

.prm-hscroll.prm-hscroll--school {
  position: sticky;
  top: 84px;
  z-index: 90;
  display: grid;
  box-sizing: border-box;
  overflow: hidden !important;
  margin-right: auto;
  margin-left: auto;
  transform: none !important;
}

.prm-hscroll.prm-hscroll--school::after {
  display: none !important;
}

.prm-hscroll--profile > .prm-nav-track {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.prm-hscroll--school > .prm-school__jump-track {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.prm-hscroll--profile > .prm-nav-track::-webkit-scrollbar,
.prm-hscroll__viewport::-webkit-scrollbar {
  display: none;
}

.prm-hscroll__control-slot {
  z-index: 2;
  display: flex;
  min-width: 0;
  height: 100%;
  grid-row: 1;
  align-items: center;
  overflow: hidden;
}

.prm-hscroll__control-slot--left {
  grid-column: 1;
  justify-content: flex-start;
}

.prm-hscroll__control-slot--right {
  grid-column: 3;
  justify-content: flex-end;
}

.prm-hscroll__control {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  place-items: center;
  padding: 0;
  border: 1px solid #c9ddd0;
  border-radius: 13px;
  background: rgba(255,255,252,.97);
  color: #07552d;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(5,55,27,.13);
  transform: scale(.86);
  transition: opacity .2s ease,visibility .2s ease,transform .2s ease,background-color .18s ease,border-color .18s ease;
}

.prm-hscroll__control svg { width: 18px; height: 18px; }

.prm-hscroll.can-scroll-left .prm-hscroll__control--left,
.prm-hscroll.can-scroll-right .prm-hscroll__control--right {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.prm-hscroll__control:hover {
  border-color: #8fbaa0;
  background: #eff8f1;
}

.prm-hscroll__control:active { transform: scale(.95) !important; }
.prm-hscroll__control:focus-visible { outline: 3px solid rgba(22,133,72,.25); outline-offset: 2px; }
.prm-hscroll__control[disabled] { cursor: default; }

@media (max-width:700px) {
  .prm-hscroll { --prm-hscroll-control-space: 48px; }
  .prm-hscroll--wrapped { width: 100%; min-width: 0; overflow: hidden; }
  .prm-hscroll__control { width: 44px; height: 44px; border-radius: 12px; }
}

@media (max-width:760px) {
  .prm-hscroll.prm-hscroll--school { top: 70px; }
}

@media (prefers-reduced-motion:reduce) {
  .prm-hscroll { transition-duration: .01ms !important; }
  .prm-hscroll__viewport { scroll-behavior: auto; }
  .prm-hscroll__control { transition-duration: .01ms !important; }
}
