/**
 * Golden shared L2 — tab rail chrome (frost icons)
 * SOT: hub.shared.tab_rail.v1.json
 * Used by hub-next + promoted Client CC. Change golden → promote → clone.
 */
:root {
  --hub-rail-width: 56px;
}

.hub-next-rail-mounted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 0;
}

.hub-next-rail-mounted--frost {
  gap: 12px;
  padding-top: 8px;
}

.hub-frost-tab {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(0, 0, 0, 0.12) 100%
  );
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.hub-frost-tab:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(56, 189, 248, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hub-frost-tab.is-active {
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(
    160deg,
    rgba(56, 189, 248, 0.22) 0%,
    rgba(56, 189, 248, 0.08) 50%,
    rgba(0, 0, 0, 0.15) 100%
  );
  box-shadow:
    0 4px 16px rgba(56, 189, 248, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(56, 189, 248, 0.3);
}

.hub-frost-tab.is-live:not(.is-grey) {
  color: #00e58f;
  border-color: rgba(0, 229, 143, 0.35);
}

.hub-frost-tab.is-live.is-active {
  color: #86efac;
  border-color: rgba(0, 229, 143, 0.55);
  background: linear-gradient(
    160deg,
    rgba(0, 229, 143, 0.2) 0%,
    rgba(0, 229, 143, 0.06) 55%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

.hub-frost-tab.is-grey,
.hub-frost-tab:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  color: #64748b;
  filter: grayscale(0.4);
}

.hub-frost-tab-icon {
  display: grid;
  place-items: center;
  line-height: 0;
}

.hub-frost-tab-icon svg {
  display: block;
}

.hub-next-rail-note {
  margin: 8px 0 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  text-align: center;
}